/* ══════════════════════════════════════════════════════════════════════════════
   DIE ITEM-ANSICHT
   ══════════════════════════════════════════════════════════════════════════════
   Alles hier hängt an .dunkel. Nimmt man dieses eine Wort aus verlauf.html
   heraus, ist die Seite wieder hell und keine einzige andere Seite merkt etwas
   davon.

   Die Farben stehen als eigene Variablen und nicht als feste Werte, damit ein
   späterer Umzug ins allgemeine Design-System ein Suchen-und-Ersetzen ist und
   keine Archäologie.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── DIE FARBEN, IN ZWEI SCHRITTEN AN IHREN PLATZ GEKOMMEN ─────────────────
   ERSTER FEHLER: Hier standen fünf Farben, die ich mir ausgedacht hatte, ein
   violetter Akzent (#7c6cf0) und dazu passende Töne. Sie stammten aus dem
   Beispielbild, an dem der Entwurf entstanden ist. Das fiel sofort auf, sobald
   man zwischen den Reitern wechselte: Auf "Ranking" war der aktive Reiter
   blau, auf "Verlauf" violett. Dieselbe Leiste, ein Klick dazwischen, ein
   anderer Farbton.

       Eine Seite dunkel zu machen heißt, die Helligkeit zu ändern.
       Es heißt nicht, sich neue Farben auszusuchen.

   ZWEITER SCHRITT: Danach standen hier die richtigen Töne, aber immer noch als
   eigene Werte, weil diese Seite die erste dunkle war. Inzwischen ist das
   ganze Dashboard dunkel, und die Werte gehören dorthin, wo sie für alle
   gelten: in design-system.css.

       Zwei Sätze Farben, die dasselbe meinen, laufen auseinander. Nicht
       heute, aber an dem Tag, an dem jemand einen davon anfasst.

   Die --d-Namen bleiben als Verweis stehen, statt sie an sechzig Stellen in
   dieser Datei zu ersetzen: Ein Alias ist billiger und weniger riskant als
   sechzig Änderungen. Was hier steht, ist jetzt eine Übersetzungstabelle und
   keine zweite Wahrheit. */
.dunkel {
  --d-grund:    var(--color-bg);
  --d-flaeche:  var(--color-surface);
  --d-hoch:     var(--color-surface-raised);
  --d-linie:    var(--color-border);
  --d-text:     var(--color-text);
  --d-leise:    var(--color-text-secondary);
  /* Achsen, Datumsangaben, Jahreszahlen. Hier stand einmal #4a5063 mit einem
     Kontrast von 2,19 gegen den Kartenhintergrund; lesbar ist Text ab 4,5.
     Vier Stellen waren davon betroffen und praktisch unleserlich.

         "Dezent" heißt schwächer als der Rest. Es heißt nicht,
         dass man hinsehen muss, um überhaupt etwas zu erkennen. */
  --d-still:    var(--color-text-muted);

  --d-akzent:   var(--color-primary);       /* Preislinie, Auswahl  */
  --d-akzent-h: var(--color-primary-hover); /* aktueller Wert       */
  --d-gut:      var(--color-success);       /* Bestpreis, Preisfall */
  --d-warn:     var(--color-warning);       /* Pause                */
  --d-schlecht: var(--color-danger);        /* Höchststand, Anstieg */

  background: var(--d-grund);
  color: var(--d-text);
  padding: var(--space-lg);
  min-height: 70vh;
  border-radius: var(--radius-lg);
}

/* Hier stand ein negativer Rand von --space-lg auf allen vier Seiten, damit
   die dunkle Fläche bis an die Fensterkante reicht. Beides war falsch
   gemessen:

       .container    padding: 0 16px      (--space-md, nur seitlich)
       .app-main     padding: 24px 0      (--space-lg, nur oben und unten)

   Seitlich habe ich also mit 24 Pixeln herausgezogen, wo nur 16 Pixel Abstand
   waren: Der Kasten stand acht Pixel über den Inhalt hinaus und hätte einen
   waagerechten Rollbalken erzeugen können. Oben und unten gab es im Container
   überhaupt keinen Abstand, den man hätte aufheben können; der negative Rand
   hat stattdessen den Abstand der .app-main aufgefressen, sodass die dunkle
   Fläche direkt an der Navigationsleiste klebte.

       Ein negativer Rand ist eine Behauptung über den Abstand des
       Nachbarn. Wer ihn hinschreibt, ohne nachzusehen, rät.

   Der Kasten steht jetzt einfach im Container, mit eigenem Innenabstand und
   abgerundeten Ecken. Er reicht nicht bis zur Fensterkante, dafür kann er
   auch nicht darüber hinausragen. */

/* Die Überschriften der Seite erben sonst die hellen Farben aus dem
   Design-System und wären auf dunklem Grund fast unsichtbar. */
.dunkel .page-title    { color: var(--d-text); }
.dunkel .page-subtitle { color: var(--d-leise); }

/* ── DIE REITERLEISTE BEHÄLT IHRE BAUWEISE ────────────────────────────────
   Im Hellen ist sie ein Schienenband: ein leicht abgesetzter Streifen, in dem
   der aktive Reiter als erhöhtes Plättchen liegt, weiß auf grau, mit blauer
   Schrift. Die inaktiven sind gar nichts, nur Text.

   Meine dunkle Fassung hat daraus etwas anderes gemacht: JEDER Reiter bekam
   einen eigenen Kasten mit Rahmen, und der aktive war ein voll ausgefülltes
   Feld. Nicht nur eine andere Farbe, eine andere Sprache.

       Wer ein Bedienelement neu einfärbt, darf seine Form nicht
       mitverändern. Sonst lernt der Benutzer es zweimal.

   Hier wird deshalb nur ersetzt, was Helligkeit ist: Die Schiene wird dunkel,
   das Plättchen wird eine Stufe heller statt weiß, die Schrift bleibt blau.
   Der Rahmen ist ersatzlos weg -- die Leiste hatte nie einen. Ich hatte
   border-color gesetzt, ohne dass es eine Rahmenbreite gab, die Zeile hat
   also ohnehin nichts getan. */
.dunkel .angebote-tabs {
  background: var(--d-flaeche);
}

.dunkel .angebote-tab {
  color: var(--d-leise);
}

.dunkel .angebote-tab:hover {
  color: var(--d-text);
}

.dunkel .angebote-tab.active {
  background: var(--d-hoch);
  color: var(--d-akzent-h);
  /* Der Schlagschatten des hellen Entwurfs trägt auf dunklem Grund nicht:
     Ein schwarzer Schatten auf fast Schwarz ist unsichtbar. Die Erhöhung
     entsteht hier allein dadurch, dass die Fläche heller ist als die
     Schiene. */
  box-shadow: none;
}

.dunkel .form-input {
  background: var(--d-grund);
  border-color: var(--d-linie);
  color: var(--d-text);
}
.dunkel .form-input::placeholder { color: var(--d-still); }

.karte {
  background: var(--d-flaeche);
  border: 1px solid var(--d-linie);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* ── Kennzahlen ─────────────────────────────────────────────────────────── */
/* Fünf Kacheln, seit die Prognose dazugekommen ist. Nicht als feste Zahl,
   sondern über auto-fit: Kommt je eine sechste dazu oder fällt eine weg,
   ordnet sich die Reihe von selbst neu, statt eine Lücke zu lassen oder
   eine Kachel allein in die zweite Zeile zu schieben. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.kennzahl {
  background: var(--d-flaeche);
  border: 1px solid var(--d-linie);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.kennzahl__name {
  font-size: var(--font-size-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--d-still);
}

.kennzahl__wert { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.kennzahl__wert small { font-size: .8rem; font-weight: 400; color: var(--d-leise); }
.kennzahl__zusatz { font-size: var(--font-size-xs); color: var(--d-leise); }
.kennzahl__zusatz--gut  { color: var(--d-gut); }
.kennzahl__zusatz--warn { color: var(--d-warn); }

/* ── Aufteilung ─────────────────────────────────────────────────────────── */
.verlauf-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-md);
  align-items: start;
}

@media (max-width: 900px) {
  .verlauf-grid { grid-template-columns: 1fr; }
  .kennzahlen   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Die Auswahlspalte ──────────────────────────────────────────────────── */
.liste-kopf { font-size: var(--font-size-sm); color: var(--d-leise); margin-bottom: var(--space-sm); }

.filterreihe { display: flex; gap: 4px; flex-wrap: wrap; margin: var(--space-sm) 0; }

.marke {
  font-size: var(--font-size-xs);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--d-linie);
  background: transparent;
  color: var(--d-leise);
  cursor: pointer;
}
/* Dunkle Schrift auf der hellen Fläche, wie bei jedem farbigen Knopf. Weiß
   auf dem Akzentblau kam auf 3,68 und war damit unter der Lesegrenze. */
.marke--an {
  background: var(--d-akzent);
  border-color: var(--d-akzent);
  color: var(--color-on-accent);
}

/* Feste Höhe mit eigenem Rollbalken: Sonst wächst die Spalte auf 1197
   Einträge, und das Diagramm rechts steht irgendwo weit oben allein. */
.liste { max-height: 62vh; overflow-y: auto; }

.liste-eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.liste-eintrag:hover  { background: var(--d-hoch); }
.liste-eintrag--aktiv { background: var(--d-hoch); border-left-color: var(--d-akzent); }

.liste-eintrag img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }

/* min-width: 0 ist hier kein Feinschliff, sondern Pflicht.
   Ein Flex-Element schrumpft von sich aus NICHT unter die Breite seines
   Inhalts, egal was man ihm an Umbruchregeln mitgibt. Der längste Item-Name
   hat 51 Zeichen ("WestCluster: Erster Yohara-Boost-Transfer: Stufe II"),
   die Spalte ist 280 Pixel breit: Ohne diese Zeile schiebt sich der Text
   über den Rand der Karte hinaus, statt umzubrechen. */
.liste-eintrag > div { min-width: 0; }

.liste-eintrag__name  { font-size: var(--font-size-sm); overflow-wrap: anywhere; }
/* --d-leise, nicht --d-still: "93× · alle 17 Tage" ist keine Beschriftung,
   sondern die Auskunft, nach der man die Liste überfliegt. Auf dem
   hervorgehobenen Eintrag ist der Hintergrund außerdem eine Stufe heller,
   und mit --d-still fiel der Kontrast dort auf 4,34 und damit unter die
   Grenze. */
.liste-eintrag__unter { font-size: var(--font-size-xs); color: var(--d-leise); }

.leer, .leer-gross { color: var(--d-still); text-align: center; }
.leer       { padding: var(--space-md); font-size: var(--font-size-sm); }
.leer-gross { padding: calc(var(--space-lg) * 3) var(--space-md); }

/* ── Der Kopf des gewählten Items ───────────────────────────────────────── */
.item-kopf { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.item-kopf img { width: 40px; height: 40px; object-fit: contain; }
/* Derselbe Grund wie in der Liste: Ohne min-width drückt ein langer Name den
   Preis rechts aus der Karte heraus. */
.item-kopf > div:not(.item-kopf__preis) { min-width: 0; }

.item-kopf__name { font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.item-kopf__unter { font-size: var(--font-size-xs); color: var(--d-leise); }
.item-kopf__preis { margin-left: auto; text-align: right; flex: 0 0 auto; white-space: nowrap; }
.item-kopf__preis b { font-size: 1.5rem; font-weight: 600; color: var(--d-akzent-h); }

/* ── Das Auktions-Schild im Item-Kopf ──────────────────────────────────────
   Warnfarbe, aber als ruhiger Streifen und nicht als Alarm: Es ist keine
   Fehlermeldung, sondern eine Einordnung dessen, was die Zahlen darüber
   bedeuten. */
.schild {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.schild--auktion {
  background: rgba(251, 191, 36, .12);
  color: var(--d-warn);
}

/* Der Hinweis auf einen neueren Preis in einer anderen Variante. Bewusst
   ruhig gehalten: Er widerspricht der Kopfzeile, und ein Widerspruch soll
   zum Lesen einladen, nicht anschreien. Deshalb der leise Blauton statt
   Warnfarbe. */
.schild--neuer {
  background: var(--color-primary-subtle);
  color: var(--d-text);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  line-height: 1.5;
}

.marke--klein {
  padding: 2px 8px;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Karten-Köpfe ───────────────────────────────────────────────────────── */
.block { margin-bottom: var(--space-md); }
.block__kopf { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.block__titel { font-weight: 500; }
.block__rechts { margin-left: auto; font-size: var(--font-size-xs); color: var(--d-leise); }

/* Der Hinweis auf mehrdeutige Tage. Er steht klein und in Warnfarbe, weil er
   eine Einschränkung der Anzeige meldet und keine Nachricht über den Shop. */
.hinweis {
  font-size: var(--font-size-xs);
  color: var(--d-warn);
  margin-top: 6px;
}

/* ── Variantenschalter ──────────────────────────────────────────────────── */
.varianten { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Das Diagramm ───────────────────────────────────────────────────────── */
.diagramm { width: 100%; height: auto; display: block; }
.diagramm text { fill: var(--d-still); font-size: 11px; }

/* ── Der Zeitstreifen ───────────────────────────────────────────────────── */
.streifen { display: flex; gap: 2px; height: 26px; }

.streifen__jahr {
  border-radius: 3px;
  background: var(--d-linie);
  position: relative;
}

.streifen-achse {
  display: flex;
  font-size: var(--font-size-xs);
  color: var(--d-still);
  margin-top: 4px;
}
.streifen-achse span { text-align: center; }

.legende { display: flex; gap: var(--space-md); font-size: var(--font-size-xs); color: var(--d-leise); margin-top: var(--space-sm); }
/* Der Rahmen ist nicht Zierde. Das Kästchen für "gar nicht" hat die Farbe
   --d-linie, und die unterscheidet sich vom Kartenhintergrund um so wenig,
   dass in der Legende einfach nichts zu sehen war: ein Wort ohne Kästchen
   neben zwei Wörtern mit. Ein heller Rand macht es sichtbar, ohne die Farbe
   zu verfälschen, auf die es ankommt. */
.legende i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  border: 1px solid var(--d-still);
}

/* ── Die Ereignisse ─────────────────────────────────────────────────────── */
.ereignis {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 7px 0;
  border-bottom: 1px solid var(--d-linie);
  font-size: var(--font-size-sm);
}
.ereignis:last-child { border-bottom: 0; }
.ereignis__zeichen { width: 1em; flex: 0 0 auto; text-align: center; }
.ereignis__datum { margin-left: auto; font-size: var(--font-size-xs); color: var(--d-still); }
.ereignis__dazu  { color: var(--d-leise); }

.ereignis--gut      .ereignis__zeichen { color: var(--d-gut); }
.ereignis--schlecht .ereignis__zeichen { color: var(--d-schlecht); }
.ereignis--warn     .ereignis__zeichen { color: var(--d-warn); }

/* Ein Ereignis führt zum Beitrag, aus dem es stammt. */
.ereignis[data-post] { cursor: pointer; }
.ereignis[data-post]:hover { background: var(--d-hoch); }