/* ============================================================================
   Omniance / Parat - shared brand stylesheet
   Tokens, glass, aurora and core components pulled verbatim from the
   Omniance brand style guide (omniance-brand-style-guide.html).
   Gold #D4AF37 is the single conversion action. Teal is atmosphere only.
   ============================================================================ */

/* Self-hosted Nunito Sans (latin, variable 400-800) - no external font requests */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Backgrounds */
  --bg-primary: #1A1D23;

  /* Text - five neutral tiers */
  --text-heading:   #FFFFFF;
  --text-secondary: #EDEDED;
  --text-primary:   #D9D9DC;
  --text-muted:     #BCBBCA;
  --text-subtle:    #B7B7B7;

  /* Semantic accents */
  --accent-gold:        #D4AF37;
  --accent-gold-hover:  #F4DE86;
  --accent-gold-light:  #E8C84A;
  --accent-champagne:   #BFA46F;
  --accent-champagne-border: #8A7440;
  --accent-warn:        #E87C4A;
  --error-red:          #E15D5D;

  /* Categorical / project palette */
  --proj-blue:   #5D93E1;
  --proj-green:  #7CC795;
  --proj-purple: #A485C8;
  --proj-gold:   #E8C84A;
  --proj-warn:   #E87C4A;
  --proj-rose:   #D98AB0;
  --proj-sky:    #8AB6D9;
  --proj-teal:   #4A9A8A;

  --sidebar-w: 248px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Keyboard focus: the dark theme suppresses the native ring, so make a
   high-contrast gold ring explicit for every interactive element. Mouse
   clicks stay clean via :focus-visible. */
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.015em;
}

/* ----------------------------------------------------------------- Aurora */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Promote the whole atmosphere to its own compositor layer. The four
     blurred blobs then rasterize ONCE into a cached tile instead of being
     re-blurred behind every backdrop-filter panel on first paint (and on
     every scroll). This is the biggest first-paint win: the glass sidebar
     and cards now sample a ready-made texture rather than re-running four
     90px blurs. contain isolates it so nothing above invalidates it. */
  transform: translateZ(0);
  contain: layout paint;
}
/* The blobs are a static, layered atmosphere. They are deliberately NOT
   animated: any motion here forces every backdrop-filter panel above
   (glass cards, sidebar, sticky header) to re-blur on every frame, which
   is what made the back office feel frozen on load. A 90px blur reads as
   soft as 140px but rasterizes far cheaper. See the note above @keyframes. */
.aurora-blob {
  position: absolute; border-radius: 50%; filter: blur(90px);
  pointer-events: none;
}
.aurora-blob-1 {
  width: 820px; height: 820px; top: -12%; left: -8%;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.06) 45%, transparent 70%);
}
.aurora-blob-2 {
  width: 640px; height: 640px; top: 28%; right: 2%;
  background: radial-gradient(ellipse at center, rgba(232,200,74,0.16) 0%, rgba(212,175,55,0.05) 50%, transparent 70%);
}
.aurora-blob-3 {
  width: 760px; height: 760px; bottom: -16%; right: -10%;
  background: radial-gradient(ellipse at center, rgba(191,164,111,0.14) 0%, rgba(212,175,55,0.05) 45%, transparent 70%);
}
/* A single cool teal accent, atmosphere only, never a CTA */
.aurora-blob-4 {
  width: 700px; height: 700px; bottom: -10%; left: 18%;
  background: radial-gradient(ellipse at center, rgba(74,154,138,0.12) 0%, rgba(74,154,138,0.04) 50%, transparent 70%);
}
.aurora-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 18% 40%, rgba(212,175,55,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 22%, rgba(232,200,74,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 82%, rgba(191,164,111,0.03) 0%, transparent 50%);
}
/* The aurora is intentionally static. Drift keyframes were removed: with
   backdrop-filter panels layered above, animating the aurora re-blurred
   every panel on every frame, which is the expensive path we're avoiding. */

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  /* mix-blend-mode: overlay was removed. At 2.5% opacity over the dark
     theme it read identically to a plain overlay, but it forced the
     compositor's slow path: the entire viewport below (aurora + every
     glass/backdrop-filter panel) had to be rendered into an isolated
     group and blended per pixel on every paint. Plain alpha compositing
     of this cached texture is effectively free. */
  transform: translateZ(0);
  contain: strict;
}

/* ----------------------------------------------------------------- Glass */
.glass-card {
  position: relative;
  border-radius: 0 1rem 0 1rem;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 1px 0 0 rgba(255,255,255,0.02),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    inset -1px 0 0 rgba(0,0,0,0.10),
    0 20px 60px rgba(0,0,0,0.40),
    0 4px 16px rgba(0,0,0,0.28);
  padding: 1.75rem;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.glass-card.hoverable:hover {
  transform: translateY(-3px);
  background: rgba(0,0,0,0.38);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 24px 64px rgba(0,0,0,0.50),
    0 6px 20px rgba(0,0,0,0.35),
    0 0 60px rgba(212,175,55,0.04);
}

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 0.92rem;
  border-radius: 999px; padding: 0.7rem 1.5rem; cursor: pointer;
  text-decoration: none; border: 1px solid transparent;
  transition: filter 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18); color: #fff;
}
.btn-primary:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); }

/* The single conversion action */
.btn-gold {
  background: linear-gradient(180deg, rgba(212,175,55,0.22) 0%, rgba(212,175,55,0.10) 100%);
  border: 1px solid rgba(212,175,55,0.45);
  color: var(--accent-gold-light); font-weight: 800; letter-spacing: 0.015em;
}
.btn-gold:hover { filter: brightness(1.12); border-color: rgba(212,175,55,0.6); color: var(--accent-gold-hover); }

.btn-danger {
  background: rgba(232,124,74,0.16); border-color: rgba(232,124,74,0.50); color: #F0A079;
}
.btn-danger:hover { filter: brightness(1.12); }

.cta-bare {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-gold-light); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; cursor: pointer; background: none; border: none; padding: 0;
  transition: color 0.15s var(--ease-out);
}
.cta-bare .u { position: relative; }
.cta-bare .u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: linear-gradient(90deg, #D4AF37 0%, rgba(212,175,55,0.18) 100%);
}
.cta-bare:hover { color: var(--accent-gold-hover); }
.cta-bare .arrow { display: inline-block; transition: transform 0.2s var(--ease-out); }
.cta-bare:hover .arrow { transform: translateX(4px); }

/* ----------------------------------------------------------------- Chips */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 999px; padding: 0.25rem 0.65rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted); white-space: nowrap;
}
.chip.gold      { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.40); color: var(--accent-gold-light); }
.chip.done      { background: rgba(191,164,111,0.10); border-color: rgba(191,164,111,0.40); color: var(--accent-champagne); }
.chip.warn      { background: rgba(232,124,74,0.12); border-color: rgba(232,124,74,0.45); color: var(--accent-warn); }
.chip.blue      { background: rgba(93,147,225,0.12); border-color: rgba(93,147,225,0.40); color: var(--proj-blue); }
.chip.green     { background: rgba(124,199,149,0.12); border-color: rgba(124,199,149,0.40); color: var(--proj-green); }
.chip.purple    { background: rgba(164,133,200,0.14); border-color: rgba(164,133,200,0.42); color: var(--proj-purple); }
.chip.rose      { background: rgba(217,138,176,0.12); border-color: rgba(217,138,176,0.42); color: var(--proj-rose); }
.chip.teal      { background: rgba(74,154,138,0.12); border-color: rgba(74,154,138,0.42); color: var(--proj-teal); }

/* A config chip carries a small dot + the configuration label */
.config-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em;
  border-radius: 999px; padding: 0.3rem 0.7rem;
  background: rgba(93,147,225,0.10); border: 1px solid rgba(93,147,225,0.34);
  color: #Bcd2f4; white-space: nowrap;
}
.config-chip::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--proj-blue); box-shadow: 0 0 8px rgba(93,147,225,0.6); flex-shrink: 0;
}

/* --------------------------------------------------------------- Fields */
.field {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--text-primary);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 0.6rem 0.8rem;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.field::placeholder { color: var(--text-subtle); font-style: italic; }
.field:focus {
  outline: none; border-color: var(--accent-gold); background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 2px rgba(212,175,55,0.18);
}

/* ------------------------------------------------- Eyebrow / labels */
.eyebrow {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent-gold);
}
.muted   { color: var(--text-muted); }
.subtle  { color: var(--text-subtle); }

/* ------------------------------------------------- Trust badge ladder */
.trust {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 999px; padding: 0.22rem 0.6rem;
}
.trust::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; }
.trust.entwurf  { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--text-subtle); }
.trust.entwurf::before  { background: var(--text-subtle); }
/* KI-generiert: vor jeder menschlichen Prüfung. Violett, damit die Stufe
   sich klar von den geprüften Stufen absetzt und nicht wie eine Freigabe liest. */
.trust.ki       { background: rgba(164,133,200,0.12); border: 1px solid rgba(164,133,200,0.45); color: var(--proj-purple); }
.trust.ki::before       { background: var(--proj-purple); }
.trust.peer     { background: rgba(93,147,225,0.12); border: 1px solid rgba(93,147,225,0.4); color: var(--proj-blue); }
.trust.peer::before     { background: var(--proj-blue); }
.trust.bewaehrt { background: rgba(124,199,149,0.12); border: 1px solid rgba(124,199,149,0.42); color: var(--proj-green); }
.trust.bewaehrt::before { background: var(--proj-green); box-shadow: 0 0 6px rgba(124,199,149,0.6); }
.trust.experte  { background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.5); color: var(--accent-gold-light); }
.trust.experte::before  { background: var(--accent-gold); box-shadow: 0 0 8px rgba(212,175,55,0.7); }

/* ------------------------------------------------- Brand wordmark */
.wordmark { height: 30px; width: auto; display: block; }
.brandmark { height: 30px; width: auto; display: block; }

.reduced-motion-note { display: none; }

/* -------------------------------------------------------------------------
   Below 1024px: drop the GPU-expensive atmosphere.

   The aurora here is already static, which removes the per-frame re-blur.
   What remains is allocation: a blurred layer needs an offscreen buffer of
   the element plus roughly three times the blur radius on every side, times
   the square of the device pixel ratio. At a phone's 3x the four blobs
   (700-820px at blur(90px)) come to hundreds of MB of backing store, and
   every glass panel above them additionally snapshots and blurs its own
   backdrop. Past what iOS Safari will allocate, it drops the render and
   paints the page black.

   Same mitigation as the website (omniance-website/src/app/globals.css) and
   index.html: one flat gradient instead of the blobs, no grain, no
   backdrop-filter, with panel opacity raised to stay legible without a
   blurred backdrop.

   Last in the file on purpose: no extra specificity, so it relies on source
   order to beat the definitions above.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .aurora-blob, .aurora-mesh, .grain { display: none; }
  /* Flat stand-in: radial gradients rasterize with the page background, so
     there is no offscreen buffer and no per-frame work. */
  .aurora {
    background:
      radial-gradient(58% 42% at 6% 4%, rgba(212,175,55,0.13) 0%, rgba(212,175,55,0.04) 46%, transparent 72%),
      radial-gradient(48% 36% at 98% 30%, rgba(232,200,74,0.11) 0%, rgba(212,175,55,0.03) 50%, transparent 70%),
      radial-gradient(56% 40% at 92% 96%, rgba(191,164,111,0.10) 0%, rgba(212,175,55,0.03) 46%, transparent 72%),
      radial-gradient(50% 38% at 26% 94%, rgba(74,154,138,0.09) 0%, rgba(74,154,138,0.03) 50%, transparent 70%);
  }
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.42);
  }
}