/* ══════════════════════════════════════════════════════════════════════
   HELL_20260927 (KEES) — die Hausfarben, und die Seite wird hell.

   Marcus: "haltet euch an die Farben, die Site muss hell sein. Unsere
   Farben sind Lilac, Anthrazit, Schwarz, Weiss. Im Matilde-Kontext auch
   Kupfer." Und: "die Site sollte insgesamt recht hell sein."

   Ich hatte vorher Messing genommen. Das war falsch und ist hier ersetzt.

   WOHER DIE WERTE KOMMEN
   Nicht erfunden, sondern aus eurem eigenen Code gezaehlt (27.9.):
       #b478ff   11 Fundstellen   das kraeftige Lila
       #b6a2e8    7 Fundstellen   das gedaempfte
       #e9e6f2    5 Fundstellen   der helle Schleier
   Anthrazit #1c1f24 stammt aus der Chromleiste des Intros.

   EINE EINSCHRAENKUNG, DIE GENANNT GEHOERT
   #b478ff auf Weiss hat einen Kontrast von rund 2,6 zu 1. Fuer Flaechen,
   Linien und Marken reicht das, fuer LESBAREN TEXT nicht (gefordert sind
   4,5). Deshalb zwei Toene: das helle Lila fuer alles Dekorative,
   #6b3fc4 fuer Text und Verweise. Dieselbe Familie, nur tragfaehig.

   KUPFER kommt hier NICHT vor - das gehoert laut Marcus in den
   Matilde-Zusammenhang, nicht auf CRITICA.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --weiss:      #ffffff;
  --papier:     #fbfafc;          /* Weiss mit einem Hauch Lila */
  --schleier:   #e9e6f2;          /* Hausfarbe, hell */
  --anthrazit:  #1c1f24;
  --schwarz:    #0a0b0d;
  --lila:       #b478ff;          /* Hausfarbe, kraeftig - Flaechen und Marken */
  --lila-sanft: #b6a2e8;          /* Hausfarbe, gedaempft */
  --lila-text:  #6b3fc4;          /* traegt Kontrast auf Weiss */

  /* die Namen, die styles.css schon benutzt, hierher umgehaengt */
  --bg:     var(--papier);
  --ink:    var(--anthrazit);
  --muted:  #5a6069;
  --gold:   var(--lila-text);     /* Name bleibt, Farbe ist jetzt Lila */
  --line:   rgba(28, 31, 36, 0.14);
  --panel:  rgba(255, 255, 255, 0.92);
  --cream:  var(--weiss);
  --shadow: rgba(40, 30, 70, 0.10);
}

body {
  background:
    radial-gradient(circle at 50% -14%, rgba(233,230,242,0.85), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, var(--papier) 46%, #f4f2f8 100%) !important;
  color: var(--anthrazit);
}

/* ── Flaechen: Weiss auf Papier, kein Grau in Grau ──────────────────── */
.shelf { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(251,250,252,0.97)) !important;
         border-color: var(--line); }
.shelf-tier { background: transparent; color: var(--muted); }
.shelf-tier.active, .shelf-tier:hover { color: var(--anthrazit); box-shadow: inset 0 -2px 0 var(--lila); }
.topbar { background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.90) 62%, rgba(255,255,255,0) 100%) !important; }
.top-menu { background: var(--weiss) !important; border: 1px solid var(--line); box-shadow: 0 12px 34px var(--shadow); }
.page-card, .page-card.image-page { background: var(--weiss) !important; }
.character-points > div { background: transparent !important; color: var(--anthrazit); }

/* Der Tisch: heller Stein statt dunkles Holz */
.table-top  { background: linear-gradient(180deg, #ffffff, #eeecf4) !important; box-shadow: 0 20px 44px var(--shadow); }
.table-edge { background: linear-gradient(180deg, #e6e3ef, #d7d3e4) !important; border-color: var(--line) !important; }
.back-wall  { background: linear-gradient(90deg, rgba(0,0,0,0) 48%, rgba(180,120,255,0.10) 100%) !important; }
.table-glow, .glow { background: radial-gradient(circle, rgba(180,120,255,0.14), transparent 66%) !important; }

/* ── Lila dort, wo es zeigt, nicht wo es schreit ────────────────────── */
a, .kicker, .fb-kopf, .zu-nr { color: var(--lila-text) !important; }
.badge, .tag { background: rgba(180,120,255,0.13) !important; color: var(--lila-text) !important; }
.reader-mode.active { box-shadow: inset 0 -2px 0 var(--lila); color: var(--anthrazit) !important; }
.zu-knopf { border-bottom-color: var(--lila) !important; color: var(--anthrazit) !important; }
.fb-prompt, .fb-cursor { color: var(--lila-text); }
.fb-cursor { background: var(--lila-text) !important; }
.fb-antwort { border-left-color: var(--lila) !important; }
.page-card.zu { background: linear-gradient(170deg, #ffffff, var(--schleier)) !important; }

/* Text bleibt Anthrazit, nicht Braun */
main p { color: #3a4048 !important; }
main h1, main h2, main h3 { color: var(--anthrazit); }
main h1 + p, .hero p:first-of-type { color: var(--schwarz); }

/* ── VITRINE_20260927: die Bühne für den Glaswürfel ─────────────────── */
[data-vitrine] {
  position: relative; width: 100%;
  aspect-ratio: 1 / 1; max-width: 42rem; margin: 0 auto;
  min-height: 20rem; max-height: 34rem;
}
[data-vitrine] canvas { display: block; width: 100% !important; height: 100% !important; }
/* Der Schein unter dem Würfel: er steht auf etwas, statt zu schweben. */
[data-vitrine]::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 12%; height: 9%;
  background: radial-gradient(ellipse at center, rgba(120,80,180,0.22), transparent 70%);
  filter: blur(14px); pointer-events: none; opacity: 0; transition: opacity .8s ease .3s;
}
[data-vitrine].vitrine-fertig::after { opacity: 1; }
.vitrine-hinweis {
  text-align: center; font: 600 10px system-ui, sans-serif; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin: .6rem 0 0;
}

/* ── Nachtrag 27.09.: die Reiter waren noch cremefarben ─────────────
   creme.css setzt dort einen Messingverlauf. Der wird hier ersetzt,
   sonst sitzt unter der lila Seite eine beige Leiste. */
.shelf-tier, .shelf-tier.active, .shelf-tier:hover {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
.shelf-tier.active { box-shadow: inset 0 -2px 0 var(--lila) !important; color: var(--anthrazit) !important; }
.shelf-tier:hover  { color: var(--anthrazit) !important; }
.imprint-link, .brand { color: var(--anthrazit) !important; }