/* ═══════════════════════════════════════════════════════════════
   OPSuchtWeb · Supernova
   ---------------------------------------------------------------
   Diese Datei wird NACH css/style.css geladen und überschreibt nur
   Aussehen und Layout. Kein Klassenname und keine ID wird verändert,
   damit script.js unverändert weiterläuft.

   Die App teilt sich die Farbachse mit der Clan-Seite — Amethyst
   über Magenta ins Cyan —, bekommt aber bewusst kein bewegtes
   Sternenfeld: Über Preistabellen wäre das Unruhe statt Atmosphäre.
   Hier leuchtet nur, was etwas bedeutet: der aktive Reiter, die
   Zahl unter dem Zeiger, der Rand einer angefassten Karte.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Farbwelt und Maße ─────────────────────────────────────── */

:root {
  --background: #06060b;
  --surface: #10101b;
  --surface-card: #10101b;
  --surface-modal: #12121f;
  --border: rgba(255, 255, 255, 0.09);

  --text-primary: #edebf5;
  --text-secondary: #8c87a3;
  /* Text auf Amethystflächen — muss dunkel bleiben, damit die
     gefüllten Knöpfe und aktiven Menüpunkte lesbar sind. */
  --text-dark: #0b0616;

  --accent-color1: #a97ef0;
  --accent-color2: #e85cd6;
  --accent-violet: #a97ef0;
  --accent-cyan: #5be1ff;

  --accent-glow: rgba(169, 126, 240, 0.22);
  --accent-glow-weak: rgba(169, 126, 240, 0.08);

  --sell-color: #4fbf87;
  --buy-color: #e8636f;

  --border-radius: 4px;
  --transition-speed: 0.18s;

  --schrift-display: 'Sora', system-ui, sans-serif;
  --schrift-text: 'Manrope', system-ui, sans-serif;
  --schrift-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── 2. Grundschrift ──────────────────────────────────────────── */

body {
  font-family: var(--schrift-text);
  background: var(--background);
  letter-spacing: 0;
}

/* style.css legt goldene Lichtkegel hinter die Seite. Die gehören
   zur alten Optik und werden hier durch den Nova-Himmel ersetzt. */
body {
  background-image: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--schrift-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Alles Zahlenhafte in Monospace: Preise lassen sich so untereinander
   vergleichen, weil jede Ziffer gleich breit ist. */
.price,
.amount,
.value,
.stat-value,
.auction-price,
.market-price,
.shard-price,
[class*='price'],
[class*='Price'],
input[type='number'],
.timer,
.auction-timer,
.countdown {
  font-family: var(--schrift-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 3. Der Himmel ────────────────────────────────────────────────
   Zwei weiche Lichtwolken, die langsam atmen. Sie liegen fest hinter
   der Seite, scrollen also nicht mit — das hält die Bewegung ruhig
   und kostet nichts, weil nur ein Farbverlauf skaliert wird. */

.nova-himmel {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.nova-himmel span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  display: block;
}

.nova-himmel span:first-child {
  top: -14rem;
  left: 50%;
  width: 52rem;
  height: 34rem;
  margin-left: -26rem;
  background: radial-gradient(circle, rgba(169, 126, 240, 0.3), transparent 68%);
  animation: nova-atmen 13s ease-in-out infinite;
}

.nova-himmel span:last-child {
  bottom: -12rem;
  right: -10rem;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(232, 92, 214, 0.18), transparent 66%);
  animation: nova-atmen 17s ease-in-out infinite reverse;
}

@keyframes nova-atmen {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.14);
    opacity: 1;
  }
}

/* ── 4. Kopfbereich und Reiter ────────────────────────────────── */

.container {
  max-width: 82rem;
}

.header-controls {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 6, 11, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  margin: 0 -1rem 1.5rem;
  padding: 0 1rem;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 0;
}

/* Ein feiner Schimmer am unteren Rand bindet die Leiste an den Himmel
   an, ohne dass eine harte Kante nötig wird. */
.header-controls::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  pointer-events: none;
}

#tabs.tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  flex: 1;
}

#tabs.tabs::-webkit-scrollbar {
  display: none;
}

/* Reiter als Unterstrich-Navigation statt gefüllter Pillen */
#tabs.tabs button {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  font-family: var(--schrift-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.15rem 1.05rem;
  white-space: nowrap;
  transition:
    color var(--transition-speed) ease,
    text-shadow var(--transition-speed) ease;
}

/* Der Unterstrich ist die einzige Stelle, an der der Verlauf in der
   App vollständig auftritt — er markiert, wo man gerade ist. */
#tabs.tabs button::after {
  content: '';
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color1), var(--accent-color2));
  box-shadow: 0 0 14px rgba(169, 126, 240, 0.7);
  transform: scaleX(0);
  transition: transform var(--transition-speed) ease;
}

#tabs.tabs button:hover {
  color: var(--text-primary) !important;
}

#tabs.tabs button.active,
#tabs.tabs button[class*='active'] {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(169, 126, 240, 0.6);
}

#tabs.tabs button.active::after,
#tabs.tabs button[class*='active']::after {
  transform: scaleX(1);
}

/* ── 5. Flächen und Karten ────────────────────────────────────── */

.card,
.partner-card,
.profile-card,
.chart-container,
.modal-content,
.settings-content-section,
[class*='-box'] {
  border-radius: var(--border-radius) !important;
  box-shadow: none !important;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  /* Erzeugt einen eigenen Stapelkontext. Dadurch darf der Schein unten
     mit z-index: -1 arbeiten: Er liegt dann über der Kartenfläche, aber
     unter dem Inhalt — ohne dass die Kinder positioniert werden müssen. */
  isolation: isolate;
  transition:
    border-color var(--transition-speed) ease,
    transform var(--transition-speed) ease;
}

/* Schein unter dem Zeiger. Die Mittelpunkte setzt js/nova.js; ohne
   Zeiger bleibt der Vorgabewert stehen und die Karte wirkt ruhig. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--accent-glow), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.card:hover {
  border-color: rgba(169, 126, 240, 0.45);
  transform: translateY(-2px);
}

.card:hover::before {
  opacity: 1;
}

/* Dichtere Zeilen: bei Preislisten zählt Übersicht mehr als Luft */
.grid {
  gap: 0.75rem;
}

/* ── 6. Eingabefelder und Knöpfe ──────────────────────────────── */

input,
select,
textarea {
  border-radius: var(--border-radius) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: var(--schrift-text);
  transition: border-color var(--transition-speed) ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-color1) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow-weak) !important;
}

button {
  border-radius: var(--border-radius) !important;
  font-family: var(--schrift-mono);
  letter-spacing: 0.06em;
}

.refresh-btn,
.auth-submit-btn,
.chart-buttons button {
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Der eine gefüllte Knopf pro Ansicht trägt den Verlauf. */
.auth-submit-btn {
  background: linear-gradient(100deg, var(--accent-color1), var(--accent-color2)) !important;
  border: 0 !important;
  color: var(--text-dark) !important;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(169, 126, 240, 0.32);
  transition:
    box-shadow var(--transition-speed) ease,
    transform var(--transition-speed) ease;
}

.auth-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 38px rgba(232, 92, 214, 0.45);
}

.auth-header-btn {
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  transition:
    border-color var(--transition-speed) ease,
    color var(--transition-speed) ease;
}

.auth-header-btn:hover {
  border-color: var(--accent-color1) !important;
  color: var(--accent-color1) !important;
}

/* ── 7. Modale Fenster ────────────────────────────────────────── */

.modal-content {
  background: var(--surface-modal) !important;
  border: 1px solid var(--border) !important;
}

.settings-tabs {
  border-bottom: 1px solid var(--border);
  gap: 0;
}

.settings-tab {
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-tab.active {
  color: var(--text-primary) !important;
  border-bottom-color: var(--accent-color1) !important;
}

/* ── 8. Zurückgenommene Effekte ───────────────────────────────────
   Glitzer, Regen und Matrix bleiben als wählbare Hintergründe im
   Einstellungsmenü erhalten, treten aber hinter dem Himmel zurück. */

#glitter-canvas,
#rain-container,
#matrix-canvas {
  opacity: 0.14;
}

/* ── 9. Der Clan-Knopf ────────────────────────────────────────────
   Steht als erstes Element in der Leiste — auch im HTML, damit er beim
   Durchtabben zuerst dran ist. Gefüllt statt umrandet: Er ist der Weg
   zum Clan und keine Randnotiz. */

.dnv-clanlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: center;
  flex: 0 0 auto;
  margin-right: 0.9rem;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--accent-color1), #7c4fd6);
  color: #14091f;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 22px rgba(169, 126, 240, 0.34);
  transition:
    transform var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}

.dnv-clanlink:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(169, 126, 240, 0.55);
}

.dnv-clanlink svg {
  flex: 0 0 auto;
}

/* Auf schmalen Schirmen nur das Zeichen und das Kürzel. */
@media (max-width: 40rem) {
  .dnv-clanlink {
    padding: 0.5rem 0.7rem;
    margin-right: 0.5rem;
  }
  .dnv-clanlink span {
    display: none;
  }
}

/* ── 10. Rechtliches am Seitenfuß ──────────────────────────────────
   § 5 DDG verlangt, dass die Anbieterkennzeichnung leicht erkennbar,
   unmittelbar erreichbar und ständig verfügbar ist. Der Fuß erfüllt das
   zurückhaltend: klein, grau, ganz unten — aber mit dem Wort "Impressum"
   im Klartext, als echter Link und ohne Aufklappen oder Hover-Trick.
   Genau diese drei Dinge wären der Punkt, an dem "dezent" zu "versteckt"
   und damit angreifbar würde. */

.dnv-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 4rem;
  padding: 1.4rem 0 0.5rem;
  border-top: 1px solid var(--border);
}

.dnv-fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.dnv-fuss__links a {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

.dnv-fuss__links a:hover,
.dnv-fuss__links a:focus-visible {
  color: var(--accent-color1);
}

.dnv-fuss__hinweis {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 48rem) {
  .dnv-fuss {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
}

/* ── 11. Nachträge: Regeln mit !important aus style.css überstimmen ──
   style.css setzt für die Tab-Leiste und den Titel eigene !important-
   Regeln. Höhere Spezifität über den body-Selektor löst das sauber,
   ohne die Originaldatei zu verändern. */

body #tabs.tabs,
body .tabs {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  gap: 0 !important;
}

/* Der Unterstrich aus style.css wächst aus der Mitte. Hier wird er
   durch die volle Breite ersetzt, passend zur ruhigen Optik. */
body .tabs button::after {
  transform: scaleX(0);
  width: auto !important;
  left: 0.5rem !important;
}

body .tabs button.active::after {
  transform: scaleX(1);
}

body .tabs button.active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Seitentitel: war Cormorant Garamond in Gold, jetzt die Farbachse
   der Marke. Der Verlauf sitzt auf dem span, weil dort der Text steht. */
body > .container > h1 {
  font-family: var(--schrift-display) !important;
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 3.8rem) !important;
  letter-spacing: -0.05em !important;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  text-shadow: none !important;
}

body > .container > h1 span {
  background: linear-gradient(97deg, #ffffff 8%, var(--accent-color1) 48%, var(--accent-color2) 82%, var(--accent-cyan) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 34px rgba(169, 126, 240, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .nova-himmel span {
    animation: none;
  }
  #tabs.tabs button::after {
    transition: none;
  }
}

/* ── 12. Auktionskarten ────────────────────────────────────────────
   Vorher: 160px schmale Spalten, alles zentriert, acht gleich
   aussehende "Label: Wert"-Zeilen untereinander. Dadurch brachen die
   Namen mitten im Wort ab und der wichtigste Wert — der aktuelle
   Preis — ging zwischen den anderen unter.

   Jetzt: breitere Karten, Werte rechtsbündig in Monospace unter-
   einander, damit sich Beträge über Karten hinweg vergleichen lassen.
   Der aktuelle Preis steht als einzige große Zahl heraus. */

.grid {
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1rem;
}

/* Angehängt an .grid statt an einzelne Container-IDs: Auktionen,
   Schnäppchen, Verlauf, Items und Profil hängen ihre Karten alle in ein
   .grid, und die IDs heißen uneinheitlich (auctionContainer im Singular,
   dealsContainer im Plural). */
.grid > .card {
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.15rem 1rem;
  text-align: left;
  backdrop-filter: none;
  box-shadow: none;
}

/* Das Bild bekommt eine schwache Scheibe als Grund — ohne sie schwimmt
   das freigestellte Item-Bild im Nichts. */
.grid > .card > img {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.9rem;
  image-rendering: pixelated;
  object-fit: contain;
  /* Kein border-radius: Das schnitt quadratische Block-Texturen zu einer
     Scheibe zu — der Knochenblock sah dadurch aus wie ein cremefarbener
     Kreis. Der Verlauf dahinter wirkt von selbst rund. */
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
}

/* Namen dürfen zwei Zeilen brauchen. Vorher schnitt nowrap sie mitten
   im Wort ab ("NETHERITE_U…"), was sie unlesbar machte. */
.card h3.auction-name {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 0.94rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.35em;
  margin: 0 0 0.85rem;
}

/* Variante unter dem Namen: trennt Sammelkarte von Werkzeug. */
.item-variante {
  margin: -0.6rem 0 0.85rem;
  text-align: center;
  font-family: var(--schrift-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-color1);
}

.item-variante--gross {
  margin: -0.5rem 0 1rem;
  font-size: 0.75rem;
  text-align: left;
}

/* Eine Zeile = Beschriftung links, Wert rechts. Die Werte stehen in
   Monospace mit gleicher Ziffernbreite genau untereinander. */
.card .price-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.card .price-info:last-child {
  border-bottom: 0;
}

/* Beschriftungen einheitlich zurücknehmen. Das !important überstimmt
   die inline gesetzten Farben im erzeugten HTML; die Unterscheidung
   rot/grün trägt ohnehin schon das Rabatt-Schild oben rechts. */
.card .price-info > span {
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text-secondary) !important;
  white-space: nowrap;
}

/* Der aktuelle Preis ist die eine Zahl, auf die es ankommt. */
.card .price-info.auction-currentBid {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--accent-color1);
  padding: 0.5rem 0 0.6rem;
  text-shadow: 0 0 20px rgba(169, 126, 240, 0.4);
}

.card .price-info.auction-instantBuy {
  color: var(--accent-cyan);
}

/* Restzeit als eigener Fuß, abgesetzt vom Rest. */
.card .price-info.auction-timer {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* Rabatt-Schild: als Kapsel statt als Ecke, damit es zur runderen
   Kartenform passt. */
.deal-badge {
  top: 0.7rem;
  right: 0.7rem;
  border-radius: 100px;
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.deal-badge.deal-cheaper {
  background: rgba(79, 191, 135, 0.16);
  border: 1px solid rgba(79, 191, 135, 0.45);
  color: #7fe0ab;
}

.deal-badge.deal-pricier {
  background: rgba(232, 99, 111, 0.16);
  border: 1px solid rgba(232, 99, 111, 0.45);
  color: #ff9aa3;
}

/* ── 13. Wortmarke über dem Titel ─────────────────────────────────── */

.dnv-titelzeile {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dnv-titelzeile a {
  color: var(--accent-color1);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

.dnv-titelzeile a:hover {
  color: var(--accent-color2);
}

/* ── 14. Clan- und Mitglieder-Reiter ───────────────────────────────
   Der Clan liegt jetzt als Reiter in der App, damit die Leiste mit
   Markt, Auktionen und dem Rest stehen bleibt, wenn man ihn öffnet.
   Der Kopf des Reiters ist ruhiger gehalten als auf der Clan-Seite —
   hier ist er ein Abschnitt unter vielen, kein Auftritt. */

.clan-tab {
  max-width: 52rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.clan-tab__kicker {
  margin: 0 0 0.9rem;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.clan-tab__titel {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
}

.clan-tab__titel span {
  background: linear-gradient(97deg, var(--accent-color1) 20%, var(--accent-color2) 75%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(169, 126, 240, 0.4));
}

.clan-tab__text {
  margin: 1.2rem auto 0;
  max-width: 52ch;
  line-height: 1.7;
  color: var(--text-secondary);
}

.clan-tab__zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 2.5rem 0 0;
}

.clan-tab__zahlen b {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-color1);
}

.clan-tab__zahlen span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.clan-tab__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2.2rem;
}

.clan-tab__knopf {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--border-radius) !important;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    transform var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}

.clan-tab__knopf:hover {
  border-color: rgba(169, 126, 240, 0.5);
  color: var(--accent-color1);
}

.clan-tab__knopf--voll {
  background: linear-gradient(135deg, var(--accent-color1), #7c4fd6);
  border-color: transparent;
  color: #14091f;
  box-shadow: 0 0 24px rgba(169, 126, 240, 0.3);
}

.clan-tab__knopf--voll:hover {
  transform: translateY(-1px);
  color: #14091f;
  box-shadow: 0 0 36px rgba(169, 126, 240, 0.5);
}

/* Der Clan-Knopf leuchtet, solange sein Reiter offen ist. */
.dnv-clanlink.active {
  box-shadow: 0 0 34px rgba(169, 126, 240, 0.6);
}

/* ── 15. Spielerköpfe bei Geboten und Spielern ─────────────────────
   Der Anfangsbuchstabe bleibt als Grundlage liegen; das Kopfbild legt
   sich darüber. Lädt es nicht, blendet js/mitglieder.js es aus und der
   Buchstabe steht wieder da — so entsteht nie ein leerer Kreis. */

.player-initial-avatar {
  position: relative;
  overflow: hidden;
}

.player-kopf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  border-radius: 50%;
}

/* Die kleine Fassung in der Verkäuferzeile des Auktionsfensters. Stand
   vorher als style-Angabe im Markup — dort war für das Kopfbild kein
   Platz, weil der Kreis keine eigene Regel hatte. */
.player-initial-avatar--klein {
  width: 24px;
  height: 24px;
  font-size: 1rem;
  margin: 0;
  flex: 0 0 auto;
}

/* ── 16. Clan-Inhalte in der App ───────────────────────────────────
   style.css setzt für h2 eine Serifenschrift mit !important. Die
   Abschnittstitel der Clan-Inhalte sollen aber dieselbe Anzeigeschrift
   tragen wie überall sonst — hier über den body-Selektor
   zurückgeholt, ohne die Originaldatei anzufassen. */

body .dnv-titel {
  font-family: var(--schrift-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, 4vw, 2.6rem) !important;
  letter-spacing: -0.035em !important;
}

/* Gilt genauso für den Kopf des Home-Reiters. */
body .clan-tab__titel {
  font-family: var(--schrift-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem) !important;
  letter-spacing: -0.04em !important;
}

body .dnv-karte__titel {
  font-family: var(--schrift-display);
  letter-spacing: -0.02em;
}

/* Die Abschnitte laufen im Reiter über die volle Breite des Containers. */
#clan [data-clan-inhalt] .dnv-band {
  padding-left: 0;
  padding-right: 0;
}

/* ── 17. Spieler-Reiter ────────────────────────────────────────────
   Die Bestenliste nutzt dieselben Karten wie überall, bekommt aber eine
   Platzziffer und hebt den Wert hervor, nach dem gerade sortiert wird —
   sonst muss man raten, warum jemand auf Platz drei steht. */

.spieler-kopfzeile {
  margin: 0 0 1.2rem;
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
}

.spieler-karte__rang {
  position: absolute;
  top: 0.6rem;
  left: 0.7rem;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Die ersten drei Plätze bekommen die Akzentfarbe. */
.grid > .spieler-karte:nth-child(-n + 3) .spieler-karte__rang {
  color: var(--accent-color1);
}

/* Eingefärbt wird die ganze Zeile, nicht der Wert: die Regel weiter oben
   (.card .price-info > span) setzt jedes span in einer Preiszeile mit
   !important auf Grau. Die Beschriftung bleibt dadurch zurückgenommen,
   und die Zahl daneben nimmt die Farbe der Zeile an. */
.card .price-info.spieler-karte__wert {
  color: var(--accent-color1);
  font-weight: 700;
}

.card .price-info.spieler-karte__ein {
  color: var(--sell-color);
}

.card .price-info.spieler-karte__aus {
  color: var(--buy-color);
}

/* ── 18. Lange Raster ──────────────────────────────────────────────
   Karten ausserhalb des Sichtfelds werden nicht gesetzt und nicht
   gezeichnet. Bei mehreren hundert Kacheln spart das den grössten Teil
   der Arbeit beim Aufbau und beim Scrollen.

   contain-intrinsic-size gibt der Karte eine angenommene Höhe, solange
   sie übersprungen wird — mit auto merkt sich der Browser die zuletzt
   wirklich gemessene, dadurch springt die Bildlaufleiste nicht. */

.grid > .card {
  content-visibility: auto;
  contain-intrinsic-size: auto 230px;
}

/* ── 19. Handy ─────────────────────────────────────────────────────
   Auf schmalen Schirmen war die Leiste zweizeilig: style.css setzt
   flex-wrap: wrap, wodurch der Home-Knopf über die Reiter rutschte
   statt daneben zu stehen. Die Reiter scrollen ohnehin waagerecht,
   also darf nichts umbrechen. */

/* style.css stellt die Leiste auf schmalen Schirmen auf flex-direction:
   column um — daher stand der Home-Knopf ÜBER den Reitern statt daneben.
   Da die Reiter ohnehin waagerecht scrollen, bleibt es bei einer Zeile. */
.header-controls {
  flex-wrap: nowrap;
  flex-direction: row;
}

/* Kopfzeile über dem Titel: Rechtstexte links, Anmelden und Zahnrad
   rechts. Auf dem Handy war sie so eng, dass das Zahnrad abgeschnitten
   wurde. */
.dnv-kopfzeile {
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 40rem) {
  body {
    padding: 1rem 0.85rem 2rem;
  }

  .container {
    max-width: 100%;
  }

  .header-controls {
    flex-direction: row;
    gap: 0;
    /* style.css setzt hier width: 100%. Zusammen mit den negativen
       Rändern endete die Leiste sonst vor dem rechten Rand. */
    width: auto;
    margin: 0 -0.85rem 1.25rem;
    padding: 0 0.5rem;
  }

  /* Reiter dichter setzen, damit mehr davon ins Bild passt */
  #tabs.tabs button {
    padding: 0.95rem 0.65rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .dnv-clanlink {
    font-size: 0.68rem;
    padding: 0.45rem 0.7rem;
  }

  /* Der Titel darf schrumpfen, die Zeile darunter muss umbrechen
     dürfen — mit 0.22em Sperrung passte sie sonst nicht. */
  body > .container > h1 {
    font-size: clamp(1.9rem, 11vw, 2.6rem) !important;
  }

  .dnv-titelzeile {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    padding: 0 0.5rem;
  }

  .dnv-kopfzeile {
    margin-bottom: 0.75rem;
  }

  .dnv-kopfzeile .auth-header-btn {
    padding: 0.45rem 0.8rem;
    font-size: 0.75rem;
  }

  .dnv-kopfzeile .settings-icon {
    width: 30px;
    height: 30px;
  }

  /* Eine Karte je Zeile liest sich besser als zwei gequetschte */
  .grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .grid > .card {
    padding: 1rem;
  }

  .clan-tab__zahlen {
    grid-template-columns: repeat(2, 1fr);
  }

  .clan-tab__knoepfe .clan-tab__knopf {
    flex: 1 1 100%;
    justify-content: center;
  }

  .dnv-fuss {
    align-items: flex-start;
  }
}

/* Sehr schmale Geräte: die Reiterbeschriftung wird sonst zweizeilig. */
@media (max-width: 22rem) {
  #tabs.tabs button {
    padding: 0.9rem 0.5rem;
    font-size: 0.66rem;
  }
}

/* Zahnrad und Plus sind jetzt eingebettete Symbole statt Verweise auf
   einen images-Ordner, den es im Repo nie gab. Vorher standen dort
   kaputte Platzhalter, die auf dem Handy über den Rand ragten. */
.settings-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 100px !important;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    color var(--transition-speed) ease,
    border-color var(--transition-speed) ease;
}

.settings-icon:hover {
  color: var(--accent-color1);
  border-color: rgba(169, 126, 240, 0.5);
}

.add-ad-btn svg {
  display: block;
}

/* Der Home-Knopf ist ab Werk hervorgehoben, passend zum Abschnitt, der
   im HTML schon aktiv ist. showSection nimmt das beim ersten Wechsel
   wieder zurück. */
.dnv-clanlink {
  box-shadow: 0 0 22px rgba(169, 126, 240, 0.34);
}

/* Blockfeld: treibende Würfel als leiser Minecraft-Anklang. Liegt im
   festen Himmel hinter der ganzen Seite und wird von js/nova.js
   gezeichnet — kein Bild, keine Ladezeit, jede Bildschirmgröße passt. */
.nova-himmel #blockfeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Über Preistabellen treten die Würfel zurück — dieselbe Überlegung
     wie beim Sternenfeld, das die App bewusst gar nicht bekommt. */
  opacity: 0.4;
  transition: opacity 0.4s ease;
}

/* Auf Home und bei den Mitgliedern dürfen sie voll da sein: Dort steht
   Atmosphäre im Vordergrund, keine Zahlen. Browser ohne :has() bleiben
   bei der gedämpften Fassung — das ist kein Verlust. */
body:has(#clan.active) .nova-himmel #blockfeld,
body:has(#mitglieder.active) .nova-himmel #blockfeld {
  opacity: 1;
}