/* design-v2.css — Glas- und Aurora-Auflage „Aurora Editorial" (Plan v1.2, W2-B)
 *
 * Diese Datei liegt bewusst ZULETZT in der Kette und ist eine Auflage: Ohne sie
 * funktioniert die Anwendung unverändert mit deckenden Karten aus style.css.
 *
 * Grundhaltung: Editorial-Bento mit Glassmorphism. Große Versalschrift für
 * Überschriften und Kennzahlen, winzige gesperrte Mono-Kürzel als Rubrik, viel
 * Weißraum, Milchglas über einem langsam driftenden Farbschleier.
 *
 * Regeln, die hier eingehalten werden (Bauplan §14):
 *   · kein Hex-Wert außerhalb von tokens.css
 *   · Glas nur auf Sidebar, Karten und Dialogen — NIE auf scrollenden Tabellenzeilen
 *   · jede Bewegung hat einen prefers-reduced-motion-Ausweg
 *   · Fokusrahmen bleibt sichtbar
 */

/* ================= Grundfläche: Aurora + Rauschen ================= */
/* Auch das Wurzelelement einfärben: Der Aurora-Layer ist fixiert und deckt nur den
   sichtbaren Ausschnitt; ohne diese Zeile blitzt unterhalb des Inhalts und beim
   Überscrollen die weiße Grundfläche des Browsers durch. */
html { background: var(--color-bg); }
body { position: relative; isolation: isolate; background: var(--color-bg); }

body::before {
  content: ""; position: fixed; inset: -25%; z-index: -2;
  pointer-events: none; will-change: transform;
  opacity: var(--aurora-op);
  filter: blur(90px);
  background:
    radial-gradient(38% 46% at 14% 18%, var(--aurora-1) 0%, transparent 62%),
    radial-gradient(34% 42% at 86% 12%, var(--aurora-2) 0%, transparent 62%),
    radial-gradient(42% 52% at 82% 84%, var(--aurora-3) 0%, transparent 62%),
    radial-gradient(36% 44% at 16% 88%, var(--aurora-4) 0%, transparent 62%),
    radial-gradient(28% 34% at 52% 52%, var(--aurora-5) 0%, transparent 66%);
  animation: aurora-drift 28s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}

/* Film-Grain: gibt den Flächen Textur und kostet nichts */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: .022; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ================= Typografie ================= */
h1, h2, h3, .kpi-val, .mx-tab, .sb-brand-txt {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .02em;
}
h1, h2, h3 { line-height: 1.02; text-transform: uppercase; }
.card h2 { font-size: 25px; letter-spacing: .025em; margin-bottom: 2px; }
.pm-head h2 { font-size: 27px; letter-spacing: .02em; }
.card .hint, .pm-head .fn { max-width: 78ch; }
.sb-brand-txt { font-size: 23px; letter-spacing: .06em; }
.kpi-val { font-size: 44px; letter-spacing: .01em; font-weight: 400; }
.kpi-lbl {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.mx-tab { font-size: 15px; letter-spacing: .05em; text-transform: uppercase; font-weight: 400; }
.tbl thead th, .ma-tbl thead th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
/* In der Matrix bleibt der Spaltenkopf in der Fließschrift: gesperrte Versalien
   fressen genau den Platz, den die Bezeichnung braucht — sie war danach früher
   abgeschnitten. Nur die Kennung darunter läuft in Mono. */
.mx-tbl thead .mx-usr, .mx-tbl thead .mx-idx {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.mx-th-txt { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mx-th-id  { font-family: var(--font-mono); letter-spacing: .06em; }
.mx-best, .mx-best-n { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.sb-group-lbl { font-family: var(--font-mono); letter-spacing: .22em; }

/* ================= Glas: Sidebar, Karten, Dialoge ================= */
.sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sidebar-von) 97%, transparent),
    color-mix(in srgb, var(--sidebar-bis) 93%, transparent));
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.nav-item.active {
  background: color-mix(in srgb, var(--color-accent) 26%, transparent);
  border-left-color: var(--color-accent);
}
.nav-item:hover { background: color-mix(in srgb, #fff 12%, transparent); }

/* Kopfzeile: Das Fertigungsfoto bleibt als Struktur, die Farbe kommt von der Marke.
   `luminosity` überträgt nur die Helligkeit des Bildes auf die Blutrot-Fläche — sonst
   stand über einer blutroten Anwendung ein blaues Band. */
.topbar { border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent); }
.topbar::before { mix-blend-mode: luminosity; opacity: .40; filter: contrast(1.08); }
.topbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary-deep) 55%, transparent),
    transparent 45%,
    color-mix(in srgb, var(--color-primary-dark) 45%, transparent));
}

.card, .kpi {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg, 16px);
}
.kpi { border-left: 3px solid var(--color-primary); }
.kpi.accent { border-left-color: var(--color-accent); }
.kpi-val { color: var(--color-primary); }
.kpi.accent .kpi-val { color: var(--color-accent); }

.modal {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg, 16px);
}
.modal-overlay { backdrop-filter: blur(3px); }

/* Bento-Rhythmus: die erste Kachel trägt die Fläche, nie vier gleich große nebeneinander */
@media (min-width: 1100px) {
  .kpis { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .kpis .kpi:first-child .kpi-val { font-size: 56px; }
}

/* Tabellen bleiben deckend — Glas auf scrollenden Zeilen kostet Rechenzeit (Bauplan §14) */
.mx-scroll, .ma-table-box { background: var(--color-card); border-radius: 12px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 60%, transparent); }
.mx-usr, .mx-idx, .mx-act, .mx-tbl thead th { background: var(--color-card); }
.mx-tbl tfoot th, .mx-tbl tfoot td { background: var(--color-bg-light); }

/* ================= Bedienelemente ================= */
.btn-primary {
  background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: #fff;
}
.btn-primary:hover:not([disabled]) {
  background: color-mix(in srgb, var(--btn-primary-bg) 84%, black);
  border-color: color-mix(in srgb, var(--btn-primary-bg) 84%, black);
  box-shadow: 0 0 24px color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
}
.mx-achsen .btn.active {
  background: var(--btn-accent-bg); border-color: var(--btn-accent-bg); color: #fff;
}
.mx-tab.active { color: var(--color-primary); }
a, .mx-eng-link { color: var(--color-primary); }

/* Feedback bleibt orange — bewusst außerhalb der Blutrot/Jade-Achse (FB-2026-009) */
#feedbackBtn {
  background: var(--btn-signal-bg); border-color: var(--btn-signal-bg);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--signal-orange) 42%, transparent);
}
#feedbackBtn:hover {
  background: color-mix(in srgb, var(--btn-signal-bg) 84%, black);
  border-color: color-mix(in srgb, var(--btn-signal-bg) 84%, black);
}

*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-primary) 82%, transparent); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 28%, transparent); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-primary) 52%, transparent); }

/* ================= Bewegung, mit Ausweg ================= */
.card, .kpi { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 40px color-mix(in srgb, var(--color-primary) 14%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  body::before { animation: none; }
  body::after { display: none; }
}