/* NANIL — gemeinsamer Hintergrund.
   Die EINE finale, lebendige Spirale (nanil-spiral.js) ist der Hintergrund auf ALLEN Seiten.
   Diese Datei sorgt nur dafuer, dass sie ueberall frei sichtbar ist (alte Hintergruende aus). */

/* dunkler Fallback hinter dem Spiral-Canvas */
html[lang]{ background:#06070b !important; }
html[lang] body{ background:transparent !important; color:#EAF6F3 !important; }

/* alte Hintergruende & Overlays abschalten -> nur die Spirale ist zu sehen */
html[lang] body::before{ display:none !important; }
#nanilFlow, #nanilWebglFlow, #nanilGeometry, #nanilTopScrim{ display:none !important; }

/* das Spiral-Canvas: randlos fullscreen, hinter dem Inhalt.
   ID schlaegt alle alten 'canvas{}'-Regeln (grayscale / display:none / opacity) auf den Seiten. */
#nanilSpiral{
  position:fixed !important; inset:0 !important;
  width:100% !important; height:100% !important;
  z-index:-1 !important; pointer-events:none !important; display:block !important;
  filter:none !important; opacity:1 !important;
  animation:none !important; transform:none !important; mix-blend-mode:normal !important;
}

/* ---- SCROLL-FIX: das ganze Dokument scrollt (zuverlaessiger als interner Container-Scroll) ---- */
html[lang]{ overflow-y:auto !important; height:auto !important; }
html[lang] body{ overflow-y:auto !important; overflow-x:hidden !important; height:auto !important; min-height:100dvh !important; }
html[lang] #app{ height:auto !important; min-height:100dvh !important; max-height:none !important; overflow:visible !important; }
html[lang] #appMain{ overflow:visible !important; max-height:none !important; }

/* ---- ALLES FULLSCREEN: KEINE schmalen zentrierten Container, Inhalt fuellt die volle Breite ---- */
html[lang] .wrap, html[lang] .container, html[lang] .content, html[lang] .page,
html[lang] .shell, html[lang] .screen, html[lang] .inner, html[lang] .col,
html[lang] #app, html[lang] #appMain, html[lang] #appHeader, html[lang] main{
  max-width:100% !important; width:100% !important;
  margin-left:0 !important; margin-right:0 !important;
}

/* ---- BUTTONS: ueberall gleich — glasig, farbig umrandet, lesbarer Text, bewegen sich beim Klick ---- */
html[lang] button,
html[lang] [class*="btn"],
html[lang] .tool-tile,
html[lang] .choice-btn,
html[lang] .choice-single,
html[lang] .cta,
html[lang] a.btn{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important; /* neutrales Frosted-Glas, NICHT blau */
  color:#F4FAFF !important;                              /* heller, neutraler Text */
  text-shadow:0 1px 3px rgba(0,0,0,.55) !important;      /* klar lesbar */
  font-weight:600 !important;
  border:1px solid rgba(206,197,176,.60) !important;     /* leuchtender, heller Rand */
  -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important;   /* stärker glasig */
  box-shadow:0 8px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.24), 0 0 16px rgba(110,180,172,.30), 0 0 2px rgba(150,230,255,.55) !important; /* leicht leuchtend umrandet */
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease !important;
  /* PERF 04.07.: Dauer-Helligkeitsanimation ENTFERNT. Animierter backdrop-filter:blur auf jeder
     Kachel/jedem Button war der Haupt-Grund fuer Ruckeln (Scrollen klemmt, Taps verzoegert).
     Look bleibt identisch (statisch), nur ohne das staendige Neu-Rendern. */
}
/* sanfter Atem statt hartem Hell/Dunkel-Flackern — Buttons wirkten sonst "kaputt/weiss" */
@keyframes nanilBtnDH{ 0%,100%{ filter:brightness(.96) saturate(1) } 50%{ filter:brightness(1.06) saturate(1.04) } }
/* PERF 04.07.: animation-delay-Regeln und der Onboarding-Puls entfernt — es laeuft keine
   Dauer-Animation mehr auf Glas-Elementen (siehe oben). Kacheln/Buttons bleiben ruhig glasig. */
/* Icons: scharf, clean, dezent cyan — professionell (echte Lucide-Icons) */
html[lang] .tool-tile-ic svg, html[lang] .tool-tile-ic i, html[lang] .nicon, html[lang] [data-lucide],
html[lang] svg.lucide, html[lang] svg[class*="lucide"]{
  color:#dccfae !important; stroke:#dccfae !important; stroke-width:1.75 !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) !important;
}
/* Texte INNERHALB der Buttons/Kacheln ebenfalls hell + lesbar */
html[lang] [class*="btn"] *, html[lang] button *, html[lang] .tool-tile *, html[lang] .choice-btn *, html[lang] .choice-single *{
  color:#F2FAFF !important; text-shadow:0 1px 3px rgba(0,0,0,.6) !important;
}
html[lang] .tool-tile-sub, html[lang] .choice-sub{ color:rgba(220,238,250,.82) !important; }
/* beim Klick: federnd nach unten + aufleuchten */
html[lang] button:active,
html[lang] [class*="btn"]:active,
html[lang] .tool-tile:active,
html[lang] .choice-btn:active,
html[lang] .choice-single:active,
html[lang] .cta:active,
html[lang] a.btn:active{
  transform:translateY(3px) scale(.96) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.20), 0 0 30px rgba(42,150,140,.30) !important;
  filter:brightness(1.12) saturate(1.1) !important;
}

/* FIX (Perf/Lesbarkeit): Helle Schachbrett-Karten (.nvl) IMMER dunkler Text —
   sonst erzwingt die Button-Regel oben weissen Text -> weiss auf hell (unlesbar).
   Spezifitaet (0,0,3,1) schlaegt die 'button *'/'[class*=btn] *'-Regeln. */
html[lang] .nvx.nvl,
html[lang] .nvx.nvl :where(b,strong,span,div,p,small,h1,h2,h3,h4,li,label){
  color:#14202e !important;
  text-shadow:none !important;
}
html[lang] .nvx.nvl .ch-ic svg,
html[lang] .nvx.nvl svg[class*="lucide"],
html[lang] .nvx.nvl [data-lucide]{ color:#1a3550 !important; stroke:#1a3550 !important; }

/* ── Globales Schachbrett: dunkle/helle Glas-Karten (dh()-Skript taggt .nvx.nvd/.nvl) ── */
html[lang] .nvx{ box-shadow:0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.24) !important; transition:transform .16s ease, box-shadow .2s ease !important; animation:none !important; }
html[lang] .nvx.nvd{ background:linear-gradient(158deg, rgba(30,46,70,.60), rgba(10,18,34,.44)) !important; border:1px solid rgba(206,197,176,.26) !important; }
html[lang] .nvx.nvl{ background:linear-gradient(158deg, rgba(248,252,255,.70), rgba(214,232,246,.50)) !important; border:1px solid rgba(255,255,255,.6) !important; }
html[lang] .nvx.nvd, html[lang] .nvx.nvd :where(b,strong,span,div,p,small,h1,h2,h3,h4,li,label){ color:#eef7ff !important; }