/* Schriften aus dem eigenen Haus laden, nicht bei Google.
   GRUND (14.09.2026, Rechts-Durchgang): Hier stand bis heute
   `@import url('https://fonts.googleapis.com/css2?...')`. Beim Aufruf des Dashboards ging damit
   die IP-Adresse jedes Kunden ungefragt an Google — genau der Fall, für den das LG München I am
   20.01.2022 (3 O 17493/20) 100 € Schadensersatz zugesprochen hat. Eine Einwilligung dafür gab
   es nicht, und sie wäre auch unnötig gewesen: Dieselben Schriften (Outfit, Plus Jakarta Sans)
   liegen seit dem 11.08.2026 vollständig unter assets/fonts/ und werden von der Startseite über
   assets/style.css längst von dort geladen. Beim Dashboard war der alte Aufruf schlicht
   stehengeblieben — die Seite lud die Schriften also doppelt, einmal lokal und einmal bei Google.
   Der Pfad ist relativ zu dieser Datei (/app/) und zeigt eine Ebene höher nach /assets/. */
@import url('../assets/fonts/fonts.css');

/* Das hidden-Attribut muss staerker sein als jede display-Regel.
   FALLE (12.08.2026): Ein Element mit `hidden` UND `style="display:flex"` bleibt
   sichtbar - das Inline-display gewinnt. Der Pausiert-Hinweis im Dashboard blieb
   deshalb stehen, obwohl die Suche laengst wieder lief. Derselbe Fehler war zuvor
   schon auf der Website aufgetreten (Web 11). Diese eine Regel verhindert ihn
   ein fuer alle Mal - !important schlaegt auch Inline-Styles. */
[hidden] { display: none !important; }

:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #0f1525;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(0,212,255,0.3);
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  /* 14.09.2026, Kontrast nachgerechnet (WCAG-Formel, relative Luminanz):
     #64748b auf dem Seitengrund #0a0e1a ergibt 4,05:1 — unter den 4,5:1, die für normalen Text
     gefordert sind. Betroffen waren Hinweistexte, Zeitangaben und Feldbeschreibungen, also
     genau die Stellen, an denen Erklärungen stehen. #8b9bb0 kommt auf 6,80:1 und bleibt optisch
     zurückhaltend genug, um sich weiter vom Haupttext abzusetzen. */
  --text-muted: #8b9bb0;
  --accent-cyan: #00d4ff;
  --accent-green: #22c55e;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --accent-purple: #a78bfa;
  --neon-glow: 0 0 20px rgba(0,212,255,0.15);
  --card-shadow: 0 8px 32px rgba(0,0,0,0.4);
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar-w: 240px;
  --font: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

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

html, body {
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
}

/* ── PARTICLES BACKGROUND ── */
#particles-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(0,212,255,0.04) 0%, transparent 60%),
              radial-gradient(ellipse 60% 80% at 80% 80%, rgba(34,197,94,0.03) 0%, transparent 60%),
              radial-gradient(ellipse 100% 100% at 50% 50%, rgba(167,139,250,0.02) 0%, transparent 70%);
}

@keyframes particleFloat {
  0%,100% { transform: translateY(0) translateX(0); opacity: 0.3; }
  33% { transform: translateY(-20px) translateX(10px); opacity: 0.6; }
  66% { transform: translateY(10px) translateX(-15px); opacity: 0.4; }
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-cyan);
  animation: particleFloat linear infinite;
  pointer-events: none;
}

/* ── LAYOUT ── */
#app { display: flex; height: 100vh; position: relative; z-index: 1; }

/* ── SIDEBAR ── */
#sidebar {
  width: var(--sidebar-w);
  background: rgba(15,21,37,0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  flex-shrink: 0;
  z-index: 100;
}

.sidebar-logo {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.sidebar-logo .logo-title {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}
.sidebar-logo .logo-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  user-select: none;
}
.nav-item:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(0,212,255,0.1) 0%, transparent 100%);
  color: var(--accent-cyan);
  border-right: 2px solid var(--accent-cyan);
}
.nav-item .nav-icon { font-size: 16px; width: 20px; text-align: center; }
/* Der Eintrag „Zur Website" ist ein echtes <a>. Ohne diese beiden Zeilen steht er blau
   und unterstrichen zwischen den anderen — er soll aussehen wie sie, nur eben führen. */
.nav-item-link { text-decoration: none; color: var(--text-secondary); }
.nav-item-link:hover { text-decoration: none; }
.nav-badge {
  margin-left: auto;
  background: var(--accent-cyan);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}
.scanner-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.status-dot.active { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); animation: pulse 2s infinite; }
.status-dot.error { background: var(--accent-red); }
.status-dot.paused { background: var(--accent-amber); }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── MAIN CONTENT ── */
#main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  scroll-behavior: smooth;
}

.page { display: none; animation: fadeIn 0.2s ease; }
.page.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-title {
  font-family: 'Plus Jakarta Sans', var(--font);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.page-subtitle { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }

/* ── CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(10px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: var(--border-hover); box-shadow: var(--neon-glow); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
}
.stat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--card-shadow); }
.stat-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.stat-icon.cyan { background: rgba(0,212,255,0.15); }
.stat-icon.green { background: rgba(34,197,94,0.15); }
.stat-icon.amber { background: rgba(245,158,11,0.15); }
.stat-icon.purple { background: rgba(167,139,250,0.15); }
.stat-info .stat-label { font-size: 12px; color: var(--text-muted); }
.stat-info .stat-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-info .stat-value.cyan { color: var(--accent-cyan); }
.stat-info .stat-value.green { color: var(--accent-green); }
.stat-info .stat-value.amber { color: var(--accent-amber); }
.stat-info .stat-value.purple { color: var(--accent-purple); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-cyan);
  color: #000;
}
.btn-primary:hover { background: #33dcff; box-shadow: 0 0 16px rgba(0,212,255,0.4); }
.btn-secondary {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
.btn-secondary:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.btn-danger {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
  color: var(--accent-red);
}
.btn-danger:hover { background: rgba(239,68,68,0.2); }
.btn-green {
  background: var(--accent-green);
  color: #000;
}
.btn-green:hover { filter: brightness(1.1); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-icon { padding: 7px; border-radius: 8px; }

/* ── OFFER CARDS ── */
.offers-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.view-switcher {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.view-btn {
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  transition: all 0.15s;
  border: none;
  background: none;
}
.view-btn.active { background: var(--accent-cyan); color: #000; }

.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.offers-grid.view-medium { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.offers-grid.view-list { grid-template-columns: 1fr; }
.offers-grid.view-grouped { grid-template-columns: 1fr; }

.offer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.offer-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--card-shadow); }
.offer-card.selected { border-color: var(--accent-cyan); background: rgba(0,212,255,0.05); }

.offer-img {
  width: 100%; height: 160px;
  object-fit: cover;
  background: var(--bg-secondary);
}
.offer-img-placeholder {
  width: 100%; height: 160px;
  background: linear-gradient(135deg, var(--bg-secondary), rgba(0,212,255,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text-muted);
}

.offer-body { padding: 12px; }
.offer-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.offer-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-cyan);
  font-variant-numeric: tabular-nums;
}
.offer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.offer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}
.badge-scam-low { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.badge-scam-mid { background: rgba(245,158,11,0.15); color: var(--accent-amber); }
.badge-scam-high { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.badge-deal { background: rgba(0,212,255,0.1); color: var(--accent-cyan); }
.badge-resell { background: rgba(167,139,250,0.1); color: var(--accent-purple); }
.badge-attr { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.badge-seasonal-rise { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.badge-seasonal-drop { background: rgba(245,158,11,0.12); color: var(--accent-amber); }

.offer-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.offer-card:hover .offer-actions { opacity: 1; }
.offer-action-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(15,21,37,0.85);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}
.offer-action-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: #0f1525;
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.2s;
}
.modal-overlay.open .modal { transform: scale(1); }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.modal-close:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* ── FORMS ── */
.form-section { margin-bottom: 28px; }
.form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }

/* Die Aufzählung muss JEDE Eingabeart nennen, die vorkommt.
   Was hier fehlt, zeichnet der Browser in seiner Vorgabe: weißer Kasten, eckige Ecken,
   schwarze Schrift — mitten in einer dunklen Oberfläche. Genau das war bis zum 22.09.2026
   bei `search`, `date`, `time`, `tel` und den Zahlenfeldern mit Einheit der Fall und fiel
   dem Betreiber auf der Produktseite auf („Suchhintergrund ist weiß … so kantig").
   Kommt eine neue Art dazu, gehört sie hier hinein. */
input[type="text"], input[type="number"], input[type="password"],
input[type="url"], input[type="email"], input[type="search"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="tel"], input:not([type]),
select, textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  transition: border-color 0.15s;
  width: 100%;
  outline: none;
  /* Ohne das behält Safari/Chrome bei `search` die eigene Pillenform samt Innenschatten. */
  -webkit-appearance: none;
  appearance: none;
}
/* Das Kreuzchen im Suchfeld ist sonst ein schwarzes Symbol auf dunklem Grund. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px; width: 14px;
  background: var(--text-muted);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat;
  cursor: pointer;
}
/* Ebenso der Kalenderknopf im Datumsfeld. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.1);
}

/* Produktkarten sind anklickbar — das muss man ihnen ansehen, bevor man klickt. */
.kat-karte { transition: border-color 0.15s, transform 0.15s; }
.kat-karte:hover { border-color: var(--accent-cyan); transform: translateY(-2px); }
.kat-karte:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
select { appearance: none; cursor: pointer; }
/* Die Schriftfarbe MUSS hier mit stehen.
   Bis zum 22.09.2026 war nur der Hintergrund gesetzt. Die Schriftfarbe holte sich Chrome
   unter Windows daraufhin aus den Systemfarben — dunkles Grau auf #0f1525. Die aufgeklappte
   Liste war damit praktisch leer, und man sah einen Eintrag erst, wenn die Maus darüberfuhr
   und die Systemhervorhebung ihn übermalte. Gemeldet vom Betreiber an den Status-Knöpfen
   der Buchhaltung („die Schrift, wenn man drauf geht, sieht man es erst"). */
select option { background: #0f1525; color: #e6edf7; }
textarea { resize: vertical; min-height: 80px; }

.range-group { display: flex; flex-direction: column; gap: 6px; }
.range-header { display: flex; justify-content: space-between; align-items: center; }
.range-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-cyan);
  font-variant-numeric: tabular-nums;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: background 0.1s;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 8px rgba(0,212,255,0.4), 0 0 0 3px rgba(0,212,255,0.1);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(0,212,255,0.6), 0 0 0 5px rgba(0,212,255,0.15);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 8px rgba(0,212,255,0.4);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-info .toggle-label { font-size: 13.5px; font-weight: 500; }
.toggle-info .toggle-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.toggle {
  position: relative;
  width: 40px; height: 22px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 99px;
  transition: all 0.2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: all 0.2s;
}
.toggle input:checked + .toggle-slider { background: rgba(0,212,255,0.2); border-color: var(--accent-cyan); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--accent-cyan); }

.segmented-control {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.segmented-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  text-align: center;
}
.segmented-btn.active { background: var(--accent-cyan); color: #000; }

.tag-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  min-height: 42px;
  cursor: text;
}
.tag-input-container:focus-within { border-color: var(--accent-cyan); }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,212,255,0.12);
  color: var(--accent-cyan);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
}
.tag-chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: 12px; padding: 0; line-height: 1; opacity: 0.7; }
.tag-chip button:hover { opacity: 1; }
.tag-input-field { flex: 1; min-width: 80px; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; font-family: var(--font); }

/* ── ACCOUNTING TABLE ── */
.accounting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.accounting-table th {
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  cursor: pointer;
}
.accounting-table th:hover { color: var(--text-primary); }
.accounting-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.accounting-table tr:hover td { background: rgba(255,255,255,0.025); }

/* ── Die Aktionsspalte bleibt stehen (22.09.2026) ──────────────────────────
   Die Tabelle hat sechzehn Spalten und scrollt auf jedem normalen Bildschirm seitlich.
   Die Knöpfe „Beleg" und „Löschen" standen ganz hinten — man musste also erst quer
   durch die Tabelle schieben, um an sie heranzukommen. Jetzt stehen sie vorn und
   bleiben beim Scrollen an Ort und Stelle. */
.accounting-table .acc-haft {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Undurchsichtig, sonst scheinen die Spalten darunter durch. Der Farbwert entspricht
     der Kartenfläche; eine halbtransparente Farbe sähe hier schmutzig aus. */
  background: #121826;
  padding-left: 8px;
  padding-right: 8px;
  box-shadow: 1px 0 0 var(--border);
}
.accounting-table th.acc-haft { z-index: 3; background: #171d2c; cursor: default; }
.accounting-table tr:hover td.acc-haft { background: #171d2c; }
.accounting-table .acc-haft .btn-icon { padding: 3px 5px; }

/* Zahlenspalten brauchen keine Breite für lange Überschriften — die Werte sind kurz.
   Ohne das zogen „Versand/Anfahrt" und „Gebühren" die Tabelle unnötig auseinander. */
.accounting-table td[data-field="buy_price"],
.accounting-table td[data-field="sell_price"],
.accounting-table td[data-field="shipping_cost"],
.accounting-table td[data-field="platform_fee"] { max-width: 72px; }
.accounting-table th { white-space: nowrap; }

@media (max-width: 768px) {
  /* In der Kartenansicht gibt es kein seitliches Scrollen — dort wäre ein klebendes
     Feld nur im Weg. */
  .accounting-table .acc-haft { position: static; box-shadow: none; }
}
.accounting-table td[contenteditable="true"]:focus {
  background: rgba(0,212,255,0.05);
  outline: 1px solid var(--accent-cyan);
  border-radius: 4px;
}

.status-badge {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  /* Die allgemeine Regel für Eingabefelder gibt JEDEM `select` ein `width: 100%`. In einer
     Tabellenzelle heißt das: so breit wie die Spalte zulässt — die Status-Spalte wurde
     dadurch aufgezogen und alle Spalten dahinter rutschten nach rechts aus dem Bild.
     Deshalb hier eine eigene Breite (22.09.2026). */
  width: auto;
  min-width: 92px;
  max-width: 108px;
  text-align: center;
  text-align-last: center;
}
.status-badge.geplant { background: rgba(100,116,139,0.2); color: var(--text-muted); }
.status-badge.gekauft { background: rgba(245,158,11,0.15); color: var(--accent-amber); }
.status-badge.verkauft { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.status-badge.verlust { background: rgba(239,68,68,0.15); color: var(--accent-red); }

/* ── CHART CONTAINER ── */
.chart-wrap {
  position: relative;
  height: 200px;
  margin-top: 10px;
}

/* ── PROGRESS BAR ── */
.progress-bar-wrap { background: var(--bg-secondary); border-radius: 99px; height: 8px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green)); transition: width 0.4s ease; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── LOADING ── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.empty-state .empty-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state .empty-desc { font-size: 13px; }

/* ── NOTIFICATIONS ── */
.toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  background: #0f1525;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.3s ease;
  pointer-events: all;
}
.toast.success { border-color: rgba(34,197,94,0.4); }
.toast.error { border-color: rgba(239,68,68,0.4); }
.toast.info { border-color: rgba(0,212,255,0.3); }

@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ── FILTER PANEL ── */
.filter-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; }
.filter-group input, .filter-group select { min-width: 120px; }

/* ── MAP ── */
#map-container { height: 400px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* ── QUICK REPLY ── */
.quick-reply-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.quick-reply-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-reply-card:hover { border-color: var(--accent-cyan); background: var(--bg-card-hover); }
.quick-reply-card .qr-label { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.quick-reply-card .qr-text { font-size: 12px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── SETTINGS SECTION ── */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.settings-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
.settings-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

/* ── UI 1: STAT CARD — DEEP GLASSMORPHISM ── */
.stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
}
.stat-card:hover {
  border-color: rgba(0,212,255,0.25);
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.35),
    0 16px 40px rgba(0,0,0,0.3),
    0 0 24px rgba(0,212,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.stat-card.stat-positive { border-color: rgba(34,197,94,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25), 0 0 16px rgba(34,197,94,0.06), inset 0 1px 0 rgba(34,197,94,0.1); }
.stat-card.stat-negative { border-color: rgba(239,68,68,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25), 0 0 16px rgba(239,68,68,0.06), inset 0 1px 0 rgba(239,68,68,0.1); }
.stat-card.stat-accent  { border-color: rgba(0,212,255,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25), 0 0 16px rgba(0,212,255,0.08), inset 0 1px 0 rgba(0,212,255,0.1); }
.stat-info .stat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.stat-info .stat-sub.trend-up { color: var(--accent-green); }
.stat-info .stat-sub.trend-down { color: var(--accent-red); }

/* ── UI 2: GOAL PROGRESS ── */
.goal-progress {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(0,212,255,0.04);
  border: 1px solid rgba(0,212,255,0.12);
  border-radius: 12px;
}
.goal-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}
.goal-progress-label .goal-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-cyan);
}
.goal-bar-wrap {
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.goal-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.goal-bar-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.goal-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* ── UI 3: SCORE BADGES ── */
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}
.score-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
.score-badge.green {
  background: rgba(34,197,94,0.18);
  color: var(--accent-green);
  border: 1px solid rgba(34,197,94,0.25);
  box-shadow: 0 1px 6px rgba(34,197,94,0.12);
}
.score-badge.orange {
  background: rgba(245,158,11,0.18);
  color: var(--accent-amber);
  border: 1px solid rgba(245,158,11,0.25);
  box-shadow: 0 1px 6px rgba(245,158,11,0.12);
}
.score-badge.red {
  background: rgba(239,68,68,0.18);
  color: var(--accent-red);
  border: 1px solid rgba(239,68,68,0.25);
  box-shadow: 0 1px 6px rgba(239,68,68,0.12);
}
.score-badge.cyan {
  background: rgba(0,212,255,0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,0.25);
  box-shadow: 0 1px 6px rgba(0,212,255,0.12);
}

/* ── UI 4: OFFER CARD — DEEPER SHADOWS ── */
.offer-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.25);
}
.offer-card:hover {
  border-color: rgba(0,212,255,0.28);
  transform: translateY(-4px) scale(1.005);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.4),
    0 20px 48px rgba(0,0,0,0.35),
    0 0 20px rgba(0,212,255,0.08);
}
.offer-card.selected { border-color: rgba(0,212,255,0.5); background: rgba(0,212,255,0.04); }
.offer-card.is-favorite {
  border-color: rgba(251,191,36,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(251,191,36,0.15);
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.offer-price {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent-cyan) 0%, #7fecff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(0,212,255,0.3));
}

/* ── UI 5: NAV ITEM — ACTIVE STATE WITH INDICATOR ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 1px 8px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.18s;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  user-select: none;
}
.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(0,212,255,0.12) 0%, rgba(0,212,255,0.04) 100%);
  color: var(--accent-cyan);
  box-shadow: 0 2px 12px rgba(0,212,255,0.08);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0,212,255,0.5);
}
.nav-item .nav-icon { font-size: 16px; width: 20px; text-align: center; }

/* ── SLIDER GROUP (ersetzt .range-group im Profil-Formular) ── */
.slider-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.slider-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: #67e8f9;
  min-width: 100px;
  text-align: right;
}

/* ── SHIPPING SELECTOR (Bug 5) ── */
.shipping-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.shipping-btn {
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.shipping-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
.shipping-btn.active {
  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,212,255,0.08));
  border-color: rgba(0,212,255,0.4);
  color: #67e8f9;
  box-shadow: 0 2px 12px rgba(0,212,255,0.15);
}

/* ── BUG 3: PRICE RANGE INPUTS ── */
.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-range-inputs .price-input {
  flex: 1;
  min-width: 0;
}
.price-separator {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
}
.form-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 5px;
}
.form-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; margin-bottom: 2px; display: block; }

/* ── EBAY CACHE TABLE ── */
.cache-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cache-stat-item {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 80px;
  text-align: center;
}
.cache-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.cache-stat-val.green { color: var(--accent-green); }
.cache-stat-val.amber { color: var(--accent-amber); }
.cache-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.cache-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.cache-table th {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.cache-table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-secondary);
  vertical-align: middle;
}
.cache-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.cache-status-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.cache-status-badge.fresh {
  background: rgba(34,197,94,0.12);
  color: var(--accent-green);
  border: 1px solid rgba(34,197,94,0.25);
}
.cache-status-badge.stale {
  background: rgba(245,158,11,0.12);
  color: var(--accent-amber);
  border: 1px solid rgba(245,158,11,0.25);
}
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 3px 5px;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1;
}
.btn-icon:hover { background: rgba(255,255,255,0.08); }
.manual-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── KATEGORIE-FILTER ── */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.category-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.category-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
.category-btn.active {
  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,212,255,0.08));
  border-color: rgba(0,212,255,0.4);
  color: #67e8f9;
  box-shadow: 0 2px 12px rgba(0,212,255,0.15);
}
.category-count {
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
}
.category-btn.active .category-count {
  background: rgba(0,212,255,0.2);
}

/* ── VIDEOKURS PLATZHALTER ── */
.nav-section-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 12px;
}
.nav-item-promo { position: relative; }
.coming-soon-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── PROFILE CARDS ── */
.profile-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.profile-card:hover { border-color: rgba(0,212,255,0.3); }
.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.profile-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.profile-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.profile-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── TOGGLE SWITCH (Dashboard) ── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background 0.2s, border-color 0.2s;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px);
}

/* ── TELEGRAM STATUS ── */
.telegram-status {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
}
.telegram-status-success {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.3);
  color: #4ade80;
}
.telegram-status-error {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
}
.telegram-status-loading {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #sidebar { width: 60px; }
  .nav-item { margin: 1px 4px; padding: 10px 8px; }
  .nav-item span:not(.nav-icon) { display: none; }
  .sidebar-logo .logo-title, .sidebar-logo .logo-sub { display: none; }
  .sidebar-footer .scanner-status span { display: none; }
  #main-content { padding: 16px; }
}

/* ── DETAIL MODAL ── */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.detail-modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  scrollbar-width: thin;
}
.detail-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.modal-close-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); }
.detail-top-row {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  align-items: flex-start;
}
.detail-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--bg-card);
}
.detail-basics { flex: 1; }
.detail-section {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
  margin-top: 14px;
}
.detail-section h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.detail-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
}
.detail-row span:first-child { color: var(--text-muted); }
.detail-row span:last-child { font-weight: 500; }
.detail-highlight {
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 4px;
}
.detail-highlight.green { background: rgba(34,197,94,0.1); color: var(--accent-green); }
.detail-highlight.red { background: rgba(239,68,68,0.1); color: var(--accent-red); }
.detail-highlight.green span, .detail-highlight.red span { color: inherit !important; }
.detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.attr-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}
.attr-badge.green { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.attr-badge.amber { background: rgba(245,158,11,0.15); color: var(--accent-amber); }
.attr-badge.red { background: rgba(239,68,68,0.15); color: var(--accent-red); }

/* ── BACKUP SECTION ── */
.backup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 16px;
}
.backup-row:last-of-type { border-bottom: none; }
.backup-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.backup-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.backup-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
}
.backup-hint {
  margin-top: 12px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}

/* Hinweis, wenn die Suche pausiert (fehlende Anmeldung oder kein aktives Abo). */
.zugang-hinweis {
  margin-bottom: 22px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--accent-amber); background: rgba(245,158,11,0.08);
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDY
   ═══════════════════════════════════════════════════════════════════════════

   Bis zum 15.08.2026 gab es für das ganze Dashboard EINEN Medienblock, und der
   schrumpfte nur die Seitenleiste auf 60 Pixel. Der Betreiber: „Einige Sachen sind
   nicht benutzerfreundlich und unhandlich zu bedienen."

   Nachgemessen, sechs Stellen — jede mit eigener Ursache:

     1. Eingabefelder standen auf 13,5px. Safari auf dem iPhone zoomt die GANZE Seite
        hinein, sobald man ein Feld unter 16px antippt, und zoomt nicht von selbst
        wieder heraus. Der auffälligste Bedienfehler auf einem Handy — und eine reine
        Zahl im Stylesheet.
     2. Die Buchhaltung ist eine Tabelle mit DREIZEHN Spalten in einem seitlich
        scrollenden Kasten. Auf 360 Pixeln sieht man zwei davon.
     3. Die Seitenleiste belegte dauerhaft 60 von 360 Pixeln — ein Sechstel des
        Bildschirms für Symbole, die man selten braucht. Und sie sitzt oben links,
        also dort, wo der Daumen nicht hinkommt.
     4. Knöpfe mit `padding: 5px 10px` sind rund 24 Pixel hoch. Apple und Google
        nennen beide 44 als Untergrenze für etwas, das man mit dem Finger trifft.
     5. `minmax(340px, 1fr)` in der mittleren Angebotsansicht — breiter als der Platz,
        also schiebt die Seite seitlich.
     6. Modale Fenster mit festem Rand ringsum verschenken auf 360 Pixeln ein Drittel
        der Fläche.

   Die Grenze bleibt bei 768px. */

@media (max-width: 768px) {

  /* ── 1. Eingabefelder: mindestens 16px ────────────────────────────────────
     Keine Geschmacksfrage. Safari zoomt bei allem darunter. */
  input[type="text"], input[type="number"], input[type="password"],
  input[type="url"], input[type="email"], input[type="date"], input[type="search"],
  select, textarea, .tag-input-field {
    font-size: 16px;
    padding: 11px 12px;
  }

  /* ── 2. Die Navigation wandert nach UNTEN ─────────────────────────────────
     Auf einem Handy ist die obere linke Ecke die am schlechtesten erreichbare
     Stelle. Unten liegt der Daumen. Die Leiste scrollt seitlich, weil dreizehn
     Punkte nicht nebeneinander passen — die vier wichtigsten sind ohne Wischen
     sichtbar, der Rest eine Wischbewegung entfernt. */
  #app { flex-direction: column; }

  #sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Geräte mit Gestensteuerung haben unten einen Balken — ohne das liegt der
       letzte Knopf darunter und ist nicht zu treffen. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #sidebar::-webkit-scrollbar { display: none; }

  .sidebar-logo, .sidebar-footer { display: none; }
  #sidebar nav { display: flex; flex-direction: row; }

  .nav-item {
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 8px 14px;
    min-width: 68px;
    min-height: 56px;
    border-radius: 0;
    justify-content: center;
    text-align: center;
  }
  /* Die Beschriftung bleibt — anders als bisher. Dreizehn Symbole ohne Text sind ein
     Ratespiel; wer das Werkzeug zum ersten Mal auf dem Handy öffnet, findet die
     Buchhaltung sonst nicht. */
  .nav-item span:not(.nav-icon) {
    display: block;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .nav-icon { font-size: 18px; }

  /* Platz für die Leiste, sonst verdeckt sie die letzte Zeile jeder Seite. */
  #main-content {
    padding: 14px 12px calc(80px + env(safe-area-inset-bottom, 0px));
    width: 100%;
  }

  /* ── 3. Kacheln und Raster ────────────────────────────────────────────────
     Keine Mindestbreite darf über die Bildschirmbreite hinausgehen, sonst schiebt
     die Seite seitlich — auf einem Handy das Unangenehmste, weil es jede senkrechte
     Wischbewegung stört. */
  .offers-grid,
  .offers-grid.view-medium,
  .offers-grid.view-large,
  .stats-grid,
  .kennzahlen { grid-template-columns: 1fr !important; }

  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-title { font-size: 20px; }
  .card { padding: 14px; border-radius: 12px; }

  /* ── 4. Knöpfe zum Antippen ───────────────────────────────────────────────
     44 Pixel ist die Untergrenze bei Apple, 48 bei Google. Darunter trifft man
     danebenliegende Knöpfe mit. */
  .btn { min-height: 44px; padding: 11px 16px; font-size: 14px; }
  .btn-sm, .mini { min-height: 40px; padding: 9px 14px; font-size: 13px; }
  .btn-icon { min-height: 44px; min-width: 44px; padding: 10px; }
  .zeile-aktionen, .detail-actions-row, .knoepfe { flex-wrap: wrap; gap: 8px; }
  .zeile-aktionen .btn, .zeile-aktionen .mini { flex: 1 1 auto; }

  /* ── 5. Modale Fenster füllen den Bildschirm ──────────────────────────────*/
  .detail-overlay { padding: 0; align-items: flex-end; }
  .detail-modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* ── 6. Die Buchhaltung als KARTEN statt als Tabelle ──────────────────────
     Dreizehn Spalten passen auf kein Handy. Seitliches Scrollen in einem Kasten ist
     die schlechteste Lösung: Man sieht nie, in welcher Zeile man ist, und die
     Kopfzeile scrollt mit weg.

     Jede Zeile wird zu einer Karte, die Spaltenüberschrift steht über `data-label`
     vor dem Wert — dieselben Daten, kein zweites Markup. */
  .accounting-table thead { display: none; }
  .accounting-table,
  .accounting-table tbody,
  .accounting-table tr,
  .accounting-table td { display: block; width: 100%; }

  .accounting-table tr {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .accounting-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border: none;
    text-align: right;
    font-size: 14px;
  }
  .accounting-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex-shrink: 0;
  }
  .accounting-table td:not([data-label]) { justify-content: flex-end; }
  .accounting-table td[contenteditable] { min-height: 34px; }
  /* Der seitlich scrollende Kasten darf jetzt nicht mehr scrollen, sonst bliebe die
     Karte trotzdem in einem schmalen Streifen. */
  .accounting-table-wrap, #acc-table-wrap { overflow-x: visible !important; }

  /* ── Tabellen der Verwaltung ──────────────────────────────────────────────
     Die bleiben Tabellen: fünf bis sechs Spalten, und sie werden nur vom Betreiber
     benutzt, nicht vom Kunden. */
  table.konten { font-size: 13px; }
  table.konten th, table.konten td { padding: 8px 10px; }

  /* ── Kleinigkeiten, die zusammen viel ausmachen ───────────────────────────*/
  .modal, .modal-content { max-width: 100%; }
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .filter-bar > * { flex: 1 1 140px; }
  /* ── „Jetzt scannen" fällt auf dem Handy weg ──────────────────────────────
     Vom Betreiber am 15.08.2026 festgelegt: „Unnötig, weil wenn Profile aktiv sind,
     reicht das schon." Stimmt — der Server plant die Läufe selbst, der Knopf zieht nur
     einen davon vor. Auf einem 390-Pixel-Schirm belegt er die ganze Breite unter der
     Überschrift und sieht dabei aus wie der Hauptzweck der Seite.

     Nur AUSGEBLENDET, nicht entfernt: Am Rechner bleibt er, und wer ihn auf dem Handy
     doch braucht, findet ihn je Profil unter „Suchprofile". Die anderen beiden Knöpfe
     desselben Namens (BM- und eBay-Preise) bleiben — sie stehen auf eigenen Seiten,
     die man absichtlich aufsucht, und lösen etwas anderes aus. */
  #btn-manual-scan { display: none; }

  /* Waagerechtes Schieben der ganzen Seite ausschließen. Der häufigste Grund dafür
     ist ein einzelnes zu breites Kind, und das ist auf einem Handy kaum zu finden. */
  body { overflow-x: hidden; }
}

/* Sehr schmale Geräte (iPhone SE und älter, 320–375px). */
@media (max-width: 380px) {
  .nav-item { min-width: 58px; padding: 8px 8px; }
  .nav-item span:not(.nav-icon) { font-size: 9px; }
  #main-content { padding-left: 10px; padding-right: 10px; }
  .stat-value { font-size: 22px; }
}

/* ── Feste Spaltenaufteilungen, die auf dem Handy umbrechen müssen ──────────
   Am 15.08.2026 standen fünf Raster als INLINE-Stil im Markup: „1fr 360px",
   „repeat(3,1fr)", „1fr 1fr". Ein Inline-Stil schlägt jede Klassenregel — der
   Handy-Block darunter konnte sie also gar nicht erreichen, und auf 390 Pixeln stand
   „Live-Feed — Neueste Angebote" mit einem Wort je Zeile neben einer zweiten Spalte.

   Deshalb als Klasse statt inline. Zwei Namen reichen für alle fünf Fälle. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.split-haupt { display: grid; grid-template-columns: 1fr 360px; gap: 16px; }

@media (max-width: 900px) {
  /* Schon vor der Handygrenze: Drei Spalten sind auf einem kleinen Laptop genauso eng. */
  .split-3 { grid-template-columns: 1fr 1fr; }
  .split-haupt { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .split-2, .split-3, .split-haupt { grid-template-columns: 1fr; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDBUCH
   ═══════════════════════════════════════════════════════════════════════════
   Vorher standen alle Stile als style="…" im JavaScript, das den Markdown
   umwandelte. Das war der Grund, warum Tabellen und Listen dort nie richtig
   aussahen: Wer eine Auszeichnung ergänzen wollte, musste sie im Fließtext
   einer Ersetzungskette unterbringen. Hier stehen sie an einer Stelle. */

.handbuch { font-size: 14.5px; line-height: 1.75; color: var(--text-primary); }
.handbuch h1 {
  font-size: 26px; font-weight: 700; margin: 0 0 6px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.handbuch h2 {
  font-size: 19px; font-weight: 700; color: var(--text-primary);
  margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.handbuch h3 { font-size: 15.5px; font-weight: 700; color: var(--accent-cyan); margin: 22px 0 6px; }
.handbuch h4 { font-size: 14.5px; font-weight: 700; margin: 16px 0 4px; }
.handbuch p  { margin: 0 0 12px; }
.handbuch ul, .handbuch ol { margin: 0 0 14px; padding-left: 24px; }
.handbuch li { margin-bottom: 7px; }
/* Die Schritt-für-Schritt-Anleitungen sind lang. Eine deutlich sichtbare Nummer
   hilft, die Stelle wiederzufinden, an der man war. */
.handbuch ol > li::marker { color: var(--accent-cyan); font-weight: 700; }
.handbuch code {
  background: rgba(0,212,255,0.1); color: var(--accent-cyan);
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--font-mono, monospace); font-size: 12.5px;
  /* Der Telegram-Token und die getUpdates-Adresse sind sehr lang. Ohne das
     schiebt die Seite auf dem Handy seitlich. */
  overflow-wrap: anywhere;
}
.handbuch hr { border: none; border-top: 1px solid var(--border); margin: 26px 0; }
.handbuch blockquote {
  margin: 0 0 14px; padding: 12px 16px;
  border-left: 3px solid var(--accent-amber);
  background: rgba(245,158,11,0.07); border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
}
.handbuch table {
  width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 13.5px;
}
.handbuch th {
  text-align: left; padding: 8px 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  font-weight: 600; color: var(--text-primary);
}
.handbuch td { padding: 8px 12px; border: 1px solid var(--border); vertical-align: top; }

/* Auf dem Handy sind sechsspaltige Tabellen nicht darstellbar. Statt sie in Karten
   umzubauen — beim Handbuch wäre das schlechter lesbar, weil die Spalten dort
   zusammengehören — darf die EINZELNE Tabelle seitlich scrollen. Die Seite selbst
   nicht: Der Kasten hat overflow, nicht der Body. */
@media (max-width: 768px) {
  .handbuch table { display: block; overflow-x: auto; white-space: nowrap; }
  .handbuch td, .handbuch th { white-space: normal; min-width: 110px; }
  .handbuch h2 { font-size: 17px; }
}