/* Anzeigen-Hunter – minimalistisch und hell.
   Wenig Farbe: Akzent nur dort, wo eine Zahl eine Entscheidung trägt. */

:root {
  --grund: #fbfbfa;
  --flaeche: #ffffff;
  --linie: #e8e6e1;
  --linie-zart: #f2f0ec;
  --text: #1c1b19;
  --text-leise: #6b6862;
  --text-zart: #9b978f;

  --gut: #2f7d4f;
  --gut-flaeche: #eef6f0;
  --warnung: #9a6414;
  --warnung-flaeche: #fbf4e7;
  --schlecht: #a33a2c;
  --schlecht-flaeche: #fbeeec;
  /* Sehr wertvolles Zubehör dabei. Eigene Farbe statt `--warnung`: Das
     Bernsteinbraun daneben heißt „Vorsicht", und genau das soll ein teures
     Objektiv nicht sagen. Ein wärmeres Gold, deutlich von beidem abgesetzt. */
  --wertvoll: #8a6a12;
  --wertvoll-flaeche: #fdf7e3;
  --wertvoll-linie: #e7d49a;
  --akzent: #1c1b19;

  --radius: 10px;
  --schatten: 0 1px 2px rgba(28, 27, 25, 0.05);
  --leiste: 58px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

/* ---------- Kopf ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 251, 250, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  padding: 14px 16px calc(14px + env(safe-area-inset-top));
  padding-top: max(14px, env(safe-area-inset-top));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

h1 {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.kopf-notiz { font-size: 13px; color: var(--text-zart); }

/* ---------- Inhalt ---------- */

main { padding: 16px; max-width: 780px; margin: 0 auto; }

section[hidden] { display: none !important; }

h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-zart);
  margin: 28px 0 10px;
}
h2:first-child { margin-top: 0; }

/* ---------- Karten ---------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: 10px;
  overflow: hidden;
}

.karte-klickbar { cursor: pointer; transition: border-color 0.15s; }
.karte-klickbar:active { border-color: var(--text-zart); }

.treffer { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }

.treffer img {
  width: 74px;
  height: 74px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--linie-zart);
  flex-shrink: 0;
}

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

.treffer-titel {
  font-weight: 550;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.treffer-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-leise);
}

.preis { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Merkmale ---------- */

.marke {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.marke-gut { background: var(--gut-flaeche); color: var(--gut); }
.marke-mittel { background: var(--warnung-flaeche); color: var(--warnung); }
.marke-schlecht { background: var(--schlecht-flaeche); color: var(--schlecht); }
.marke-leise { background: var(--linie-zart); color: var(--text-leise); }

/* ---------- Zahlen ---------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.zahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; }
.zahl-wert { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zahl-name { font-size: 12px; color: var(--text-zart); margin-top: 2px; }
.wert-gut { color: var(--gut); }
.wert-schlecht { color: var(--schlecht); }

/* ---------- Formular ---------- */

label { display: block; font-size: 13px; color: var(--text-leise); margin: 12px 0 5px; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* verhindert Zoom beim Tippen unter iOS */
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--text-zart);
}
textarea { resize: vertical; min-height: 76px; }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

button {
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
}
button:active { background: var(--linie-zart); }

.knopf-haupt { background: var(--akzent); color: #fff; border-color: var(--akzent); width: 100%; margin-top: 16px; }
.knopf-haupt:active { opacity: 0.85; background: var(--akzent); }
.knopf-klein { padding: 6px 11px; font-size: 13px; }
.knopf-warnung { color: var(--schlecht); border-color: #e8c9c4; }

.knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Fußleiste ---------- */

nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  background: rgba(251, 251, 250, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}

nav button {
  flex: 1;
  min-width: 0; /* fünf Reiter müssen auch auf schmale Geräte passen */
  border: none;
  background: none;
  border-radius: 0;
  padding: 9px 2px 11px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-zart);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
}
nav button.aktiv { color: var(--text); }
nav button svg { width: 21px; height: 21px; stroke-width: 1.6; }

/* ---------- Zustände ---------- */

.leer { text-align: center; padding: 56px 24px; color: var(--text-zart); }
.leer-gross { font-size: 15px; color: var(--text-leise); margin-bottom: 4px; }

.hinweis {
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.hinweis-warnung { background: var(--warnung-flaeche); color: var(--warnung); }
.hinweis-fehler { background: var(--schlecht-flaeche); color: var(--schlecht); }
.hinweis-leise { background: var(--linie-zart); color: var(--text-leise); }

/* ---------- Detailblatt ---------- */

.blatt-grund {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 25, 0.28);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Der Rahmen trägt ✕ und das Ziehen – siehe `blattZeigen`. */
.blatt-rahmen {
  position: relative;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.blatt-zu-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--linie-zart);
  color: var(--text-leise);
  font-size: 15px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}
.blatt-zu-x:active { background: var(--linie); color: var(--text); }

.blatt h3:first-of-type { padding-right: 40px; }

.blatt {
  background: var(--flaeche);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overscroll-behavior: contain;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
  animation: hoch 0.22s ease-out;
}
@keyframes hoch { from { transform: translateY(20px); opacity: 0.6; } }

.blatt-griff {
  width: 40px; height: 5px;
  background: var(--linie);
  border-radius: 3px;
  margin: -6px auto 16px;
}

.blatt h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; line-height: 1.35; }

.blatt-bilder { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px 14px; padding: 0 18px 2px; }
.blatt-bilder img { height: 150px; border-radius: 8px; flex-shrink: 0; }

.paar { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linie-zart); font-size: 14px; }
.paar:last-child { border-bottom: none; }
.paar dt { color: var(--text-leise); flex-shrink: 0; }
.paar dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.fliesstext { font-size: 14px; line-height: 1.55; color: var(--text-leise); white-space: pre-wrap; }

ul.gegen { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-leise); }
ul.gegen li { margin-bottom: 3px; }

/* ---------- Anmeldung ---------- */

.anmeldung { max-width: 340px; margin: 18vh auto 0; padding: 0 20px; text-align: center; }
.anmeldung h1 { font-size: 22px; margin-bottom: 6px; }
.anmeldung p { color: var(--text-zart); font-size: 14px; margin: 0 0 22px; }

/* ---------- Desktop ---------- */

@media (min-width: 720px) {
  body { padding-bottom: 0; padding-left: 190px; }
  nav {
    top: 0; bottom: 0; right: auto;
    width: 190px;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--linie);
    padding-top: 68px;
  }
  nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: 11px; padding: 11px 18px; font-size: 14px; }
  header { padding-left: 206px; }
  .blatt-grund { align-items: center; }
  .blatt { border-radius: 14px; max-height: 84vh; }
}

/* ---------- Trefferliste: Werkzeugleiste und Aktionen ---------- */

.werkzeuge {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.werkzeuge select,
.werkzeuge input {
  width: auto;
  flex: 0 1 auto;
  padding: 7px 9px;
  font-size: 14px;
}
.werkzeuge input[type="search"] { flex: 1 1 150px; min-width: 130px; }

/* Symbolknöpfe in der Trefferzeile */
.sym-reihe { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

.sym {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 7px;
  background: var(--flaeche);
  color: var(--text-leise);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sym svg { width: 15px; height: 15px; stroke-width: 1.9; }
.sym:active { background: var(--linie-zart); }
.sym-gut:active { border-color: var(--gut); color: var(--gut); }
.sym-schlecht:active { border-color: var(--schlecht); color: var(--schlecht); }
.sym.gewaehlt { background: var(--akzent); color: #fff; border-color: var(--akzent); }

/* Auswahlmodus für Sammelaktionen */
.treffer-auswahl {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--akzent);
}

.sammelleiste {
  position: sticky;
  top: 58px;
  z-index: 15;
  background: var(--akzent);
  color: #fff;
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.sammelleiste button {
  padding: 5px 10px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.sammelleiste button:active { background: rgba(255, 255, 255, 0.28); }

/* Merkmalzeile mit allen Zahlen auf einen Blick */
.fakten {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--text-zart);
  margin-top: 4px;
}

/* „Hier ist ein gutes Objektiv verbaut."
 *
 * Eigene Zeile statt einer weiteren Marke in der Faktenzeile: Dort steht sie
 * zwischen Auftragsname, Alter und Fundzeit und geht unter. Beim Flip
 * entscheidet das mitgelieferte Objektiv oft ueber den Gewinn - das darf man
 * beim Durchblaettern nicht uebersehen.
 *
 * Ruhig gehalten, wie der Rest der Oberflaeche: eine Farbe, kein Rahmen,
 * keine Grossbuchstaben. Auffaellig wird sie durch die eigene Zeile. */
.beigabe {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wertvoll);
  line-height: 1.35;
}

/* ---------- Konsole ---------- */

.konsole-zeile {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie-zart);
  font-size: 13px;
  align-items: flex-start;
}
.konsole-zeile:last-child { border-bottom: none; }

.konsole-zeit {
  color: var(--text-zart);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.konsole-text { min-width: 0; flex: 1; }
.konsole-meldung { word-break: break-word; }
.konsole-quelle { font-size: 11px; color: var(--text-zart); margin-top: 2px; }
.konsole-spur {
  margin-top: 6px;
  padding: 8px;
  background: var(--linie-zart);
  border-radius: 6px;
  font: 11px/1.45 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 190px;
  overflow-y: auto;
}

.ampel {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ampel-ok { background: var(--gut); }
.ampel-warnung { background: var(--warnung); }
.ampel-fehler { background: var(--schlecht); }

/* ---------- Aufgaben-Ketten ---------- */

.schritt {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--flaeche);
}
.schritt-nr {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--linie-zart);
  color: var(--text-leise);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.schritt select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; }

/* ---------------------------------------------------------------- Preisalarm

   Die auffälligste Marke der Trefferliste – sie sagt, wie weit unter dem
   beobachteten Markt ein Angebot liegt. Bewusst kräftiger als der Score:
   diese Zahl ist gerechnet, nicht geschätzt. */

.marke-alarm {
  background: var(--gut);
  color: #fff;
  font-weight: 600;
}

.karte-alarm {
  border-left: 3px solid var(--gut);
}

/* Sehr teures Objektiv dabei – vom Nutzer gewünscht: „eine farbliche
   Untermalung und eben ganz oben". Die Fläche färbt die ganze Karte, damit
   sie beim Durchscrollen sofort auffällt; der Rand hält sie auch dann
   erkennbar, wenn sie zugleich ein Preisalarm ist (steht deshalb dahinter). */
.karte-objektiv {
  background: var(--wertvoll-flaeche);
  border-color: var(--wertvoll-linie);
  border-left: 3px solid var(--wertvoll);
}

/* ------------------------------------------------------------ Listenfuß */

.listen-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 4px;
  font-size: 12px;
  color: var(--text-zart);
}

/* -------------------------------------------------------- Aktiver Filter */

.knopf-aktiv {
  background: var(--text);
  color: var(--flaeche);
  border-color: var(--text);
}

/* ------------------------------------------------- Systemcheck / Modelle */

.check-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie-zart);
}

.check-zeile:last-child { border-bottom: none; }
.check-zeile .ampel { margin-top: 5px; flex-shrink: 0; }

.check-name { font-size: 13px; font-weight: 500; }

.check-info {
  font-size: 12px;
  color: var(--text-zart);
  line-height: 1.45;
  word-break: break-word;
}

.ampel-aus { background: var(--linie); }

/* ------------------------------------------------- Zustand der Anlage

   Die Selbstdiagnose. Was nicht in Ordnung ist, steht offen und farbig da;
   was in Ordnung ist, klappt zusammen. Sonst geht der eine rote Punkt
   zwischen elf grünen unter. */

.diagnose { padding: 13px; }
.diagnose-kopf { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.diagnose-kopf .zart { font-weight: 400; color: var(--text-zart); font-size: 12px; }
.diagnose-fehler { background: var(--schlecht-flaeche); border-color: var(--schlecht); }
.diagnose-warnung { background: var(--warnung-flaeche); }

.befund {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--linie-zart);
}
.befund .ampel { margin-top: 5px; flex-shrink: 0; }
.befund-titel { font-size: 13px; font-weight: 500; }
.befund-bereich { font-weight: 400; color: var(--text-zart); font-size: 11.5px; }
.befund-wert { font-size: 12.5px; margin-top: 1px; }
.befund-fehler .befund-wert { color: var(--schlecht); }
.befund-warnung .befund-wert { color: var(--warnung); }
.befund-text { font-size: 12px; color: var(--text-leise); line-height: 1.45; margin-top: 3px; word-break: break-word; }
.befund-rat { font-size: 12px; line-height: 1.45; margin-top: 4px; word-break: break-word; }
.befund-details { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--text-leise); line-height: 1.45; word-break: break-word; }

.diagnose-ok-liste > summary { font-size: 12px; color: var(--text-zart); cursor: pointer; padding-top: 8px; }

/* Punkt am Reiter „Steuerung“: Man soll es sehen, ohne hineinzugehen. */
nav button { position: relative; }
.nav-punkt {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--flaeche);
  box-sizing: content-box;
}
.nav-punkt.ampel-fehler { background: var(--schlecht); }
.nav-punkt.ampel-warnung { background: var(--warnung); }
@media (min-width: 720px) {
  .nav-punkt { position: static; margin-left: auto; border: none; }
}

/* --------------------------------------------------------- Preisverlauf

   Balken statt Diagrammbibliothek: die Seite hat keinen Bauschritt, und für
   ein Dutzend Monatswerte reicht das vollkommen. */

.verlauf {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 130px;
  margin: 10px 0 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.verlauf-saeule {
  flex: 1 0 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 34px;
}

.verlauf-balken {
  position: relative;
  width: 100%;
  background: var(--linie-zart);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}

.verlauf-median {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gut);
}

.verlauf-wert {
  font-size: 10px;
  color: var(--text-leise);
  margin-top: 3px;
}

.verlauf-monat {
  font-size: 10px;
  color: var(--text-zart);
}

/* ------------------------------------------------------------ Datenpunkte

   Die einzelnen Beobachtungen hinter der Preisstatistik. Kompakt, aber mit
   genug Kontext (Anzeigentitel, Datum, weggegangen oder nicht), um zu
   beurteilen, ob ein Punkt taugt. */

.punkt-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie-zart);
}

.punkt-zeile:last-of-type { border-bottom: none; }

.punkt-zeile .sym-reihe { flex-shrink: 0; }

.punkt-zeile .marke { margin-left: 6px; }

/* --------------------------------------------------- Rasterstufen bearbeiten

   Name, Faktor und die Übersetzung in Minuten nebeneinander. Der Faktor
   allein sagt niemandem etwas — erst „alle 6 Min / 60 Min / 6 Std" macht ihn
   greifbar. */

.stufe-zeile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
}

.stufe-zeile input {
  margin: 0;
  padding: 6px 8px;
  font-size: 13px;
}

.stufe-zeiten {
  font-size: 11px;
  color: var(--text-zart);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .stufe-zeiten { display: none; }
}

/* ------------------------------------------------------------- Ablauf

   Der ganze Weg einer Anzeige, von oben nach unten. Die kostenlosen
   Schritte sind grau, die mit einem Modell hervorgehoben — man soll auf
   einen Blick sehen, wo Geld und Zeit hingehen. */

.ablauf-schritt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie-zart);
}

.ablauf-schritt:last-child { border-bottom: none; }

.ablauf-nr {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--linie-zart);
  color: var(--text-leise);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.ablauf-ki .ablauf-nr {
  background: var(--gut-flaeche);
  color: var(--gut);
}

.ablauf-aus { opacity: 0.5; }

.ablauf-name {
  font-size: 13px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ablauf-was {
  font-size: 12px;
  color: var(--text-leise);
  line-height: 1.45;
  margin-top: 2px;
}

.ablauf-kette {
  font-size: 11px;
  color: var(--gut);
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.ablauf-schraube {
  font-size: 11px;
  color: var(--text-zart);
  margin-top: 3px;
}

.marke-ki {
  background: var(--gut-flaeche);
  color: var(--gut);
  font-size: 10px;
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------- Assistent

   Setzt sich sichtbar vom Formular ab: hier hilft etwas, hier gibt man
   nicht nur ein. */

.assistent-kasten {
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px;
  margin-top: 14px;
  background: var(--flaeche-zart, transparent);
}

.assistent-frage {
  padding: 9px 0;
  border-bottom: 1px solid var(--linie-zart);
}

.assistent-frage:last-child { border-bottom: none; }

.assistent-frei {
  margin-top: 6px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}

/* ------------------------------------------ Vorschläge des Assistenten */

/* Jeder Vorschlag einzeln bestätigbar. Vorher schrieb ein Knopf alles auf
   einmal in die Felder – und überschrieb dabei, was man selbst getippt
   hatte. Gerade bei Suchbegriffen ergänzt ein Vorschlag, er ersetzt nicht. */
.angebot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie-zart);
}

.angebot:last-of-type { border-bottom: none; }
.angebot button { flex-shrink: 0; }

/* --- Rückmeldung direkt in der Trefferzeile ---------------------------------
   Vom Nutzer am 04.09.2026: "Eigentlich gibt es nur 'Zu teuer', 'Zu
   schlechter Zustand', 'Falscher Artikel', daher können die Buttons auch kurz
   in die Treffer Liste kommen und die aus den Informationen entfernt."

   Als Wörter statt Symbolen: Diese drei Gründe lassen sich nicht zeichnen,
   ohne dass man raten muss. Sie stehen deshalb in einer eigenen Zeile unter
   dem Treffer – dort ist Platz für Text, und die Zeile darüber bleibt ruhig. */
.treffer-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 12px 11px;
}

.fb-knopf {
  font: inherit;
  font-size: 11.5px;
  line-height: 1;
  padding: 6px 9px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-leise);
  cursor: pointer;
  white-space: nowrap;
}

.fb-knopf:hover { border-color: var(--text-zart); color: var(--text); }

/* Nur eine leise Färbung: Die Knöpfe sollen die Zeile nicht anschreien –
   entschieden wird oben, hier wird nur weggeräumt. */
.fb-gut:hover    { border-color: var(--gut);    color: var(--gut); }
.fb-mittel:hover { border-color: var(--warnung); color: var(--warnung); }
.fb-schlecht:hover { border-color: var(--schlecht); color: var(--schlecht); }

.fb-knopf:disabled { opacity: .45; cursor: default; }

/* --- Steuerung in Bereichen -------------------------------------------------
   Vorher standen dort 21 Blöcke flach untereinander – von "Verbrauch" bis
   "Scan-Protokoll", alles gleich wichtig aussehend. Der Alltag spielt sich in
   den ersten beiden Bereichen ab; "KI" und "Technik" öffnet man selten, und
   die stehen deshalb zu. */
.s-gruppe {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  margin-bottom: 12px;
  padding: 0 13px;
}

.s-gruppe > summary {
  cursor: pointer;
  padding: 13px 0;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
}

.s-gruppe > summary::-webkit-details-marker { display: none; }

.s-gruppe > summary::after {
  content: '+';
  float: right;
  color: var(--text-zart);
  font-weight: 400;
}

.s-gruppe[open] > summary::after { content: '–'; }
.s-gruppe[open] > summary { border-bottom: 1px solid var(--linie-zart); }

/* Die erste Überschrift im Bereich braucht keinen doppelten Abstand. */
.s-gruppe > h2:first-of-type { margin-top: 14px; }
.s-gruppe > :last-child { margin-bottom: 14px; }

/* Grenze zwischen geprüften und noch wartenden Treffern.
 *
 * Die Liste ist nach Reife sortiert; ohne sichtbare Grenze sieht das nach
 * einer kaputten Sortierung aus. Bewusst leise: Es ist eine Auskunft, keine
 * Warnung. */
.listen-trenner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 2px 10px;
  font-size: 12px;
  color: var(--text-zart);
}
.listen-trenner::before,
.listen-trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie-zart);
}

/* Lernstand – zwei schlichte Zahlentabellen.
   Kein Raster, keine Streifen: Wer hier hinsieht, vergleicht Zeilen
   untereinander, und dafür reicht die rechtsbündige Zahlenspalte. */
.lern-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lern-tabelle th {
  text-align: left;
  font-weight: 550;
  font-size: 12px;
  color: var(--text-zart);
  padding: 0 0 6px;
}
.lern-tabelle th + th,
.lern-tabelle td + td { text-align: right; }
.lern-tabelle td {
  padding: 5px 0;
  border-top: 1px solid var(--linie-zart);
  color: var(--text-leise);
}
.lern-tabelle td + td {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.lern-tabelle .lern-warn { color: var(--warnung); font-weight: 550; }

/* Was der Chancenfilter wegnimmt – leise, aber lesbar.
   Bewusst keine Warnfarbe: Es ist kein Fehler, dass diese Zeilen fehlen,
   sondern der Sinn der Liste. Nur wissen soll man es. */
.chancen-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  background: var(--flaeche);
  font-size: 12.5px;
  color: var(--text-leise);
}

/* „Uninteressant" ist keine Beschwerde.
   Die drei Ablehnungsgründe färben rot, weil dort etwas nicht stimmte – am
   Preis, am Zustand, an der Zuordnung. Hier stimmt alles, es interessiert
   nur niemanden. Deshalb bewusst grau: Ein rotes „uninteressant" läse sich
   wie ein Fehler der Suche, und aus einem Fehler würde falsch gelernt. */
.fb-leise:hover { border-color: var(--text-zart); color: var(--text-leise); }

/* Links, die wie Knöpfe aussehen.

   Vom Nutzer am 12.09.2026: „Wenn ich auf einen Treffer von Kleinanzeigen
   gehe öffnet sich am Handy nicht direkt die Kleinanzeigen-App, sondern der
   Browser." Der Grund lag im JavaScript – die Ziele hingen an einem Knopf
   mit `window.open`, und das ist für das Handy eine Browser-Aktion, keine
   Navigation. Erst ein echter `<a href>` lässt Android und iOS die App des
   Anbieters übernehmen.

   Damit sich am Aussehen nichts ändert, erben diese Anker die Knopfregeln.
   `a` ist von Haus aus inline, deshalb hier ausdrücklich als Block bzw.
   Flex-Element – sonst säße die Schrift schief im Kasten. */
a.knopf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
a.knopf-link:active { background: var(--linie-zart); }
a.knopf-link.knopf-haupt {
  background: var(--akzent);
  color: #fff;
  border-color: var(--akzent);
  width: 100%;
  margin-top: 16px;
  box-sizing: border-box;
}
a.knopf-link.knopf-haupt:active { opacity: 0.85; background: var(--akzent); }
a.knopf-link.knopf-klein { padding: 6px 11px; font-size: 13px; }

/* Auch das Symbol-Ziel ist jetzt ein Anker statt eines Knopfes. */
a.sym { text-decoration: none; }

/* ======================================================= Trefferkarte (13.09.2026)

   Der Gewinn trägt die Entscheidung, also steht er groß. Preis und Wert
   klein darunter, damit man ihn nachvollziehen kann. Das Bild ist größer:
   Den Zustand prüft man mit den Augen, nicht mit dem Titel. */

.treffer-karte { position: relative; touch-action: pan-y; }

.tk-bild { position: relative; flex-shrink: 0; cursor: pointer; }
.tk-bild img,
.tk-bild-leer {
  width: 92px;
  height: 92px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--linie-zart);
  display: block;
}

.tk-gewinn {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.tk-gewinn-name { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--text-zart); margin-left: 3px; }
.tk-gut { color: var(--gut); }
.tk-mittel { color: var(--warnung); }
.tk-schlecht { color: var(--schlecht); }
.tk-leise { font-size: 13px; }

.tk-wert { color: var(--text-zart); font-size: 12.5px; }
.preis-vorher { color: var(--text-zart); text-decoration: line-through; font-size: 12.5px; }

/* Frische: grün unter 10 Minuten, gelb unter einer Stunde, sonst grau.
   Weißer Rand, damit der Punkt auf jedem Bild lesbar bleibt. */
.frische {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, 0.12);
}
.frische-frisch { background: var(--gut); animation: frisch-puls 2s ease-in-out infinite; }
.frische-mittel { background: #d49a2a; }
.frische-alt { background: #b9b5ad; }
@keyframes frisch-puls {
  0%, 100% { box-shadow: 0 0 0 1px rgba(47, 125, 79, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(47, 125, 79, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .frische-frisch { animation: none; }
}

/* ---- Wischgesten: der Inhalt gleitet, dahinter steht, was passiert ---- */
.wisch-inhalt {
  position: relative;
  z-index: 1;
  background: var(--flaeche);
  transition: transform 0.22s ease;
}
.karte-objektiv .wisch-inhalt { background: var(--wertvoll-flaeche); }
.wisch-hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s;
}
.wisch-merken { justify-content: flex-start; background: var(--gut-flaeche); color: var(--gut); }
.wisch-ablehnen { justify-content: flex-end; background: var(--schlecht-flaeche); color: var(--schlecht); }
.wisch-rechts .wisch-merken,
.wisch-links .wisch-ablehnen { opacity: 0.55; }
.wisch-bereit.wisch-rechts .wisch-merken,
.wisch-bereit.wisch-links .wisch-ablehnen { opacity: 1; }

.grund-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grund-knopf {
  font: inherit;
  font-size: 14px;
  padding: 15px 10px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
}
.grund-knopf:active { background: var(--linie-zart); }
.grund-knopf:disabled { opacity: 0.5; }

/* Zweiter Knopf unter „Kopieren & Anzeige öffnen“: gleich groß, aber leise. */
.knopf-haupt.knopf-zweit { background: var(--flaeche); color: var(--text); border-color: var(--linie); margin-top: 8px; }

/* Neue Treffer, während man gerade liest: ein Knopf statt eines Sprungs. */
.live-neu {
  position: sticky;
  top: 64px;
  z-index: 12;
  display: block;
  margin: 0 auto 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: var(--akzent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(28, 27, 25, 0.18);
  cursor: pointer;
}

/* ======================================================= Preisbild */

.preisbild { padding: 13px 14px 11px; }
.pb-flaeche { position: relative; height: 62px; margin: 18px 6px 0; }
.pb-linie { position: absolute; left: 0; right: 0; top: 31px; height: 1px; background: var(--linie); }
.pb-punkt {
  position: absolute;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  border: 1.5px solid var(--text-zart);
  background: var(--flaeche);
  box-sizing: border-box;
}
.pb-verkauft { background: var(--gut); border-color: var(--gut); }
.pb-draussen { opacity: 0.35; }
.pb-median {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 2px;
  margin-left: -1px;
  background: var(--text-leise);
  border-radius: 1px;
}
.pb-angebot {
  position: absolute;
  top: -8px;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--akzent);
  border-radius: 2px;
}
.pb-angebot-schild {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 650;
  background: var(--akzent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 5px;
}
.pb-achse { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-zart); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pb-aussage { font-size: 13px; margin: 10px 0 6px; }
.pb-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--text-zart); }
.pb-legende span { display: inline-flex; align-items: center; gap: 5px; }
.pb-legende .pb-punkt { position: static; margin: 0; }
.pb-median-zeichen { display: inline-block; width: 2px; height: 11px; background: var(--text-leise); }
.pb-angebot-zeichen { display: inline-block; width: 3px; height: 13px; background: var(--akzent); border-radius: 2px; }

/* ======================================================= Handel als Spalten

   Nebeneinander, wo Platz ist; auf dem Handy wischt man von Spalte zu
   Spalte (sie rasten ein), statt drei Listen untereinander zu scrollen. */

.spalten {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 86%);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin-top: 14px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
  .spalten { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
}
.spalte {
  scroll-snap-align: start;
  background: var(--linie-zart);
  border-radius: var(--radius);
  padding: 9px;
  min-height: 120px;
}
.spalte-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 3px 9px;
}
.spalte-anzahl { font-weight: 500; color: var(--text-zart); margin-left: 4px; }
.spalte-summe { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.spalte-leer { font-size: 12.5px; color: var(--text-zart); padding: 14px 4px; text-align: center; }

.handel-karte { display: flex; gap: 10px; align-items: center; padding: 9px; margin-bottom: 7px; }
.handel-karte img,
.hk-bild-leer { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; background: var(--linie-zart); flex-shrink: 0; }
.hk-text { min-width: 0; flex: 1; }
.hk-titel { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-fakten { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11.5px; color: var(--text-zart); margin: 2px 0; }
.hk-lange { color: var(--warnung); font-weight: 600; }
.hk-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.hk-zahl { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hk-weiter {
  font: inherit;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text-leise);
  cursor: pointer;
  line-height: 1;
}
.hk-weiter:active { background: var(--akzent); color: #fff; border-color: var(--akzent); }

.monate { padding: 12px 14px; margin-top: 14px; }
.monate-kopf { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.monate-balken { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; }
.monat { text-align: center; min-width: 0; }
.monat-wert { font-size: 10.5px; color: var(--text-leise); min-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.monat-saeule { height: 70px; display: flex; align-items: flex-end; background: var(--linie-zart); border-radius: 5px; overflow: hidden; }
.monat-fuellung { width: 100%; background: var(--gut); border-radius: 5px 5px 0 0; }
.monat-minus { background: var(--schlecht); }
.monat-name { font-size: 11px; color: var(--text-zart); margin-top: 3px; }

/* ------------------------------------------------------------ Gruppen */

/* Hervorgehobene Gruppe – vom Nutzer am 05.10.2026: „in der Gruppe die
   Möglichkeit haben die besonders zu markieren, falls aus dieser Gruppe
   etwas gefunden wird". Ein eigenes ruhiges Blau: Grün heißt hier „unter
   Markt", Gold „teures Objektiv dabei", Braun „Vorsicht". */
:root {
  --gruppe: #2c5d8f;
  --gruppe-flaeche: #eef3f9;
  --gruppe-linie: #c9d8ea;
}

.gruppe {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--linie-zart);
  padding: 12px 10px 4px;
  margin-bottom: 14px;
}
.gruppe-hervor { border-color: var(--gruppe-linie); background: var(--gruppe-flaeche); }
.gruppe-aus { opacity: 0.72; }
.gruppe-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}
.gruppe-name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.gruppe-stern { color: var(--gruppe); }
.gruppe-unter { font-size: 12px; color: var(--text-zart); margin-top: 2px; }
.gruppe .knopf-reihe { padding: 0 4px; }
.gruppe-mitglieder { margin-top: 10px; }
.gruppe-leer { font-size: 13px; color: var(--text-zart); padding: 6px 4px 12px; }
.gruppe-trenner { margin: 20px 2px 8px; font-size: 13px; color: var(--text-leise); font-weight: 550; }
.gruppe-wahl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie-zart);
}

/* Der Schalter: groß genug für den Daumen, und An/Aus steht als Wort drin. */
.schalter {
  flex: none;
  min-width: 64px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--flaeche);
  color: var(--text-leise);
  border: 1px solid var(--linie);
}
.schalter-an { background: var(--gut); color: #fff; border-color: var(--gut); }
.schalter-an:active { background: var(--gut); opacity: 0.85; }

/* Treffer aus einer hervorgehobenen Gruppe. */
.karte-gruppe {
  background: var(--gruppe-flaeche);
  border-color: var(--gruppe-linie);
  border-left: 3px solid var(--gruppe);
}
.karte-gruppe .wisch-inhalt { background: var(--gruppe-flaeche); }
.gruppe-etikett { color: var(--gruppe); font-weight: 600; }

/* Vorschau der Schnelleingabe: jede Zeile, wie sie angelegt wird. */
.schnell-zeile { padding: 8px 0; border-bottom: 1px solid var(--linie-zart); }
.schnell-aus { opacity: 0.6; }

/* Umhängen auf den richtigen Artikel - aufklappbar unter „Eigener Wert". */
.umhaengen { margin-top: 10px; }
.umhaengen > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-leise);
  padding: 6px 0;
}
.umhaengen[open] > summary { margin-bottom: 6px; }