/* ══════════════════════════════════════════════════════════════════════
   CREME_20260927 (KEES) — CRITICA auf cremeweiss.

   Marcus: "hintergrund creme weiss edel, die funktionen stehen fest."
   Also: nur Farbe und Flaeche, keine Funktion, kein Umbau.

   WIE ES GEBAUT IST
   styles.css arbeitet fast durchgehend mit Variablen (--ink, --muted,
   --gold, --line, --panel). Die werden hier umgesetzt, damit greift der
   groesste Teil von selbst. Dazu elf Stellen, an denen Dunkel fest
   verdrahtet ist — am 27.9. gezaehlt und hier einzeln nachgezogen.

   HALTUNG: Papier, nicht Bildschirm. Warmes Creme, Tinte statt Schwarz,
   Messing als Akzent. Schatten sind weich und knapp — auf hellem Grund
   wirkt jeder harte Schatten billig.

   styles.css und rahmen.css bleiben unveraendert. Faellt diese Datei
   weg, ist die dunkle Fassung zurueck.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --bg:     #f3efe6;            /* Creme, leicht warm */
  --ink:    #17140f;            /* Tinte, kein reines Schwarz */
  --muted:  #6d6558;            /* warmes Grau fuer Beitext */
  --gold:   #8a6d2f;            /* Messing, auf Hell abgedunkelt */
  --line:   rgba(23, 20, 15, 0.16);
  --panel:  rgba(255, 253, 248, 0.86);
  --cream:  #fffdf8;
  --shadow: rgba(60, 48, 30, 0.14);
}

body {
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,0.95), transparent 36rem),
    linear-gradient(180deg, #f7f3ea 0%, #f1ece2 58%, #eae4d8 100%) !important;
  color: var(--ink);
}

/* ── Die elf fest verdrahteten Stellen, in der Reihenfolge von styles.css ── */

/* 55  Regal/Leiste */
.shelf { background: linear-gradient(180deg, rgba(255,253,248,0.94), rgba(238,232,221,0.96)) !important;
         border-color: var(--line); }
/* 62  Reiter */
.shelf-tier { background: rgba(255,253,248,0.72); border-color: rgba(138,109,47,0.30); color: var(--muted); }
/* 89  aktiver Reiter */
.shelf-tier.active, .shelf-tier:hover {
  background: linear-gradient(180deg, rgba(138,109,47,0.16), rgba(255,253,248,0.94));
  color: var(--ink); }
/* 165 Menue */
.top-menu { background: rgba(255,253,248,0.96) !important; border: 1px solid var(--line);
            box-shadow: 0 10px 30px var(--shadow); }
/* 202 Lichtschein hinter dem Tisch */
.table-glow, .glow { background: radial-gradient(circle, rgba(138,109,47,0.10), transparent 65%) !important; }
/* 288 Tischplatte */
.table-top { background: linear-gradient(180deg, #efe9dd, #e2dacb) !important;
             box-shadow: 0 18px 40px var(--shadow); }
/* 380 Marke */
.badge, .tag { background: rgba(138,109,47,0.14) !important; color: var(--gold); }
/* 482 490 Leseflaechen */
.page-card, .page-card.image-page { background: var(--cream) !important; border: 1px solid var(--line); }
/* 525 546 helle Auflagen auf dunklem Grund — auf Creme umgekehrt */
.reader-panel, .character-panel, .media-panel, .panel {
  background: var(--panel) !important; border: 1px solid var(--line);
  box-shadow: 0 8px 26px var(--shadow); }

/* ── Der Rahmen aus rahmen.css wird hell, bleibt aber dicht ─────────── */
.topbar {
  background: linear-gradient(180deg, rgba(247,243,234,0.98) 0%, rgba(247,243,234,0.93) 62%, rgba(247,243,234,0) 100%) !important;
}
@media (max-width: 900px) {
  .shelf {
    background: linear-gradient(0deg, rgba(247,243,234,0.98) 0%, rgba(247,243,234,0.95) 62%, rgba(247,243,234,0.80) 100%) !important;
  }
}

/* ── Schrift auf Papier: eine Spur ruhiger ─────────────────────────── */
body, .page-card p { -webkit-font-smoothing: antialiased; }
.brand, .menu-button { color: var(--ink); }
a { color: var(--gold); }

/* ── Nachtrag 27.09., nach dem Ansehen des Bildes ───────────────────
   Zwei Flaechen waren noch dunkel. Beide sind nicht ueber Variablen
   gebaut, deshalb hier einzeln:
   1. Die drei Kaesten (FUER WEN / WAS ES LEISTET / WAS ES NICHT IST)
      sind klassenlose div unter .character-points mit rgba(8,8,8,.58).
      Auf Creme stand dort helle Schrift auf Oliv — unlesbar.
   2. .table-edge, die Vorderkante des Tisches, war ein schwarzer Balken
      (linear-gradient #171411 -> #070606). */
.character-points > div {
  background: var(--cream) !important;
  border: 1px solid var(--line);
  color: var(--ink);
}
.character-points > div * { color: inherit; }
.character-points > div :is(b, strong, .kicker, small) { color: var(--gold); }

.table-edge {
  background: linear-gradient(180deg, #e7e0d2, #d8d0bf) !important;
  border-color: rgba(138, 109, 47, 0.28) !important;
}
.back-wall { background: linear-gradient(90deg, rgba(0,0,0,0) 49%, rgba(138,109,47,0.10) 100%) !important; }