/* Booster & Bohne — Modus: Diamant.
   Umschaltbare Schicht über dem hellen Clean-v6-System. Greift ausschließlich
   unter body.diamant; ohne die Klasse ist diese Datei wirkungslos.

   Richtung (Refero-Recherche, 22.08.2026):
   - Grundlage Atlas Card (atlascard.com), "Midnight Velvet Vault": fast
     schwarze Fläche, EIN gesättigter Edelstein-Akzent, Tiefe durch
     Flächenverschiebung statt Schatten, überlange Pill-Silhouette,
     Monospace für Metadaten.
   - Von Peloton (onepeloton.com) übernommen: die Disziplin, mit der ein
     einziges Rot Primäraktionen und aktive Zustände trägt und sonst nichts.
   - Von Vetric (vetric.io) ausschliesslich die facettierte Steingeometrie —
     nicht dessen helle Pastellwelt.

   Rollen, die NICHT angetastet werden: die Ballstufen-Farben (--tier1..4),
   Gold und die Pack-Öffnungs-Szene. Die tragen den Pokémon-Kanon und würden
   ihre Bedeutung verlieren, wenn sie rot eingefärbt würden. */

body.diamant {
  /* Fläche: rot unterlegtes Schwarz statt neutralem Schwarz — der Stein liegt
     im Dunkeln, ohne dass Rot seine Signalrolle verliert. */
  --dia-void: #0a0406;
  --dia-surface: #140a0d;
  --dia-raised: #1d0f14;
  --dia-ruby: #e01f3d;
  --dia-ember: #ff5f74;
  --dia-silver: #f6f0f1;
  --dia-ash: #a08f93;
  --dia-faint: #6f5f63;
  --dia-facet: rgba(255, 255, 255, .11);
  --dia-line: rgba(255, 176, 188, .15);
  --dia-line-strong: rgba(255, 176, 188, .3);

  /* Das Grundsystem hängt fast vollständig an diesen Variablen — deshalb
     genügt es, sie umzudeuten, statt Regeln zu duplizieren. */
  --ui-canvas: var(--dia-void);
  --ui-surface: var(--dia-surface);
  --ui-ink: var(--dia-silver);
  --ui-green: var(--dia-ruby);
  --ui-green-strong: #8d0f24;
  --ui-green-soft: rgba(224, 31, 61, .14);
  --ui-yellow: var(--dia-ember);
  --ui-yellow-soft: rgba(255, 95, 116, .16);
  --ui-muted: var(--dia-ash);
  --ui-faint: var(--dia-faint);
  --ui-line: var(--dia-line);
  --ui-line-strong: var(--dia-line-strong);
  --ui-danger: #ff6b6b;
  --ui-success: #ff96a4;

  /* Die Legacy-Aliase (--black, --white, --mint …) sind auf :root als
     var(--ui-*) definiert und werden DORT aufgelöst — die Überschreibung der
     --ui-*-Werte hier unten erreicht sie nicht mehr. Deshalb bekommen sie
     ihre Diamant-Werte ausdrücklich. Die Ballstufen (--tier1..4, --gold)
     bleiben unangetastet — Pokémon-Kanon. */
  --black: var(--dia-silver);
  --dark: #8d0f24;
  --white: var(--dia-surface);
  --mist: var(--dia-void);
  --cloud: rgba(224, 31, 61, .14);
  --ash: var(--dia-ash);
  --pebble: var(--dia-faint);
  --mint: var(--dia-ruby);
  --danger: #ff6b6b;
  --green: #ff96a4;
  --grad: var(--dia-ember);
  --grad-h: var(--dia-ember);

  /* Atlas Cards überlange Pill-Silhouette als Signatur der Aktionen. */
  --r-pill: 128px;

  background: var(--dia-void);
  color: var(--dia-silver);
  color-scheme: dark;
}

/* Die Grundfläche bekommt zwei sehr weite Lichtkegel — so, wie Licht in einem
   Stein an zwei Facetten hängen bleibt. Fest positioniert, damit es beim
   Scrollen als Fläche und nicht als Muster wirkt. */
body.diamant::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 8% -8%, rgba(224, 31, 61, .22), transparent 62%),
    radial-gradient(90% 55% at 100% 4%, rgba(126, 12, 32, .3), transparent 58%),
    var(--dia-void);
}

/* ---------------- Chrome ---------------- */
body.diamant #topbar {
  background: color-mix(in srgb, var(--dia-void) 88%, transparent);
  border-bottom: 1px solid var(--dia-facet);
}
body.diamant .brand { color: var(--dia-silver); letter-spacing: .01em; }
body.diamant #user-chip {
  border-color: var(--dia-line-strong);
  background: var(--dia-surface);
  color: var(--dia-silver);
}

body.diamant #tabbar {
  background: color-mix(in srgb, var(--dia-void) 92%, transparent);
  border-top: 1px solid var(--dia-facet);
}
body.diamant #tabbar button { color: var(--dia-faint); }
body.diamant #tabbar button.active { color: var(--dia-ruby); }

/* ---------------- Facettenkante ---------------- */
/* Der wiederkehrende Griff: jede Trennung ist eine geschliffene Kante — oben
   ein feiner Lichtsaum, darunter das Dunkel. Ersetzt Schatten vollständig. */
body.diamant .home-module,
body.diamant .idee,
body.diamant .konto,
body.diamant .idee-listkopf,
body.diamant .switch-row,
body.diamant .konto-sheet-fuss,
body.diamant .dia-switch {
  border-top-color: var(--dia-facet);
}
body.diamant .dia-switch { border-bottom-color: var(--dia-line); }

body.diamant .release-callout,
body.diamant .home-golden,
body.diamant .admin-note,
body.diamant .idee-form-card {
  position: relative;
  border: 1px solid var(--dia-line);
  border-top-color: var(--dia-facet);
  border-radius: var(--ui-radius-surface);
  background: linear-gradient(180deg, var(--dia-raised), var(--dia-surface));
  padding: 1rem;
}

/* ---------------- Aktionen ---------------- */
/* Rubin trägt ausschliesslich die Primäraktion und den aktiven Zustand. */
body.diamant button.primary {
  background: var(--dia-ruby);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill);
  font-weight: 650;
}
body.diamant button.primary:active { background: var(--dia-ember); filter: none; }
body.diamant button.primary:disabled { opacity: .45; }
body.diamant button.primary.danger { background: #b3182f; }

body.diamant button.ghost {
  background: transparent;
  color: var(--dia-silver);
  border: 1px solid var(--dia-line-strong);
  border-radius: var(--r-pill);
}
body.diamant button.ghost:active { background: rgba(255, 255, 255, .06); }
body.diamant button.ghost.is-active { background: var(--dia-ruby); color: #fff; border-color: transparent; }
body.diamant button.ghost.danger { color: var(--ui-danger); border-color: rgba(255, 107, 107, .4); }
body.diamant button.icon-only { color: var(--dia-ash); }
body.diamant button.icon-only:active { background: rgba(255, 255, 255, .07); }
body.diamant button.icon-only.danger { color: var(--ui-danger); }

body.diamant .field input,
body.diamant .field select,
body.diamant .field textarea,
body.diamant .idee-statuswahl select,
body.diamant .admin-body textarea {
  background: rgba(0, 0, 0, .35);
  border-color: var(--dia-line-strong);
  color: var(--dia-silver);
}
body.diamant .field input::placeholder,
body.diamant .field textarea::placeholder { color: var(--dia-faint); }
body.diamant .field input:focus-visible,
body.diamant .field select:focus-visible,
body.diamant .field textarea:focus-visible { outline-color: var(--dia-ember); }

body.diamant .switch { background: rgba(0, 0, 0, .4); border-color: var(--dia-line-strong); }
body.diamant .switch::after { background: var(--dia-ash); }
body.diamant .switch:checked { background: var(--dia-ruby); border-color: var(--dia-ember); }
body.diamant .switch:checked::after { background: #fff; }

/* ---------------- Chips ---------------- */
body.diamant .chip { border-color: var(--dia-line); color: var(--dia-ash); }
body.diamant .chip-status.status-offen { color: var(--dia-silver); border-color: var(--dia-line-strong); }
body.diamant .chip-status.status-in_arbeit {
  color: var(--dia-ember); border-color: currentColor;
  background: rgba(255, 95, 116, .12);
}
body.diamant .chip-status.status-erledigt { color: #7fd6a0; border-color: currentColor; }
body.diamant .chip-prio.prio-hoch { color: var(--dia-ruby); border-color: currentColor; }
body.diamant .chip-rolle.rolle-admin { color: var(--dia-silver); border-color: var(--dia-line-strong); }
body.diamant .chip-rolle.rolle-laden { color: var(--dia-ember); border-color: currentColor; }
body.diamant .chip-diamant {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--dia-ruby), #7d0a1e);
}

body.diamant .konto-avatar {
  background: linear-gradient(150deg, rgba(224, 31, 61, .3), rgba(0, 0, 0, .3));
  color: var(--dia-silver);
  border: 1px solid var(--dia-facet);
}
body.diamant .konto-avatar-neu { background: transparent; border-style: dashed; border-color: var(--dia-line-strong); }
body.diamant .konto:active,
body.diamant button.icon-only:active { background: rgba(255, 255, 255, .06); }

/* ---------------- Startseiten-Hero ---------------- */
/* Der Punktestand ist die Tafel des Steins: geschliffene Flächen als
   Verlaufsbänder, die Zahl in hellem Silber darüber. */
body.diamant .home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 1.5rem 1.15rem;
  border: 1px solid var(--dia-line);
  border-top-color: var(--dia-facet);
  border-radius: var(--ui-radius-surface);
  background:
    linear-gradient(118deg, transparent 46%, rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, .05) 53%, transparent 53%),
    linear-gradient(62deg, transparent 58%, rgba(255, 255, 255, .04) 58%, rgba(255, 255, 255, .04) 66%, transparent 66%),
    linear-gradient(155deg, #7d0a1e 0%, #3d0511 46%, #16070b 100%);
}
body.diamant .home-score { color: #fff; }
body.diamant .home-score small { color: rgba(255, 255, 255, .6); }
body.diamant .home-total { color: rgba(255, 255, 255, .74); }
body.diamant .home-hero .eyebrow { color: rgba(255, 255, 255, .62); }

/* ---------------- Diamant-Schalter ---------------- */
body.diamant .dia-switch {
  padding: 1.15rem 1rem;
  border: 1px solid var(--dia-line);
  border-top-color: var(--dia-facet);
  border-radius: var(--ui-radius-surface);
  background:
    linear-gradient(112deg, transparent 52%, rgba(255, 255, 255, .045) 52%, rgba(255, 255, 255, .045) 60%, transparent 60%),
    linear-gradient(180deg, var(--dia-raised), var(--dia-surface));
}
body.diamant .dia-switch-copy h3 { color: var(--dia-silver); }
body.diamant .dia-switch-copy .eyebrow { color: var(--dia-ruby); }

/* Der Stein atmet, solange der Modus läuft — eine Umdrehung ist lang genug,
   dass es als Lichtwanderung und nicht als Animation liest. */
body.diamant .dia-mark-lg { animation: dia-funkel 9s ease-in-out infinite; }
@keyframes dia-funkel {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(224, 31, 61, .5)); }
  50%      { filter: drop-shadow(0 0 9px rgba(255, 95, 116, .75)); }
}

/* ---------------- Sheets und Überlagerungen ---------------- */
body.diamant #overlay { background: rgba(6, 2, 3, .8); }
body.diamant .toast-card,
body.diamant .konto-sheet,
body.diamant .confirm-sheet {
  border: 1px solid var(--dia-line);
  border-top-color: var(--dia-facet);
  background: linear-gradient(180deg, var(--dia-raised), var(--dia-surface));
  color: var(--dia-silver);
}

/* ---------------- Kleintext als Metadaten ---------------- */
/* Atlas Card setzt Kleinstinformation monospaced — das gibt den Zahlen einen
   technischen, gestempelten Klang. Nur dort, nicht im Fliesstext. */
body.diamant .idee-meta,
body.diamant .konten-hinweis,
body.diamant .idee-zaehler,
body.diamant .voucher .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .01em;
}

/* ---------------- Übergang ---------------- */
/* Nur die Fläche blendet; Text und Ränder springen, damit nichts flimmert. */
body { transition: background-color .32s ease, color .32s ease; }
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  body.diamant .dia-mark-lg { animation: none; }
}