/* Moonly Blau (24.10.2026): gemeinsame Markenfarben und responsive Kopfzeile. */
:root{
  --ground:#0b1020;--surface:#111a2e;--surface-2:#19243a;--surface-3:#22314a;
  --surface-fest:#111a2e;--card:var(--surface);
  --hairline:#2b3a54;--hairline-2:#405474;--line:var(--hairline);
  --ink:#f5f5f5;--ink-2:#c5c5cb;--ink-3:#96969d;--muted:var(--ink-2);
  --mond:#6da9ff;--mond-tief:#4684db;--mond-hell:#a4caff;--mond-schrift:#101012;
  --accent:var(--mond);--accent-ink:var(--mond-schrift);
  --blau:var(--mond);--blau-tief:var(--mond-tief);--blau-hell:var(--mond-hell);
  --gruen:var(--mond);--gruen-tief:var(--mond-tief);--gruen-hover:var(--mond-hell);
  --preis:#6da9ff;--wahl-grund:#6da9ff;--wahl-schrift:#101012;
}
nav,body nav,.handy-leiste{background:#0c1426!important}
.brand{gap:8px}
.brand-emblem{display:block;width:44px;height:44px;object-fit:contain;flex:none}
.brand-wort{position:relative;color:var(--mond);letter-spacing:-.035em;
  display:inline-flex;align-items:center;padding-right:0}
.brand-wordmark{display:block;width:140px;height:24px;object-fit:contain}
@media(max-width:760px){
  nav .brand{gap:4px}
  .brand-emblem{width:28px;height:28px}
  .brand-wordmark{width:84px;height:16px}
  nav .guthaben{min-width:0;flex:0 1 auto}
  nav .guthaben-knopf{max-width:100%;min-width:0}
  nav .guthaben-knopf [data-live="wallet-balance"]{
    min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  nav .guthaben-knopf svg,nav .glocke,nav .korb-knopf-nav,nav .konto-menue{
    flex-shrink:0}
}
.brand-wort .brand-beta{position:absolute;inset:auto 0 calc(100% + 3px) auto;
  transform:none;flex:none;line-height:1;font-size:7px;padding:2px 4px;
  background:var(--mond)!important;color:var(--mond-schrift)!important}
.btn.primary,.am-knopf,.chat-schalter{color:var(--mond-schrift)!important}
.sort-wahl .am-knopf{color:var(--ink)!important}
.wie-frage,.es-haken{color:var(--mond-schrift)!important}
@media(max-width:760px){.wie-link{color:var(--mond-schrift)!important;box-shadow:none!important}}
/* Raritaet bleibt am Farbstreifen erkennbar, die grosse Bildflaeche ist neutral. */
.markt-raster .marktkarte .bild,.item:not(.marktkarte) .bild{background:var(--surface-2)!important}
body::before,body::after,.orb{display:none!important}
/* Die Beta-Einladung hat ein eigenes Layout ohne base.html. */
body:has(.moon-logo){background:var(--ground)!important;color:var(--ink);overflow:auto}
body:has(.moon-logo) .card{background:var(--surface)!important;border:1px solid var(--line);box-shadow:none;backdrop-filter:none}
.moon-logo{filter:none!important;width:96px;height:96px}
body:has(.moon-logo) .brand{color:var(--mond)}
body:has(.moon-logo) .brand-wordmark{width:min(240px,100%);height:auto;margin:0 auto 22px}
body:has(.moon-logo) p,body:has(.moon-logo) .small{color:var(--ink-2)}
body:has(.moon-logo) button{background:var(--mond);color:var(--mond-schrift);box-shadow:none}
body:has(.moon-logo) input{background:var(--surface-2);color:var(--ink);border-color:var(--hairline-2)}
body:has(.moon-logo) input:focus{border-color:var(--mond);box-shadow:0 0 0 3px #6da9ff33}
body:has(.moon-logo) .login-link{background:var(--surface-2);border-color:var(--hairline-2);color:var(--ink)}