/** * angebote.css: Die Angebote-Seite * * Alle Farben und Abstände kommen aus den Tokens in design-system.css. * Kein einziger Hex-Wert hier drin, ändert sich die Palette, zieht diese * Seite automatisch mit. */ /* ── Kopfzeile mit den Zahlen ─────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); flex-wrap: wrap; } .angebote-stats { display: flex; gap: var(--space-md); } .stat { text-align: center; min-width: 64px; } .stat__wert { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); line-height: 1.2; } .stat__label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* Die "zu prüfen"-Zahl sticht hervor, sie ist eine Aufforderung, keine Info. */ .stat--warn .stat__wert { color: var(--color-warning); } /* ── Zwei Spalten: links einfügen, rechts ansehen ──────────────────── */ .angebote-grid { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.2fr); gap: var(--space-lg); align-items: start; } .angebote-right { display: flex; flex-direction: column; gap: var(--space-lg); } /* Auf schmalen Bildschirmen untereinander. */ @media (max-width: 900px) { .angebote-grid { grid-template-columns: 1fr; } } /* Hier standen die Regeln für das Feld "Beitrag von Hand einfügen" samt seiner Vorschau-Tabelle. Das Feld ist weg, der Forum-Abruf holt die Beiträge von allein. */ /* ── Preise ───────────────────────────────────────────────────────── */ .preis-alt { text-decoration: line-through; color: var(--color-text-muted); font-size: var(--font-size-xs); margin-right: 4px; } .preis-neu { font-weight: var(--font-weight-semibold); color: var(--color-text); } .preis-rabatt { color: var(--color-success); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); margin-left: 4px; } /* Kein Preis = "—", NICHT "0 DR". Eine 0 würde behaupten, das Item sei gratis gewesen. Das ist etwas grundsätzlich anderes als "der Beitrag nennt keinen Preis". */ .preis-keiner { color: var(--color-text-muted); } /* ── Aktuell im Shop ──────────────────────────────────────────────── */ .aktuell-item { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-subtle); } .aktuell-item:last-child { border-bottom: none; } .aktuell-item__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: 4px; } .aktuell-item__zeit { font-size: var(--font-size-xs); color: var(--color-text-muted); } .aktuell-item__titel { font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--space-xs); } .aktuell-item__items { list-style: none; margin: 0; padding: 0; } .aktuell-item__items li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding: 3px 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .aktuell-item__preis { white-space: nowrap; } /* ── Prüf-Liste ───────────────────────────────────────────────────── */ .card--warning { border-left: 3px solid var(--color-warning); } .pruef-item { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--font-size-sm); } .pruef-item:last-child { border-bottom: none; } .pruef-item__kopf { display: flex; gap: var(--space-sm); color: var(--color-text-muted); font-size: var(--font-size-xs); margin-bottom: 2px; } .pruef-item__erkannt { color: var(--color-text); } .pruef-item__roh { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-top: 2px; } .pruef-item__roh code { background: var(--color-border-subtle); padding: 1px 5px; border-radius: var(--radius-sm); font-family: ui-monospace, monospace; } /* ── Historie ─────────────────────────────────────────────────────── */ .historie-tabelle { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .historie-tabelle td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; } .historie-datum { color: var(--color-text-muted); white-space: nowrap; font-size: var(--font-size-xs); } .historie-typ { white-space: nowrap; } .historie-titel { color: var(--color-text); width: 100%; } .historie-titel a { color: var(--color-primary); text-decoration: none; } .historie-titel a:hover { text-decoration: underline; } .historie-anzahl { text-align: right; color: var(--color-text-secondary); white-space: nowrap; } /* Ein Rad hat keine Angebote, es hat Gewinne. Die Zahl steht trotzdem in derselben Spalte, also muss dranstehen, WAS sie zählt. */ .historie-anzahl__art { font-size: 0.75em; color: var(--color-text-secondary); margin-left: 3px; opacity: 0.75; } /* ── "Inhalt fehlt" ────────────────────────────────────────────────────── Rot heißt hier nicht "kaputt", sondern "hier ist noch Handarbeit fällig": ein Beitrag ohne ein einziges Item und ohne Kisteninhalt. Meist ein Flash Deal, dessen Items nur im Bild stehen. Bewusst nur ein linker Balken und eine leichte Tönung, keine knallrote Zeile. Sonst schreit die Liste, und was ständig schreit, überliest man. */ .historie-zeile--leer > td { background: var(--color-danger-subtle, #fdecec); } .historie-zeile--leer > td:first-child { box-shadow: inset 3px 0 0 var(--color-danger, #c0392b); } .historie-fehlt { display: inline-block; margin-left: var(--space-xs); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--color-danger, #c0392b); color: var(--color-on-accent); font-size: var(--font-size-xs, 11px); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: help; } /* ═══════════════════════════════════════════════════════════════════ * RANKING * ═══════════════════════════════════════════════════════════════════ */ .page-header__rechts { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } /* ── Tabs ─────────────────────────────────────────────────────────── */ .angebote-tabs { display: flex; gap: 4px; background: var(--color-border-subtle); padding: 3px; border-radius: var(--radius-md); } .angebote-tab { padding: 6px 14px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); } .angebote-tab:hover { color: var(--color-text); } .angebote-tab.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); } /* ── Kopfzeile mit Suche ──────────────────────────────────────────── */ .ranking-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; } .ranking-suche { max-width: 260px; margin: 0; } .ranking-filter { display: flex; gap: var(--space-lg); margin-top: var(--space-md); flex-wrap: wrap; } .ranking-check { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; } .ranking-check__hint { color: var(--color-text-muted); font-size: var(--font-size-xs); } /* ── Legende ────────────────────────────────────────────────────────── * Steht bewusst ÜBER der Tabelle, nicht in einem Tooltip, den keiner * findet. Wer die Zahlen liest, muss wissen, wie belastbar sie sind, * sonst liest er sie falsch. * ─────────────────────────────────────────────────────────────────── */ .ranking-legende { background: var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 2; margin-bottom: var(--space-md); } .ranking-legende .badge { margin-right: 4px; } .ranking-legende .badge:not(:first-child) { margin-left: var(--space-md); } /* ── Tabelle ──────────────────────────────────────────────────────── */ .ranking-tabelle { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .ranking-tabelle th { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .ranking-tabelle td { padding: var(--space-sm); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; } .ta-r { text-align: right; } .ranking-tabelle th.ta-r { text-align: right; } .ranking-zeile { cursor: pointer; transition: background var(--transition-fast); } .ranking-zeile:hover { background: var(--color-border-subtle); } /* Überfällige Zeilen fallen auf. Das ist die Information, wegen der man überhaupt auf diese Seite geht. */ .zeile--ueberfaellig { background: var(--color-danger-subtle); } .zeile--ueberfaellig:hover { background: var(--color-danger-subtle); filter: brightness(0.97); } .ranking-name { font-weight: var(--font-weight-medium); color: var(--color-text); width: 100%; } .ranking-name .badge { margin-left: 6px; } .ranking-stern { color: var(--color-warning); margin-left: 4px; } .ranking-rhythmus, .ranking-zuletzt { white-space: nowrap; color: var(--color-text-secondary); } .ranking-conf { margin-top: 2px; } .ranking-datum { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; } .ranking-merken { font-size: 16px; line-height: 1; padding: 4px 8px; } .ranking-hinweis { margin-top: var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; } /* ══════════════════════════════════════════════════════════════════════════ DER SCROLLKASTEN, die Seite steht still, die Liste bewegt sich ══════════════════════════════════════════════════════════════════════════ Vorher war die SEITE der Scrollbereich. Bei 1.400 Zeilen bedeutete das: Die Kopfzeile wandert nach oben aus dem Bild, und ab Zeile 40 weiß niemand mehr, welche Spalte "Rhythmus" ist und welche "Zuletzt". Eine Tabelle ohne sichtbare Kopfzeile ist keine Tabelle. Sie ist eine Reihe von Zahlen ohne Bedeutung. Jetzt scrollt nur dieser Kasten, und die Kopfzeile klebt darin fest. Die Fußleiste mit der Blätterung steht darunter und ist damit IMMER sichtbar, man muss nicht ans Ende scrollen, um zu erfahren, dass es weitergeht. max-height in vh, nicht in px: Auf einem großen Bildschirm zeigt der Kasten mehr Zeilen, auf einem kleinen weniger. Eine feste Pixelhöhe wäre auf dem einen zu klein und auf dem anderen zu groß, und auf beiden falsch. */ .liste-scroll { max-height: 62vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .liste-scroll thead th { position: sticky; top: 0; z-index: 2; /* Undurchsichtig! Ohne eigenen Hintergrund scrollen die Zeilen DURCH die Kopfzeile hindurch, man liest zwei Texte übereinander und hält es sofort für einen Fehler. Zu Recht. --color-surface ist der Hintergrund der Karte, in der die Tabelle steht; damit passt die Kopfzeile in jedem Farbschema, auch im dunklen. */ background: var(--color-surface); box-shadow: 0 1px 0 var(--color-border); } /* ── Die Fußleiste: blättern links, Seitengröße rechts ─────────────────── "liste-", nicht "ranking-": Ranking UND Aufräumen benutzen dieselbe Leiste. Ein Bauteil, das an zwei Stellen steht, darf nicht nach einer davon heißen, sonst traut sich beim nächsten Mal niemand, es in der dritten zu benutzen. Die Leiste stand vorher auf Kante: 4px zwischen den Seitenzahlen, kein Abstand nach unten, und die Zahl "1 bis 20 von 2598" klebte am Auswahlfeld. Bei zwölf Knöpfen nebeneinander wird daraus ein Ziffernband, in dem man die gesuchte Seite sucht, statt sie zu sehen. Zahlen brauchen mehr Luft als Wörter. Ein Wort hat eine Form, an der das Auge es wiedererkennt, eine 7 hat nur ihren Platz. */ .liste-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-lg); margin-bottom: var(--space-md); } .liste-blaettern { display: flex; align-items: center; gap: var(--space-sm); } .liste-seite { min-width: 36px; height: 36px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: var(--font-size-sm); cursor: pointer; } .liste-seite:hover:not(:disabled) { background: var(--color-border-subtle); } .liste-seite:disabled { opacity: .35; cursor: default; } /* Die aktuelle Seite ist die einzige Information in dieser Leiste, die man wirklich BRAUCHT. Also ist sie die einzige, die Farbe bekommt. */ .liste-seite--aktiv { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-accent); font-weight: 600; } .liste-luecke { padding: 0 var(--space-xs); color: var(--color-text-muted); } /* "1 bis 20 von 2598" und das Auswahlfeld sind zwei getrennte Dinge: eine Auskunft und ein Bedienelement. Standen sie dicht beieinander, sah es aus wie eine Beschriftung des Feldes. */ .liste-proseite { display: flex; align-items: center; gap: var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-muted); } .liste-proseite select { width: auto; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); } /* Der Scrollkasten für Listen ohne Tabellenkopf (Aufräum-Seite). Etwas flacher als das Ranking: Auf dieser Seite stehen DREI Listen untereinander, jede darf nur so viel Platz nehmen, dass man die nächste noch ahnt. Eine Seite, die nur eine Liste zeigt, verschweigt die anderen. */ .liste-box { max-height: 46vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); } .liste-suche { margin-bottom: var(--space-sm); } /* ══════════════════════════════════════════════════════════════════════════ DIE GRUPPENKÖPFE, eine Überschrift, ein Satz, eine Zahl ══════════════════════════════════════════════════════════════════════════ Vorher stand hier eine farbige Zeile ("240 × beweisbar, der Name steht so in den Spieldaten") und darunter ein vierzeiliger Erklärblock in derselben Schriftgröße wie die Item-Zeilen. Beides zusammen war eine Textwand, durch die man hindurchscrollt, ohne sie zu lesen, und dann sieht man auch die Warnung nicht mehr, die darin steht. Jetzt: Überschrift (fett, kurz), die Zahl als Marke daneben, EIN Satz, der die Sache erklärt, und das Kleingedruckte kleiner. Wer nur den Titel liest, weiß bereits genug. Wer den Satz liest, weiß, warum. ══════════════════════════════════════════════════════════════════════════ */ .karte__kopf { flex: 1; min-width: 0; /* sonst sprengt langer Text die Flex-Zeile statt umzubrechen */ } .gruppe__kopf { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md) var(--radius-md) 0 0; border: 1px solid var(--color-border); border-bottom: none; } /* Dieselben Farbtöne, die die Gruppen schon vorher hatten, grün = Beweis, gelb = Vorsicht. Die Farbe ist die Aussage; sie darf sich nicht ändern, nur weil ich die Überschrift umgebaut habe. */ .gruppe__kopf--sicher { background: var(--color-success-subtle, #eefaf3); } .gruppe__kopf--gesperrt { background: var(--color-warn-subtle, #fff8e1); } .gruppe__kopf--unsicher { background: var(--color-warn-subtle, #fff8e1); } .gruppe__zeile { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; } .gruppe__titel { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } /* Die Zahl als Marke. Sie steht NEBEN dem Titel, nie darin: Eine Überschrift, die mit ihrer eigenen Zahl umbricht, ist keine Überschrift mehr. */ .gruppe__zahl { padding: 1px 8px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════ KISTENINHALTE ══════════════════════════════════════════════════════════════════════════ Als Chips, nicht als Tabelle. Eine Tabelle verspricht Struktur: Spalten, Werte, Vergleichbarkeit. Hier gibt es nichts zu vergleichen: Es ist eine Aufzählung dessen, was drin sein KANN. Die Darstellung soll sagen, was die Sache ist, und nicht mehr. */ .inhalt-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-xs); } /* Das Kärtchen ist jetzt ein KNOPF, kein Text mehr. Es öffnet etwas, also muss es sich auch so anfühlen: Hand-Zeiger, Hover, Tastaturfokus. Ein anklickbares Ding, das aussieht wie Beschriftung, findet niemand. */ .inhalt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid transparent; border-radius: 999px; background: var(--color-border-subtle); font-size: var(--font-size-xs); font-family: inherit; color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms), color var(--transition-fast, 120ms); } .inhalt-chip:hover, .inhalt-chip:focus-visible { background: var(--color-surface); border-color: var(--color-primary, #2563eb); color: var(--color-text); } /* Ein Kärtchen ohne Item dahinter (das Ding war nie einzeln im Shop) führt nirgendwohin. Es zeigt beim Drüberfahren trotzdem seinen Kasten, aber es verspricht keinen Klick, den es nicht einlösen kann. */ .inhalt-chip:not([data-chip-item]) { cursor: default; } .inhalt-chip__bild { width: 18px; height: 18px; object-fit: contain; } /* ══════════════════════════════════════════════════════════════════════════ DAS ITEM-FENSTER ÜBER EINEM TRUHENINHALT ══════════════════════════════════════════════════════════════════════════ Vorbild ist der Tooltip aus dem Spiel: ein kleiner Kasten, direkt am Ding, ohne die Seite zu verlassen. Das Aussehen ist bewusst UNSERES, ein schwarzer Spiel-Tooltip mit goldener Schrift wäre hier ein Fremdkörper (und die Grafik gehört Gameforge). position: fixed, weil das Fenster am Bildschirm hängt, nicht am Dokument. Es steht ja über einer Liste, die selbst scrollt. ══════════════════════════════════════════════════════════════════════════ */ .item-pop { position: fixed; z-index: 1200; min-width: 240px; /* Der Kasten ist so breit, wie sein Inhalt es verlangt, nicht so breit, wie ich es vorher geraten habe. Eine feste Breite zwingt sonst die Namen in die Knie (siehe .item-pop__inhalt-liste). Die Obergrenze bleibt: nie breiter als der Bildschirm, und nie so breit, dass aus dem Tooltip ein Fenster wird. */ width: max-content; max-width: min(880px, 94vw); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); font-size: var(--font-size-sm); line-height: 1.5; animation: dialog-auf 120ms ease-out; /* DER WICHTIGSTE ZWEI ZEILEN IN DIESER DATEI: Der Kasten hängt am Zeiger. Ohne pointer-events:none läge er UNTER der Maus, der Browser hielte ihn für das Ziel, das Kärtchen bekäme ein "mouseout", der Kasten schlösse sich, die Maus wäre wieder über dem Kärtchen, er ginge auf, und so weiter. Ein Flackern, dreißigmal pro Sekunde. Er ist zum Lesen da, nicht zum Anfassen. Also ist er für die Maus Luft. */ pointer-events: none; } .item-pop__kopf { display: flex; align-items: center; gap: var(--space-sm); padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-subtle); font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); color: var(--color-text); } /* Der Name nimmt sich den Platz, der übrig ist, und bricht um, statt den Preis aus dem Kasten zu schieben. */ .item-pop__name { flex: 1 1 auto; min-width: 0; } /* Der letzte Preis steht im Kopf, nicht in der Tabelle: Er ist die Zahl, wegen der man hinschaut. Alles darunter erklärt sie nur. */ .item-pop__preis { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: var(--color-bg-subtle); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .item-pop__bild { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; } /* Kein Bild? Ein gepunkteter Rahmen statt einer Lücke. Eine Lücke sieht aus wie ein Fehler; ein Platzhalter sagt: hier fehlt etwas, und das ist bekannt. */ .item-pop__bild--leer { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--font-size-xs); } /* ── Die Marken: Verlässlichkeit und Fälligkeit ────────────────────────── "alle 304 T" klingt nach einer Zusage. "schwankend" daneben sagt, dass es keine ist. Die Warnung gehört an die Zahl, nicht in eine Fußnote, dorthin schaut niemand, der es eilig hat. */ .item-pop__marken { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-xs); } .item-pop__marke { padding: 1px 8px; border-radius: 999px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } .item-pop__marke--gut { background: var(--color-success-subtle, #e7f6ec); color: var(--color-success, #1e7a3c); } .item-pop__marke--warn { background: var(--color-warn-subtle, #fff8e1); color: var(--color-warning, #8a6100); } .item-pop__marke--schlecht { background: var(--color-danger-subtle, #fdecec); color: var(--color-danger, #c0392b); } /* "nicht mehr im Shop" ist keine Warnung, sondern ein Nachruf. Grau. */ .item-pop__marke--tot { background: var(--color-bg-subtle); color: var(--color-text-muted); } .item-pop__zahlen { margin: 2px 0; } .item-pop__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: 3px 0; color: var(--color-text-muted); /* das Label leiser … */ } .item-pop__zeile strong { color: var(--color-text); /* … der Wert führt */ font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Der Nebenwert (vor 726 T · 251 bis 357) steht neben dem Hauptwert, nicht in einer eigenen Zeile: Er beantwortet keine eigene Frage, er relativiert nur. */ .item-pop__leise { color: var(--color-text-muted); font-weight: var(--font-weight-normal); } /* "War nie einzeln im Shop" ist keine Fehlermeldung, sondern ein Ergebnis. Also grau und ruhig, nicht rot. */ .item-pop__leer, .item-pop__laedt { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.45; padding: var(--space-xs) 0; } /* ── Der Shop-Text im Tooltip ───────────────────────────────────────────── Bei einem Shop-Paket ist er die einzige Auskunft, die es überhaupt gibt. */ .item-pop__text { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border-subtle); font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.45; } .item-pop__text > div { white-space: normal; } /* ── Und in der Detailansicht: der ganze Text ───────────────────────────── */ .detail-text { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--color-primary, #2563eb); background: var(--color-bg-subtle); border-radius: var(--radius-sm); font-size: var(--font-size-sm); line-height: 1.5; } .detail-text__kopf { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-bottom: 4px; } /* ── Der Bonus im Hover ──────────────────────────────────────────────────── Zwei, drei kurze Zeilen wie "+15% EXP-Bonus". Sie sind der Grund, warum man ein Pet-Siegel kauft, und sollen deshalb ins Auge fallen, ohne zu schreien: etwas kräftigere Schrift, grüner Ton, kein Kasten drumherum. Ein eigener Rahmen würde sie zu einem dritten Block machen, sie sind aber nur eine Ergänzung der Zeilen darüber. */ .item-pop__bonus { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-success, #16a34a); } /* ── Die Wiki-Felder (Funktion, Bonus, Herkunft …) ───────────────────────── Mehrere kleine Abschnitte in EINEM Kasten. Jeder bekommt eine eigene, leise Überschrift, sonst liefe "Funktion" nahtlos in "Bonus" über und man müsste beim Lesen raten, wo das eine aufhört. Der Abstand macht die Trennung, nicht eine Linie: Es sind Geschwister, keine getrennten Kästen. */ .wiki-feld + .wiki-feld { margin-top: 10px; } .wiki-feld__kopf { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary, var(--color-text-secondary)); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .wiki-feld__text { color: var(--color-text-primary); line-height: 1.55; } /* ── Die geordnete Shop-Beschreibung ─────────────────────────────────────── Drei Sorten Zeile, drei Gewichte. Geteilt von Detailansicht (.detail-text) und Tooltip (.item-pop__text), damit beide gleich aussehen. Vorher lagen alle Zeilen als gleichrangige
übereinander, eine Wand. Jetzt: die Merkmale als ruhige Punkteliste (das Wesentliche), die Werbung leise darunter, der Hinweis abgesetzt als Kleingedrucktes. */ .shop-merkmale { list-style: none; margin: 0; padding: 0; } .shop-merkmale li { position: relative; padding-left: 14px; margin: 3px 0; } .shop-merkmale li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary, #2563eb); opacity: 0.5; } /* Werbung ist kein Merkmal, sie steht leiser und kursiv, damit das Auge sie als Ton, nicht als Fakt liest. */ .shop-fliess { margin: 7px 0 0; color: var(--color-text-muted); font-style: italic; } /* Der Hinweis ist das Kleingedruckte: abgesetzt durch eine feine Linie, kleiner und ruhig, da, aber nie im Weg. */ .shop-hinweis { margin: 8px 0 0; padding-top: 6px; border-top: 1px dashed var(--color-border-subtle, rgba(0, 0, 0, 0.12)); color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.4; } .shop-hinweis__label { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-right: 4px; } /* ── Der mögliche Inhalt IM Tooltip ────────────────────────────────────── Damit beantwortet der Kasten über einer Truhe die Frage, wegen der man hinschaut, ohne dass man die Truhe erst aufklappen muss. */ .item-pop__inhalt { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border-subtle); } .item-pop__inhalt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); margin-bottom: 5px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } .item-pop__inhalt-stand { font-weight: var(--font-weight-normal); color: var(--color-text-muted); white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════ SPALTEN, DIE SICH NACH DEN NAMEN RICHTEN: NICHT UMGEKEHRT ══════════════════════════════════════════════════════════════════════════ Erster Versuch: drei gleich breite Spalten (1fr). Sieht sauber aus, bis der erste lange Name kommt: Wüstenprinzessin+ (braun) … Mondsichelchen-Truhe (30 … Ein Item-Name, der genau dort abbricht, wo er sich von seinem Nachbarn unterscheidet, ist kein Name mehr. Er ist ein Rätsel. Und dann ist die ganze Liste wertlos: Man hat sie ja aufgeschlagen, um zu WISSEN, was drin ist. Lieber ein breiterer Kasten als ein abgeschnittener Name. Also: grid-auto-flow: column mit max-content-Spalten. Die Zeilenzahl gibt das JS vor (--zeilen), die Breite ergibt sich aus dem längsten Namen. Der Kasten wird so breit, wie der Inhalt es verlangt, und nie breiter als der Bildschirm (max-width am .item-pop). ══════════════════════════════════════════════════════════════════════════ */ .item-pop__inhalt-liste { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--zeilen, 8), auto); grid-auto-columns: max-content; gap: 2px 18px; } .item-pop__inhalt-zeile { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 1px 0; font-size: var(--font-size-xs); color: var(--color-text-secondary); } /* Der Name steht GANZ da. Kein Umbruch (das würde die Rasterung zerstören, wegen der man die Liste überfliegen kann), kein Abschneiden (das würde den Namen zerstören, wegen dem man sie liest). Die Spalte richtet sich nach ihm. */ .item-pop__inhalt-name { white-space: nowrap; } /* Die Trefferchance aus der Itemshop-Tabelle ("· 17,5 %"). Leise und mit gleichen Ziffernbreiten, damit die Prozente untereinander stehen. */ .item-pop__inhalt-chance { color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* Das Bildchen ist der Grund, warum man die Liste überfliegen kann, statt sie zu lesen. Fehlt eins, hält ein leerer Platz die Spalte trotzdem in der Flucht, sonst tanzen die Namen, und das Raster ist dahin. */ .item-pop__inhalt-zeile img, .item-pop__inhalt-kein-bild { flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; } .item-pop__inhalt-zeile--rest { color: var(--color-text-muted); font-style: italic; padding-left: 21px; /* auf einer Linie mit den Namen daneben */ } /* (.item-pop__fuss ist weggefallen. Dort stand "Klick öffnet die ganze Historie", ein Versprechen, das der Kasten nicht überall einlöst: Über einer Ranking-Zeile stimmt es, über einem Kärtchen ohne Item dahinter nicht. Ein Hinweis, der manchmal lügt, ist schlechter als keiner. Wer die Zeile öffnen will, klickt sie ohnehin an, das muss ihm niemand sagen.) */ /* ── Die laufenden Angebote als Kärtchen ───────────────────────────────── Dasselbe Kärtchen wie beim Truheninhalt, nur mit Preis. Ein Item ist ein Item, egal aus welcher Sorte Beitrag es kommt. */ .aktuell-item__chips { margin-top: var(--space-xs); } .inhalt-chip--preis { padding-right: 4px; } .inhalt-chip__preis { margin-left: 5px; padding: 1px 7px; border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; } .inhalt-chip--preis:hover .inhalt-chip__preis { background: var(--color-bg-subtle); } /* Die Gewinn-Chance im Rad-Chip ("· 12 %"). Leise, mit gleichen Ziffernbreiten, damit die Prozente ruhig neben den Namen stehen. */ .inhalt-chip__chance { margin-left: 4px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* ── Die Gewinne in "Aktuell im Shop" ───────────────────────────────────── Sie stehen NEBEN der Preisliste, nicht darin: Ein Gewinn hat keinen Preis, und eine Zeile mit "— DR" dahinter wäre eine Antwort auf eine Frage, die niemand gestellt hat. */ .aktuell-item__gewinne { margin-top: var(--space-xs); padding-top: var(--space-xs); } .aktuell-item__gewinne-kopf { display: block; margin-bottom: 5px; font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Die Ebenen des Rads sind gleichwertige Abschnitte, keine Nachschläge. Also bekommt jede Luft und eine feine Linie davor, damit man sieht, wo eine aufhört und die nächste anfängt. Eine Haarlinie reicht dafür, mehr wäre Dekoration. */ .rad-ebene + .rad-ebene { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); } /* Die Ebenen-Überschrift trägt jetzt ihren Abschnitt, vorher war sie nur eine Zeile mit Doppelpunkt davor. Etwas heller und mit Abstand nach unten. */ .rad-ebene > .aktuell-item__gewinne-kopf { margin-bottom: var(--space-sm); color: var(--color-text-secondary); font-size: var(--font-size-sm); } /* (.inhalt-hinweis ist weggefallen, der Hinweistext gehörte zur Inhalts-Liste in der Detailansicht, und die ist im Tooltip aufgegangen. Eine CSS-Klasse, die niemand mehr benutzt, ist kein harmloser Rest: Beim nächsten Mal sucht man, wo sie herkommt, und findet nichts.) */ /* Die Kisten-Treffer über der Ranking-Tabelle. Sie sind eine ANDERE Sorte Antwort, deshalb ein eigener Kasten und keine Zeile in der Tabelle. */ .kisten-treffer { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-border-subtle); } .kisten-kopf { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-bottom: 4px; } /* Die Zahl in der Überschrift ("(11 Fundstellen)"). Ein leiser Zusatz, keine zweite Überschrift. */ .kisten-anzahl { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-muted); } /* Der Knopf "Icon für alle wählen" in der Kopfzeile. Ein leiser Textknopf, der erst auffällt, wenn man ihn sucht. */ .kisten-icon-alle { margin-left: var(--space-md); padding: 2px 8px; font-size: var(--font-size-xs); color: var(--color-accent, #2563eb); background: none; border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.12)); border-radius: 6px; cursor: pointer; } .kisten-icon-alle:hover { background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04)); } /* Die Icon-Spalte: so schmal wie ihr Inhalt, mittig, und anklickbar. Ein Klick irgendwo in der Zelle öffnet den Bild-Wähler für alle Varianten. */ .kisten-icon { width: 1px; vertical-align: middle; cursor: pointer; } .kisten-icon .item-icon { display: block; width: 20px; height: 20px; object-fit: contain; } /* Wo noch kein Bild ist: ein „?"-Feld, das zum Klicken einlädt, dasselbe Signal wie im Ranking. Ein leeres Feld sähe aus wie „hier geht nichts". */ .kisten-icon-leer { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: var(--font-size-xs); color: var(--color-text-muted); border: 1px dashed var(--color-border-subtle, rgba(0, 0, 0, 0.2)); border-radius: 4px; } .kisten-icon:hover .kisten-icon-leer { color: var(--color-accent, #2563eb); border-color: var(--color-accent, #2563eb); } /* ══════════════════════════════════════════════════════════════════════════ Icon-Vorschläge-Seite ══════════════════════════════════════════════════════════════════════════ */ .icon-summe { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); background: var(--color-bg-subtle, rgba(0, 0, 0, 0.03)); border-radius: 8px; } /* Eine Vorschlagszeile: Ziel-Icon · Name + Varianten · Übernehmen-Knopf. */ .icon-vorschlag { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06)); } .icon-vorschlag:last-child { border-bottom: none; } .icon-vorschlag__bild { cursor: pointer; /* das Icon selbst übernimmt auch, nicht nur der Knopf */ } .icon-vorschlag__bild .item-icon { width: 34px; height: 34px; object-fit: contain; } .icon-vorschlag__text { flex: 1; min-width: 0; } .icon-vorschlag__ziel { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .icon-vorschlag__zahl { margin-left: 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-muted); } .icon-vorschlag__namen { font-size: var(--font-size-xs); color: var(--color-text-muted); /* Lange Variantenlisten nicht die Zeile sprengen lassen. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-btn { flex: none; padding: 5px 12px; font-size: var(--font-size-sm); } /* Unsichere Zeile: Name + eine Reihe anklickbarer Kandidaten. */ .icon-unsicher { /* Horizontaler Innenabstand, seit die Liste in einem Scrollkasten sitzt: ohne ihn klebten die Namen direkt am Rand. Vertikal wie gehabt. */ padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06)); } .icon-unsicher:last-child { border-bottom: none; } .icon-unsicher__name { font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: 4px; } .icon-unsicher__quelle { margin-left: 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-muted); } .icon-unsicher__kand { display: flex; flex-wrap: wrap; gap: 6px; } .icon-kandidat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; font-size: var(--font-size-xs); color: var(--color-text-secondary); background: none; border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.12)); border-radius: 6px; cursor: pointer; } .icon-kandidat:hover { border-color: var(--color-accent, #2563eb); color: var(--color-accent, #2563eb); } .icon-kandidat .item-icon { width: 24px; height: 24px; object-fit: contain; } /* Der „selbst suchen"-Knopf hebt sich leicht ab, er ist der eigene Weg, nicht ein Vorschlag des Programms. */ .icon-kandidat--suche { border-style: dashed; color: var(--color-accent, #2563eb); font-weight: var(--font-weight-medium); } /* Der Scrollkasten um die Tabelle. Vertikal bei vielen Zeilen, HORIZONTAL bei schmalem Fenster, so bleiben die Spalten heil und ausgerichtet, statt zu brechen oder abgeschnitten zu werden. */ .kisten-scroll { max-height: 240px; overflow: auto; } /* Eine echte Tabelle: vier Spalten, über alle Zeilen ausgerichtet. Bewusst KEIN width:100%, die Tabelle ist so breit wie ihr Inhalt. Dadurch sitzt die Meta-Spalte dicht hinter der Kiste (der frühere "große Abstand" entstand, weil eine Spalte bis zum Fensterrand gedehnt wurde). Wird das Fenster schmaler als die Tabelle, scrollt der Kasten seitwärts. */ .kisten-tabelle { border-collapse: collapse; font-size: var(--font-size-sm); } .kisten-tabelle td { padding: 5px 0; border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06)); white-space: nowrap; vertical-align: baseline; } /* GLEICHER Abstand zwischen JEDEM Spaltenpaar, egal wie breit der Inhalt ist. Deshalb hier statt einzelner padding-right an den Zellen: Die Regel ".kisten-tabelle td { padding: 5px 0 }" ist spezifischer als eine bloße Klasse wie ".kisten-pfeil" und hätte deren padding-right stillschweigend auf 0 zurückgesetzt, genau darum klebte "liegt in" an der Kiste. "td + td" ist ebenso spezifisch und trifft jede Spalte außer der ersten. */ .kisten-tabelle td + td { padding-left: var(--space-lg); } .kisten-tabelle tr:last-child td { border-bottom: none; } /* Item: der Bezug, nicht die Auskunft, leise. */ .kisten-item { color: var(--color-text-secondary); } /* Hover-bar: über den Item-Namen fahren zeigt, was in DIESER Truhe steckt. Leiser Hinweis wie bei den Truhen-Namen: gepunktete Linie, Fragezeichen-Cursor. */ .kisten-item--pop { cursor: help; text-decoration: underline dotted var(--color-border); text-underline-offset: 3px; } /* Verb ("lag in" / "liegt in"): das ruhige Bindeglied. */ .kisten-pfeil { color: var(--color-text-muted); font-size: var(--font-size-xs); } /* Kiste: wonach man sucht, sie bekommt das Gewicht. */ .kisten-box { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } /* Wann/Wie-oft (oder das Itemshop-Etikett). */ .kisten-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); } /* "immer im Shop", steht dort, wo sonst der Rhythmus steht ("alle 18 T"). Kursiv und leise: Es ist keine Prognose, sondern die Feststellung, dass es keine braucht. Ein Item, das nie weg war, kommt auch nicht wieder. */ .ranking-dauerhaft { font-style: italic; color: var(--color-text-muted); } .gruppe__marke { font-size: var(--font-size-xs); color: var(--color-text-muted); font-style: italic; } .gruppe__text { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; } /* Das Kleingedruckte: Es steht da, es steht im Weg, aber es steht nicht in derselben Größe wie die Aussage darüber. */ .gruppe__text--leise { display: block; margin-top: 2px; font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Der Scrollkasten schließt direkt an den Gruppenkopf an, oben ohne Radius, damit beides wie EIN Block wirkt und nicht wie zwei zufällig gestapelte. */ .namen__gruppe .liste-box { border-radius: 0 0 var(--radius-md) var(--radius-md); } .namen__gruppe + .namen__gruppe { margin-top: var(--space-xl); } /* "Kein Treffer in dieser Gruppe." steht IN der Gruppe, nicht statt ihrer. Eine Gruppe, die bei der Suche einfach verschwindet, lässt einen rätseln, ob es sie noch gibt. Eine, die sagt "hier ist nichts", beantwortet die Frage. */ .namen__leer { padding: var(--space-md); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); } /* Der Verlauf im Item-Dialog. Etwas höher als die Listen auf der Aufräum-Seite: Hier steht nur EINE Liste im Kasten, sie darf also mehr Platz nehmen. */ .liste-box--verlauf { max-height: 52vh; padding: 0 var(--space-sm); } /* Die Zahl neben der Überschrift ("94 Sichtungen"). Sie steht dort, weil ein Kasten mit Deckel seine Länge nicht mehr selbst verrät, wer nur zwanzig Zeilen sieht, muss trotzdem wissen, dass es vierundneunzig sind. */ .detail-titel__zahl { margin-left: var(--space-sm); font-size: var(--font-size-xs); font-weight: 400; color: var(--color-text-muted); } /* ── Zusammengeführte Items: zugeklappt, mit Deckel ────────────────────── */ .alias-summary { cursor: pointer; padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); color: var(--color-text-muted); user-select: none; } .alias-summary:hover { color: var(--color-text); } .alias-suche { margin-bottom: var(--space-sm); } .alias-scroll { max-height: 320px; overflow-y: auto; } /* ── Fälligkeit ─────────────────────────────────────────────────────── * Die vier Zustände. Der wichtigste ist "überfällig", deshalb ist er * der einzige, der farblich schreit. * * "keine" ist ein schlichtes "—", KEINE Zahl. Wo keine belastbare * Prognose möglich ist, wird auch keine angezeigt. Eine geratene Zahl * sieht genauso aus wie eine, die stimmt, und der Nutzer kann beide * nicht unterscheiden. * ─────────────────────────────────────────────────────────────────── */ .faellig { white-space: nowrap; font-weight: var(--font-weight-semibold); } .faellig__detail { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); opacity: 0.8; } /* Das voraussichtliche Datum. Kursiv und etwas blasser, damit man sofort sieht: geschaetzt, nicht sicher. */ .faellig__detail--schaetzung { font-style: italic; opacity: 0.65; cursor: help; } .faellig--ueberfaellig { color: var(--color-danger); } .faellig--heute { color: var(--color-danger); } .faellig--bald { color: var(--color-warning); } .faellig--termin { color: var(--color-success); } .faellig--faellig { color: var(--color-success); } /* "heute" in der Zuletzt-Spalte: grün, weil das Item GERADE JETZT läuft. */ .zuletzt-heute { color: var(--color-success); font-weight: var(--font-weight-semibold); } .faellig--spaeter { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); } .faellig--keine { color: var(--color-text-muted); font-weight: var(--font-weight-regular); cursor: help; } .preis-spanne { color: var(--color-text-secondary); white-space: nowrap; } .badge--muted { background: var(--color-border-subtle); color: var(--color-text-muted); } /* ── Detail-Ansicht ───────────────────────────────────────────────── */ .detail-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .detail-zahl { text-align: center; padding: var(--space-md) var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); transition: border-color var(--transition-fast, 120ms); } .detail-zahl:hover { border-color: var(--color-border); } .detail-zahl__wert { font-size: var(--font-size-xl, 1.5rem); font-weight: var(--font-weight-bold); color: var(--color-text); line-height: 1.15; font-variant-numeric: tabular-nums; } .detail-zahl__label { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 4px; /* Ein Etikett ist keine Aussage, es ist eine Beschriftung. Kapitälchen und etwas Sperrung setzen es leise von der Zahl ab, ohne mit ihr zu wetteifern. */ text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--font-weight-medium); } /* Die ehrliche Einordnung. Steht direkt unter den Zahlen, nicht klein gedruckt irgendwo unten, wo man sie überliest. */ .detail-warnung { background: var(--color-danger-subtle); border-left: 3px solid var(--color-danger); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text); margin-bottom: var(--space-lg); } .detail-hinweis { background: var(--color-warning-subtle); border-left: 3px solid var(--color-warning); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text); margin-bottom: var(--space-lg); } /* Wartungssignal ganz oben auf der Übersicht (Geister-Items). Ruhiges Gelb, kein Alarm: ein Hinweis für den Admin, kein Fehler für den Nutzer. Alle Farbwerte kommen aus design-system.css, dieselbe Warnfarbe wie sonst im Dashboard. */ .geister-hinweis { background: var(--color-warning-subtle); border-left: 3px solid var(--color-warning); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text); margin-bottom: var(--space-lg); } .geister-hinweis strong { color: var(--color-warning); } .detail-titel { display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); /* Abstand NACH OBEN: Jeder Abschnitt (Verlauf, Möglicher Inhalt, Steckt in Kisten) bekommt einen klaren Anfang, statt am vorigen zu kleben. Eine dünne Linie darüber trennt sie ohne Lärm. */ margin: var(--space-lg) 0 var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); } /* Der erste Abschnitt braucht die Trennlinie nicht, über ihm stehen die Kennzahlen, die sich schon abheben. */ .detail-zahlen + .detail-titel, .detail-warnung + .detail-titel, .detail-hinweis + .detail-titel, .detail-text + .detail-titel { border-top: none; padding-top: 0; margin-top: var(--space-md); } .detail-verlauf { list-style: none; margin: 0; padding: 0; } /* Eine gedeckelte Fassung fuer sehr lange Listen. "Steckt in diesen Kisten" kann ueber sechzig Zeilen haben, das schiebt sonst die halbe Seite weg. Derselbe Deckel wie bei .kisten-scroll, damit beide Kisten-Listen im Detail gleich hoch bleiben. Die Zeile, die man gerade liest, klebt nicht am Rand, deshalb ein wenig Innenabstand rechts fuer den Rollbalken. */ .detail-verlauf--scroll { max-height: 240px; overflow-y: auto; padding-right: 4px; } .detail-verlauf li { display: flex; align-items: baseline; gap: var(--space-md); padding: var(--space-sm) var(--space-xs); border-radius: var(--radius-sm); border-bottom: 1px solid var(--color-border-subtle); font-size: var(--font-size-sm); transition: background var(--transition-fast, 120ms); } /* Beim Drüberfahren hebt sich die Zeile leicht ab, man sieht, welchen Beitrag man gleich öffnet. */ .detail-verlauf li:hover { background: var(--color-bg-subtle); } .detail-verlauf li:last-child { border-bottom: none; } .detail-verlauf__datum { color: var(--color-text-muted); white-space: nowrap; min-width: 90px; } .detail-verlauf__titel { color: var(--color-text); flex: 1; } /* Truhen-Namen, über die man fahren kann, um ihren Inhalt zu sehen. Ein leiser Hinweis: gepunktete Unterstreichung und Fragezeichen-Cursor. */ .detail-verlauf__titel--pop { cursor: help; text-decoration: underline dotted var(--color-border); text-underline-offset: 3px; } .detail-verlauf__abstand { color: var(--color-primary); font-weight: var(--font-weight-semibold); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════ * ITEM-ICONS (aus dem Metin2-Wiki) * ═══════════════════════════════════════════════════════════════════ */ .ranking-bild-th { width: 44px; } .ranking-bild { width: 44px; padding-right: 0 !important; } .item-icon { width: 32px; height: 32px; display: block; border-radius: var(--radius-sm); cursor: pointer; /* "object-fit: contain" NICHT weglassen. ------------------------------------------------------------------ Die Bilder haben nicht alle dasselbe Seitenverhältnis: Segenskugel 32 x 32 quadratisch Waffen/Kostüme 32 x 64 hochkant Mammut-Wundertruhe 242 x 242 quadratisch, aber groß Ohne "contain" würde ein 32x64-Bild in das 32x32-Kästchen GEQUETSCHT, das Schwert wäre gestaucht. Mit "contain" wird es eingepasst und behält seine Form. */ object-fit: contain; /* Hier stand "image-rendering: pixelated". ------------------------------------------------------------------ Das war richtig, SOLANGE alle Bilder 32x32 waren: Beim Hochskalieren auf einem HiDPI-Display bleiben harte Pixelkanten schärfer als weichgezeichnete. Seit auch große Bilder dabei sind (Mammut-Wundertruhe: 242x242), ist es FALSCH. "pixelated" heißt "Nächster-Nachbar", beim VERKLEINERN von 242 auf 32 Pixel wirft das 98 % der Bildpunkte einfach weg. Ergebnis: ein zerfranstes, flimmerndes Bild. Die Standardglättung ("auto") verkleinert sauber und lässt 32x32-Icons bei ihrer 1:1-Darstellung praktisch unangetastet. Also: für den einen Fall minimal weicher, für den anderen dramatisch besser. */ image-rendering: auto; transition: transform var(--transition-fast); } .item-icon:hover { transform: scale(1.15); } /* Kein Bild? Ein Platzhalter, der zum Klicken einlädt: KEIN leeres Feld. Ein leeres Feld sieht kaputt aus. Ein "?" sagt: hier fehlt etwas, und du kannst es beheben. */ .item-icon--leer { /* Das „?" gehört in die Mitte, sonst klebt es oben links in der Ecke. */ display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border); background: transparent; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1; padding: 0; } .item-icon--leer:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-subtle); } /* Ein Inhalt aus dem Shop hat kein Datum, er sagt "was", nicht "wann". Das kleine Etikett steht deshalb dort, wo sonst das Datum stünde. */ /* "laut Shop" ist ein HERKUNFTS-Etikett, kein Link. Vorher war es blau (Primärfarbe), und Blau plus Pille liest jeder als "hier kann man klicken". Also neutral: ein ruhiges graues Tag, das sagt "woher", ohne etwas zu versprechen, das es nicht tut. */ .quelle-shop { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--color-bg-subtle, #f1f3f5); color: var(--color-text-secondary); font-size: var(--font-size-xs, 11px); font-weight: var(--font-weight-medium); cursor: help; } /* ── Der kleine Tooltip im App-Stil (siehe appTipZeigen in item-popup.js) ──── Ein helles, gerundetes Kästchen wie die übrigen Karten der App, statt des schwarzen Browser-title. Liegt am und wird per position:fixed gesetzt, damit es kein scrollender Kasten abschneidet. */ .app-tip { position: fixed; z-index: 9999; max-width: 240px; padding: 6px 9px; border-radius: var(--radius-sm, 6px); background: var(--color-bg, #fff); color: var(--color-text, #1f2937); border: 1px solid var(--color-border, #e5e7eb); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14); font-size: var(--font-size-xs, 11px); font-weight: var(--font-weight-normal); line-height: 1.4; white-space: normal; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; } .app-tip--an { opacity: 1; } /* ── Das Sammel-Zeichen ──────────────────────────────────────────────────── Für "verschiedene Hüte+", "verschiedene Pets": Warengruppen, keine Items. Es MUSS anders aussehen als ein Icon, sonst hält man es für eines. Deshalb: kein Rahmen wie beim "?" (das lädt zum Klicken ein, hier gibt es nichts zuzuordnen), sondern eine ruhige, runde Fläche mit einem Zeichen darin. Gedämpft, denn es ist eine Kategorie, keine Sache. Und kein cursor:pointer. Was nicht klickbar ist, darf nicht so tun. */ .item-icon--sammel { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border); border-radius: 50%; background: var(--color-bg-subtle); font-size: 15px; line-height: 1; opacity: 0.75; cursor: help; } /* Im Kärtchen ("Aktuell im Shop") ist dasselbe Zeichen kleiner und ohne Rahmen, dort steht es NEBEN dem Namen, nicht anstelle eines Icons in einer Spalte. Derselbe Inhalt, andere Umgebung, anderes Maß. */ .inhalt-chip .item-icon--sammel { width: 18px; height: 18px; border: none; background: none; font-size: 12px; opacity: 0.9; } /* ── Der Zuordnungs-Dialog ────────────────────────────────────────── */ .bild-dialog { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 200; padding: var(--space-lg); } .bild-dialog[hidden] { display: none; } .bild-dialog__box { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-lg); width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; } .bild-dialog__kopf { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-md); } .bild-dialog__titel { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0; } .bild-dialog__item { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 2px 0 0; } .bild-treffer-liste { margin-top: var(--space-md); overflow-y: auto; flex: 1; min-height: 120px; } .bild-treffer { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm); border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; text-align: left; font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text); transition: background var(--transition-fast); } .bild-treffer:hover { background: var(--color-border-subtle); } /* Dasselbe in der Suchvorschau, hier sieht man die Unterschiede sogar besonders deutlich, weil Icons und große Bilder direkt untereinander stehen. */ .bild-treffer img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; image-rendering: auto; } .bild-hinweis { padding: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; line-height: 1.6; } .bild-hinweis code { background: var(--color-border-subtle); padding: 2px 6px; border-radius: var(--radius-sm); font-family: ui-monospace, monospace; color: var(--color-text); } .bild-dialog__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .bild-dialog__hinweis { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Die Größenangabe hinter jedem Suchtreffer. Sie steht da, damit du siehst, WAS du auswählst. Ein 32×32-Icon ist das Übliche, 242×242 ist die Mammut-Wundertruhe, zu der es schlicht kein kleineres Bild gibt. Ohne diese Angabe würdest du dich fragen, warum ein Bild plötzlich anders aussieht. */ .bild-treffer__groesse { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════════════════ Prüf-Liste: die Korrektur-Zeile ══════════════════════════════════════════════════════════════════════════ Vier Felder und zwei Knöpfe in einer Reihe. Das Namensfeld bekommt allen übrigen Platz (1fr), die Zahlenfelder sind schmal, sie enthalten selten mehr als drei Ziffern, und ein breites Feld für eine dreistellige Zahl lädt dazu ein, etwas anderes hineinzuschreiben. Auf schmalen Bildschirmen bricht die Reihe um, statt zu quetschen. */ .pruef-item__form { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-top: var(--space-sm); } .pruef-item__form .pruef-name { flex: 1 1 200px; min-width: 160px; } .pruef-item__form .pruef-normal, .pruef-item__form .pruef-offer, .pruef-item__form .pruef-tage { flex: 0 0 84px; width: 84px; text-align: right; font-variant-numeric: tabular-nums; } /* Die Zahlenfelder verlieren ihre Spinner-Pfeilchen. Die sind bei Preisen sinnlos (niemand klickt sich von 45 auf 29) und stehlen Platz. */ .pruef-item__form input[type="number"]::-webkit-inner-spin-button, .pruef-item__form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pruef-item__form input[type="number"] { -moz-appearance: textfield; } /* "Verwerfen" ist bewusst der LEISERE Knopf. Es ist die zerstörende Aktion, sie soll erreichbar sein, aber nicht einladend. Das Auge soll zuerst auf "Übernehmen" fallen, denn das ist in den allermeisten Fällen das Richtige. */ .pruef-item__form .pruef-weg { color: var(--color-text-muted); } .pruef-item__form .pruef-weg:hover { color: var(--color-danger); } /* ══════════════════════════════════════════════════════════════════════════ Beitrags-Ansicht ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ Das Beitrags-Fenster war zu klein, und zwar nicht "unschön", sondern UNBRAUCHBAR. ══════════════════════════════════════════════════════════════════════════ In diesem Fenster liest man Tabellen mit fünf Spalten in Monospace. Bei 760 px bricht jede Zeile um, und ausgerechnet die Struktur, wegen der man hier hinschaut, wird unsichtbar. Deshalb: so breit wie der Bildschirm hergibt (bis 1400 px), und die Höhe an der Sichthöhe statt an einer festen Zeilenzahl. Ein Fenster für eine Aufgabe, nicht für ein Layout-Raster. */ /* ══════════════════════════════════════════════════════════════════════════ DER GRUNDSTIL DES FENSTERS, er hat schlicht GEFEHLT ══════════════════════════════════════════════════════════════════════════ Das trug die Klasse "dialog", und die gab es nirgends. Kein Rahmen, keine Rundung, kein Schatten, kein abgedunkelter Hintergrund: Der Browser hat sein eingebautes Aussehen von 1998 gezeigt, mitten in einer App, die überall sonst Karten mit weichen Kanten hat. Es sah nicht "schlicht" aus. Es sah aus wie ein Fehler. Und in gewisser Weise war es einer: Ich habe ein Bauteil benutzt, das ich nie gebaut hatte. Die Werte kommen aus dem Design-System (--color-surface, --radius-xl, --shadow-xl), dieselben, aus denen auch .modal in components.css gemacht ist. Ein zweites Aussehen für dasselbe Ding wäre schon der nächste Fehler. ══════════════════════════════════════════════════════════════════════════ */ .dialog { padding: 0; border: none; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-xl); max-width: 560px; width: 90%; max-height: 90vh; overflow: hidden; } /* Der abgedunkelte Hintergrund. Er ist nicht Dekoration, sondern die Ansage "hier ist gerade nichts anderes wichtig", und er ist die Fläche, auf die man klickt, um wieder rauszukommen. */ .dialog::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } /* Das kurze Aufpoppen, dieselbe Bewegung wie bei .modal: von leicht unten, leicht kleiner. Ein Fenster, das aus dem Nichts erscheint, wirkt wie ein Sprung; eines, das kommt, wirkt wie eine Antwort. */ @keyframes dialog-auf { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .dialog[open] { animation: dialog-auf var(--transition-base, 180ms) ease-out; } @media (prefers-reduced-motion: reduce) { .dialog[open] { animation: none; } } .dialog__form { padding: var(--space-lg); overflow-y: auto; max-height: 90vh; } /* Der Kopf bleibt stehen. Wer unten in einer langen Item-Liste steckt, muss den Weg hinaus sehen, ohne erst wieder hochscrollen zu müssen. */ .dialog__kopf { position: sticky; top: calc(var(--space-lg) * -1); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle); } .dialog__kopf h3 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); } .dialog--breit { max-width: 1400px; width: 94vw; max-height: 92vh; } .dialog--breit .dialog__form { display: flex; flex-direction: column; max-height: 88vh; } /* Der Rohtext bekommt den ganzen übrigen Platz, er ist der Grund für dieses Fenster. Die Item-Liste darunter darf schrumpfen. */ .dialog--breit .post-roh { flex: 1 1 auto; min-height: 320px; resize: vertical; /* und wenn es doch nicht reicht: selbst größer ziehen */ } .dialog--breit .post-offers { flex: 0 1 auto; overflow-y: auto; max-height: 26vh; } /* Ein Knopf, der wie ein Link aussieht. Klingt nach Kosmetik, ist aber Semantik: Er löst eine AKTION aus (Dialog öffnen), er führt nicht zu einer anderen Adresse. Ein ohne href wäre für Tastatur und Screenreader tot; ein