/* ==========================================================================
   Listrivo – App-Shell-Styles
   Kein Build-Schritt, kein Framework – reines, statisches CSS.
   ========================================================================== */

:root {
  /* Typografie-/Abstandsraster (Redesign 05.09.2026, UX-Analyse):
     Seitentitel ~22-28px je nach Kontext, Abschnittstitel 17-18px,
     Fliesstext 14-15px, Eingaben bewusst 16px (verhindert iOS-Auto-Zoom
     beim Fokussieren). Abstaende folgen 4/8/12/16/24/32px, wo neu gesetzt -
     bestehende Ad-hoc-Werte werden nicht flaechendeckend ersetzt, sondern
     schrittweise beim Beruehren der jeweiligen Stelle angeglichen. */
  --color-bg: #f4f6fb;
  --color-surface: #ffffff;
  --color-border: #e2e5ec;
  --color-text: #101828;
  --color-text-muted: #667085;
  --color-primary: #0f172a;
  --color-primary-contrast: #ffffff;
  --color-accent: #2563eb;
  --color-accent-2: #10b981;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  /* Aktiver Navigationszustand (Redesign 05.09.2026, P2-Befund: reiner
     --color-accent-Text auf --color-bg-Flaeche war im Dark Mode
     kontrastarm, da beide Farben dort sehr dunkel/nah beieinander liegen).
     Eigene, je Theme abgestimmte Werte statt Wiederverwendung von
     --color-bg/--color-accent - in Light bewusst nah an den bisherigen
     Werten (dort unproblematisch), in Dark deutlich heller/klarer. */
  --color-nav-active-bg: rgba(37, 99, 235, 0.08);
  --color-nav-active-text: #2563eb;
  /* Markenverlauf (Landing Page, §32) - dieselbe Blau-Grün-Richtung wie
     Logo/App-Icon (public/assets/icons/icon-512.png). */
  --gradient-brand: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  /* Dunklere, kontrastreichere Verlaufsvariante fuer Primaeraktionen auf
     farbigem/hellem Untergrund (z.B. Buttons auf Karten) - gleiche Werte in
     beiden Themes, da es sich um feste Markenfarben handelt, keine
     Oberflaechenfarbe. */
  --gradient-brand-strong: linear-gradient(135deg, #255be2, #087f79);

  --nav-width: 240px;
  --nav-drawer-width: min(280px, 84vw);
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
}

/* Dunkles Theme: folgt standardmäßig prefers-color-scheme, kann aber über
   den manuellen Theme-Toggle (theme.js, data-theme-Attribut auf <html>)
   explizit erzwungen/übersteuert werden - :not([data-theme="light"]) sorgt
   dafür, dass eine explizite Hell-Wahl auch bei dunklem OS-Preference
   gewinnt; der zweite Block deckt den umgekehrten Fall ab (explizit dunkel
   trotz hellem OS-Preference). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b1120;
    --color-surface: #141f34;
    --color-border: #283652;
    --color-text: #f1f5f9;
    --color-text-muted: #a8b6cc;
    --color-primary: #f8fafc;
    --color-primary-contrast: #0f172a;
    --color-nav-active-bg: rgba(140, 181, 255, 0.16);
    --color-nav-active-text: #8cb5ff;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0b1120;
  --color-surface: #141f34;
  --color-border: #283652;
  --color-text: #f1f5f9;
  --color-text-muted: #a8b6cc;
  --color-primary: #f8fafc;
  --color-primary-contrast: #0f172a;
  --color-nav-active-bg: rgba(140, 181, 255, 0.16);
  --color-nav-active-text: #8cb5ff;
}

* { box-sizing: border-box; }

/* Verhindert, dass eigene "display"-Regeln (z.B. display:flex auf
   .app-shell/.auth-form) das hidden-Attribut aushebeln - ohne dies gewinnt
   die Autor-Regel gegen die UA-Standardregel "[hidden]{display:none}". */
[hidden] { display: none !important; }

/* Logo-Umschaltung Light-/Dark-Mode (folgt prefers-color-scheme, wie der
   Rest des Themes). Doppelte Klasse (.auth-logo.auth-logo--dark) sorgt fuer
   ausreichend Spezifitaet gegenueber der Groessen-Regel weiter unten, egal
   in welcher Reihenfolge die Regeln stehen. */
.auth-logo.auth-logo--dark,
.app-nav__brand-logo.app-nav__brand-logo--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-logo.auth-logo--light,
  :root:not([data-theme="light"]) .app-nav__brand-logo.app-nav__brand-logo--light {
    display: none;
  }

  :root:not([data-theme="light"]) .auth-logo.auth-logo--dark {
    display: block;
  }

  :root:not([data-theme="light"]) .app-nav__brand-logo.app-nav__brand-logo--dark {
    display: block;
  }
}

:root[data-theme="dark"] .auth-logo.auth-logo--light,
:root[data-theme="dark"] .app-nav__brand-logo.app-nav__brand-logo--light {
  display: none;
}

:root[data-theme="dark"] .auth-logo.auth-logo--dark {
  display: block;
}

:root[data-theme="dark"] .app-nav__brand-logo.app-nav__brand-logo--dark {
  display: block;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* --- App-Shell-Layout ---------------------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 5;
}

.app-topbar__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
}

.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Theme-Toggle (Landing-Nav + App-Topbar) -------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

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

.theme-toggle__icon {
  width: 18px;
  height: 18px;
}

.app-main {
  flex: 1;
  padding: 20px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* --- Navigation: Off-Canvas-Drawer (Mobil, Hamburger) / sticky Sidebar
   (Desktop) - Redesign 07.09.2026: ersetzt die bisherige Bottom-Icon-Nav,
   da 7 Top-Level-Punkte (Übersicht/Artikel/Optimierung/Verkäufe/eBay/Konto/
   Tarif) für eine flache Bottom-Nav zu viele wären. Dieselbe Nav-Liste wird
   auf Mobile als seitliches Off-Canvas-Panel ein-/ausgeblendet (siehe
   nav-drawer.js), auf Desktop bleibt sie wie zuvor permanent sichtbar. --- */

.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--nav-drawer-width);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 16px 12px;
  padding-top: max(16px, env(safe-area-inset-top, 0px));
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 50;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}

.app-nav.is-open {
  transform: translateX(0);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
}

.app-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
}

/* Verhindert Hintergrund-Scroll, solange der Drawer auf Mobile offen ist. */
body.nav-open-lock { overflow: hidden; }

.app-nav__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 24px;
}

.app-nav__brand-logo {
  display: block;
  /* Höhenbasierte statt breitenbasierte Skalierung: logo-light.png und
     logo-dark.png haben unterschiedlich viel transparenten Leerraum im
     Canvas (unterschiedliches Seitenverhältnis), obwohl der sichtbare
     Schriftzug in beiden praktisch gleich groß ist - bei width-basierter
     Skalierung (max-width) würde das eine Logo dadurch sichtbar größer
     wirken als das andere, je nach aktivem Theme. */
  height: 32px;
  width: auto;
  max-width: 100%;
}

.app-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.app-nav__close svg { width: 16px; height: 16px; }

.app-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hilfe & Support / Abmelden - an den unteren Rand des Drawers gedrückt,
   mit dünnem Trenner zur Haupt-Navigation (mockup: "sidebar-footer"). */
.app-nav__list--footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.app-nav__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: var(--color-text-muted);
  cursor: pointer;
}

.app-nav__link:hover { background: var(--color-bg); }
.app-nav__link.is-active { background: var(--color-nav-active-bg); color: var(--color-nav-active-text); }

.app-nav__icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .app-nav {
    position: sticky;
    top: 0;
    left: auto;
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    width: var(--nav-width);
    flex-shrink: 0;
    padding: 20px 12px;
    transform: none;
    transition: none;
    box-shadow: none;
    z-index: 5;
  }

  .app-nav__close,
  .app-nav-backdrop,
  .js-nav-open {
    display: none;
  }
}

/* --- Inhalte -------------------------------------------------------------- */

.app-view__lead {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
  max-width: 60ch;
}

.app-view__note {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Nachtrag 13.09.2026 ("Top-Kategorien"-Widget, Verkäufe-Seite) */
.top-categories-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-categories-list__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-categories-list__label {
  flex: 0 0 140px;
  font-size: 13px;
  color: var(--color-text);
}

.top-categories-list__bar-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 4px;
  background: var(--color-border);
  overflow: hidden;
}

.top-categories-list__bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--color-accent, currentColor);
}

.top-categories-list__value {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 90px;
  text-align: right;
}

/* Nachtrag 13.09.2026 (Optimierung-Seiten-Umbau, "Listing Health im
   Ueberblick") - dieselben stat-card/issue-list-Bausteine wie ueberall
   sonst, nur mit farbigen Werten fuer die Kritisch/Potenzial/Sehr-gut-
   Buckets (gleiche Farbtokens wie ampel--ok/--warn/--bad). */
.app-view__subtitle {
  font-size: 14px;
  font-weight: 700;
  margin: 20px 0 10px;
}

.health-buckets {
  margin-top: 0;
}

.stat-card--bucket-critical .stat-card__value { color: var(--color-danger); }
.stat-card--bucket-potential .stat-card__value { color: var(--color-warning); }
.stat-card--bucket-good .stat-card__value { color: var(--color-success); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.card-grid--listings {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.listing-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.listing-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.listing-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.listing-card__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.listing-card__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.listing-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

.listing-card__meta-sep { opacity: 0.6; }

.listing-card .system-info {
  border: none;
  padding: 0;
  max-width: none;
  gap: 4px 12px;
}

.listing-card__locked {
  font-size: 12px;
  color: var(--color-warning);
  margin: 0;
}

/* Thumbnail links im Kartenkopf (Redesign 07.09.2026, Mockup-Vorlage) -
   .listing-card ist schon seit dem 05.09.-Redesign klickbar (cursor:
   pointer + Hover oben), nur ohne Bild/echten Klick-Handler. */
.listing-card__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-card__thumb--empty {
  color: var(--color-text-muted);
}

.listing-card__thumb--empty::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: 0.25;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Item Specifics als Chips (statt Definitionsliste) --------------------- */

.specific-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.specific-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.specific-chip__name { color: var(--color-text-muted); font-weight: 600; }
.specific-chip__value { color: var(--color-text); font-weight: 600; }

/* --- Bilder-Galerie (echte Thumbnails statt nur Anzahl) --------------------- */

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* --- "Warum verkauft sich mein Artikel nicht?" - Issue-Zeilen mit Icon ----- */

.issue-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.issue-item__icon { font-size: 15px; flex-shrink: 0; }
.issue-item__label { font-weight: 700; }
.issue-item--main { color: var(--color-text); }
.issue-item--secondary { color: var(--color-text); }

.issue-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Optimierungs-Checkliste (aus ListingHealthScore::calculate()['checks']) */

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.checklist-item__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  color: #fff;
}

.checklist-item--passed .checklist-item__icon { background: var(--color-success); }
.checklist-item--passed .checklist-item__label { color: var(--color-text); }
.checklist-item--failed .checklist-item__icon { background: var(--color-border); color: var(--color-text-muted); }
.checklist-item--failed .checklist-item__label { color: var(--color-text-muted); }

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
}

.pagination .app-view__note { margin: 0; }

/* --- Verkäufe: Tabelle (Phase-Nachtrag) ----------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sales-table,
.artikel-table,
.sync-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.sales-table th,
.sales-table td,
.artikel-table th,
.artikel-table td,
.sync-log-table th,
.sync-log-table td {
  padding: 10px 14px;
  text-align: left;
}

.sales-table thead th,
.artikel-table thead th,
.sync-log-table thead th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.sales-table tbody tr:not(:last-child) td,
.artikel-table tbody tr:not(:last-child) td,
.sync-log-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-border); }

/* Redesign 07.09.2026 (Phase E2, Sync-Protokoll/Historie-Tab) - "Änderung"-
   Spalte (alt → neu) darf im Gegensatz zum Rest der Zeile umbrechen, da
   Feldwerte (z.B. lange Titel) sonst die Tabelle unkontrolliert breit
   ziehen wuerden. */
.sync-log-table td.sync-log-table__change {
  white-space: normal;
  max-width: 280px;
}

.sales-table td:nth-child(2),
.sales-table td:nth-child(3),
.sales-table td:nth-child(4),
.sales-table th:nth-child(2),
.sales-table th:nth-child(3),
.sales-table th:nth-child(4) {
  text-align: right;
}

.sales-table td:first-child,
.artikel-table td:first-child {
  white-space: normal;
  max-width: 320px;
  font-weight: 600;
}

/* Redesign 07.09.2026 (Mockup-Vorlage, Phase C): Spaltenausrichtung ueber
   Klassen statt nth-child - die Artikeltabelle hat jetzt 9 statt 4 Spalten
   und nth-child-Positionen waeren fragil/unleserlich geworden. */
.artikel-table td.num,
.artikel-table th.num {
  text-align: right;
}

.artikel-table td.center,
.artikel-table th.center {
  text-align: center;
}

/* --- Artikel: Suche + Qualitätsfilter (Redesign 05.09.2026, Mockup) ------- */

.artikel-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 16px;
}

.artikel-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  flex: 1 1 220px;
}

.artikel-toolbar__field input,
.artikel-toolbar__field select {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
}

.artikel-toolbar__field--filter { flex: 0 1 220px; }

.artikel-table__title { font-weight: 700; }
.artikel-table__sku { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
.artikel-table__quality { display: inline-flex; align-items: center; gap: 8px; }
.artikel-table__quality-value { font-size: 12px; color: var(--color-text-muted); }

/* --- Artikeltabelle: Vorschaubild, ganze Zeile klickbar, Status-Badge
   (Redesign 07.09.2026, Mockup-Vorlage, Phase C) ------------------------ */

.artikel-table__row-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.artikel-table__thumb {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.artikel-table__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artikel-table__thumb--empty::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  opacity: 0.25;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--color-text-muted);
}

.artikel-table__ebay-id { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.artikel-table__status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.artikel-table__status--active { background: rgba(22, 163, 74, 0.12); color: var(--color-success); }
.artikel-table__status--other { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }

.artikel-table__chevron {
  color: var(--color-text-muted);
  font-size: 16px;
}

/* Ganze Zeile ist klickbar (LISTRIVO_ALLE_UNTERSEITEN.md: "Die komplette
   Tabellenzeile ist klickbar") statt nur ein Button in der letzten Spalte -
   gleiches role=button/tabIndex-Muster wie dashboard.js::renderListingCard(). */
.artikel-table tbody tr {
  cursor: pointer;
}

.artikel-table tbody tr:hover,
.artikel-table tbody tr:focus-visible {
  background: var(--color-bg);
}

.artikel-table tbody tr:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* --- Artikeldetail: Tabs, Schnellaktionen, Ampel, Bildvorschau
   (Redesign 07.09.2026, Mockup-Vorlage, Phase D) ---------------------------- */

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 20px;
}

.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 20px;
}

.detail-tab {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

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

.detail-tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.detail-tab-panel[hidden] { display: none; }

/* Ampel-Indikator (Merkmale-Tab) - dieselben CALCULATED-Farbschwellen wie
   ScoreRing/Status-Badges, nur als Text+Punkt statt Ring (siehe
   listings.js::specificsAmpel()). */
.ampel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 14px;
}

.ampel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ampel--ok { color: var(--color-success); }
.ampel--ok .ampel__dot { background: var(--color-success); }
.ampel--warn { color: var(--color-warning); }
.ampel--warn .ampel__dot { background: var(--color-warning); }
.ampel--bad { color: var(--color-danger); }
.ampel--bad .ampel__dot { background: var(--color-danger); }

/* Groessere Galerie-Kacheln mit Sortier-Nummer + Klick-zum-Vergroessern
   (Bilder-Tab) - .image-gallery/.image-thumb selbst bleiben unveraendert
   (weiterhin von der kleineren Inline-Vorschau anderswo genutzt). */
.image-gallery--detail .image-thumb-button {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-md);
}

.image-gallery--detail .image-thumb {
  width: 96px;
  height: 96px;
}

.image-thumb__order {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-lightbox-card {
  position: relative;
  max-width: min(90vw, 720px);
  max-height: 90vh;
}

.image-lightbox-card img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.image-lightbox-card__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 14px;
}

/* --- Hinweis-/Statusmeldungen (Fehler + Erfolg) -------------------------- */

.hint {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(22, 163, 74, 0.1);
  color: var(--color-success);
  margin: 0 0 16px;
  max-width: 60ch;
}

.hint--error {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

.hint--warning {
  background: rgba(217, 119, 6, 0.1);
  color: var(--color-warning);
}

.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-actions .btn { margin-top: 0; }

#ai-result {
  white-space: pre-line;
  max-width: 60ch;
}

.reason-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.api-call {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: 10px;
  padding: 10px 14px;
}

.api-call summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-call__status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.api-call__status--ok { background: rgba(22, 163, 74, 0.12); color: var(--color-success); }
.api-call__status--error { background: rgba(220, 38, 38, 0.12); color: var(--color-danger); }

.json-viewer {
  margin: 10px 0 0;
  padding: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  max-height: 400px;
  overflow-y: auto;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.stat-card__label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card__value {
  font-size: 24px;
  font-weight: 700;
}

.stat-card__icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}

.stat-card__icon svg { width: 100%; height: 100%; }

.stat-card--highlight {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.stat-card--highlight .stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.system-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  max-width: 420px;
}

.system-info dt { color: var(--color-text-muted); font-size: 13px; }
.system-info dd { margin: 0; font-weight: 600; font-size: 13px; }

.app-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  margin: 28px 0 12px;
}

.app-section-title__icon {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Phase L Runde 1 (13.09.2026) - Abschnittstitel mit Aktion daneben (z.B.
   Export-Link auf "Verkäufe"), gleicher Abstand wie .app-section-title
   selbst, nur zusaetzlich als Flex-Reihe mit Aktion rechtsbuendig. */
.app-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 12px;
  flex-wrap: wrap;
}

.app-section-title-row .app-section-title {
  margin: 0;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--color-text-muted);
}

.status-dot--ok { background: var(--color-success); }
/* Redesign 05.09.2026 (P1-Befund): eigener Zustand fuer "Verbindung
   besteht, aber letzter Importversuch fehlgeschlagen" - bewusst nicht rot
   (keine Verbindung ist unterbrochen), sondern Amber (Aufmerksamkeit noetig,
   kein Fehlerabbruch). */
.status-dot--warn { background: var(--color-warning); }
.status-dot--danger { background: var(--color-danger); }

/* Phase J (12.09.2026): FAQ-Akkordeon auf "Hilfe & Support" (#/hilfe). */
.faq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.faq-item__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.faq-item__question[aria-expanded="true"] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer {
  padding: 0 16px 16px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Phase G (08.09.2026): "Aktive Sitzungen" - eine Zeile je Session, gleiches
   Card-Prinzip wie .card-block, aber als eigene Liste statt fester Formular-
   breite (max-width:420px waere hier zu eng fuer IP+Zeitstempel+Button). */
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg);
}

.session-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.session-row__device {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.session-row__meta {
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.session-row__badge {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--color-success);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-sm, 4px);
  padding: 1px 6px;
}

/* Phase G: 2FA-Setup-Modal (QR-Code) + einmalige Backup-Code-Anzeige. */
.two-factor-qr {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.two-factor-qr img {
  width: 180px;
  height: 180px;
}

.backup-codes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.backup-codes-list li {
  font-family: monospace;
  font-size: 1em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  padding: 6px 8px;
  text-align: center;
}

.card-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.card-block .system-info { border: none; padding: 0; max-width: none; }
.card-block--wide { max-width: 640px; }

/* Angebot-Formular (Phase D): direkte Kinder sollen die volle Kartenbreite
   ausfuellen statt wie sonst bei .card-block auf ihre Inhaltsbreite zu
   schrumpfen (siehe Kommentar bei .auth-form) - eigener Modifier statt
   .card-block selbst zu aendern, damit andere Stellen (Score-Ring-Karten
   u.ae., die bewusst nicht die volle Breite ausfuellen) unveraendert
   bleiben. */
.card-block--form { align-items: stretch; }

/* Planwahl-Bereich ("Mehr" -> Tarif, Nutzerwunsch 05.09.2026) - siehe
   payments.js::renderPlanSelection(). */
.plan-selection__title { font-size: 14px; font-weight: 700; margin: 20px 0 8px; }
.plan-selection__list { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }

.plan-selection-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-selection-card--current { border-color: var(--color-accent); }
.plan-selection-card__name { font-weight: 700; font-size: 14px; }
.plan-selection-card__price { font-size: 13px; color: var(--color-text-muted); }
.plan-selection-card__action { flex-shrink: 0; }

.card-block--accent { border-color: var(--color-accent-2); }

/* --- Einstellungen: Tabbar (eBay & Daten / Konto & Sicherheit / Tarif) --
   Redesign 05.09.2026 - ersetzt die vorherige 3-Spalten-Ansicht ("Mehr").
   Reines Sichtbarkeits-Umschalten per settings.js, keine der bestehenden
   IDs/Formular-Logik in den Panels wurde veraendert. */

.settings-tabbar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin: 4px 0 24px;
}

.settings-tabbar__tab {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 4px;
  margin-right: 20px;
  border-bottom: 2px solid transparent;
}

.settings-tabbar__tab.is-active {
  color: var(--color-nav-active-text);
  border-bottom-color: var(--color-accent);
}

.settings-panel .card-block,
.settings-panel .upgrade-teaser {
  margin-bottom: 8px;
}

.mehr-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.mehr-legal-links a { color: var(--color-accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.mehr-legal-links a:hover { text-decoration: underline; }

/* --- Upgrade-Teaser: einheitliche Optik für alle "PRO"-Hinweise -----------
   Ersetzt die frueheren nackten "🔒 ... ist Teil von PRO"-Einzeiler auf
   Dashboard/Verkaeufe/Analyse/Mehr durch eine Karte mit Icon, Erklaerung
   und (optional) Stichpunkten - ein Lite-Nutzer soll auf einen Blick
   verstehen, WAS ihm entgeht, statt nur ein Schloss-Emoji zu sehen. */

.upgrade-teaser {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 560px;
  box-shadow: var(--shadow-sm);
}

.upgrade-teaser__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  color: #fff;
}

.upgrade-teaser__icon svg { width: 20px; height: 20px; }

.upgrade-teaser__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.upgrade-teaser__title { margin: 0; font-size: 15px; font-weight: 700; }

.upgrade-teaser__text { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }

.upgrade-teaser__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.upgrade-teaser__list li { display: flex; gap: 8px; align-items: flex-start; }
.upgrade-teaser__list li::before { content: "✓"; color: var(--color-success); font-weight: 700; flex-shrink: 0; }

.upgrade-teaser .btn { align-self: flex-start; margin-top: 4px; }
.upgrade-teaser .ai-actions { margin-top: 4px; }

@media (max-width: 480px) {
  .upgrade-teaser { flex-direction: column; align-items: flex-start; }
}

/* --- Dashboard: Umsatz-Sparkline (Phase 8, §14) ---------------------------- */

/* Nur die entsperrten Zustände brauchen volle Breite (Platz fuer den
   Sparkline-Chart) - die gesperrten Zustände nutzen jetzt .upgrade-teaser
   mit eigener, bewusst begrenzter max-width (siehe dort). */
#dashboard-trend,
#dashboard-optimization {
  max-width: none;
}

.sparkline {
  width: 100%;
  max-width: 480px;
  height: 90px;
  color: var(--color-accent);
  display: block;
}

.sparkline__area { fill: url(#sparkline-gradient); }
/* Verkäufe-Trend (sales.js) nutzt eine eigene Gradient-ID (siehe dortige
   buildSparkline()) - eigene Klasse statt Inline-style="", da die CSP
   (default-src 'self', kein unsafe-inline) Inline-style-Attribute blockt. */
.sparkline__area--sales { fill: url(#sales-sparkline-gradient); }
.sparkline__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline__dot { fill: var(--color-surface); stroke: currentColor; stroke-width: 2; }
.sparkline__gridline { stroke: var(--color-border); stroke-width: 1; }
.sparkline__axis-label { fill: var(--color-text-muted); font-size: 9px; }

/* --- Score-Ring (§4/§16, CALCULATED - reine Visualisierung eines bereits
   vorhandenen 0-100-Werts, siehe score-ring.js) ----------------------------- */

.score-ring-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.score-ring__track { stroke: var(--color-border); }

.score-ring__value {
  transition: stroke-dashoffset 0.5s ease;
}

.score-ring__number {
  fill: var(--color-text);
  font-weight: 700;
}

.score-ring__label {
  fill: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Status-Badge ---------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.badge--unknown { background: var(--color-bg); color: var(--color-text-muted); }
.badge--ok { background: rgba(22, 163, 74, 0.12); color: var(--color-success); }
.badge--error { background: rgba(220, 38, 38, 0.12); color: var(--color-danger); }

/* --- Offline-Seite ---------------------------------------------------------- */

.offline-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}

.offline-screen .app-nav__brand-mark {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
}

.offline-screen h1 { margin: 0; font-size: 20px; }
.offline-screen p { max-width: 40ch; color: var(--color-text-muted); margin: 0; }

.offline-screen button {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* --- Auth-Gate (Login/Registrierung) --------------------------------------- */

.auth-gate {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
}

.auth-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 24px;
}

.auth-form h1 {
  font-size: 20px;
  margin: 0 0 16px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Redesign 07.09.2026 (Phase D, Bugfix): .auth-form wird jetzt auch
     innerhalb von .card-block wiederverwendet (Angebot-Tab), das
     "align-items: flex-start" setzt - ohne explizites width/align-self
     schrumpft das Formular als Flex-Kind auf seine Inhaltsbreite statt auf
     die volle Kartenbreite, wodurch .form-row (flex:1 je Label) mit
     flex-basis:0 keinen definierten verfuegbaren Platz zum Verteilen hat
     und die Felder ueberlappen/kollabieren koennen. In den bisherigen
     Einsatzorten (Modal-Karten, Auth-Karte) sind das ohnehin Block-
     Container ohne Flex - width:100%/align-self:stretch aendert dort
     nichts, ist also unbedenklich global zu setzen. */
  width: 100%;
  align-self: stretch;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Redesign 07.09.2026 (Phase E2, Sync-Einstellungen) - .auth-form label ist
   fuer Text-/Select-Felder auf column-Ausrichtung (Label ueber dem Feld)
   ausgelegt; eine Checkbox braucht stattdessen Checkbox+Text nebeneinander. */
.auth-form label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--color-text);
}

.auth-form label.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.auth-form input {
  font: inherit;
  /* 16px statt geerbter 14px (UX-Analyse) - unter 16px zoomt iOS Safari
     beim Fokussieren automatisch in das Feld hinein. */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
}

.auth-form input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.auth-error {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
  margin: 0;
}

.auth-success {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(22, 163, 74, 0.1);
  color: var(--color-success, #16a34a);
  margin: 0;
}

.auth-switch {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.auth-switch a { color: var(--color-accent); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  width: fit-content;
}

.btn:hover { opacity: 0.92; }

.btn--muted {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  margin-top: 12px;
}

/* Fuer unumkehrbare Aktionen (Account/Nutzer loeschen, Widerruf) - bewusst
   zurueckhaltend (Outline statt Volltonflaeche), damit es nicht wie ein
   normaler Call-to-Action wirkt, aber klar als Warnung erkennbar ist. */
.btn--danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  margin-top: 12px;
}

/* .auth-form wird inzwischen auch für Kontakt-/Rechnungsadressformular
   wiederverwendet (gleiche Feld-/Label-Optik) - hier um textarea/select
   ergänzt, die es beim reinen Login/Register-Formular nicht gab. */
.auth-form textarea,
.auth-form select {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}

.auth-form textarea:focus,
.auth-form select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Zwei Felder nebeneinander (z.B. Vor-/Nachname, PLZ/Ort) - fällt mobil
   automatisch untereinander. */
.form-row {
  display: flex;
  gap: 12px;
}

.form-row > label { flex: 1; min-width: 0; }

@media (max-width: 480px) {
  .form-row { flex-direction: column; }
}

/* Honeypot-Feld gegen simple Formular-Bots (siehe ContactController) -
   für Menschen unsichtbar, aber weiterhin für Screenreader/Tab-Reihenfolge
   entfernt (kein display:none, das würde manche Bots ebenfalls erkennen -
   in der Praxis reicht diese Kombination aber völlig aus, keine echten
   Nutzerdaten hängen daran). */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Rechtliche Seiten (Impressum/Datenschutz/AGB/Kontakt, §28/§32) ------ */
/* Eigenständige, von Landing/Auth/App-Shell unabhängige Ansicht (siehe
   public/assets/js/legal.js) - erreichbar per #/impressum etc., egal ob
   ein- oder ausgeloggt. */

.legal-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.legal-content {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

.legal-article h1 {
  font-size: 26px;
  margin: 0 0 8px;
}

.legal-article__updated {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}

.legal-article h2 {
  font-size: 18px;
  margin: 32px 0 10px;
}

.legal-article p,
.legal-article li {
  line-height: 1.65;
  color: var(--color-text-muted);
}

.legal-article strong { color: var(--color-text); }

.legal-article ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.legal-article .card-block {
  max-width: none;
  margin: 16px 0;
}

.legal-placeholder {
  background: rgba(217, 119, 6, 0.12);
  color: var(--color-warning);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

#legal-kontakt .auth-form { max-width: 480px; }

/* --- Modal (Rechnungsadresse vor dem ersten PRO-Checkout) ---------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
}

.modal-card h2 {
  font-size: 18px;
  margin: 0 0 4px;
}

.modal-card__note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

.modal-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.modal-card__actions .btn { flex: 1; }