@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  --black: #050505;
  --white: #f0ede6;
  --red: #c8392b;
  --dim: #2a2a2a;
  --muted: #555;
  --border: #1e1e1e;

  /* ── Bewegung ──────────────────────────────────────────────────────────────
     Vier Dauern und drei Kurven für die ganze Seite. Vorher hatte jede Regel
     ihre eigene Zahl (.1s/.15s/.2s/.6s) und durchweg `ease` — genau das lässt
     eine Oberfläche zusammengestückelt wirken. Gleiche Bewegung überall ist
     der größte Einzelhebel für „wirkt fertig". */
  --dur-1: 120ms;   /* Farbwechsel, Hover */
  --dur-2: 200ms;   /* kleine Bewegungen */
  --dur-3: 320ms;   /* Menüs, Dialoge */
  --dur-4: 560ms;   /* Auftritt von Inhalten */
  /* Schnell raus, sanft rein — wirkt reaktiv statt träge */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.4, .64, 1);

  /* ── Tiefe ── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 10px 30px rgba(0,0,0,.5);
  --shadow-3: 0 28px 70px rgba(0,0,0,.65);

  /* Höhe des Laufbands. Der sichere Bereich (Kerbe, Statusleiste) steckt
     **in der Variable** — sie wird an fünf Stellen als Versatz benutzt
     (`.page`, `nav`, Sprachblatt …), und ein separates Innenmaß am Band
     allein hätte die auseinanderlaufen lassen. Ohne `viewport-fit=cover`
     ist `env()` null und die Rechnung ergibt schlicht 36px. */
  --ticker-h: calc(36px + env(safe-area-inset-top, 0px));
  --nav-h: 73px;
}

/* Wer Bewegung reduziert haben will, bekommt sie reduziert. Das ist keine
   Kür — ohne diese Regel ist eine animierte Oberfläche für einen Teil der
   Nutzer schlicht unbenutzbar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Anker landen nicht unter der klebenden Kopfzeile */
  scroll-padding-top: calc(var(--ticker-h) + var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Mono', monospace;
  min-height: 100vh;
  /* **`clip`, nicht `hidden`.** `overflow-x: hidden` auf `body` macht daraus
     auf Mobilbrowsern einen eigenen Scrollbereich — und dann bezieht sich
     `position: fixed` nicht mehr auf das Fenster, sondern auf diesen Bereich.
     Das Laufband hing dadurch auf dem Telefon nicht mehr oben, sondern
     stand ein Stück ab. `clip` schneidet genauso ab, erzeugt aber keinen
     Scrollbereich. */
  overflow-x: clip;
  /* Der frühere globale `crosshair` ließ jede Fläche wie ein Werkzeugfenster
     wirken und machte Text schwer greifbar. Zeiger nur noch dort, wo etwas
     anklickbar ist. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-rendering: optimizeLegibility ist hier bewusst NICHT gesetzt: es
     erzwingt Kerning- und Ligaturberechnung und lässt Text bei jedem Repaint
     minimal springen. Genau das sah nach „glitchy" aus. */
}

/* ── Auswahl, Bildlauf, Fokus ───────────────────────────────────────────── */
::selection { background: var(--red); color: #fff; }

/* Schlanker Bildlauf statt Systembalken — sonst steht ein grober grauer
   Streifen neben einem sonst durchgestalteten Fenster. */
* { scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--dim); border: 3px solid var(--black); border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }

/* Sichtbarer Fokus für Tastaturbedienung — vorher gab es gar keinen.
   :focus-visible statt :focus, damit Mausklicks keinen Ring hinterlassen. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzer */
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 999;
  transform: translateY(-72px);
  background: var(--red); color: #fff; padding: 10px 18px;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 100;
  opacity: 0.6;
  /* Eigene Compositor-Ebene: eine bildschirmfüllende halbtransparente Fläche
     über dem Inhalt zwingt den Browser sonst bei jedem Repaint dazu, die
     Seite darunter neu zu mischen — sichtbar als Flimmern der Schrift. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* TICKER — Markttape ────────────────────────────────────────────────────────
   Vorher: roter Vollbalken mit wiederholten Werbesprüchen. Das ist die
   Bildsprache eines Sale-Banners und wirkt genau deshalb billig, egal wie
   sauber es umgesetzt ist. Jetzt ein dunkles Band mit echten Marktdaten —
   dieselbe Bewegung, aber mit Informationswert. Das Rot bleibt als Akzent
   im festen Kennzeichen links. */
.ticker {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--ticker-h);
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  background: #0b0b0b;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch; overflow: hidden; z-index: 50;
}

/* Festes Kennzeichen links — läuft nicht mit, gibt dem Band einen Anfang */
.ticker-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; background: var(--red); color: #fff;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0; z-index: 2;
}
.ticker-live {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: tickerPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes tickerPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.ticker-viewport {
  position: relative; flex: 1; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
}
.ticker-track {
  display: flex; align-items: center; gap: 0;
  animation: ticker 60s linear infinite;
  white-space: nowrap; will-change: transform;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

.ticker-item {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 0 22px; font-size: 10px; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
  border-right: 1px solid var(--border);
}
.ti-name { color: var(--white); letter-spacing: .06em; }
/* Zahlen in Tabellenziffern, damit sie beim Laufen nicht zappeln */
.ti-price { color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ti-tag { font-size: 9px; letter-spacing: .16em; }
.ti-up { color: #57a557; }
.ti-sold { color: var(--red); }
.ti-open { color: #4a9fd4; }
.ticker-dot { color: var(--dim); }

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

body.light-mode .ticker { background: #ffffff; }
body.light-mode .ticker-item { border-right-color: var(--border); }

/* NAV */
nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 48px; border-bottom: 1px solid var(--border);
  position: sticky; top: var(--ticker-h); background: var(--black); z-index: 40;
  gap: 24px;
  transition: box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease);
}
/* Beim Scrollen setzt sich die Kopfzeile vom Inhalt ab.
   **Kein** Padding-Wechsel mehr: das ist layoutwirksam, ändert die Seitenhöhe
   und verschiebt beim Scrollen den gesamten Inhalt darunter. Schatten und
   Randfarbe reichen für den Effekt und lösen kein Reflow aus. */
nav.is-scrolled {
  box-shadow: var(--shadow-2);
  border-bottom-color: var(--dim);
}
.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 0.25em; color: var(--white);
  text-decoration: none;
  /* Reservierte Breite: die Laufweite darf sich ändern, ohne die Leiste zu
     schieben. Ohne min-width wächst das Logo beim Zeigen und drückt alles
     rechts daneben weg — genau das war das Zappeln. */
  display: inline-block; min-width: 5.6em;
  transition: opacity var(--dur-1) var(--ease), letter-spacing var(--dur-3) var(--ease);
}
.logo:hover { opacity: .78; letter-spacing: .34em; }
.nav-links {
  display: flex; gap: 24px; align-items: center;
  margin-left: auto;
}
.nav-links a {
  font-size: 11px; letter-spacing: 0.15em; color: var(--muted);
  text-decoration: none; text-transform: uppercase;
  transition: color var(--dur-1) var(--ease);
  position: relative; padding: 6px 0;
}
/* Unterstreichung wächst aus der Mitte statt hart aufzublitzen */
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--red); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--dur-2) var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--white); }
.nav-links a.active::after { transform: scaleX(1); background: var(--red); }
/* Der Register-Knopf in der Leiste ist ein Button, keine Textmarke.
   `.nav-links a` (0,1,1) schlägt `.btn` (0,1,0) in der Spezifität — dadurch
   stand dort mutierter Text auf rotem Grund und war praktisch unlesbar. */
.nav-links a.btn { color: #fff; }
.nav-links a.btn:hover { color: #fff; }
.nav-links a.btn::after { display: none; }
.nav-tag { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }

/* BUTTONS */
.btn {
  background: var(--red); color: #fff; border: 1px solid var(--red);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px; letter-spacing: 0.2em;
  padding: 14px 28px; cursor: pointer;
  text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; overflow: hidden;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              opacity var(--dur-1) var(--ease);
}
/* Heben beim Zeigen, echtes Eindrücken beim Klick. Vorher gab es nur einen
   Farbwechsel plus scale(.98) — das fühlt sich nach nichts an. */
.btn:hover { background: #b5322599; background: #b53225; box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.995); box-shadow: none; transition-duration: 60ms; }
.btn[disabled], .btn:disabled, .btn.is-busy {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
  pointer-events: none;
}
/* Wartezustand: ein umlaufender Strich statt eines toten Knopfes */
.btn.is-busy::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: rgba(255,255,255,.65);
  animation: btnBusy 900ms var(--ease-in-out) infinite;
}
@keyframes btnBusy {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.btn-ghost {
  background: transparent; border: 1px solid var(--dim);
  color: var(--muted);
}
.btn-ghost:hover {
  border-color: var(--white); color: var(--white);
  background: rgba(255,255,255,.03); box-shadow: none; transform: translateY(-1px);
}
.btn-ghost:active { background: rgba(255,255,255,.06); }

/* INPUTS */

input, textarea, select {
  width: 100%; background: transparent;
  border: 1px solid var(--dim); color: var(--white);
  font-family: 'DM Mono', monospace; font-size: 13px;
  padding: 14px 16px; letter-spacing: 0.05em;
  caret-color: var(--red);
  transition: border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              background var(--dur-1) var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: #3d3d3d; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* Fokus als weicher Schein statt nur Randfarbe — sonst sieht man auf einem
   dunklen Hintergrund kaum, wo man gerade tippt. */
input:focus, textarea:focus, select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,57,43,.16);
  outline: none;
}
input:disabled, textarea:disabled, select:disabled { opacity: .45; cursor: not-allowed; }
/* Der System-Pfeil des Betriebssystems bricht die Typografie. Eigener Pfeil
   als Hintergrundgrafik, damit das Feld zum Rest passt. */
select {
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--white);
}
select option { background: #111; color: var(--white); }
body.light-mode select option { background: #fff; color: #111; }
/* Zahlenfelder: die Pfeilchen passen nicht zur Typografie */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* LABEL */
.label {
  font-size: 10px; letter-spacing: 0.25em;
  color: var(--red); text-transform: uppercase; margin-bottom: 12px;
  display: block;
}

/* PAGE WRAPPER */
/* Spalte mit `margin-top:auto` am Fuß: bei wenig Inhalt klebt der Fußbereich
   am unteren Rand statt mitten im Bild zu hängen — darunter klaffte vorher
   eine leere schwarze Fläche. */
.page {
  padding-top: var(--ticker-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page > footer { margin-top: auto; }

/* SECTION */
.section {
  padding: 64px 48px;
  border-bottom: 1px solid var(--border);
}

/* GRID */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* CARD */
.card {
  border: 1px solid var(--border); padding: 24px;
  transition: border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
  cursor: pointer; text-decoration: none; color: var(--white);
  display: block;
}
.card:hover { border-color: var(--dim); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card:active { transform: translateY(-1px); transition-duration: 80ms; }
.card .card-ts { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.05em; margin-bottom: 8px; }
.card .card-label { font-size: 11px; color: var(--muted); margin-bottom: 16px; min-height: 32px; }
.card .card-price { font-size: 20px; color: var(--white); }
.card .card-owner { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; margin-top: 8px; }
.card .card-status { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 12px; }

.status-owned { color: var(--red); }
.status-available { color: #3a7a3a; }
.status-for_sale { color: #d4a017; }
.status-open_for_offers { color: #4a9fd4; }

/* TABLE */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 12px; }
/* Kopfzeile bleibt beim Scrollen langer Tabellen stehen */
th {
  font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase;
  position: sticky; top: 0; background: var(--black); z-index: 1;
  border-bottom-color: var(--dim);
}
tbody tr { transition: background var(--dur-1) var(--ease); }
tbody tr:hover { background: rgba(255,255,255,0.028); }
tbody tr:last-child td { border-bottom: none; }

/* MODAL */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.85); z-index: 200;
  /* Ein Dialog, der höher als das Fenster ist, muss in SICH scrollen.
     Ohne overflow-y landete das Mausrad auf der Seite dahinter.
     align-items:flex-start + margin:auto am Kind: zentriert, wenn Platz ist,
     schneidet aber oben nichts ab, wenn der Dialog zu hoch wird —
     mit align-items:center wäre der obere Rand unerreichbar. */
  align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 16px; box-sizing: border-box;
}
.modal-overlay.open { display: flex; animation: overlayIn var(--dur-3) var(--ease) both; }
.modal {
  background: var(--black); border: 1px solid var(--dim);
  padding: 48px; width: 100%; max-width: 520px;
  position: relative; margin: auto;
  box-shadow: var(--shadow-3);
}
/* Dialoge sind vorher hart aufgeploppt. Der Auftritt macht klar, woher das
   Fenster kommt, und nimmt dem Wechsel die Härte. */
.modal-overlay.open > .modal { animation: modalIn var(--dur-3) var(--ease-out-back) both; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* Seite hinter dem Dialog stilllegen, solange er offen ist */
body.modal-open { overflow: hidden; }
@media (max-width: 600px) { .modal { padding: 32px 20px; } }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 1px solid transparent; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 6px 10px; line-height: 1;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.modal-close:hover { color: var(--white); border-color: var(--dim); background: rgba(255,255,255,.04); }
.modal-close:active { transform: scale(.92); }
.modal h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px; letter-spacing: 0.05em; margin-bottom: 24px;
}
.form-group { margin-bottom: 16px; }
.form-group label { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 8px; }

/* FLASH */
.flash {
  padding: 13px 18px; margin-bottom: 16px;
  font-size: 12px; letter-spacing: 0.05em; line-height: 1.6;
  border-left-width: 3px !important;
  animation: flashIn var(--dur-3) var(--ease) both;
}
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.flash-error { border: 1px solid var(--red); color: var(--red); background: rgba(200,57,43,.07); }
.flash-success { border: 1px solid #3a7a3a; color: #57a557; background: rgba(58,122,58,.09); }

/* ANIMATIONS */
.fade-in {
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 0.6s ease forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.blink { animation: blink 1.2s step-end infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* FOOTER */
footer {
  padding: 24px 48px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-left { font-size: 10px; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; }
.footer-right { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; font-style: italic; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  nav { padding: 16px 20px; }
  .section { padding: 40px 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  footer { padding: 20px; flex-direction: column; gap: 8px; text-align: center; }
}


/* NAV USER MENU — always on right */
.nav-user { position: relative; }
.nav-user-inner {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 7px 12px;
  border: 1px solid var(--dim);
  user-select: none; white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav-user-inner:hover { border-color: var(--muted); background: rgba(255,255,255,.03); }
.nav-caret { transition: transform var(--dur-2) var(--ease); }
.nav-user:has(.nav-dropdown.open) .nav-caret { transform: rotate(180deg); }
.nav-username { font-size: 12px; letter-spacing: .08em; color: var(--white); }
.nav-balance { font-size: 11px; color: var(--red); font-family: 'DM Mono', monospace;
  font-variant-numeric: tabular-nums; }
.nav-caret { font-size: 9px; color: var(--muted); }
.nav-dropdown {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  background: #0a0a0a; border: 1px solid var(--dim);
  min-width: 190px; z-index: 500; flex-direction: column;
  box-shadow: var(--shadow-2);
}
/* Menüs klappten vorher ohne jede Bewegung auf. Der kurze Auftritt macht
   sichtbar, dass das Menü aus dem Knopf darüber kommt. */
.nav-dropdown.open { display: flex; animation: menuIn var(--dur-2) var(--ease) both; transform-origin: top right; }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.nav-dropdown a {
  padding: 11px 16px 11px 22px; font-size: 11px; letter-spacing: .1em;
  color: var(--muted); text-decoration: none; text-transform: uppercase;
  display: block; position: relative;
  /* transform statt padding-left: verschiebt ohne Neuberechnung des Layouts */
  transform: translateX(-6px);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              transform var(--dur-2) var(--ease);
}
/* Akzentstrich links statt nur Einrücken — der Sprung wirkte wacklig */
.nav-dropdown a::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--red); transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform var(--dur-2) var(--ease);
}
.nav-dropdown a:hover { color: var(--white); background: rgba(255,255,255,.045); transform: translateX(0); }
.nav-dropdown a:hover::before { transform: scaleY(1); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-label { padding: 6px 16px 2px; font-size: 9px; letter-spacing: .2em; color: var(--red); text-transform: uppercase; }

/* ── LIGHT MODE ── */
body.light-mode {
  --black: #f5f5f0;
  --white: #111111;
  --red: #c8392b;
  --dim: #ddd;
  --muted: #777;
  --border: #e0e0e0;
  background: var(--black);
  color: var(--white);
}
body.light-mode::before { opacity: 0.15; }
body.light-mode nav,
body.light-mode .ticker ~ .page nav { background: var(--black); }
body.light-mode .nav-dropdown { background: #fff; border-color: #ddd; }
body.light-mode .nav-dropdown a:hover { background: rgba(0,0,0,.04); }
/* background-color statt der Kurzform `background`: die hätte das
   background-image mit dem Auswahlpfeil mit weggeräumt. */
body.light-mode input, body.light-mode select, body.light-mode textarea {
  background-color: #fff; border-color: #ddd; color: #111;
}
body.light-mode input:focus, body.light-mode textarea:focus, body.light-mode select:focus {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,57,43,.13);
}
body.light-mode input:hover, body.light-mode textarea:hover, body.light-mode select:hover { border-color: #bbb; }
body.light-mode .card { background: #fff; }
body.light-mode .modal { background: #fff; }
body.light-mode table tr:hover td { background: rgba(0,0,0,.03); }
body.light-mode .stat-card { background: #fff; }
body.light-mode .tl-card { background: #fff; }
body.light-mode .drawer { background: #f9f9f5; }
body.light-mode .admin-layout .sidebar { background: #f9f9f5; }
body.light-mode .btn-ghost { color: #555; border-color: #ccc; }
body.light-mode .btn-ghost:hover { color: #111; border-color: #111; }

/* Theme toggle button in dropdown */
.theme-toggle-item {
  padding: 11px 16px; font-size: 11px; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
  cursor: pointer; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); display: flex;
  justify-content: space-between; align-items: center;
  border: none; background: none; width: 100%;
}
.theme-toggle-item:hover { color: var(--white); background: rgba(255,255,255,.04); transform: translateX(4px); }
.theme-icon { font-size: 14px; }

/* ── Marktstatus, Wunschliste, Preisvorschläge ───────────────────────────── */
.ms-badge {
  display: inline-block; padding: 3px 9px; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap;
  /* darf schrumpfen und notfalls kürzen, statt den Nachbarn zu berühren */
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* Zeile aus Marke und Preis: fester Mindestabstand, Preis bricht bei Enge um */
.card-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.card-foot > :last-child { margin-left: auto; white-space: nowrap; }
.ms-available { color: #3a7a3a; }
.ms-for-sale  { color: #d4a017; }
.ms-open      { color: #4a9fd4; }
.ms-closed    { color: var(--muted); }

/* Kennzahlenzeile: letzter Verkaufspreis, Wunschliste, Vorbesitzer */
.stat-strip { display: flex; gap: 24px; flex-wrap: wrap; margin: 20px 0; }
.stat-strip .sk { font-size: 9px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.stat-strip .sv { font-size: 15px; margin-top: 3px; }

.card-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;
  font-size: 10px; color: var(--muted); letter-spacing: .08em; }

.wish-btn {
  background: none; border: 1px solid var(--dim); color: var(--muted);
  padding: 10px 14px; cursor: pointer; font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .1em; width: 100%; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.wish-btn:hover { border-color: var(--red); color: var(--white); }
.wish-btn.on { border-color: var(--red); color: var(--red); }

.demand-note {
  border: 1px solid #d4a017; color: #d4a017; padding: 14px 16px;
  font-size: 11px; line-height: 1.7; margin-bottom: 16px;
}

.offer-toggle { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border: 1px solid var(--border); padding: 12px 14px; margin-top: 8px; font-size: 11px; }

.covered   { color: #3a7a3a; font-size: 10px; letter-spacing: .1em; }
.uncovered { color: var(--red);  font-size: 10px; letter-spacing: .1em; }

.offer-status { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.os-pending   { color: #d4a017; }
.os-accepted  { color: #3a7a3a; }
.os-rejected, .os-withdrawn, .os-lapsed { color: var(--muted); }

/* ── Benachrichtigungs-Glocke ─────────────────────────────────────────────── */
.nav-bell { position: relative; display: inline-block; }
.nav-bell-btn {
  background: none; border: 1px solid var(--dim); color: var(--muted);
  padding: 6px 10px; cursor: pointer; font-size: 14px; position: relative; line-height: 1;
}
.nav-bell-btn:hover { border-color: var(--red); }
.bell-badge {
  position: absolute; top: -7px; right: -7px; background: var(--red); color: #fff;
  border-radius: 9px; padding: 1px 5px; font-size: 9px; font-family: 'DM Mono', monospace;
  min-width: 16px; text-align: center;
}
.notif-dropdown { width: 340px; max-height: 420px; overflow-y: auto; right: 0; }
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}
.notif-readall { background: none; border: none; color: var(--red); cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.notif-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; }
.notif-item:hover { background: rgba(200,57,43,.06); }
.notif-item.unread { border-left: 2px solid var(--red); }
.notif-icon { font-size: 14px; flex-shrink: 0; }
.notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-title { font-size: 11px; line-height: 1.4; }
.notif-text  { font-size: 10px; color: var(--muted); line-height: 1.5; }
.notif-time  { font-size: 9px; color: var(--muted); font-style: italic; }
.notif-empty { padding: 20px 14px; font-size: 11px; color: var(--muted); font-style: italic; text-align: center; }

body.light-mode .notif-item:hover { background: rgba(200,57,43,.05); }

@media (max-width: 480px) { .notif-dropdown { width: calc(100vw - 40px); } }

/* ── Moment-Karte ─────────────────────────────────────────────────────────────
   Die sichtbare Gestalt einer Sekunde. Bewusst Papier — Eintrittskarte, Beleg,
   Messingschild — und ausdrücklich KEINE Münze und kein Token: eine Sekunde ist
   ein Sammlerstück mit Beleg, kein handelbarer Chip.

   Alles skaliert über die font-size der Wurzel (.moment-card), damit dieselbe
   Karte in Detailansicht und Raster identisch aussieht. --mc ist die Akzentfarbe
   des Besitzers, die Themes setzen --mc-bg / --mc-ink / --mc-dim / --mc-line. */

.moment-card { font-size: 13px; display: block; text-decoration: none; color: inherit;
  --mc: #c8392b; --mc-bg: #0d0d0d; --mc-ink: #f0ede8; --mc-dim: #6b6b6b; --mc-line: #2a2a2a; }
.moment-card.mc-lg { font-size: 19px; }
.moment-card.mc-md { font-size: 12px; }
.moment-card.mc-sm { font-size: 9px; }

/* Räumliche Neigung: die Karte kippt zum Zeiger. Perspektive sitzt auf der
   Hülle, die Drehung auf der Fläche — sonst dreht sich der Bezugsrahmen mit.
   --rx/--ry/--mx/--my setzt initCardTilt() in api.js; ohne Zeiger sind sie 0,
   die Karte liegt also flach. */
.moment-card { perspective: 1000px; }
.mc-sheet {
  position: relative; aspect-ratio: 3 / 4; width: 100%; overflow: hidden;
  background: var(--mc-bg); color: var(--mc-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5em 1.4em; box-sizing: border-box;
  transform: translate3d(0, var(--lift, 0px), 0)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
  will-change: transform;
}
/* Während der Zeiger auf der Karte ist, folgt die Neigung ohne Nachlauf */
.moment-card.is-tilting .mc-sheet { transition: box-shadow var(--dur-3) var(--ease); }
a.moment-card:hover .mc-sheet,
.moment-card.is-tilting .mc-sheet { --lift: -4px; box-shadow: var(--shadow-3); }

/* Lichtreflex, der dem Zeiger folgt — gibt der Fläche Materialität.
   screen statt normal, damit er auf dunklen wie hellen Karten funktioniert. */
.mc-glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-3) var(--ease);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.22), rgba(255,255,255,.06) 32%, transparent 62%);
  mix-blend-mode: screen;
}
.moment-card.is-tilting .mc-glare { opacity: 1; }

/* Muster liegt hinter dem Inhalt, Rahmenschmuck darüber */
.mc-pattern, .mc-frame-art { position: absolute; inset: 0; pointer-events: none; }
.mc-pattern { z-index: 0; opacity: .5; }
.mc-frame-art { z-index: 2; }
.mc-head, .mc-face, .mc-name, .mc-foot { position: relative; z-index: 1; }

.mc-head, .mc-foot { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .62em; letter-spacing: .18em; text-transform: uppercase; color: var(--mc-dim); gap: 1em; }
.mc-serial { font-family: 'DM Mono', monospace; }
.mc-cat { color: var(--mc); }

.mc-face { text-align: center; padding: .4em 0; }
.mc-sym { font-size: 2.1em; line-height: 1; margin-bottom: .18em; }
.mc-date { font-family: 'Bebas Neue', sans-serif; font-size: 1.85em; line-height: .95; letter-spacing: .02em; }
.mc-time { font-family: 'Bebas Neue', sans-serif; font-size: 2.9em; line-height: .9; color: var(--mc); }
.mc-zone { font-size: .58em; letter-spacing: .3em; color: var(--mc-dim); margin-top: .5em; }

.mc-name { font-size: .72em; line-height: 1.5; text-align: center; color: var(--mc-ink);
  padding: .8em .2em; border-top: 1px solid var(--mc-line); border-bottom: 1px solid var(--mc-line);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mc-name.is-empty { color: var(--mc-dim); font-style: italic; }
.mc-holder { color: var(--mc-ink); }

/* ── Themes ── */
.mc-carbon    { --mc-bg:#0d0d0d; --mc-ink:#f0ede8; --mc-dim:#6b6b6b; --mc-line:#2a2a2a; }
.mc-paper     { --mc-bg:#f4f1ea; --mc-ink:#1a1a1a; --mc-dim:#7a7568; --mc-line:#d6d0c2; }
.mc-blueprint { --mc-bg:#0d2b45; --mc-ink:#d3e8ff; --mc-dim:#6a97bf; --mc-line:#1d4a70; }
.mc-terminal  { --mc-bg:#050805; --mc-ink:#7dff9b; --mc-dim:#2f7a44; --mc-line:#123a1c; }
.mc-sepia     { --mc-bg:#ece0c8; --mc-ink:#3b2b1a; --mc-dim:#8a7355; --mc-line:#cdba97; }
.mc-brass     { --mc-bg:#241f16; --mc-ink:#e8cf9a; --mc-dim:#99814f; --mc-line:#4a3d24; }

/* ── Muster ── */
.mc-p-none .mc-pattern { display: none; }
.mc-p-grid .mc-pattern {
  background-image:
    repeating-linear-gradient(0deg,  var(--mc-line) 0 1px, transparent 1px 1.6em),
    repeating-linear-gradient(90deg, var(--mc-line) 0 1px, transparent 1px 1.6em); }
.mc-p-stripes .mc-pattern {
  background-image: repeating-linear-gradient(45deg, var(--mc-line) 0 1px, transparent 1px .9em); }
.mc-p-dots .mc-pattern {
  background-image: radial-gradient(var(--mc-line) 1px, transparent 1.2px);
  background-size: 1.1em 1.1em; }
.mc-p-rays .mc-pattern {
  background-image: repeating-conic-gradient(from 0deg at 50% 42%,
    var(--mc-line) 0deg 3deg, transparent 3deg 12deg); opacity: .38; }
.mc-p-scanlines .mc-pattern {
  background-image: repeating-linear-gradient(0deg, var(--mc-line) 0 1px, transparent 1px .38em); }

/* ── Rahmen ── */
.mc-f-plain  .mc-sheet { border: 1px solid var(--mc-line); }
.mc-f-double .mc-sheet { border: 1px solid var(--mc); }
.mc-f-double .mc-frame-art { border: 1px solid var(--mc-line); margin: .42em; }

/* Ecken: vier Winkel statt durchgehendem Rand */
.mc-f-corners .mc-sheet { border: 1px solid var(--mc-line); }
.mc-f-corners .mc-frame-art {
  margin: .45em;
  background:
    linear-gradient(var(--mc) 0 0) left  top    / 1.3em 1px no-repeat,
    linear-gradient(var(--mc) 0 0) left  top    / 1px 1.3em no-repeat,
    linear-gradient(var(--mc) 0 0) right top    / 1.3em 1px no-repeat,
    linear-gradient(var(--mc) 0 0) right top    / 1px 1.3em no-repeat,
    linear-gradient(var(--mc) 0 0) left  bottom / 1.3em 1px no-repeat,
    linear-gradient(var(--mc) 0 0) left  bottom / 1px 1.3em no-repeat,
    linear-gradient(var(--mc) 0 0) right bottom / 1.3em 1px no-repeat,
    linear-gradient(var(--mc) 0 0) right bottom / 1px 1.3em no-repeat; }

/* Abriss: echte Stanzkerben auf der Kante plus Perforationslinie dazwischen.
   Die Kerben sitzen auf x=0 und x=100%, damit sie den Rand durchbrechen —
   innen liegende Kreise sehen nur aus wie Flecken. */
.mc-f-perforated .mc-sheet { border: 1px solid var(--mc-line); }
.mc-f-perforated .mc-frame-art {
  background:
    radial-gradient(circle at 0    26%, var(--mc-bg) 0 .55em, var(--mc-line) .55em calc(.55em + 1px), transparent calc(.55em + 1.5px)),
    radial-gradient(circle at 100% 26%, var(--mc-bg) 0 .55em, var(--mc-line) .55em calc(.55em + 1px), transparent calc(.55em + 1.5px)),
    repeating-linear-gradient(90deg, var(--mc-line) 0 .3em, transparent .3em .62em);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 1px;
  background-position: 0 0, 0 0, 0 26%; }

/* Deko: doppelte Akzentlinie mit abgesetztem Innenrahmen */
.mc-f-deco .mc-sheet { border: 2px solid var(--mc); }
.mc-f-deco .mc-frame-art {
  margin: .3em; border: 1px solid var(--mc-line);
  box-shadow: inset 0 0 0 .28em var(--mc-bg), inset 0 0 0 calc(.28em + 1px) var(--mc-line); }

/* ── Editor mit Live-Vorschau ── */
.mc-editor { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.mc-preview-col { position: sticky; top: 0; }
.mc-preview-hint { font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-top: 10px; }
.mc-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mc-swatch { width: 22px; height: 22px; border: 1px solid var(--dim); cursor: pointer; padding: 0; }
.mc-swatch:hover { transform: scale(1.12); }
.mc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-chip { border: 1px solid var(--dim); background: none; color: var(--muted); cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; padding: 6px 10px;
  text-transform: uppercase; }
.mc-chip:hover { border-color: var(--red); color: var(--white); }
.mc-chip.on { border-color: var(--red); color: var(--red); }
@media (max-width: 640px) { .mc-editor { grid-template-columns: 1fr; } .mc-preview-col { position: static; max-width: 200px; margin: 0 auto; } }

/* ── Moment-Karte: Schriftbild, Stempel, Veredelung ───────────────────────────
   Ebenen von hinten nach vorn: Muster (0) → Inhalt (1) → Rahmen (2)
   → Veredelung (3) → Stempel (4). */
.mc-finish { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* Diagonal über die Kartenmitte, nicht an den Rand gesetzt: am Rand lief der
   längste Aufdruck ("IN BESITZ") aus der Karte und wurde vom overflow:hidden
   der Fläche abgeschnitten. Zentriert passt jede Länge. */
.mc-stamp  { position: absolute; z-index: 4; pointer-events: none;
  left: 50%; top: 57%; transform: translate(-50%, -50%) rotate(-12deg);
  border: 2px solid var(--mc); color: var(--mc);
  padding: .26em .55em; font-size: .55em; letter-spacing: .16em;
  font-family: 'DM Mono', monospace; opacity: .72; white-space: nowrap; }

/* Schriftbild von Datum und Uhrzeit. Die Größen sind je Schnitt eigens gesetzt:
   Bebas ist schmal, Mono und Antiqua laufen deutlich breiter und würden sonst
   aus der Karte laufen. */
.mc-t-mono .mc-date  { font-family: 'DM Mono', monospace; font-size: 1.15em; letter-spacing: -.02em; }
.mc-t-mono .mc-time  { font-family: 'DM Mono', monospace; font-size: 1.85em; letter-spacing: -.03em; }
.mc-t-serif .mc-date { font-family: Georgia, 'Times New Roman', serif; font-size: 1.35em; }
.mc-t-serif .mc-time { font-family: Georgia, 'Times New Roman', serif; font-size: 2.2em; }
.mc-t-wide .mc-date  { letter-spacing: .18em; font-size: 1.5em; }
.mc-t-wide .mc-time  { letter-spacing: .16em; font-size: 2.35em; }

/* Veredelung — Alterung des Papiers, kein Glanzeffekt aus der Token-Welt */
.mc-fin-none .mc-finish { display: none; }
.mc-fin-aged .mc-finish {
  background: radial-gradient(ellipse at 50% 45%, rgba(120,80,20,0) 45%, rgba(90,55,10,.42) 100%),
              linear-gradient(160deg, rgba(160,120,40,.10), rgba(60,40,10,.16)); }
.mc-fin-foxed .mc-finish {
  background:
    radial-gradient(circle at 18% 22%, rgba(140,95,40,.32) 0 .18em, transparent .19em),
    radial-gradient(circle at 74% 14%, rgba(140,95,40,.24) 0 .12em, transparent .13em),
    radial-gradient(circle at 33% 71%, rgba(140,95,40,.28) 0 .22em, transparent .23em),
    radial-gradient(circle at 86% 63%, rgba(140,95,40,.20) 0 .15em, transparent .16em),
    radial-gradient(circle at 58% 88%, rgba(140,95,40,.26) 0 .17em, transparent .18em),
    radial-gradient(circle at 9%  54%, rgba(140,95,40,.18) 0 .11em, transparent .12em),
    radial-gradient(circle at 46% 38%, rgba(140,95,40,.15) 0 .09em, transparent .10em); }
/* Knick: schmale helle und dunkle Kante entlang derselben Diagonale.
   Breite Bänder lasen sich als grauer Balken statt als Falz. */
.mc-fin-crease .mc-finish {
  background: linear-gradient(112deg,
    transparent 0 48.3%, rgba(255,255,255,.07) 48.7% 49.8%,
    rgba(0,0,0,.18) 50.2% 51.3%, transparent 51.7% 100%); }
.mc-fin-gloss .mc-finish {
  background: linear-gradient(118deg,
    transparent 0 34%, rgba(255,255,255,.14) 42%, rgba(255,255,255,.03) 52%, transparent 62%); }

/* Der Stempel skaliert bei sehr kleinen Karten sonst zum unlesbaren Fleck */
.moment-card.mc-sm .mc-stamp { font-size: .62em; border-width: 1px; padding: .18em .4em; }


/* ── Leerzustände ────────────────────────────────────────────────────────────
   „No listings found." als kursive Kleinzeile ist das zweite große Beta-Signal.
   Ein Leerzustand erklärt, warum nichts da ist, und bietet den nächsten
   Schritt an. */
.empty-state {
  border: 1px solid var(--border);
  padding: 56px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: revealUp var(--dur-4) var(--ease) both;
}
.empty-state .es-mark {
  font-family: 'Bebas Neue', sans-serif; font-size: 40px;
  color: var(--dim); letter-spacing: .1em; line-height: 1;
}
.empty-state .es-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px;
  letter-spacing: .08em; color: var(--white);
}
.empty-state .es-text {
  font-size: 12px; color: var(--muted); line-height: 1.8; max-width: 420px;
}
.empty-state .btn { margin-top: 10px; }

/* ── Ladezustände ────────────────────────────────────────────────────────────
   Nackte „Loading…"-Zeilen sind das deutlichste Beta-Signal einer Oberfläche.
   Platzhalter in der Form des späteren Inhalts halten das Layout ruhig und
   zeigen, dass etwas kommt — die Seite springt beim Eintreffen nicht mehr. */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--border); border-radius: 2px;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 45%, transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-line { height: 11px; margin-bottom: 10px; }
.sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
.sk-card { aspect-ratio: 3/4; width: 100%; border-radius: 0; }
.sk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px;
}
.sk-block { height: 120px; }

/* ── Auftritt von Inhalten ───────────────────────────────────────────────────
   Inhalte erscheinen leicht versetzt statt schlagartig. Der Versatz kommt aus
   --i, das die Seite je Element setzt; ohne --i ist es einfach 0. */
.reveal {
  opacity: 0; transform: translateY(14px);
  animation: revealUp var(--dur-4) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes revealUp { to { opacity: 1; transform: none; } }

/* Beim Scrollen ins Bild kommen — von api.js über IntersectionObserver gesetzt */
.reveal-on-scroll { opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease); }
.reveal-on-scroll.in { opacity: 1; transform: none; }

/* ── Anklickbares ────────────────────────────────────────────────────────────
   Nach dem Entfernen des globalen crosshair muss der Zeiger dort stehen,
   wo tatsächlich etwas passiert. */
button, [role="button"], .card, .tl-card, .moment-card[href], summary,
.mc-chip, .mc-swatch, .amount-btn, .tab, .wish-btn, .slink, label[for] {
  cursor: pointer;
}
button:disabled, .btn[disabled] { cursor: not-allowed; }

/* Antippen auf Mobilgeräten ohne graues Aufblitzen */
a, button { -webkit-tap-highlight-color: transparent; }

/* Berührungsziele groß genug für Finger */
@media (pointer: coarse) {
  .nav-links a, .nav-dropdown a, .tab { min-height: 44px; display: flex; align-items: center; }
  .btn { padding: 16px 28px; }
}

/* Auf schmalen Fenstern klappt die Navigation auf (siehe „Handy" weiter
   unten). Die frühere Fassung ließ die Leiste waagerecht scrollen — dabei
   waren die hinteren Einträge praktisch unauffindbar. */
@media (max-width: 760px) {
  .logo { font-size: 18px; letter-spacing: .2em; }
  .ticker-item { padding: 0 24px; font-size: 10px; }
}

body.light-mode ::-webkit-scrollbar-thumb { background: #cfcfc8; border-color: var(--black); }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #b8b8b0; }
body.light-mode .skeleton { background: #e6e3da; }
body.light-mode .skeleton::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.05) 45%, transparent); }
body.light-mode th { background: var(--black); }
body.light-mode .nav-dropdown { box-shadow: 0 10px 30px rgba(0,0,0,.12); }
body.light-mode .modal { box-shadow: 0 28px 70px rgba(0,0,0,.18); }
body.light-mode .btn:hover { box-shadow: 0 10px 30px rgba(200,57,43,.22); }
body.light-mode .card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.10); }

/* ── Preisverlauf ────────────────────────────────────────────────────────────
   Dünne Marken, zurückgenommenes Raster, die Daten sind das Lauteste.
   Rasterlinien sind durchgezogen, nicht gestrichelt — Strichelung ist Rauschen. */
.chart-wrap { margin-bottom: 8px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.chart-unit { font-size: 10px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.chart-box { position: relative; max-width: 860px; }
/* Höhe aus dem Seitenverhältnis, nicht fest: mit fester Höhe und
   preserveAspectRatio="none" wurde die Beschriftung mitgestreckt. */
.chart-box { max-width: 860px; }
.price-chart { width: 100%; height: auto; display: block; overflow: visible; }

.c-grid { stroke: var(--border); stroke-width: 1; }
.c-tick { fill: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .06em; }
/* Fläche als Hauch, nicht als satter Block */
.c-area { fill: var(--red); fill-opacity: .10; }
.c-line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-cross { stroke: var(--muted); stroke-width: 1; transition: opacity var(--dur-1) var(--ease); }
/* 2px Ring in der Flächenfarbe, damit Punkte über der Linie lesbar bleiben */
.c-dot {
  fill: var(--red); stroke: var(--black); stroke-width: 2;
  transition: r var(--dur-1) var(--ease);
}
.c-dot:hover, .c-dot.on, .c-dot:focus-visible { r: 6; }
.c-dot:focus-visible { outline: none; stroke: var(--white); }
/* Nur der Endpunkt trägt eine Zahl — eine an jedem Punkt liest niemand */
.c-endlabel { fill: var(--white); font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .04em; }

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: #0c0c0c; border: 1px solid var(--dim); padding: 9px 12px;
  box-shadow: var(--shadow-2); white-space: nowrap;
  animation: revealUp var(--dur-1) var(--ease) both;
}
.chart-tip .ct-value { font-family: 'Bebas Neue', sans-serif; font-size: 20px; line-height: 1.1; }
.chart-tip .ct-meta { font-size: 10px; color: var(--muted); letter-spacing: .06em; margin-top: 2px; }

.chart-none { font-size: 12px; color: var(--muted); line-height: 1.8; max-width: 480px; font-style: italic; }
.chart-single { display: flex; flex-direction: column; gap: 6px; }
.chart-single .cs-value { font-family: 'Bebas Neue', sans-serif; font-size: 46px; line-height: 1; color: var(--white); }
.chart-single .cs-meta { font-size: 11px; color: var(--muted); line-height: 1.8; max-width: 460px; }

body.light-mode .c-dot { stroke: var(--black); }
body.light-mode .chart-tip { background: #fff; }

/* ── Sprachumschaltung ───────────────────────────────────────────────────────
   Zwei Kürzel statt Aufklappmenü: bei zwei Sprachen ist ein Menü mehr
   Bedienaufwand als Nutzen. */
/* ── Sprachauswahl ─────────────────────────────────────────────────────────
   Ein Knopf mit Flagge und Kürzel, darunter eine Liste mit Suche. Bewusst
   schmal: die Auswahl gehört in die Kopfzeile, nicht in die Aufmerksamkeit. */
.lang-picker { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--dim); color: var(--muted);
  padding: 6px 9px; font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .08em; cursor: pointer; line-height: 1;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.lang-btn:hover, .lang-picker [aria-expanded="true"] { color: var(--white); border-color: var(--white); }
/* ── Flaggen ───────────────────────────────────────────────────────────────
   Gezeichnete SVGs statt Emoji: Windows liefert für Flaggen-Emoji keine
   Glyphen und zeigt dort zwei Buchstaben in Kästchen. */
.flag {
  display: inline-block; width: 17px; height: 12px; flex: 0 0 17px;
  line-height: 0; border-radius: 1px; overflow: hidden;
  /* Die Perspektive sitzt auf der Hülle, die Drehung auf dem SVG darin —
     läge beides auf demselben Element, drehte sich der Bezugsrahmen mit. */
  perspective: 60px;
}
.flag svg { display: block; width: 100%; height: 100%; }

/* Leichtes Wehen: eine Drehung um die Hochachse plus eine Spur Schräglage.
   Bewusst langsam und klein — es soll auffallen, wenn man hinsieht, und
   sonst nicht stören. Läuft nur beim Zeigen und bei der gewählten Sprache,
   nicht auf acht Flaggen gleichzeitig. */
@keyframes flag-wave {
  0%   { transform: rotateY(0deg)   skewY(0deg); }
  25%  { transform: rotateY(14deg)  skewY(-1.2deg); }
  50%  { transform: rotateY(0deg)   skewY(0deg); }
  75%  { transform: rotateY(-14deg) skewY(1.2deg); }
  100% { transform: rotateY(0deg)   skewY(0deg); }
}
.lang-btn:hover .flag svg,
.lang-item:hover .flag svg,
.lang-item.on .flag svg {
  animation: flag-wave 2.6s var(--ease-in-out) infinite;
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .lang-btn:hover .flag svg, .lang-item:hover .flag svg, .lang-item.on .flag svg {
    animation: none;
  }
}
.lang-caret { font-size: 8px; opacity: .7; }

/* Beim Öffnen setzt placeMenu() position:fixed und die Koordinaten. Der
   z-index liegt über allen Aufklappmenüs der Navigation — das Menü soll nie
   hinter einem anderen verschwinden. */
/* Die Lage setzt placeMenu() beim Öffnen (position:fixed, Koordinaten aus der
   Lage des Knopfes). Hier steht nur das Aussehen.

   **`[hidden]` braucht die eigene Regel.** Das Attribut wirkt über
   `display:none` — steht daneben ein eigenes `display`, gewinnt das, und das
   Menü stand dauerhaft offen. Genau das ist passiert. */
.lang-menu {
  position: fixed; z-index: 400;
  width: 232px; background: var(--black); border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
}
.lang-menu[hidden] { display: none; }
.lang-search { padding: 8px; border-bottom: 1px solid var(--border); }
.lang-search input {
  width: 100%; padding: 7px 9px; font-size: 11px;
  background: transparent; border: 1px solid var(--dim); color: var(--white);
  font-family: 'DM Mono', monospace; outline: none;
}
.lang-search input:focus { border-color: var(--muted); }
/* Höhe für gut ein Dutzend Einträge — darüber wird gescrollt, damit das Menü
   nicht über die Seite hinauswächst. */
.lang-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.lang-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px;
  text-align: left; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.lang-item:hover { color: var(--white); background: rgba(255,255,255,.04); }
.lang-item.on { color: var(--red); }
.lang-name { flex: 1; }
.lang-alt { font-size: 10px; opacity: .55; }
.lang-sep-line { height: 1px; background: var(--border); margin: 5px 12px; }
.lang-empty { padding: 14px 12px; font-size: 11px; color: var(--muted); font-style: italic; }


/* ── Sticker ─────────────────────────────────────────────────────────────────
   Werden gekauft und sind danach dauerhaft. Sie liegen über allem außer dem
   Rahmenschmuck, damit sie wie aufgeklebt wirken und nicht wie Teil der
   Gestaltung. Position kommt in Prozent, damit sie in jeder Kartengröße sitzt. */
.mc-stickers { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.st {
  position: absolute; transform-origin: 50% 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; white-space: nowrap;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.st-plain { font-size: 1.55em; }
.st-seal {
  width: 2.5em; height: 2.5em; border-radius: 50%;
  border: 2px solid currentColor; font-size: 1.05em;
  background: rgba(255,255,255,.06);
}
.st-stamp {
  border: 2px solid currentColor; padding: .2em .5em;
  font-family: 'DM Mono', monospace; font-size: .58em; letter-spacing: .16em;
  gap: .35em; background: rgba(255,255,255,.05);
}
.st-tag { border: 1px solid currentColor; padding: .18em .45em; font-size: .58em; letter-spacing: .12em; }
/* Hologramm: schillernder Verlauf statt Volltonfarbe */
.st-holo {
  background: linear-gradient(115deg, #ff4d6d, #ffd166, #06d6a0, #4cc9f0, #b388ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  border-color: #9ad6ff;
}
.st-holo.st-seal { background-clip: border-box; -webkit-background-clip: border-box; color: #10131a; }

/* Auswahl und Platzierung im Editor */
.sticker-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.sticker-pick {
  border: 1px solid var(--dim); background: none; color: var(--white);
  padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 5px; transition: border-color var(--dur-1) var(--ease),
  background var(--dur-1) var(--ease);
}
.sticker-pick:hover { border-color: var(--muted); background: rgba(255,255,255,.03); }
.sticker-pick.on { border-color: var(--red); }
.sticker-pick .sp-glyph { font-size: 20px; line-height: 1; }
.sticker-pick .sp-label { font-size: 9px; letter-spacing: .08em; color: var(--muted); text-align: center; }
.sticker-pick .sp-price { font-size: 9px; color: var(--red); }
.place-hint {
  border: 1px solid #d4a017; color: #d4a017; padding: 10px 12px;
  font-size: 11px; line-height: 1.7; margin: 10px 0;
}
.place-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.place-ctl label { font-size: 9px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.place-ctl input[type=range] { width: 100%; padding: 0; border: none; background: transparent; }
.mc-place { cursor: crosshair; }

/* ── Sticker-Bestätigung ─────────────────────────────────────────────────────
   Ein gekaufter Sticker ist endgültig — das darf sich nicht anfühlen wie ein
   stilles Formularfeld. Der Sticker knallt einmal auf die Karte, die Karte
   zuckt kurz, ein Ring läuft aus. */
.st-land { animation: stLand 620ms var(--ease-out-back) both; }
@keyframes stLand {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(var(--st-rot,0deg)) scale(calc(var(--st-sc,1) * 3.4)); }
  55%  { opacity: 1; transform: translate(-50%,-50%) rotate(var(--st-rot,0deg)) scale(calc(var(--st-sc,1) * 0.86)); }
  100% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--st-rot,0deg)) scale(var(--st-sc,1)); }
}
.st-ring {
  position: absolute; z-index: 7; pointer-events: none;
  width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em;
  border: 2px solid var(--mc, #c8392b); border-radius: 50%;
  animation: stRing 700ms var(--ease) forwards;
}
@keyframes stRing {
  from { opacity: .9; transform: scale(.3); }
  to   { opacity: 0;  transform: scale(3.2); }
}
.mc-hit { animation: mcHit 420ms var(--ease) both; }
@keyframes mcHit {
  0%   { transform: translate3d(0,0,0) scale(1); }
  30%  { transform: translate3d(0,2px,0) scale(.985); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* ── Nachbarschaft einer Minute ─────────────────────────────────────────────── */
.nb-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; max-width: 560px; margin-top: 14px; }
.nb-slot {
  aspect-ratio: 1; border: 1px solid var(--border); font-size: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  text-decoration: none; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nb-slot:hover { border-color: var(--muted); color: var(--white); transform: translateY(-2px); }
.nb-slot.taken { border-color: var(--red); color: var(--red); background: rgba(200,57,43,.10); }
.nb-slot.self { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.10); }
.nb-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.nb-dot { display: inline-block; width: 8px; height: 8px; border: 1px solid currentColor; margin-right: 6px; vertical-align: -1px; }

/* ── Spotlight ──────────────────────────────────────────────────────────────── */
.spot { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; margin-top: 22px; }
.spot-day { font-size: 10px; letter-spacing: .2em; color: #d4a017; text-transform: uppercase; }
.spot-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px,3.2vw,42px); line-height: 1.02; margin: 6px 0 10px; }
.spot-text { font-size: 12px; color: #999; line-height: 1.9; max-width: 520px; }
@media (max-width: 700px) { .spot { grid-template-columns: 1fr; } .nb-grid { grid-template-columns: repeat(12, 1fr); } }

/* ── Jahrestage ─────────────────────────────────────────────────────────────── */
.anniv { border: 1px solid #d4a017; padding: 18px 20px; margin-top: 22px; }
.anniv-k { font-size: 10px; letter-spacing: .2em; color: #d4a017; text-transform: uppercase; }
.anniv-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 12px; }
.anniv-row:last-child { border-bottom: none; }

/* ── Demo-Bereich ───────────────────────────────────────────────────────────── */
.demo { padding: 72px 48px; border-top: 1px solid var(--border); }
.demo-tag {
  display: inline-block; border: 1px dashed #d4a017; color: #d4a017;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 14px;
}
.demo-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; margin-top: 26px; }
.demo-note { font-size: 11px; color: var(--muted); line-height: 1.8; margin-top: 12px; text-align: center; }
.demo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .demo { padding: 48px 20px; } .demo-grid { grid-template-columns: 1fr; }
  .demo-cols { grid-template-columns: 1fr; } }

/* ── Seitenspalte der Startseite: zuletzt gesichert + Zufallsfund ────────────
   Füllt den Raum unter der Eingangstür, ohne ihr die Aufmerksamkeit zu nehmen:
   kleine Schrift, Haarlinien, keine Flächen. */
.side-block { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.side-more { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; transition: color var(--dur-1) var(--ease); }
.side-more:hover { color: var(--white); }

.claim-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}
.claim-row:last-of-type { border-bottom: none; }
.claim-row:hover { transform: translateX(8px); border-color: var(--dim); }
/* display:block, damit Zeitstempel/Name und Preis/Käufer je zweizeilig
   stapeln — inline liefen sie in eine Zeile und der Name wurde am Spaltenrand
   abgeschnitten. */
.claim-ts { display: block; font-size: 12px; color: var(--white); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.claim-name { display: block; font-size: 10px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.claim-price { display: block; font-size: 12px; color: var(--white); font-variant-numeric: tabular-nums; text-align: right; }
.claim-who { display: block; font-size: 9px; color: var(--muted); letter-spacing: .1em; text-align: right; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.claim-empty { font-size: 11px; color: var(--muted); line-height: 1.8; font-style: italic; padding: 8px 0 2px; }

.dice { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.dice-text { font-size: 10px; color: var(--muted); line-height: 1.7; }

/* Sperrzonen beim Platzieren sichtbar machen — sonst rät man, wo es klemmt.
   Bewusst `mc-guard`, nicht `mc-zone`: letzteres ist seit dem ersten
   Kartenentwurf die UTC-Zeile. Der Namenskonflikt hat sie schraffiert. */
.mc-guards { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: none; }
.moment-card.mc-place .mc-guards { display: block; }
.mc-guard {
  position: absolute;
  background: repeating-linear-gradient(45deg,
    rgba(200,57,43,.16) 0 5px, transparent 5px 10px);
  border: 1px dashed rgba(200,57,43,.5);
}

/* ── Serienzähler ────────────────────────────────────────────────────────────
   Der Zähler ist die Werbung: er ist nachprüfbar und läuft nur in eine
   Richtung. Deshalb sachlich gehalten, ohne Countdown-Kitsch. */
.series-box { border: 1px solid var(--dim); padding: 18px 20px; }
.series-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.series-name { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.series-left { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #d4a017; }
.series-count { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1.1; margin: 6px 0 10px;
  font-variant-numeric: tabular-nums; }
.series-count small { font-size: 15px; color: var(--muted); }
.series-track { height: 4px; background: var(--border); position: relative; overflow: hidden; }
.series-fill { height: 100%; background: var(--red); width: 0;
  /* Mindestbreite: bei 2 von 1000 wäre der Balken sonst 0 Pixel breit und
     sähe aus wie ein Fehler statt wie ein Anfang. */
  min-width: 3px;
  transition: width var(--dur-4) var(--ease); }
.series-fill.is-empty { min-width: 0; }
.series-note { font-size: 10px; color: var(--muted); line-height: 1.75; margin-top: 10px; }
.series-box.is-closed { border-color: #d4a017; }
.series-box.is-closed .series-fill { background: #d4a017; }

/* Seriennummer als Kennzeichen */
.series-tag { display: inline-block; border: 1px solid #9c7c2a; color: #c9a24a;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px;
  font-variant-numeric: tabular-nums; }

.reg-row { display: grid; grid-template-columns: 64px 1fr 150px 120px; gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: transform var(--dur-2) var(--ease); }
.reg-row:hover { transform: translateX(6px); }
.reg-no { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg-ts { font-size: 12px; font-variant-numeric: tabular-nums; }
.reg-label { font-size: 10px; color: var(--muted); margin-top: 2px; }
.reg-owner { font-size: 11px; }
@media (max-width: 760px) { .reg-row { grid-template-columns: 46px 1fr; }
  .reg-row > :nth-child(3), .reg-row > :nth-child(4) { display: none; } }

/* ── Sammlungen ─────────────────────────────────────────────────────────────
   Der Fortschritt ist Nebensache — es geht um die benannte Lücke darunter. */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.set-card { border: 1px solid var(--border); padding: 18px 20px; transition: border-color var(--dur-2) var(--ease); }
.set-card.done { border-color: #9c7c2a; }
.set-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.set-name { font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .04em; }
.set-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-card.done .set-count { color: #c9a24a; }
.set-track { height: 3px; background: var(--border); margin: 10px 0 9px; }
.set-fill { height: 100%; background: var(--red); transition: width var(--dur-4) var(--ease); }
.set-card.done .set-fill { background: #c9a24a; }
.set-note { font-size: 10px; color: var(--muted); line-height: 1.7; }
.set-gap { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.8; }
.set-gap a { color: var(--white); }
.set-gap .gap-free { color: #57a557; }

/* ── Auktion ────────────────────────────────────────────────────────────────
   Die Frist ist das Wichtigste auf der Seite, sobald eine läuft. */
.auc-box { border: 1px solid #d4a017; padding: 20px; margin-bottom: 16px; }
.auc-box.ended { border-color: var(--dim); }
.auc-k { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #d4a017; }
.auc-box.ended .auc-k { color: var(--muted); }
.auc-price { font-family: 'Bebas Neue', sans-serif; font-size: 40px; line-height: 1.05; margin: 4px 0 2px;
  font-variant-numeric: tabular-nums; }
.auc-sub { font-size: 11px; color: var(--muted); line-height: 1.7; }
.auc-clock { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; margin-top: 10px; }
.auc-clock.urgent { color: var(--red); }
.auc-bids { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.auc-bid { display: flex; justify-content: space-between; gap: 12px; font-size: 11px;
  padding: 5px 0; color: var(--muted); }
.auc-bid.top { color: var(--white); }
.auc-bid b { font-weight: normal; font-variant-numeric: tabular-nums; }
.auc-form { display: flex; gap: 8px; margin-top: 12px; }
.auc-form input { flex: 1; }

/* ── Auktionsübersicht ──────────────────────────────────────────────────────
   Die Frist ist die Information — deshalb rechts, in Tabellenziffern, und
   unter zehn Minuten rot. */
.auc-row {
  display: grid; grid-template-columns: 1fr auto 120px; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}
.auc-row:last-child { border-bottom: none; }
.auc-row:hover { transform: translateX(6px); border-color: var(--dim); }
.auc-row-ts { display: block; font-size: 12px; font-variant-numeric: tabular-nums; }
.auc-row-label { display: block; font-size: 10px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.auc-row-mid { text-align: right; }
.auc-row-price { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.auc-row-bids { display: block; font-size: 9px; color: var(--muted); letter-spacing: .1em;
  text-transform: uppercase; margin-top: 2px; }
.auc-row-clock { font-family: 'Bebas Neue', sans-serif; font-size: 19px; text-align: right;
  color: #d4a017; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.auc-row-clock.urgent { color: var(--red); }
.auc-empty { font-size: 11px; color: var(--muted); font-style: italic; line-height: 1.8; padding: 8px 0; }
@media (max-width: 620px) { .auc-row { grid-template-columns: 1fr 90px; }
  .auc-row-mid { display: none; } }

/* Rechtstexte in der Fußzeile. Sie müssen von jeder Seite aus erreichbar sein —
   ein Impressum, das man suchen muss, gilt als nicht vorhanden. */
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
                font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.footer-legal a { color: var(--muted); transition: color var(--dur-1) var(--ease); }
.footer-legal a:hover { color: var(--white); }
@media (max-width: 640px) { .footer-legal { gap: 12px; } }

/* Erste Schritte. Erscheint nur bei leerer Sammlung und lässt sich wegklicken —
   eine Anleitung, die bleibt, nachdem man sie nicht mehr braucht, ist Ballast. */
.onboard { border: 1px solid var(--border); padding: 22px 24px; margin-bottom: 26px;
           max-width: 720px; background: rgba(255,255,255,.02); }
.onboard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.onboard-x { background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer;
             padding: 4px 8px; transition: color var(--dur-1) var(--ease); }
.onboard-x:hover { color: var(--white); }
.onboard-steps { display: grid; gap: 14px; margin-bottom: 18px; }
.onboard-step { display: flex; gap: 14px; align-items: flex-start; }
.onboard-n { flex: 0 0 24px; height: 24px; border: 1px solid var(--dim); display: grid;
             place-items: center; font-size: 11px; color: var(--muted);
             font-family: 'DM Mono', monospace; }
.onboard-t { font-size: 13px; color: var(--white); margin-bottom: 3px; }
.onboard-b { font-size: 11px; color: var(--muted); line-height: 1.7; }

/* ── Karte: kein Textmarkieren ──────────────────────────────────────────────
   Beim Ziehen eines Stickers markierte die Maus sonst Datum und Uhrzeit; die
   blaue Auswahl liegt dann über der Karte und der Zug wirkt kaputt. Die Karte
   ist ein Bild, kein Fließtext — hier gibt es nichts zu markieren. */
.moment-card, .moment-card * { user-select: none; -webkit-user-select: none; }

/* ── Sticker ziehen ─────────────────────────────────────────────────────── */
/* Nur ungekaufte Sticker sind anfassbar. Die Ebene ist sonst durchlässig
   (pointer-events:none), damit Klicks auf die Karte durchgehen. */
.moment-card.mc-place .mc-stickers { pointer-events: none; }
.moment-card.mc-place .st-drag {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;                 /* sonst scrollt das Wischen die Seite */
}
.moment-card.mc-place .st-drag:hover { filter: brightness(1.08); }
.st-drag.st-dragging { cursor: grabbing; z-index: 9; filter: brightness(1.12); }
.st-drag.st-blocked {
  outline: 2px dashed var(--red);
  outline-offset: 3px;
  opacity: .65;
}
/* Fadenkreuz nur auf der freien Fläche — über einem ziehbaren Sticker ist die
   Greifhand die richtige Rückmeldung. */
.mc-place { cursor: crosshair; }

/* Preisstufe im Serienzähler. Der aktuelle Preis groß, daneben wie viele es
   noch dafür gibt — die Zahl ist das Argument, jetzt zu kaufen statt später. */
.series-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.sp-now { font-family: 'Bebas Neue', sans-serif; font-size: 26px; line-height: 1;
          color: var(--white); font-variant-numeric: tabular-nums; }
.sp-step { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ══ Handy und schmale Fenster ═══════════════════════════════════════════════
   Die Seite soll auf dem Telefon nicht die verkleinerte Schreibtischfassung
   sein, sondern eine eigene, lesbare Anordnung: nichts zoomen müssen, nichts
   waagerecht schieben, Tippziele groß genug. */

/* ── Klappbare Navigation ───────────────────────────────────────────────── */
.nav-burger {
  display: none; background: none; border: 1px solid var(--dim);
  padding: 9px 10px; cursor: pointer; flex-direction: column; gap: 4px;
  margin-left: auto;
}
.nav-burger span {
  display: block; width: 18px; height: 1.5px; background: var(--muted);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.nav-burger:hover span { background: var(--white); }
nav.is-open .nav-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  nav { padding: 16px 20px; gap: 12px; }
  .nav-burger { display: flex; }

  /* Die Leiste wird zur Fläche unter der Kopfzeile. `position: fixed` statt
     absolute, damit sie beim Scrollen nicht mitwandert. */
  .nav-links {
    position: fixed; left: 0; right: 0;
    top: calc(var(--ticker-h) + 57px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--border);
    padding: 8px 20px 20px; margin: 0; z-index: 39;
    max-height: calc(100vh - var(--ticker-h) - 57px);
    overflow-y: auto; overscroll-behavior: contain;
    /* **Binär, nicht animiert.** Ein Übergang über `visibility` ließ das Menü
       je nach Zeitpunkt unsichtbar zurück — eine Einblendung ist das nicht
       wert. Der Auftritt kommt stattdessen aus einer kurzen Bewegung, die
       nichts am Sichtbarsein ändert. */
    display: none;
  }
  nav.is-open .nav-links { display: flex; animation: nav-drop var(--dur-2) var(--ease); }

  /* Tippziele: mindestens 44 px hoch, wie es sich für den Daumen gehört. */
  .nav-links > a {
    padding: 14px 2px; font-size: 13px; letter-spacing: .16em;
    border-bottom: 1px solid var(--border);
  }
  .nav-links > a.btn { margin-top: 14px; text-align: center; padding: 15px; }
  .nav-links .lang-picker { margin-top: 14px; }
  .nav-links .lang-btn { width: 100%; justify-content: flex-start; padding: 13px 12px; }
  .nav-user { width: 100%; }
  .nav-user-inner { width: 100%; justify-content: space-between; padding: 13px 12px; }
  .nav-dropdown { position: static; width: 100%; box-shadow: none; border: 0;
                  border-top: 1px solid var(--border); margin-top: 4px; }
  .bell-wrap { align-self: flex-start; margin-top: 12px; }
  body.nav-open { overflow: hidden; }
}

/* ── Sprachauswahl auf schmalen Geräten ────────────────────────────────────
   Kein Aufklappmenü mehr, sondern ein Blatt vom unteren Rand mit
   abdunkelndem Grund. Ein Aufklappmenü neben einem 380 px breiten Fenster
   berührt immer irgendetwas; ein Blatt über der ganzen Seite nie. */
@media (max-width: 900px) {
  .lang-menu {
    position: fixed !important;
    top: auto !important; bottom: 0; left: 0 !important; right: 0 !important;
    width: 100%; max-height: 72vh !important;
    border: 0; border-top: 1px solid var(--border);
    /* Der Schatten übernimmt zugleich die Abdunklung der Seite dahinter:
       ein Ring von 100vmax um das Blatt herum. Spart ein eigenes Element und
       kann deshalb auch nicht danebenliegen. */
    box-shadow: 0 -24px 60px rgba(0,0,0,.6), 0 0 0 100vmax rgba(0,0,0,.6);
    clip-path: inset(-100vmax -100vmax 0 -100vmax);
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: sheet-up var(--dur-3) var(--ease-out-back);
  }
  .lang-search { padding: 14px 16px; }
  .lang-search input { padding: 13px 12px; font-size: 16px; }  /* 16px: iOS zoomt sonst beim Tippen */
  .lang-item { padding: 15px 16px; font-size: 14px; }
  .lang-list { padding: 4px 0 10px; }
  /* Griff oben, damit das Blatt als solches erkennbar ist. */
  .lang-menu > .lang-search::before {
    content: ''; display: block; width: 36px; height: 3px; border-radius: 2px;
    background: var(--dim); margin: 0 auto 12px;
  }
}
@keyframes sheet-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }

/* ── Handy: Grundlagen für alle Seiten ────────────────────────────────────── */
@media (max-width: 900px) {
  /* Schaugrößen der Seitenköpfe: auf 48px-Zeilen passen auf ein Telefon zwei
     Wörter. Die Klemmung nimmt die Breite als Maß, nicht eine feste Zahl. */
  h1 { font-size: clamp(38px, 11vw, 64px); line-height: .95; }
  h2 { font-size: clamp(26px, 7vw, 40px); }
  .page-title { font-size: clamp(30px, 9vw, 48px); }

  /* Alle Innenabstände der großen Flächen zusammenziehen. */
  .section, .market-header, .filters, .market-grid,
  .explore-header, .album-wrap, .featured, .list-view { padding-left: 20px; padding-right: 20px; }
  .section { padding-top: 40px; padding-bottom: 40px; }

  /* Formularfelder: 16px verhindert das Hineinzoomen unter iOS. */
  input, select, textarea { font-size: 16px; }

  /* Tabellen laufen nie über den Rand, sie scrollen in sich selbst. */
  table { display: block; overflow-x: auto; white-space: nowrap;
          -webkit-overflow-scrolling: touch; }

  /* Fußzeile untereinander statt nebeneinander. */
  footer { flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 20px; }
}

@media (max-width: 560px) {
  /* Ein Raster mit zwei Karten ist auf 380px enger als eine Karte lesbar ist. */
  .album { grid-template-columns: 1fr !important; gap: 26px; }
  .market-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-row { flex-wrap: wrap; gap: 18px 26px; }

  /* Dialoge füllen die Fläche, statt in der Mitte zu schweben. */
  .modal { width: 100%; max-width: none; border-radius: 0; padding: 24px 18px 32px; }
  .modal-overlay { padding: 0; }

  /* Schaltflächen bekommen Daumenmaß. */
  .btn { padding: 14px 20px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; }
}

@keyframes nav-drop { from { transform: translateY(-6px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { nav.is-open .nav-links { animation: none; } }

/* Karte: der Browser behält das senkrechte Schieben, das waagerechte gehört
   der Neigung. Ohne `pan-y` scrollte die Seite bei jedem Versuch mit, die
   Karte zu bewegen.

   **Ohne Medienabfrage.** `pointer: coarse` stimmt auf Hybridgeräten nicht
   zuverlässig, und für die Maus ist `touch-action` ohnehin wirkungslos. */
.moment-card { touch-action: pan-y; }