/*
 * Die Marktbeobachtung.
 *
 * EIGENE DATEI, seit dem 06.09.2026. Bis dahin stand das hier als
 * <style is:global> in src/pages/[sprache]/marketwatch/index.astro. Die
 * Seite wird jetzt von markt/marktwache.php gezeichnet, und PHP kann
 * keine Astro-Stilvorlage einsammeln - also liegt sie hier und wird von
 * der Seite verlinkt.
 *
 * KEINE FESTEN FARBEN. Alles kommt aus den Palettenbloecken in
 * grund.css; skripte/pruefe_farben.py bricht den Bau sonst ab. Das gilt
 * hier genauso wie in jeder Astro-Seite.
 */
.mw-versuch { font-family: var(--sans); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 999px;
  padding: .15rem .5rem; margin-left: .7rem; vertical-align: middle; }
/* Eine Zeile statt eines Kastens. Sie soll gelesen werden, nicht
   angeschrien - der Strich links reicht, um sie vom Titel abzusetzen. */
.mw-vorspann { margin: -.2rem 0 1.4rem; font-size: .92rem;
  color: var(--schrift-2); border-left: 3px solid var(--akzent);
  padding-left: .8rem; }
.mw-vorspann strong { color: var(--schrift); }
.mw-probe { margin: 0 0 1.4rem; font-size: .88rem; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 8px;
  padding: .6rem .8rem; background: color-mix(in srgb, var(--warn) 7%, transparent); }

.mw-klein { font-size: .78rem; color: var(--schrift-3); }
.mw-zahl { font-family: var(--mono); }

/* Die Bedienung in EINER Reihe ueber der Liste - so verlangt es die
   dataviz-Anleitung, und es ist auch der Ort, an dem man sie sucht. */
.mw-leiste { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 10px; padding: .8rem .9rem; margin: 1.5rem 0 .8rem;
  position: sticky; top: 3.6rem; z-index: 10; box-shadow: var(--schatten); }
.mw-feld { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem;
  color: var(--schrift-2); }
.mw-feld-weit { flex: 1 1 14rem; }
.mw-feld input, .mw-feld select { font: inherit; font-size: .9rem;
  padding: .38rem .55rem; border: 1px solid var(--rand-stark);
  border-radius: 7px; background: var(--grund); color: var(--schrift); }
.mw-feld input { width: 100%; }
.mw-zurueck { font: inherit; font-size: .85rem; padding: .42rem .8rem;
  border: 1px solid var(--rand-stark); border-radius: 7px;
  background: var(--flaeche-2); color: var(--schrift-2); cursor: pointer; }
.mw-zurueck:hover { color: var(--schrift); border-color: var(--akzent); }
.mw-treffer { font-size: .82rem; color: var(--schrift-3); margin: 0 0 .6rem; }

/*
 * DER DANKKASTEN, seit dem 08.09.2026.
 *
 * ABGESETZT, ABER NICHT LAUT: ein linker Rand in der Akzentfarbe, sonst
 * die gewoehnliche Flaeche. Ein Kasten mit Rahmen und Farbe saehe aus
 * wie Werbung, und wer Preise nachschlagen will, ueberliest Werbung -
 * auch die eigene.
 */
.mw-dank { max-width: 46rem; margin: 1rem 0 0; padding: .7rem 0 .7rem .9rem;
  border-left: 3px solid var(--akzent); font-size: .9rem;
  color: var(--schrift-2); line-height: 1.55; }
.mw-dank b { color: var(--schrift); }
.mw-dank a { color: var(--akzent-2); }

/*
 * DIE WELTENWAHL, seit dem 08.09.2026.
 *
 * Sie steht UEBER dem Artenmenue, weil sie darueber steht: erst der
 * Markt, dann die Warenart darin. Klein gehalten - es ist eine Wahl, die
 * man einmal trifft und dann stehen laesst, kein Filter, an dem man
 * dreht.
 */
.mw-welten { display: flex; gap: .6rem; align-items: flex-end;
  flex-wrap: wrap; margin: 1.3rem 0 0; }
.mw-welten select { min-width: 11rem; }
/* Der Absendeknopf fuer den Fall ohne JavaScript. Die Insel deckt ihn
   zu und schaltet beim Aendern selbst um. */
.mw-welt-los { font: inherit; font-size: .85rem; padding: .42rem .8rem;
  border: 1px solid var(--rand-stark); border-radius: 7px;
  background: var(--flaeche-2); color: var(--schrift-2); cursor: pointer; }
.mw-welt-los:hover { color: var(--schrift); border-color: var(--akzent); }
/* Der Weltname in der Tabelle - nur in der Ansicht "alle Server". */

/* Das Artenmenue. Dieselbe Bauform wie die Zeitfenster in der
   Karte: unsichtbare Radioknoepfe, Beschriftungen als Reiter. */
.mw-arten { display: flex; gap: .35rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.mw-arten label { display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; padding: .38rem .85rem; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 999px;
  color: var(--schrift-2); background: var(--flaeche); }
.mw-arten label:hover { color: var(--schrift); border-color: var(--rand-stark); }
.mw-anzahl { font-family: var(--mono); font-size: .75rem; color: var(--schrift-3); }

.mw-liste { display: flex; flex-direction: column; gap: .35rem; }
/*
 * WELCHE ZEILEN ZU SEHEN SIND - reines CSS ueber den
 * Geschwisterselektor. Grundsatz: keine. Sichtbar wird nur, was zur
 * angehakten Art gehoert.
 *
 * `:not([hidden])` ist NICHT Zierde: marktfilter.js siebt ueber das
 * hidden-Merkmal, und dessen display:none kommt aus dem
 * Browser-Stylesheet - eine Regel mit display:block schlaegt es. Ohne
 * diesen Zusatz zeigte die Liste jede Zeile, die der Filter gerade
 * ausgeblendet hat.
 */
.mw-liste > [data-ware] { display: none; }
.mw-leer-art { display: none; }
.mw-art-radio:nth-of-type(1):checked ~ .mw-liste > [data-art="verbrauch"]:not([hidden]),
.mw-art-radio:nth-of-type(2):checked ~ .mw-liste > [data-art="waffen"]:not([hidden]),
.mw-art-radio:nth-of-type(3):checked ~ .mw-liste > [data-art="ruestung"]:not([hidden]),
.mw-art-radio:nth-of-type(4):checked ~ .mw-liste > [data-art="kostuem"]:not([hidden]),
.mw-art-radio:nth-of-type(5):checked ~ .mw-liste > [data-art="karten"]:not([hidden]),
.mw-art-radio:nth-of-type(6):checked ~ .mw-liste > [data-art="sonstiges"]:not([hidden]) {
  display: block; }
.mw-art-radio:nth-of-type(1):checked ~ .mw-arten label[data-art="verbrauch"],
.mw-art-radio:nth-of-type(2):checked ~ .mw-arten label[data-art="waffen"],
.mw-art-radio:nth-of-type(3):checked ~ .mw-arten label[data-art="ruestung"],
.mw-art-radio:nth-of-type(4):checked ~ .mw-arten label[data-art="kostuem"],
.mw-art-radio:nth-of-type(5):checked ~ .mw-arten label[data-art="karten"],
.mw-art-radio:nth-of-type(6):checked ~ .mw-arten label[data-art="sonstiges"] {
  background: var(--akzent); border-color: var(--akzent-2);
  color: var(--flaeche); font-weight: 600; }
.mw-art-radio:nth-of-type(1):checked ~ .mw-arten label[data-art="verbrauch"] .mw-anzahl,
.mw-art-radio:nth-of-type(2):checked ~ .mw-arten label[data-art="waffen"] .mw-anzahl,
.mw-art-radio:nth-of-type(3):checked ~ .mw-arten label[data-art="ruestung"] .mw-anzahl,
.mw-art-radio:nth-of-type(4):checked ~ .mw-arten label[data-art="kostuem"] .mw-anzahl,
.mw-art-radio:nth-of-type(5):checked ~ .mw-arten label[data-art="karten"] .mw-anzahl,
.mw-art-radio:nth-of-type(6):checked ~ .mw-arten label[data-art="sonstiges"] .mw-anzahl {
  color: var(--flaeche); opacity: .8; }
.mw-art-radio:nth-of-type(1):checked ~ .mw-leer-art[data-art="verbrauch"],
.mw-art-radio:nth-of-type(2):checked ~ .mw-leer-art[data-art="waffen"],
.mw-art-radio:nth-of-type(3):checked ~ .mw-leer-art[data-art="ruestung"],
.mw-art-radio:nth-of-type(4):checked ~ .mw-leer-art[data-art="kostuem"],
.mw-art-radio:nth-of-type(5):checked ~ .mw-leer-art[data-art="karten"],
.mw-art-radio:nth-of-type(6):checked ~ .mw-leer-art[data-art="sonstiges"] {
  display: block; }
/* Tastatur: der gewaehlte Reiter muss sichtbar sein, auch wenn der
   Radioknopf selbst unsichtbar ist. */
.mw-art-radio:focus-visible ~ .mw-arten label { outline: 2px solid var(--akzent); }

/* Die Ausfuehrung in der Tabelle. */
.mw-stufe { font-family: var(--mono); color: var(--akzent-2); margin-right: .4rem; }
.mw-affixe { color: var(--schrift-2); }
.mw-nichts { opacity: .55; }
.mw-tabelle-weit td:nth-child(2) { max-width: 22rem; }
.mw-zeile { border: 1px solid var(--rand); border-radius: 9px;
  background: var(--flaeche); }
.mw-zeile > summary { display: grid; align-items: center; gap: .1rem .6rem;
  grid-template-columns: auto minmax(8rem, 1fr) auto minmax(6rem, 13rem) auto auto;
  padding: .5rem .75rem; cursor: pointer; list-style: none; }
.mw-zeile > summary::-webkit-details-marker { display: none; }
.mw-zeile[open] { border-color: var(--rand-stark); }
.mw-zeile > summary:hover { background: var(--flaeche-2); border-radius: 8px; }
.mw-name { font-weight: 600; }
.mw-preis b { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.mw-zahlen, .mw-zeit { white-space: nowrap; }
.mw-inhalt { padding: .2rem .9rem 1rem; border-top: 1px solid var(--rand); }

/* Zeitfenster: Radioknoepfe unsichtbar, Beschriftungen als Knoepfe,
   Ansichten zu - bis der zugehoerige Knopf gewaehlt ist. Reines CSS
   ueber den Geschwisterselektor. */
.mw-radio { position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0; }
.mw-knoepfe { display: flex; gap: .3rem; flex-wrap: wrap; margin: .7rem 0 .2rem;
  align-items: baseline; }

/* Die Ueberschrift vor den Zeitfenstern, seit dem 10.09.2026.
   Ohne sie sahen zwei verschiedene Regler gleich aus: der oben filtert,
   WELCHE Waren in der Liste stehen, dieser hier, welche Angebote in den
   Preis eingehen. Der Inhaber hat gefragt, ob das doppelt sei - es war
   nicht doppelt, nur gleich beschriftet. */
.mw-knoepfe-titel { font-size: .78rem; color: var(--schrift-3); margin-right: .15rem; }

/* Gibt es nur ein Fenster, ist es kein Knopf, sondern eine Auskunft.
   Deshalb ohne Rahmen, ohne Zeigefinger und ohne Umschaltfarbe - es
   waere sonst eine Attrappe. */
.mw-fest { font-size: .8rem; color: var(--schrift-2); font-weight: 600; }
.mw-knoepfe label { font-size: .8rem; padding: .25rem .7rem; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 999px;
  color: var(--schrift-2); background: var(--flaeche-2); }
.mw-knoepfe label:hover { color: var(--schrift); border-color: var(--rand-stark); }
.mw-ansicht { display: none; }
.mw-kopfzahl { margin: .6rem 0 0; }
.mw-kopfzahl b { font-family: var(--mono); }
/* NICHT nth-of-type FUER DIE ANSICHTEN: Das zaehlt Elementtypen, und
   die Knopfleiste ist auch ein div - .mw-ansicht:nth-of-type(1) traf
   damit nie zu, und die aufgeklappte Karte blieb leer. Ueber ein
   eigenes Merkmal ist die Zuordnung eindeutig. Beim Radioknopf geht
   nth-of-type, dort ist der input-Typ eindeutig. */
.mw-radio:nth-of-type(1):checked ~ .mw-ansicht[data-n="0"],
.mw-radio:nth-of-type(2):checked ~ .mw-ansicht[data-n="1"],
.mw-radio:nth-of-type(3):checked ~ .mw-ansicht[data-n="2"],
.mw-radio:nth-of-type(4):checked ~ .mw-ansicht[data-n="3"] { display: block; }
.mw-radio:nth-of-type(1):checked ~ .mw-knoepfe label[data-n="0"],
.mw-radio:nth-of-type(2):checked ~ .mw-knoepfe label[data-n="1"],
.mw-radio:nth-of-type(3):checked ~ .mw-knoepfe label[data-n="2"],
.mw-radio:nth-of-type(4):checked ~ .mw-knoepfe label[data-n="3"] {
  background: var(--akzent); border-color: var(--akzent-2);
  color: var(--flaeche); font-weight: 600; }
/* Tastatur: der gewaehlte Knopf muss sichtbar sein, auch wenn der
   Radioknopf selbst unsichtbar ist. */
.mw-radio:focus-visible ~ .mw-knoepfe label { outline: 2px solid var(--akzent); }
.mw-warn { color: var(--warn); font-size: .82rem; margin: .6rem 0 0; }
/* Steht da, wo beim Filtern ein Diagramm stuende, wenn es fuer eins
   zu wenige Treffer gibt. BEWUSST NICHT .mw-warn: Die Insel blendet
   beim Filtern jedes .mw-warn aus, weil das die ungefilterte Menge
   beschreibt - dieser Satz beschreibt die gefilterte. */
.mw-kein-verlauf { color: var(--schrift-3); font-size: .82rem;
                   margin: .4rem 0 .8rem; font-style: italic; }
.mw-tabelle { width: 100%; border-collapse: collapse; font-size: .85rem;
  margin: .7rem 0 0; }
.mw-tabelle th, .mw-tabelle td { padding: .25rem .5rem;
  border-bottom: 1px solid var(--rand); text-align: left; }
.mw-tabelle th { color: var(--schrift-2); font-weight: 600; font-size: .76rem; }
.mw-tabelle .r { text-align: right; }
.mw-leer { margin-top: 1rem; }

/* Auf dem Telefon bricht die Zeile um, statt sich zu quetschen. */
@media (max-width: 46rem) {
  .mw-zeile > summary { grid-template-columns: auto 1fr auto; }
  .mw-balken, .mw-zeit { display: none; }
  .mw-zahlen { grid-column: 2 / -1; }
  .mw-leiste { position: static; }
}

/* ------------------------------------------------------------------ *
 * Die drei Diagramme.
 *
 * Sie standen bis zum 06.09.2026 als eigene Astro-Bauteile da
 * (PreisSpanne, PreisStreifen, PreisPunkte) und trugen ihre Stilangaben
 * selbst. Benutzt hat sie NUR die Marktseite - sie ziehen deshalb mit
 * um, statt in zwei Fassungen zu leben.
 * ------------------------------------------------------------------ */

/* Der Balken in der Zeile: min - Median - max. */
.ps { display: block; width: 100%; max-width: 210px; height: 18px; }

/* Die Preisverteilung - waagerecht der Preis, ein Punkt je Angebot. */
.pst-figur { margin: .7rem 0 0; }
.pst { display: block; width: 100%; height: auto; }
.pst-achse { stroke: var(--rand); stroke-width: 1; }
/* Beschriftung traegt Schriftfarben, nie die Farbe der Punkte. */
.pst-marke { fill: var(--schrift-3); font-size: 10px; font-family: var(--mono); }
.pst-links { text-anchor: start; }
.pst-rechts { text-anchor: end; }

/* Die Zeitachse - waagerecht die Zeit, senkrecht der Preis. */
.pp-figur { margin: .4rem 0 0; }
.pp { display: block; width: 100%; height: auto; }
.pp-netz { stroke: var(--rand); stroke-width: 1; }
.pp-achse { stroke: var(--rand-stark); stroke-width: 1; }
.pp-marke { fill: var(--schrift-3); font-size: 10px; text-anchor: end;
            font-family: var(--mono); }
.pp-links { text-anchor: start; }
.pp-rechts { text-anchor: end; }

/* ------------------------------------------------------------------ *
 * Was ein Angebot ist - und was wir darueber nicht wissen.
 *
 * Bis zum 07.09.2026 standen dafuer drei Bloecke untereinander. Jetzt
 * steht alles in einer Liste, und jedes Angebot sagt in seiner Zeile
 * selbst, was es ist. Der Inhaber: "man koennte es ja doch bei equipt
 * und waffen so machen das alles in einem steht und baut eine filter
 * funktion ein".
 * ------------------------------------------------------------------ */

/* "nicht nachgesehen". DER WICHTIGSTE TEXT DER TABELLE: Eine leere Zelle
   hiesse "traegt nichts" - hier steht, dass niemand hingesehen hat.
   Zurueckhaltend gesetzt, aber lesbar: Es ist eine Auskunft, keine
   Warnung. */
.mw-ungesehen { color: var(--schrift-3); font-style: italic; }

/* Das Vielfache des unveraenderten Preises. Zurueckhaltend: Es ist eine
   Einordnung, keine Hauptzahl - und es gilt fuer genau ein Angebot. */
.mw-fach { font-family: var(--sans); font-size: .72rem; color: var(--schrift-3);
  margin-left: .4rem; cursor: help; border-bottom: 1px dotted var(--rand-stark); }

/* Wie duenn die Grundlage der Mitte ist. */
.mw-duenn { margin: .5rem 0 0; }

/* Der Affixfilter, in der Form des Marktplatzes: eine Liste von
   Bedingungen, die man aufmacht. Mehrere gelten zusammen. */
.mw-affixfilter { margin: -.4rem 0 .8rem; }
.mw-affixzeilen { display: flex; flex-direction: column; gap: .4rem; }
.mw-affixzeile { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.mw-affixzeile select, .mw-affixzeile input {
  font: inherit; font-size: .88rem; padding: .34rem .5rem;
  border: 1px solid var(--rand-stark); border-radius: 7px;
  background: var(--grund); color: var(--schrift); }
.mw-aff-name { max-width: 18rem; }
.mw-aff-wert { width: 6.5rem; }
.mw-aff-spanne { white-space: nowrap; }
.mw-aff-weg { font: inherit; line-height: 1; padding: .25rem .5rem; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 7px;
  background: var(--flaeche-2); color: var(--schrift-3); }
.mw-aff-weg:hover { color: var(--warn); border-color: var(--warn); }
.mw-affix-mehr { font: inherit; font-size: .85rem; margin-top: .45rem;
  padding: .3rem .7rem; cursor: pointer;
  border: 1px dashed var(--rand-stark); border-radius: 7px;
  background: transparent; color: var(--schrift-2); }
.mw-affix-mehr:hover { color: var(--akzent-2); border-color: var(--akzent); }

/* Die Zeile, die zur Filterbedingung passt. Ohne sie findet man das
   Stueck, aber nicht das Angebot - bei einer Kette mit 17 Angeboten ist
   genau eines das mit ATK +30. */
.mw-treffer-zeile > td { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.mw-treffer-zeile > td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }

/* Die Zahl der nicht nachgesehenen in der Kopfzeile. */
.mw-ungesehen-marke { white-space: nowrap; font-style: italic; }

/* Solange gefiltert wird, beschreibt die Kopfzahl nur die passenden
   Angebote - der Balken daneben taete es nicht und ist deshalb weg. */
.mw-zeile.mw-gefiltert > summary { background: color-mix(in srgb, var(--akzent) 6%, transparent); }
.mw-diagramm-aus { margin: .6rem 0 0; font-style: italic; }

/* Die Beta-Zeile. Sie steht UEBER den Zahlen, weil ein Vorbehalt, der
   unter einer Preisangabe steht, zu spaet kommt. */
.mw-beta { margin: 0 0 1.2rem; font-size: .88rem; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 8px;
  padding: .55rem .8rem; max-width: 46rem;
  background: color-mix(in srgb, var(--warn) 6%, transparent); }

/* Der Satz zur Herkunft, direkt unter der Beta-Zeile. Ruhiger gesetzt
   als diese: Die Beta ist ein Vorbehalt, das hier ist eine Auskunft. */
.mw-herkunft { margin: -.7rem 0 1.4rem; font-size: .88rem;
  color: var(--schrift-2); max-width: 46rem;
  border-left: 3px solid var(--rand-stark); padding-left: .8rem; }

/* Das Zeichen fuer "der Name ist mehrdeutig". Klein und zurueckhaltend:
   Es stand bis zum 07.09.2026 als ganzer Absatz da, bei jedem vierten
   Stueck - das war Rauschen. Weg darf es trotzdem nicht, es ist die
   einzige Stelle, die sagt "es kann das falsche Stueck sein". */
.mw-unsicher { font-size: .7em; color: var(--warn); cursor: help;
  margin-left: .3rem; vertical-align: super; font-weight: 700; }