/* ==========================================================================
   Deal Bot - Design
   Sachlich und ruhig: neutrale Flächen, ein Akzent (Blau), Grün/Rot nur für Gewinn/Verlust.
   Keine Verläufe, kein Leuchten. Hell/Dunkel über prefers-color-scheme, Farben nur über die Variablen.
   ========================================================================== */
:root {
  --bg: #f5f6f8;
  --flaeche: #ffffff;
  --flaeche-2: #f8f9fb;
  --flaeche-3: #eef0f3;
  --text: #111827;
  --leise: #6b7280;
  --linie: #e5e7eb;
  --linie-stark: #d1d5db;
  --marke: #2554c7;
  --marke-dunkel: #1d449f;
  --marke-hell: rgba(37, 84, 199, .08);
  --gut: #047857;
  --gut-hell: rgba(4, 120, 87, .08);
  --warn: #b45309;
  --warn-hell: rgba(180, 83, 9, .08);
  --schlecht: #b91c1c;
  --schlecht-hell: rgba(185, 28, 28, .07);
  --kopf-bg: #ffffff;
  --schatten-1: 0 1px 2px rgba(16, 24, 40, .04);
  --schatten-2: 0 10px 28px -10px rgba(16, 24, 40, .18);
  --radius: 10px;
  --radius-s: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --flaeche: #16181d;
    --flaeche-2: #1b1e24;
    --flaeche-3: #23262d;
    --text: #e6e8eb;
    --leise: #9097a1;
    --linie: #2a2e35;
    --linie-stark: #3a3f47;
    --marke: #6b9bff;
    --marke-dunkel: #8bb0ff;
    --marke-hell: rgba(107, 155, 255, .12);
    --gut: #3fbf8f;
    --gut-hell: rgba(63, 191, 143, .12);
    --warn: #e0a040;
    --warn-hell: rgba(224, 160, 64, .12);
    --schlecht: #f07070;
    --schlecht-hell: rgba(240, 112, 112, .12);
    --kopf-bg: #16181d;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .3);
    --schatten-2: 0 12px 32px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  color: var(--text); background: var(--bg);
  font: 14.5px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "tnum" 0;
}
a { color: var(--marke); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 650; letter-spacing: -.01em; }
h2 .leise { font-size: 13.5px; font-weight: 500; margin-left: 6px; letter-spacing: 0; }
code { background: var(--flaeche-3); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.leise { color: var(--leise); }
.klein { font-size: 12.5px; }
::selection { background: color-mix(in srgb, var(--marke) 25%, transparent); }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--kopf-bg); border-bottom: 1px solid var(--linie); }
.kopf-inner {
  margin: 0 auto; padding: 0 32px;  /* volle Fensterbreite nutzen */
  display: flex; align-items: center; gap: 24px; min-height: 56px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; color: var(--text); letter-spacing: -.01em; }
.logo:hover { text-decoration: none; }
/* schlichtes Zeichen: Kreis mit Querlinie, einfarbig */
.logo-ball {
  width: 18px; height: 18px; border-radius: 50%; position: relative; flex: none;
  border: 2px solid var(--marke);
}
.logo-ball::before { content: ""; position: absolute; left: -2px; right: -2px; top: 6px; height: 2px; background: var(--marke); }
.logo-ball::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kopf-bg); border: 2px solid var(--marke);
}
.navi { display: flex; gap: 2px; flex-wrap: wrap; align-self: stretch; }
.navi a {
  display: flex; align-items: center; color: var(--leise); padding: 0 9px; font-weight: 550; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.navi a:hover { color: var(--text); text-decoration: none; }
.navi a.aktiv { color: var(--text); border-bottom-color: var(--marke); }
.navi-zahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 6px; border-radius: 9px; background: var(--marke); color: #fff; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
@media (prefers-color-scheme: dark) { .navi-zahl { color: #0f1115; } }
.status {
  margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--leise);
}
.status-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--leise); }
.status.ok .status-punkt { background: var(--gut); }
.status.laeuft .status-punkt { background: var(--marke); animation: puls 1.2s infinite; }
.status.fehler .status-punkt { background: var(--schlecht); }
@keyframes puls { 50% { opacity: .3; } }
.fortschritt { height: 2px; background: var(--linie); }
.fortschritt div { height: 100%; width: 0; background: var(--marke); transition: width .5s; }
/* Menü-Knopf: nur auf schmalen Bildschirmen (siehe "Handy" ganz unten) */
.menue-knopf { display: none; }
.menue-zeichen, .menue-zeichen::before, .menue-zeichen::after {
  display: block; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .15s, background .15s;
}
.menue-zeichen { position: relative; }
.menue-zeichen::before, .menue-zeichen::after { content: ""; position: absolute; left: 0; }
.menue-zeichen::before { top: -5px; }
.menue-zeichen::after { top: 5px; }
.menue-offen .menue-zeichen { background: transparent; }
.menue-offen .menue-zeichen::before { top: 0; transform: rotate(45deg); }
.menue-offen .menue-zeichen::after { top: 0; transform: rotate(-45deg); }

/* ---------- Seite ---------- */
.inhalt { margin: 0 auto; padding: 28px 32px 64px; }  /* volle Fensterbreite nutzen, auch für die Lager-Tabellen */
.seitenkopf { margin-bottom: 22px; }
.unterzeile { color: var(--leise); margin: 0 0 4px; max-width: 760px; font-size: 14.5px; }
.abschnitt { margin-top: 36px; }
.leer {
  text-align: center; color: var(--leise); padding: 44px 20px; border-radius: var(--radius);
  background: var(--flaeche); border: 1px dashed var(--linie-stark);
}
.hinweis {
  background: var(--warn-hell); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  padding: 11px 14px; border-radius: var(--radius-s); margin-bottom: 16px;
}

/* ---------- Formulare & Knöpfe ---------- */
.werkzeugleiste {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px;
  padding: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.werkzeugleiste .rechts { margin-left: auto; padding-right: 6px; }
input[type=search], input[type=number], input[type=text], input[type=date], select, textarea {
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-s); padding: 8px 11px;
  transition: border-color .15s, box-shadow .15s;
}
select { max-width: 100%; text-overflow: ellipsis; }  /* lange Set-Namen dürfen die Seite nicht verbreitern */
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--linie-stark) 60%, var(--leise)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-hell); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--leise) 80%, transparent); }
.suchfeld { flex: 1 1 280px; min-width: 0; }
.zahl { width: 66px; padding: 4px 8px; }
.schalter {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; font-size: 14px;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-s); padding: 7px 11px;
}
input[type=checkbox] { accent-color: var(--marke); width: 15px; height: 15px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
  color: #fff; background: var(--marke); border: 1px solid var(--marke); border-radius: var(--radius-s); padding: 8px 15px;
  transition: background .15s, border-color .15s;
}
@media (prefers-color-scheme: dark) { .knopf { color: #0f1115; } }
.knopf:hover { text-decoration: none; background: var(--marke-dunkel); border-color: var(--marke-dunkel); }
.knopf:focus-visible, .mini:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf.zweit { color: var(--text); background: var(--flaeche); border-color: var(--linie-stark); }
.knopf.zweit:hover { background: var(--flaeche-3); border-color: var(--linie-stark); }
.knopf.klein { padding: 5px 10px; font-size: 13px; }
.link { color: var(--marke); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mini {
  font: inherit; font-size: 13px; font-weight: 550; background: none; border: 0; color: var(--leise);
  cursor: pointer; padding: 5px 8px; border-radius: var(--radius-s);
}
.mini:hover { color: var(--text); background: var(--flaeche-3); text-decoration: none; }

/* ---------- Karten-Raster ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; }
.kachel {
  position: relative; display: flex; flex-direction: column; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.kachel:hover { text-decoration: none; border-color: var(--linie-stark); box-shadow: var(--schatten-2); }
.kachel-bild {
  position: relative; overflow: hidden; aspect-ratio: 245 / 342; padding: 12px 12px 4px;
  display: grid; place-items: center; background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
}
.kachel-bild img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .14)); }
.kachel-text { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.kachel-name { font-weight: 600; line-height: 1.3; }
.kachel-meta { color: var(--leise); font-size: 12.5px; margin-bottom: 8px; }
.kachel-preis { margin-top: auto; font-weight: 650; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.kachel-preis.unsicher { color: var(--leise); font-weight: 500; text-decoration: underline dotted; }
.seiten { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; }

/* Platzhalter für Karten ohne Bild: neutrale Fläche mit Name */
.platzhalter {
  width: 100%; height: 100%; border-radius: 6px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px; text-align: center; color: var(--leise);
  background: var(--flaeche-3); border: 1px solid var(--linie-stark);
}
.platzhalter strong { font-size: 12.5px; line-height: 1.25; color: var(--text); font-weight: 600; }
.platzhalter small { font-size: 11px; }
.treffer-bild .platzhalter, .karte-box .platzhalter { padding: 0; }

/* ---------- Badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.badge {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 1px 7px;
  border-radius: 4px; white-space: nowrap; line-height: 1.6;
}
.badge-typ { background: var(--marke-hell); color: var(--marke); }
.badge-hoch { background: var(--gut-hell); color: var(--gut); }
.badge-mittel { background: var(--warn-hell); color: var(--warn); }
.badge-niedrig { background: var(--flaeche-3); color: var(--leise); }
.jp {
  display: inline-block; font-size: 9.5px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 3px;
  border: 1px solid var(--linie-stark); color: var(--leise); vertical-align: 1px; letter-spacing: .04em;
}
/* Gewinn / etwas teuer / zu teuer: getönte Zahl statt bunter Pille */
.rabatt {
  display: inline-block; font-weight: 650; font-size: 13px; padding: 2px 8px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.rabatt-gewinn { background: var(--gut-hell); color: var(--gut); }
.rabatt-etwas-teuer { background: var(--warn-hell); color: var(--warn); }
.rabatt-teuer { background: var(--schlecht-hell); color: var(--schlecht); }

/* ---------- Karte mit Bild in Tabellen (Lager, Volumen, Erkennung) ---------- */
.treffer { display: flex; gap: 12px; align-items: center; min-width: 0; }
.treffer-bild { flex: 0 0 auto; }
.treffer-bild img { width: 42px; height: 58px; object-fit: contain; border-radius: 3px; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.treffer-bild .platzhalter { width: 42px; height: 58px; }
.treffer > div { min-width: 0; }
.treffer strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* ---------- Kartendetail ---------- */
.zurueck {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-weight: 550; font-size: 13.5px;
  color: var(--leise);
}
.zurueck:hover { color: var(--text); text-decoration: none; }
.detail { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 44px; align-items: start; }
.detail-bild { position: sticky; top: 80px; }
.detail-bild img { width: 100%; border-radius: 12px; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35); }
.kein-bild, .detail-bild .platzhalter { aspect-ratio: 245 / 342; border-radius: 12px; }
.kein-bild { display: grid; place-items: center; background: var(--flaeche); border: 1px dashed var(--linie-stark); color: var(--leise); }
.detail-info h2 { margin-top: 28px; }
.fakten {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 18px 0 0;
  padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.fakten dt { color: var(--leise); font-size: 13.5px; }
.fakten dd { margin: 0; font-weight: 600; }
.preis-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.preis-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 11px 14px; }
.preis-kachel span { display: block; color: var(--leise); font-size: 12.5px; font-weight: 500; }
.preis-kachel strong { font-size: 20px; letter-spacing: -.01em; font-weight: 650; font-variant-numeric: tabular-nums; }
.preis-kachel.haupt { border-color: color-mix(in srgb, var(--marke) 45%, transparent); background: var(--marke-hell); }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.code-box { position: relative; }
.code-box pre {
  margin: 0; padding: 16px; overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); font: 13px/1.65 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.code-box .knopf { position: absolute; top: 10px; right: 10px; }
.ebay-zusammenfassung {
  display: flex; flex-wrap: wrap; gap: 12px 30px; margin-bottom: 14px; padding: 12px 16px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.ebay-zusammenfassung strong { font-size: 18px; font-weight: 650; }
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; gap: 26px; }
  .detail-bild { position: relative; top: 0; max-width: 300px; }
}

/* ---------- Sets ---------- */
.set-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.set-kachel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px;
  color: var(--text); font-size: 13px; transition: border-color .15s, box-shadow .15s;
}
.set-kachel:hover { text-decoration: none; border-color: var(--linie-stark); box-shadow: var(--schatten-2); }
.set-logo { height: 72px; display: grid; place-items: center; margin-bottom: 10px; border-radius: var(--radius-s); background: var(--flaeche-2); }
.set-logo img { max-height: 54px; max-width: 85%; object-fit: contain; }
.set-logo span { font-weight: 600; color: var(--leise); text-align: center; padding: 0 8px; }
.set-name { font-weight: 600; font-size: 14px; }

/* ---------- Tabellen ---------- */
.tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  text-align: left; font-size: 11.5px; color: var(--leise); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding: 10px 13px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: 11px 13px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle th:first-child, .tabelle td:first-child { padding-left: 16px; }
.tabelle th:last-child, .tabelle td:last-child { padding-right: 16px; }
.tabelle tbody tr { transition: background .12s; }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.tabelle tr:last-child td { border-bottom: 0; }
.zahl-spalte { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Überschriften von Zahlenspalten rechtsbündig wie die Werte darunter; lange ("Gewinn beim Verkauf") dürfen umbrechen */
.tabelle th.zahl-spalte { text-align: right; white-space: normal; }
.tabelle .treffer { max-width: 270px; }  /* lange Kartennamen werden mit … gekürzt statt die Tabelle zu verbreitern */
.aktionen { white-space: nowrap; text-align: right; }
.nur-handy { display: none; }  /* nur in der Karten-Ansicht der Tabellen (Handy) */
.aktionen a { margin-left: 12px; font-weight: 550; }
.tabelle.erkennung td:first-child { max-width: 380px; }
.erkennung-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.erkennung-form textarea { width: 100%; font: 13px/1.65 ui-monospace, "Cascadia Code", Consolas, monospace; }

/* ---------- Kennzahlen ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kennzahl { padding: 15px 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.kennzahl span { display: block; color: var(--leise); font-size: 12.5px; font-weight: 550; }
.kennzahl strong { display: block; font-size: 25px; line-height: 1.3; font-weight: 650; letter-spacing: -.02em; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.kennzahl small { color: var(--leise); font-size: 12.5px; }
.kennzahl.plus strong { color: var(--gut); }
.kennzahl.minus strong { color: var(--schlecht); }

/* ---------- Lager ---------- */
.ablage {
  border: 1px dashed var(--linie-stark); border-radius: var(--radius); padding: 22px; margin-bottom: 24px;
  background: var(--flaeche); text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: border-color .15s, background .15s;
}
.ablage.klein { padding: 12px; margin: 12px 0 0; font-size: 13px; }
.ablage.ziehen, .ablage:focus { border-color: var(--marke); background: var(--marke-hell); outline: none; }
.ablage-status { font-weight: 600; }
.ablage-knoepfe { margin-top: 6px; justify-content: center; }
.badge-gezogen { background: var(--warn-hell); color: var(--warn); }
/* Reiter Gekauft | Gezogen | Im Verkauf | Verkauft | Archiv: Unterstrich statt Pille */
.reiter {
  position: relative; display: flex; gap: 4px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; border-bottom: 1px solid var(--linie);
}
.reiter button {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 550; font-size: 14px;
  color: var(--leise); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 9px 12px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s;
}
.reiter button:hover { color: var(--text); }
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--marke); }
.reiter button:focus-visible { outline: 2px solid var(--marke); outline-offset: -2px; }
.reiter-anzahl {
  font-size: 11.5px; font-weight: 600; min-width: 20px; padding: 0 6px; border-radius: 4px; text-align: center;
  background: var(--flaeche-3); color: var(--leise); font-variant-numeric: tabular-nums;
}
.reiter button[aria-selected="true"] .reiter-anzahl { background: var(--marke-hell); color: var(--marke); }
[data-inhalt="gezogen"] .badge-gezogen { display: none; }  /* im Reiter "Gezogen" überflüssig */
.reiter-anzahl.reiter-warnung, .reiter button[aria-selected="true"] .reiter-anzahl.reiter-warnung { background: var(--warn-hell); color: var(--warn); }
/* Versand verkaufter Karten: Zu versenden | Versendet | Angekommen */
.versand-zelle { min-width: 260px; }
.versand-wahl { display: inline-flex; padding: 2px; gap: 2px; background: var(--flaeche-3); border-radius: var(--radius-s); }
.versand-wahl label { position: relative; }
.versand-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.versand-wahl span {
  display: block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 550; color: var(--leise);
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.versand-wahl span:hover { color: var(--text); }
.versand-wahl input:checked + span { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1); }
.versand-wahl input[value="offen"]:checked + span { color: var(--warn); }
.versand-wahl input[value="angekommen"]:checked + span { color: var(--gut); }
.versand-wahl input:disabled + span { opacity: .4; cursor: not-allowed; }
.versand-wahl input:focus-visible + span { outline: 2px solid var(--marke); outline-offset: 1px; }
.versand-info { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 5px; }
.versand-info a, .versand-info .link { font-weight: 550; }
.tabelle tbody tr.versand-offen > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
button.link { background: none; border: 0; padding: 0; font: inherit; }
/* Verkauft/Archiv: Paketstatus steht schon in der Versand-Spalte; Aktionen untereinander, damit die Tabelle passt */
[data-inhalt="verkauft"] .karte-paket, [data-inhalt="archiv"] .karte-paket { display: none; }
.zeilen-aktionen.stapel { white-space: normal; width: 1%; }
.zeilen-aktionen.stapel .mini { display: block; margin: 0 0 2px auto; white-space: nowrap; }
/* Bestand/Im Verkauf: Hauptknöpfe oben, Bearbeiten/Löschen klein darunter - spart Breite */
.aktionen-oben, .aktionen-unten { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.aktionen-unten { gap: 0; margin-top: 2px; }
.aktionen-unten .mini { padding: 3px 7px; font-size: 12.5px; }
.sendung-mini { display: flex; gap: 6px; margin-top: 6px; }
.sendung-mini input { width: 190px; padding: 5px 9px; font-size: 13px; }
/* Umschalter Gekauft | Gezogen */
.umschalter { display: inline-flex; padding: 2px; gap: 2px; margin-bottom: 14px; background: var(--flaeche-3); border-radius: var(--radius-s); }
.umschalter input { position: absolute; opacity: 0; pointer-events: none; }
.umschalter span {
  display: block; padding: 5px 14px; border-radius: 4px; font-weight: 550; font-size: 13.5px;
  color: var(--leise); cursor: pointer; transition: background .15s, color .15s;
}
.umschalter input:checked + span { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1); }
.umschalter input:focus-visible + span { outline: 2px solid var(--marke); outline-offset: 2px; }
.ablage-status.fehler, .fehlertext { color: var(--schlecht); font-weight: 600; }
.kauf-form {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; margin-bottom: 28px; padding: 20px;
  background: var(--flaeche); border-radius: var(--radius); border: 1px solid var(--linie-stark); box-shadow: var(--schatten-2);
}
.kauf-form h2 { margin-top: 0; }
.vorschau img { width: 100%; border-radius: var(--radius-s); border: 1px solid var(--linie); }
.vorschau:empty { display: none; }
.kauf-form:has(.vorschau:empty) { grid-template-columns: 1fr; }
.karte-box {
  display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius-s); margin-bottom: 12px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}
.karte-box img { width: 70px; border-radius: 4px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .2)); }
.karte-box .badge { margin-top: 6px; }
#picker { margin-bottom: 14px; }
#picker summary { cursor: pointer; color: var(--marke); font-weight: 600; margin-bottom: 8px; }
#picker input { width: 100%; }
.picker-treffer { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 8px; max-height: 340px; overflow: auto; }
.picker-treffer button {
  display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; font-size: 12.5px; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 6px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.picker-treffer button:hover { border-color: var(--marke); background: var(--marke-hell); }
.picker-treffer img { width: 38px; border-radius: 3px; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; }
.feld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 550; color: var(--leise); }
.feld.breit { grid-column: 1 / -1; }
.feld input { font-weight: 400; }
.feld-schalter { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; padding-top: 20px; }
.kauf-gewinn { font-weight: 650; font-size: 15px; margin: 14px 0 0; }
.kauf-gewinn.plus { color: var(--gut); }
.kauf-gewinn.minus { color: var(--schlecht); }
.zeilen-aktionen { white-space: nowrap; text-align: right; }
.datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chips button {
  font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; border: 1px solid var(--linie-stark);
  background: var(--flaeche); color: var(--text); border-radius: var(--radius-s); padding: 4px 10px;
}
.chips button:hover { border-color: var(--marke); color: var(--marke); }
dialog {
  border: 1px solid var(--linie); border-radius: 12px; padding: 24px; width: min(500px, 92vw);
  background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-2);
}
dialog::backdrop { background: rgba(17, 24, 39, .45); }
dialog h2 { margin-top: 0; }
@media (max-width: 860px) { .kauf-form { grid-template-columns: 1fr; } }

/* ---------- Volumen ---------- */
.volumen-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.einstufung { font-size: 12px; padding: 2px 9px; }
.einstufung-sehr-hoch, .einstufung-hoch { background: var(--gut-hell); color: var(--gut); }
.einstufung-mittel { background: var(--warn-hell); color: var(--warn); }
.einstufung-niedrig { background: var(--flaeche-3); color: var(--leise); }
.unter-titel { font-size: 15px; margin: 24px 0 10px; }
.volumen-hilfe { align-self: center; }
.kennzahl-text { font-size: 19px !important; }
.anleitung { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; }
.anleitung summary { cursor: pointer; font-weight: 600; }
.anleitung ol { margin: 10px 0 6px; padding-left: 22px; display: grid; gap: 6px; }
/* Wochen-Diagramm: eine Datenreihe, Säulen max. 24 px, oben 4 px gerundet, Wert nur an Höchstwert und letzter Woche */
.wochen-diagramm { margin: 16px 0 0; padding: 16px 18px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.wochen-diagramm figcaption { font-weight: 600; margin-bottom: 16px; }
.wochen-diagramm figcaption .leise { font-weight: 500; font-size: 13px; margin-left: 6px; }
.saeulen {
  display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; align-items: end;
  height: 150px; border-bottom: 1px solid var(--linie-stark);
}
.saeule-slot {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border-radius: 4px 4px 0 0; outline: none;
}
.saeule-slot:hover, .saeule-slot:focus-visible { background: var(--flaeche-2); }
.saeule { width: min(24px, 70%); background: var(--marke); border-radius: 4px 4px 0 0; }
.saeule-wert { font-size: 12px; font-weight: 650; color: var(--text); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.vor-erfassung { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--linie) 6px 7px); }
.saeule-slot::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--text); color: var(--bg); padding: 5px 9px; border-radius: var(--radius-s);
  font-size: 12.5px; font-weight: 550; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5;
}
.saeule-slot:nth-child(-n+3)::after { left: 0; transform: none; }
.saeule-slot:nth-last-child(-n+3)::after { left: auto; right: 0; transform: none; }
.saeule-slot:hover::after, .saeule-slot:focus-visible::after { opacity: 1; }
.saeulen-achse { display: flex; justify-content: space-between; color: var(--leise); font-size: 12px; margin-top: 6px; }

/* ---------- Übernahme von eBay, Zustand, Preistrend, Sicherung ---------- */
.hinweis.fehler { background: var(--schlecht-hell); border-color: color-mix(in srgb, var(--schlecht) 30%, transparent); }
.tabelle tbody tr.import-treffer { background: var(--marke-hell); box-shadow: inset 3px 0 0 var(--marke); }
.zustand-hinweis { color: var(--warn); font-weight: 550; }
.trend { font-weight: 600; white-space: nowrap; }
.preis-kachel small.trend { display: block; font-size: 12.5px; margin-top: 2px; }
.trend-hoch { color: var(--gut); }
.trend-runter { color: var(--schlecht); }
.sicherung { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- Lieferungen ---------- */
.lieferung-form { padding: 20px; margin-bottom: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.lieferung-form h2 { margin-top: 0; }
.lieferung-form select { width: 100%; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.lieferung-unterwegs { background: var(--marke-hell); color: var(--marke); }
.lieferung-zustellung, .lieferung-abholbereit { background: var(--warn-hell); color: var(--warn); }
.lieferung-zugestellt { background: var(--gut-hell); color: var(--gut); }
.lieferung-problem { background: var(--schlecht-hell); color: var(--schlecht); }
.lieferung-angekuendigt, .lieferung-unbekannt, .lieferung-manuell { background: var(--flaeche-3); color: var(--leise); }
.richtung { margin-top: 4px; white-space: nowrap; }
.tabelle.lieferungen td { vertical-align: top; }
.verlauf summary { cursor: pointer; color: var(--marke); margin-top: 4px; }
.verlauf ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; }
.dienst-wahl { max-width: 175px; }

/* ---------- Karte zuordnen ---------- */
.zuordnen-titel { font-size: 16.5px; margin: 2px 0 10px; }
.kandidaten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 8px; }
.kandidat {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-s);
  background: var(--flaeche); border: 1px solid var(--linie);
}
.kandidat img, .kandidat .platzhalter { width: 60px; border-radius: 4px; flex: none; }
.kandidat .knopf { margin-top: 8px; }
#karten-suche { width: 100%; }

/* ---------- Übersicht (Startseite) ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 22px 24px; margin-bottom: 18px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie);
}
.hero h1 { margin: 2px 0 4px; font-size: 24px; }
.hero-datum { margin: 0; color: var(--leise); font-weight: 550; font-size: 12.5px; }
.hero-satz { margin: 0; font-size: 14.5px; color: var(--leise); max-width: 640px; }
.hero-satz strong { color: var(--text); font-weight: 650; }
.hero-aktionen { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 720px; justify-self: end; }
.hero-suche { display: flex; gap: 8px; }
.hero-suche input { flex: 1; min-width: 0; }
.schnell { display: flex; flex-wrap: wrap; gap: 6px; }
.schnell a {
  font-size: 13px; font-weight: 550; color: var(--text); padding: 4px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--linie-stark); transition: background .15s;
}
.schnell a:hover { text-decoration: none; background: var(--flaeche-3); }
.wert-plus, .hero-satz strong.wert-plus { color: var(--gut); }
.wert-minus, .hero-satz strong.wert-minus { color: var(--schlecht); }

.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.fenster {
  grid-column: span 6; min-width: 0; display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px;
}
.fenster.breit-7 { grid-column: span 7; }
.fenster.breit-5 { grid-column: span 5; }
.fenster.breit-4 { grid-column: span 4; }
.fenster-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.fenster-kopf h2 { margin: 0; font-size: 15px; font-weight: 650; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Countdown bis zur nächsten Suche des Deal-Alarms */
.takt {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border: 1px solid var(--linie);
  border-radius: 999px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.takt-ring { width: 18px; height: 18px; transform: rotate(-90deg); flex: none; }
.takt-ring circle { fill: none; stroke-width: 2.5; }
.takt-spur { stroke: var(--linie); }
.takt-fortschritt { stroke: var(--marke); stroke-dasharray: 43.98; stroke-dashoffset: 43.98; stroke-linecap: round;
  transition: stroke-dashoffset .9s linear; }
.takt.sucht .takt-fortschritt { stroke-dasharray: 11 33; }
.takt.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.takt.warn .takt-fortschritt, .takt.aus .takt-fortschritt { stroke-dashoffset: 43.98; }
.takt.aus { color: var(--leise); }
@media (prefers-reduced-motion: no-preference) {
  .takt.sucht .takt-ring { animation: takt-drehen 1s linear infinite; }
}
@keyframes takt-drehen { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.fenster-icon { display: none; }
.fenster-unter { margin: 0 0 12px; color: var(--leise); font-size: 12.5px; }
.fenster-leer { margin: 6px 0; padding: 16px; border-radius: var(--radius-s); background: var(--flaeche-2); color: var(--leise); font-size: 13px; }
.fenster-leer strong { color: var(--text); }
.fenster-fuss { margin-top: auto; padding-top: 12px; font-weight: 550; font-size: 13px; align-self: flex-start; }
.zaehler {
  font-size: 11.5px; font-weight: 600; min-width: 22px; padding: 0 6px; border-radius: 4px; text-align: center;
  background: var(--flaeche-3); color: var(--leise);
}
.mini-reiter { display: flex; gap: 2px; padding: 2px; background: var(--flaeche-3); border-radius: var(--radius-s); }
.mini-reiter button {
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--leise); background: none; border: 0;
  border-radius: 4px; padding: 3px 9px; cursor: pointer; white-space: nowrap;
}
.mini-reiter button:hover { color: var(--text); }
.mini-reiter button[aria-selected="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1); }
.mini-reiter button:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }

/* kleine Karte (Bild) in Listen */
.mini-karte { flex: none; width: 32px; height: 44px; display: grid; place-items: center; }
.mini-karte img { width: 32px; height: 44px; object-fit: contain; border-radius: 2px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.mini-karte .platzhalter { padding: 0; border-radius: 3px; }
.mini-karte > span:not(.platzhalter) { font-size: 10px; color: var(--leise); text-align: center; line-height: 1.1; overflow: hidden; }

/* Listen in den Fenstern (Top-Karten, Bewegung, Nachfrage) */
.zeilen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.zeilen > li + li { border-top: 1px solid var(--linie); }
.zeile { display: flex; align-items: center; gap: 12px; padding: 7px 6px; color: var(--text); border-radius: var(--radius-s); }
.zeile:hover { background: var(--flaeche-2); text-decoration: none; }
.zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zeile-text strong { font-weight: 600; }
.zeile-text strong, .zeile-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-zahl { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeile-zahl strong, .zeile-zahl b { font-weight: 650; }
.rang { width: 16px; flex: none; text-align: center; font-weight: 600; font-size: 12.5px; color: var(--leise); font-variant-numeric: tabular-nums; }

/* Deals */
.deals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.deal {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border-radius: var(--radius-s); color: var(--text);
  border: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--gut); transition: background .15s, border-color .15s;
}
.deal:hover { text-decoration: none; background: var(--flaeche-2); border-color: var(--linie-stark); }
.deal.deal-neutral { box-shadow: none; }  /* Live-Feed: nur grüne Angebote bekommen den grünen Rand */
.deal.deal-auktion { box-shadow: inset 3px 0 0 var(--marke); }
.deal-text .zustand-hinweis { white-space: normal; }
.deal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.deal-titel { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-text .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-zahlen { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deal-gewinn { font-weight: 650; font-size: 13.5px; color: var(--gut); background: var(--gut-hell); padding: 1px 8px; border-radius: 4px; }
.deals-mehr { margin: 4px 2px 0; }
.deal-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -4px 0 10px; }
.filter-vorlagen { justify-content: flex-start; margin: 12px 0 4px; }
.filter-aus { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 12px; cursor: pointer; }
#filter-form input:disabled, .filter-vorlagen button:disabled { opacity: .5; cursor: not-allowed; }
.filter-beispiel { min-height: 2.6em; padding: 8px 10px; margin: 10px 0 12px; border-radius: var(--radius-s); background: var(--flaeche-2); }
.mini-statistik { margin: auto 0 0; padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-statistik div { padding: 9px 12px; border-radius: var(--radius-s); background: var(--flaeche-2); border: 1px solid var(--linie); }
.mini-statistik dt { color: var(--leise); font-size: 12px; font-weight: 550; }
.mini-statistik dd { margin: 1px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mini-statistik div:last-child dd { color: var(--gut); }

/* Zu erledigen */
.aufgaben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.aufgabe { display: flex; gap: 10px; padding: 9px 12px; border-radius: var(--radius-s); border: 1px solid var(--linie); line-height: 1.45; }
.aufgabe strong { font-size: 13.5px; font-weight: 600; }
.aufgabe .klein { font-size: 12px; }
.aufgabe-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--leise); }
.aufgabe-dringend { border-color: color-mix(in srgb, var(--schlecht) 35%, var(--linie)); background: var(--schlecht-hell); }
.aufgabe-dringend .aufgabe-punkt { background: var(--schlecht); }
.aufgabe-normal .aufgabe-punkt { background: var(--warn); }
.aufgabe-info .aufgabe-punkt { background: var(--marke); }
.aufgabe-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 3px; font-size: 12.5px; font-weight: 550; }
.alles-erledigt { padding: 14px 16px; border-radius: var(--radius-s); background: var(--gut-hell); color: var(--gut); font-weight: 550; }

/* Markt-Radar */
.radar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.radar-kachel {
  display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--radius-s); color: var(--text);
  border: 1px solid var(--linie); transition: background .15s, border-color .15s;
}
.radar-kachel:hover { text-decoration: none; background: var(--flaeche-2); border-color: var(--linie-stark); }
.radar-kachel .mini-karte, .radar-kachel .mini-karte img { width: 40px; height: 56px; }
.radar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.radar-text > strong { font-weight: 600; }
.radar-text > strong, .radar-text > .klein { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-zahlen { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.radar-zahlen b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.radar-text .badge { margin-top: 3px; }

/* Lieferungen */
.pakete { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pakete > li + li { border-top: 1px solid var(--linie); }
.paket { display: flex; align-items: center; gap: 12px; padding: 8px 4px; min-width: 0; }
.paket .badge { flex: none; min-width: 92px; justify-content: center; }
.paket-link { font-size: 13px; font-weight: 550; white-space: nowrap; }

/* Status */
.system { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13px; }
.system dt { color: var(--leise); }
.system dd { margin: 0; font-weight: 550; display: flex; align-items: baseline; gap: 7px; }
.punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--leise); transform: translateY(-1px); }
.punkt.ok { background: var(--gut); }
.punkt.warn { background: var(--warn); }
.punkt.fehler { background: var(--schlecht); }
.punkt.laeuft { background: var(--marke); animation: puls 1.2s infinite; }

/* Diagramme (Lagerwert, Gewinn pro Monat): eine Datenreihe, Linie 2 px, Säulen 4 px gerundet */
.diagramm { position: relative; min-height: 120px; }
.diagramm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagramm-svg .gitter { stroke: var(--linie); stroke-width: 1; }
.diagramm-svg .grundlinie { stroke: var(--linie-stark); stroke-width: 1; }
.diagramm-svg .achse { fill: var(--leise); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.diagramm-svg .wert { fill: var(--text); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.diagramm-svg .linie { fill: none; stroke: var(--marke); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm-svg .flaeche { fill: var(--marke); opacity: .08; }
.diagramm-svg .marke { fill: var(--marke); stroke: var(--flaeche); stroke-width: 2; }
.diagramm-svg .kreuz { stroke: var(--linie-stark); stroke-width: 1; stroke-dasharray: 3 3; }
.diagramm-svg .saeule-plus { fill: var(--gut); }
.diagramm-svg .saeule-minus { fill: var(--schlecht); }
.diagramm-svg .ziel { fill: transparent; outline: none; }
.diagramm-svg .ziel:hover, .diagramm-svg .ziel:focus-visible { fill: var(--flaeche-2); }
.diagramm-hinweis { margin: 6px 0 0; }
.tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; font-size: 12.5px; line-height: 1.45;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie-stark); border-radius: var(--radius-s);
  padding: 6px 10px; box-shadow: var(--schatten-2);
}
.tip .leise { color: var(--leise); }

@media (max-width: 1100px) {
  .fenster.breit-7, .fenster.breit-5 { grid-column: span 12; }
  .fenster.breit-4 { grid-column: span 6; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 18px; }
}
@media (max-width: 720px) {
  .fenster, .fenster.breit-4 { grid-column: span 12; }
}

/* ---------- Anzeige erstellen ---------- */
.anzeige-raster { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px; align-items: start; }
.anzeige-raster > .fenster { grid-column: auto; }  /* nicht die Spaltenbreite der Übersicht übernehmen */
.anzeige-raster h2 { font-size: 15px; margin-bottom: 12px; }
.anzeige-schritt { margin-top: 22px; }
.gewaehlt {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius-s);
  background: var(--marke-hell); border: 1px solid color-mix(in srgb, var(--marke) 30%, transparent);
}
.mini-karte.gross, .mini-karte.gross img { width: 50px; height: 70px; }
#anzeige-suche { width: 100%; }
.auswahl-titel { margin: 12px 0 4px; }
.auswahl-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; max-height: 330px; overflow: auto; }
.auswahl {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: var(--radius-s); padding: 5px 8px; cursor: pointer;
}
.auswahl:hover { background: var(--flaeche-2); }
.auswahl.aktiv { border-color: color-mix(in srgb, var(--marke) 40%, transparent); background: var(--marke-hell); }
.auswahl .zeile-zahl { align-items: flex-end; gap: 2px; }
#anzeige-form .feld-schalter.breit { padding-top: 0; }
#anzeige-form select:disabled { opacity: .5; }
.ergebnis-block { margin-bottom: 18px; }
.block-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.block-kopf strong { font-weight: 600; }
.block-kopf .knopf { margin-left: auto; }
#titel { width: 100%; font-weight: 600; }
#beschreibung { width: 100%; resize: vertical; font-size: 13.5px; line-height: 1.55; }
.merkmale {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 18px; margin: 0; padding: 12px 14px;
  border-radius: var(--radius-s); background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 13px;
}
.merkmale dt { color: var(--leise); }
.merkmale dd { margin: 0; font-weight: 550; }
.preis-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.preis-gross { font-size: 24px; font-weight: 650; letter-spacing: -.01em; margin-right: 2px; font-variant-numeric: tabular-nums; }
#preis > * + * { margin-top: 4px; }
.preis-regeln { margin-top: 8px !important; padding: 8px 12px; border-radius: var(--radius-s); background: var(--flaeche-2); border: 1px solid var(--linie); }
@media (max-width: 1000px) { .anzeige-raster { grid-template-columns: 1fr; } }

/* ---------- Foto-Suche ---------- */
.foto-fenster { margin-bottom: 26px; }
.abschnitt-titel { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.foto-fenster h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.foto-raster { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.foto-ablage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px;
  padding: 14px; border: 1.5px dashed var(--linie-stark); border-radius: var(--radius-s); background: var(--flaeche-2);
  color: var(--leise); font-size: 13px; text-align: center; cursor: pointer;
}
.foto-ablage:hover, .foto-ablage.ziehen { border-color: var(--marke); color: var(--text); }
.foto-ablage:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.foto-ablage strong { color: var(--marke); font-weight: 600; }
.foto-vorschau { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 4px; }
.foto-ergebnis:empty { display: none; }
.foto-treffer { display: flex; gap: 14px; align-items: center; }
.foto-treffer .zeile-text { gap: 2px; }
.foto-treffer .zeile-zahl { align-items: flex-end; }
.foto-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.foto-links .knopf:hover { text-decoration: none; }
.foto-angebote { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.foto-angebote li { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--linie); }
.foto-angebote li:last-child { border-bottom: 0; }
.foto-angebote a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.foto-angebote .zahl { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.foto-weitere { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.foto-weitere-karte {
  display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--linie);
  border-radius: var(--radius-s); color: var(--text);
}
.foto-weitere-karte:hover { text-decoration: none; background: var(--flaeche-2); }
.anzeige-links .foto-ablage { min-height: 0; flex-direction: row; padding: 10px 12px; margin-top: 8px; }
.anzeige-links .foto-vorschau { max-height: 56px; }
@media (max-width: 700px) { .foto-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- eBay-Konto ---------- */
.konto-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.konto-raster > .fenster { grid-column: auto; }
.konto-raster h2 { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.konto-status { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--radius-s);
  background: var(--flaeche-2); border: 1px solid var(--linie); }
.konto-status.verbunden { background: var(--gut-hell); border-color: color-mix(in srgb, var(--gut) 30%, transparent); }
.konto-status.verbunden strong { color: var(--gut); }
.schritte { margin: 0; padding-left: 20px; display: grid; gap: 18px; }
.schritte > li > strong { display: block; margin-bottom: 4px; }
.schritte > li.erledigt > strong::after { content: " ✓"; color: var(--gut); }
.schritte details { margin: 4px 0 10px; }
.schritte details ol { padding-left: 18px; display: grid; gap: 8px; margin: 8px 0 0; }
.schritte .merkmale { margin-top: 6px; }
.schritte code { word-break: break-all; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.inline-form input[type=text] { flex: 1 1 260px; min-width: 0; }
.konto-liste { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 10px; font-size: 13.5px; }
.kopierbar { cursor: copy; }
.datenschutz { margin: 4px 0 10px; }
.datenschutz ol { padding-left: 18px; display: grid; gap: 6px; margin: 8px 0; }
.datenschutz-text { white-space: pre-wrap; font-family: inherit; font-size: 12.5px; line-height: 1.55; background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--radius-s); padding: 10px 12px; margin: 0; max-height: 260px; overflow: auto; }
.kopierbar.kopiert { outline: 1px solid var(--gut); }
@media (max-width: 1000px) { .konto-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- eBay-Zentrale: Reiter, Postfach, Verkäufe, Käufe, Angebote ---------- */
.ebay-reiter a {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 550; font-size: 14px; color: var(--leise);
  border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 12px; white-space: nowrap;
}
.ebay-reiter a:hover { color: var(--text); text-decoration: none; }
.ebay-reiter a[aria-current="page"] { color: var(--text); border-bottom-color: var(--marke); }
.ebay-reiter + .hinweis { margin-top: -4px; }
.neu-verbinden { margin: 4px 0 12px; }

.postfach { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.postfach > .fenster { grid-column: auto; }
.postfach-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.postfach-kopf select { padding: 5px 9px; font-size: 13px; }
.postfach-kopf .knopf { margin-left: auto; }
.unterhaltungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: calc(100vh - 300px); min-height: 200px; overflow: auto; }
.unterhaltung {
  position: relative; display: grid; gap: 1px; width: 100%; text-align: left; font: inherit; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: var(--radius-s); padding: 8px 10px; cursor: pointer;
}
.unterhaltung:hover { background: var(--flaeche-2); }
.unterhaltung.aktiv { border-color: color-mix(in srgb, var(--marke) 40%, transparent); background: var(--marke-hell); }
.unterhaltung-kopf { display: flex; justify-content: space-between; gap: 8px; }
.unterhaltung-kopf strong { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unterhaltung.ungelesen .unterhaltung-kopf strong, .unterhaltung.ungelesen .unterhaltung-titel { font-weight: 700; }
.unterhaltung-titel, .unterhaltung-vorschau { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 26px; }
.unterhaltung-titel { font-size: 13.5px; }
.unterhaltung .reiter-anzahl { position: absolute; right: 10px; bottom: 9px; }
.postfach-verlauf { min-height: 360px; }
.verlauf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--linie); }
.verlauf-titel { display: grid; flex: 1 1 220px; min-width: 0; }
.verlauf-titel strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlauf-links { display: flex; flex-wrap: wrap; gap: 2px; }
.nur-schmal { display: none; }
.nachrichten { display: grid; gap: 10px; align-content: start; max-height: calc(100vh - 420px); min-height: 160px; overflow: auto; padding: 2px 2px 8px; }
.nachricht { max-width: 82%; justify-self: start; display: grid; gap: 3px; padding: 9px 12px; border-radius: 10px;
  background: var(--flaeche-3); border: 1px solid var(--linie); }
.nachricht.eigene { justify-self: end; background: var(--marke-hell); border-color: color-mix(in srgb, var(--marke) 25%, transparent); }
.nachricht-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.antwort { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
.antwort textarea, .neu-nachricht textarea { width: 100%; resize: vertical; }
.antwort-werkzeuge, .antwort-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.antwort-werkzeuge select { padding: 5px 9px; font-size: 13px; max-width: 70%; }
.neu-nachricht { display: grid; gap: 10px; }
.postfach-sperre strong { display: block; color: var(--text); margin-bottom: 4px; }

.ebay-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ebay-karte {
  display: grid; gap: 6px; align-content: start; padding: 14px 16px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); transition: opacity .2s;
}
.ebay-karte.dringend { box-shadow: inset 3px 0 0 var(--warn); }
.ebay-karte.erledigt, tr.erledigt, .bewertungen li.erledigt { opacity: .55; }
.ebay-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ebay-karte-kopf strong { font-weight: 600; line-height: 1.35; }
.ebay-karte-kopf .badge { flex: none; }
.kaeufer-nachricht { margin: 2px 0; padding: 8px 12px; border-left: 3px solid var(--linie-stark); background: var(--flaeche-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0; white-space: pre-wrap; font-size: 13.5px; }
.ebay-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.gegen { display: inline-flex; gap: 6px; align-items: center; }
.gegen .zahl { width: 92px; padding: 5px 8px; }
.ebay-nachricht { width: 100%; padding: 6px 10px; font-size: 13px; }
.ebay-status { margin: 0; min-height: 0; }
.ebay-status:empty { display: none; }
.adresse summary { cursor: pointer; color: var(--marke); font-weight: 550; font-size: 13.5px; }
.adresse-text { margin: 6px 0; padding: 10px 12px; background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--radius-s); font: 14px/1.5 inherit; white-space: pre-wrap; }
.bewertungen { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.bewertungen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 10px 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); transition: opacity .2s; }
.bewertungen li > .ebay-status { grid-column: 1 / -1; }
.bewertung-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.bewertung-form input[type=text] { width: 440px; max-width: 100%; padding: 6px 10px; font-size: 13px; }
.bewertung-form select { padding: 6px 9px; font-size: 13px; }
.ebay-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.ebay-raster > .fenster { grid-column: auto; }
.lager-abgleich { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -6px 0 18px; font-size: 13.5px; color: var(--leise); }
.von-ebay-liste li.erledigt { opacity: .55; }
.tabelle.angebote-tabelle .treffer { max-width: 460px; }
.angebote-tabelle .treffer strong { white-space: normal; }
.preis-form { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.preis-form .zahl { width: 92px; padding: 5px 8px; }
@media (max-width: 860px) {
  /* Handy: Liste oder Unterhaltung, nicht beides */
  .postfach { grid-template-columns: minmax(0, 1fr); }
  .postfach.zeigt-rechts .postfach-liste, .postfach:not(.zeigt-rechts) .postfach-verlauf { display: none; }
  .nur-schmal { display: inline-flex; }
  .unterhaltungen { max-height: none; }
  .nachrichten { max-height: none; }
  .nachricht { max-width: 92%; }
  .bewertungen li { grid-template-columns: minmax(0, 1fr); }
  .bewertung-form { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .ebay-karten { grid-template-columns: minmax(0, 1fr); }
  .postfach-kopf .knopf { margin-left: 0; }
}

/* ---------- Website aufs Handy (QR-Code), Kein Zugang ---------- */
.handy-schritte > li > span { display: block; }
.handy-schritte code { word-break: normal; white-space: nowrap; }
.qr-box { width: max-content; max-width: 100%; margin: 4px 0 14px; padding: 8px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-s); }
.qr-box svg { display: block; width: 216px; height: auto; max-width: 100%; }
.qr-box.qr-blass { opacity: .35; }
.handy-link { word-break: break-all; }
.zugang-seite { max-width: 520px; }
.zugang-seite .logo { margin: 0 0 14px; }
.zugang-seite h1 { font-size: 21px; }
.zugang-seite ol { padding-left: 20px; display: grid; gap: 6px; }
.anmelden-form { display: grid; gap: 12px; margin-top: 16px; }
.anmelden-form input { width: 100%; }

/* ---------- Lager: von eBay geholt, Preis nachziehen ---------- */
.von-ebay { margin-bottom: 22px; }
.von-ebay h2 { margin: 0; font-size: 15px; font-weight: 650; }
.von-ebay-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; }
.von-ebay-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--linie); }
.von-ebay-liste .zuordnen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; grid-column: 1 / -1; }
.von-ebay-liste select { max-width: 100%; min-width: 0; flex: 1 1 260px; }
.preis-vorschlag { margin-top: 4px; font-size: 12.5px; }
.preis-vorschlag .knopf { margin-top: 4px; }
.ebay-gemeldet { color: var(--gut); }

/* ---------- Anzeige: direkt einstellen ---------- */
.direkt-ablage { min-height: 0; padding: 12px; margin-bottom: 8px; }
.direkt-vorschau { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.direkt-vorschau:empty { display: none; }
.direkt-foto { position: relative; width: 72px; height: 96px; border-radius: var(--radius-s); overflow: hidden;
  border: 1px solid var(--linie); background: var(--flaeche-2); }
.direkt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.direkt-foto-weg { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.direkt-foto-weg:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }
#direkt .felder { margin-bottom: 6px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
#direkt select { width: 100%; min-width: 0; }
.direkt-status { margin-top: 10px; }
.direkt-status:empty { display: none; }
.direkt-hinweise { margin: 6px 0 0; padding-left: 18px; color: var(--leise); }

/* ---------- Handy und schmale Fenster ---------- */
/* Mittlere Breite: alle Links passen in eine Zeile, der Statustext nicht mehr - nur der Punkt (Details im Tooltip) */
@media (min-width: 1121px) and (max-width: 1340px) {
  .status-text { display: none; }
}
/* Kopfzeile: Menü-Knopf mit dem Namen der Seite, die Links klappen darunter auf (statt elf Links in zwei Zeilen) */
@media (max-width: 1120px) {
  .kopf-inner { padding-top: 8px; padding-bottom: 8px; gap: 8px 12px; min-height: 54px; }
  .status { order: 1; margin-left: auto; min-width: 0; }
  .status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menue-knopf {
    order: 2; display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 6px 12px;
    font: inherit; font-weight: 600; font-size: 14px; color: var(--text); cursor: pointer;
    background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius-s);
  }
  .menue-knopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
  .navi { order: 3; display: none; width: 100%; align-self: auto; padding: 2px 0 6px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; }
  .menue-offen .navi { display: grid; }
  .navi a { padding: 10px 12px; margin: 0; border: 0; border-radius: var(--radius-s); font-size: 15px; color: var(--text); }
  .navi a:hover { background: var(--flaeche-3); }
  .navi a.aktiv { background: var(--marke-hell); color: var(--marke); }
}
@media (max-width: 760px) {
  /* Tabellen mit vielen Spalten (Lager, Lieferungen ...): jede Zeile wird eine Karte, der Spaltenname steht über dem Wert.
     Zellen ohne data-label (Karte, Knöpfe) gehen über die ganze Breite. */
  .tabelle-rahmen:has(> .tabelle-karten) { background: none; border: 0; border-radius: 0; overflow: visible; }
  .tabelle-karten thead { display: none; }
  .tabelle-karten, .tabelle-karten tbody { display: block; }
  .tabelle-karten tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-bottom: 10px; padding: 12px 14px;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  }
  .tabelle-karten.tabelle tbody tr:hover { background: var(--flaeche); }
  .tabelle-karten.tabelle td { display: block; padding: 0; border: 0; min-width: 0; }
  .tabelle-karten.tabelle td:not([data-label]), .tabelle-karten.tabelle td.zelle-breit { grid-column: 1 / -1; }
  .tabelle-karten td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--leise);
  }
  .tabelle-karten.tabelle td.zahl-spalte, .tabelle-karten.tabelle td.zeilen-aktionen { text-align: left; white-space: normal; }
  .tabelle-karten.tabelle td.zeilen-aktionen { width: auto; padding-top: 10px; border-top: 1px solid var(--linie); }
  .tabelle-karten.tabelle td.zeilen-aktionen:empty { display: none; }
  .tabelle-karten .treffer { max-width: none; }
  .tabelle-karten .treffer strong { white-space: normal; }
  .tabelle-karten .aktionen-oben, .tabelle-karten .aktionen-unten { justify-content: flex-start; }
  .tabelle-karten .zeilen-aktionen.stapel { display: flex; flex-wrap: wrap; gap: 4px; }
  .tabelle-karten .zeilen-aktionen.stapel .mini { display: inline-block; margin: 0; }
  .tabelle-karten tr.versand-offen { box-shadow: inset 3px 0 0 var(--warn); }
  .tabelle.tabelle-karten tbody tr.versand-offen > td:first-child { box-shadow: none; }
  .tabelle-karten .versand-zelle { min-width: 0; }
  .sendung-mini input { width: auto; flex: 1 1 auto; min-width: 0; }
  .tabelle-karten .mono { overflow-wrap: anywhere; }
  .tabelle-karten.tabelle td.nur-breit { display: none; }
  .nur-handy { display: block; }
  .tabelle-karten.tabelle td.aktionen { text-align: left; }
  .tabelle-karten .aktionen a { margin: 0 16px 0 0; }
  .tabelle-karten.erkennung td:first-child { max-width: none; font-weight: 550; }
  /* Kartenseite: Bild nicht bildschirmfüllend, Kopieren-Knopf über dem Code statt darauf */
  .detail-bild { max-width: 240px; margin: 0 auto; }
  .code-box pre { padding-top: 50px; }
  .tabelle-karten.lieferungen td:first-child { display: flex; align-items: baseline; gap: 10px; }
  .tabelle-karten .richtung { margin-top: 0; }
}
@media (max-width: 640px) {
  .kopf-inner { padding-left: 16px; padding-right: 16px; }
  body { font-size: 14px; }
  h1 { font-size: 22px; }
  .inhalt { padding: 16px 16px 48px; }
  .seitenkopf { margin-bottom: 16px; }
  .unterzeile { font-size: 14px; }
  .abschnitt { margin-top: 28px; }
  /* iPhone zoomt in Eingabefelder unter 16 px hinein */
  input[type=search], input[type=number], input[type=text], input[type=date], input[type=url], select, textarea { font-size: 16px; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .werkzeugleiste { padding: 8px; gap: 8px; }
  .werkzeugleiste .rechts { margin-left: 0; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .kennzahl { padding: 11px 13px; }
  .kennzahl strong { font-size: 19px; }
  .kennzahl small { font-size: 12px; }
  dialog { padding: 18px 16px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  /* Übersicht: Deals, Neu auf eBay, Auktionen - Titel über zwei Zeilen, Zahlen darunter statt daneben */
  .fenster { padding: 14px 14px 16px; }
  .deal { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 5px; align-items: start; padding: 9px 10px; }
  .deal > .mini-karte { grid-row: 1 / span 2; }
  .deal-titel, .deal-text .klein {
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .deal-zahlen { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .mini-statistik { gap: 6px; }
  .mini-statistik div { padding: 8px 10px; }
  .mini-statistik dd { font-size: 16px; }
}
@media (max-width: 420px) {
  .status-text { display: none; }  /* nur der Punkt; Details stehen im Tooltip */
}
/* Finger statt Maus: größere Ziele für kleine Knöpfe */
@media (pointer: coarse) {
  .mini { padding: 8px 10px; }
  .knopf.klein { padding: 7px 12px; }
  .mini-reiter button { padding: 6px 10px; }
}