/* ══ nocturne-hell-skin.css ════════════════════════════════════════════════
   GenV in der alten Palette (Weiß · Lila, Gold + Diamant als Tarif-Akzente)
   mit Nocturnes Systemebene.
   Farben: wie früher. Alles andere aus dem Design System — Schrift auf
   Gewicht 500, Buttons als Umriss statt Fläche, Radien 8/14px, Elevation als
   Kante plus weicher Tintenschatten, Akzent-Fokusring, ruhige Zustände.

   ROLLBACK: in index-nocturne-hell.html den <link> auf diese Datei entfernen.
   Tailwind (CDN) hängt sein Stylesheet danach ein → hier steht !important.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --color-bg:#FAFAF7;--color-surface:#FFFFFF;--color-text:#1A1A1F;
  --color-accent:#7C3AED;--color-accent-600:#6D28D9;--color-accent-300:#C4B5FD;--color-accent-100:#EDE9FE;
  --color-gold:#E0B23E;--color-gold-300:#E8C04A;
  --color-accent-2:#22D3EE;--color-accent-2-600:#0E9BB5;--color-accent-2-300:#67E8F9;--color-accent-2-100:#CFFAFE;
  --color-divider:rgba(26,26,31,.12);
  --font-heading:"Inter",system-ui,sans-serif;--font-heading-weight:500;--font-body:"Inter",system-ui,sans-serif;
  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;
  --shadow-sm:0 0 0 1px rgba(26,26,31,.10);
  --shadow-md:0 0 0 1px rgba(26,26,31,.08),0 8px 24px -14px rgba(26,26,31,.22);
  --shadow-lg:0 0 0 1px rgba(26,26,31,.07),0 24px 56px -24px rgba(26,26,31,.30);
}
/* — Schrift: Inter über Inter, Hierarchie über Größe und Raum statt Fettung — */
.font-serif,.font-display-italic,#qz-q,.jn-title,.fxv-h{font-family:var(--font-heading)!important;font-style:normal!important}
h1,h2,h3,h4,.jn-title,.fxv-h,.fx-feat,.wf-head h3,.jn-finale h3,.hero-h1{font-weight:500!important;letter-spacing:-.015em!important}
/* Fette Überschriften zurück: die Zeile darüber löschen. */
/* — Aktionen: Akzent als Umriss, nicht als Fläche — */
a[class*="bg-brand"],button[class*="bg-brand"],a[class*="bg-cyan-4"],button[class*="bg-cyan-4"],
a[class*="bg-[#E0B23E]"],button[class*="bg-[#E0B23E]"],a[class*="bg-[#E8C04A]"],.dc-cta,.jn-finale .fin-cta{
  background-color:transparent!important;background-image:none!important;
  box-shadow:inset 0 0 0 1px var(--color-accent)!important;color:var(--color-accent-600)!important}
a[class*="bg-brand"] *,button[class*="bg-brand"] *,a[class*="bg-cyan-4"] *,a[class*="bg-[#E0B23E]"] *,a[class*="bg-[#E8C04A]"] *,.dc-cta *{color:inherit!important;fill:currentColor}
a[class*="bg-brand"]:hover,button[class*="bg-brand"]:hover,a[class*="bg-cyan-4"]:hover,a[class*="bg-[#E0B23E]"]:hover,a[class*="bg-[#E8C04A]"]:hover,.dc-cta:hover{
  background-color:color-mix(in srgb,var(--color-accent) 10%,transparent)!important;color:var(--color-accent-600)!important}
a[class*="bg-brand"]:active,button[class*="bg-brand"]:active{background-color:color-mix(in srgb,var(--color-accent) 18%,transparent)!important}
/* Tarife tragen ihre eigene Farbe: Gold ist Gold, Diamant ist Diamant — als Umriss */
a[class*="bg-[#E0B23E]"],button[class*="bg-[#E0B23E]"],a[class*="bg-[#E8C04A]"]{
  box-shadow:inset 0 0 0 1px var(--color-gold-300)!important;color:var(--color-gold-300)!important}
a[class*="bg-[#E0B23E]"]:hover,a[class*="bg-[#E8C04A]"]:hover{
  background-color:color-mix(in srgb,var(--color-gold-300) 14%,transparent)!important;color:#fff!important}
a[class*="bg-cyan-4"],button[class*="bg-cyan-4"]{
  box-shadow:inset 0 0 0 1px var(--color-accent-2-300)!important;color:var(--color-accent-2-300)!important}
a[class*="bg-cyan-4"]:hover{background-color:color-mix(in srgb,var(--color-accent-2-300) 14%,transparent)!important;color:#fff!important}
/* Fortschritt und kurze Akzentstriche bleiben massiv */
#qz-bar{background:var(--color-accent)!important}
/* Auf dunklem Grund (Hero, Demo, Gold-/Diamond-Karte) tragen die Umrisse die helle Akzentstufe */
#top a[class*="bg-brand"],#top button[class*="bg-brand"],#demo a[class*="bg-brand"],
[class*="bg-night"] a[class*="bg-brand"],[class*="bg-night"] button[class*="bg-brand"],
[class*="text-cream"] a[class*="bg-brand"],[class*="text-cream"] button[class*="bg-brand"],
.lm-card a[class*="bg-brand"],.lm-card button[class*="bg-brand"]{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent-300) 75%,transparent)!important;
  color:var(--color-accent-300)!important}
#top a[class*="bg-brand"]:hover,#demo a[class*="bg-brand"]:hover,[class*="text-cream"] a[class*="bg-brand"]:hover,
[class*="bg-night"] a[class*="bg-brand"]:hover{
  background-color:color-mix(in srgb,var(--color-accent-300) 14%,transparent)!important;color:#fff!important}
.dc-bar,.dc-bar *{color:#FAFAF7}
.dc-bar .dc-cta{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent-300) 75%,transparent)!important;color:var(--color-accent-300)!important}
.dc-bar .dc-cta:hover{background-color:color-mix(in srgb,var(--color-accent-300) 14%,transparent)!important;color:#fff!important}
/* — Radien: 8 / 14 px — */
[class*="rounded-3xl"],[class*="rounded-2xl"],[class*="rounded-xl"],[class*="rounded-[26px]"]{border-radius:var(--radius-lg)!important}
.rounded-lg,.rounded-md,.rounded{border-radius:var(--radius-md)!important}
/* — Elevation: Kante plus weicher Schatten, keine farbigen Glows — */
.shadow-2xl:not(a):not(button),.shadow-xl:not(a):not(button){box-shadow:var(--shadow-lg)!important}
.shadow-lg:not(a):not(button),.shadow-md:not(a):not(button){box-shadow:var(--shadow-md)!important}
.shadow-sm:not(a):not(button){box-shadow:var(--shadow-sm)!important}
[class*="shadow-brand"]:not(a):not(button),[class*="shadow-[#"]:not(a):not(button),[class*="shadow-cyan"]:not(a):not(button){box-shadow:var(--shadow-md)!important}
/* Gold- und Diamant-Karte behalten ihren farbigen Rahmen als Haarlinie */
[class*="ring-[#E0B23E]"]{--tw-ring-color:color-mix(in srgb,var(--color-gold) 55%,transparent)!important}
[class*="ring-cyan-4"]{--tw-ring-color:color-mix(in srgb,var(--color-accent-2) 45%,transparent)!important}
/* — Zustände — */
:focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 24%,transparent)}
a:not([class]){color:var(--color-accent-600)}
a:not([class]):hover{color:var(--color-accent)}
/* — Trennlinien verlaufen an den Enden aus (Nocturne-Signatur) — */
hr,#proof{border-image:linear-gradient(to right,transparent,var(--color-divider) 48px calc(100% - 48px),transparent) 1!important}

/* — Zum Schluss: bei Aktionen gewinnt immer der Umriss über jede Schatten-Utility — */
a[class*="bg-brand"],button[class*="bg-brand"]{box-shadow:inset 0 0 0 1px var(--color-accent)!important}
#top a[class*="bg-brand"],#demo a[class*="bg-brand"],[class*="bg-night"] a[class*="bg-brand"],[class*="text-cream"] a[class*="bg-brand"],[class*="text-cream"] button[class*="bg-brand"],.dc-bar .dc-cta{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent-300) 75%,transparent)!important}
a[class*="bg-[#E0B23E]"],a[class*="bg-[#E8C04A]"]{box-shadow:inset 0 0 0 1px var(--color-gold-300)!important}
a[class*="bg-cyan-4"]{box-shadow:inset 0 0 0 1px var(--color-accent-2-300)!important}

/* — Spezifität: die Seite selbst löscht farbige Glows per .genv-craft [class*="shadow-…"]
     mit !important (0,2,0). Damit der Umriss gewinnt, hängen diese Regeln höher. — */
html .genv-craft a[class*="bg-brand"],html .genv-craft button[class*="bg-brand"],
html .genv-craft input[class*="bg-brand"]{box-shadow:inset 0 0 0 1px var(--color-accent)!important}
html .genv-craft #top a[class*="bg-brand"],html .genv-craft #demo a[class*="bg-brand"],
html .genv-craft [class*="bg-night"] a[class*="bg-brand"],html .genv-craft [class*="bg-night"] button[class*="bg-brand"],
html .genv-craft [class*="text-cream"] a[class*="bg-brand"],html .genv-craft [class*="text-cream"] button[class*="bg-brand"],
html .genv-craft .dc-bar .dc-cta,html .genv-craft .lm-card a[class*="bg-brand"],html .genv-craft .lm-card button[class*="bg-brand"]{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent-300) 75%,transparent)!important}
html .genv-craft a[class*="bg-[#E0B23E]"],html .genv-craft a[class*="bg-[#E8C04A]"],
html .genv-craft button[class*="bg-[#E0B23E]"]{box-shadow:inset 0 0 0 1px var(--color-gold-300)!important}
html .genv-craft a[class*="bg-cyan-4"],html .genv-craft button[class*="bg-cyan-4"]{box-shadow:inset 0 0 0 1px var(--color-accent-2-300)!important}
html .genv-craft .dc-cta,html .genv-craft .jn-finale .fin-cta{box-shadow:inset 0 0 0 1px var(--color-accent)!important}

/* — Umriss als outline statt box-shadow: die Seite setzt für Glow-Utilities
     box-shadow:none!important, outline bleibt davon unberührt. — */
a[class*="bg-brand"],button[class*="bg-brand"],.dc-cta,.jn-finale .fin-cta{
  outline:1px solid var(--color-accent)!important;outline-offset:-1px}
#top a[class*="bg-brand"],#demo a[class*="bg-brand"],[class*="bg-night"] a[class*="bg-brand"],
[class*="bg-night"] button[class*="bg-brand"],[class*="text-cream"] a[class*="bg-brand"],
[class*="text-cream"] button[class*="bg-brand"],.dc-bar .dc-cta,
.lm-card a[class*="bg-brand"],.lm-card button[class*="bg-brand"]{
  outline-color:color-mix(in srgb,var(--color-accent-300) 75%,transparent)!important}
a[class*="bg-[#E0B23E]"],button[class*="bg-[#E0B23E]"],a[class*="bg-[#E8C04A]"]{
  outline:1px solid var(--color-gold-300)!important;outline-offset:-1px}
a[class*="bg-cyan-4"],button[class*="bg-cyan-4"]{
  outline:1px solid var(--color-accent-2-300)!important;outline-offset:-1px}
/* Tastaturfokus bleibt erkennbar: kräftiger Ring mit Abstand */
a[class*="bg-brand"]:focus-visible,button[class*="bg-brand"]:focus-visible,
a[class*="bg-[#E0B23E]"]:focus-visible,a[class*="bg-cyan-4"]:focus-visible{
  outline:2px solid var(--color-accent)!important;outline-offset:2px!important}

/* ══ Nachtrag 08.09.2026 — CTAs wieder als Fläche ═══════════════════════════
   Marius: die Umriss-Buttons waren zu leise. Die Hauptaktionen sind jetzt
   gefüllt (Nocturnes Umriss-Regel gilt weiter für alles Sekundäre).
   Rollback: diesen Nachtrag löschen — dann sind alle CTAs wieder Umriss.
   ═════════════════════════════════════════════════════════════════════════ */
a[class*="bg-brand"],button[class*="bg-brand"],.dc-cta,.jn-finale .fin-cta{
  background-color:var(--color-accent)!important;background-image:none!important;
  color:#fff!important;outline:none!important;box-shadow:0 1px 2px rgba(26,26,31,.10),0 10px 26px -14px rgba(124,58,237,.55)!important}
a[class*="bg-brand"] *,button[class*="bg-brand"] *,.dc-cta *,.jn-finale .fin-cta *{color:#fff!important;fill:currentColor}
a[class*="bg-brand"]:hover,button[class*="bg-brand"]:hover,.dc-cta:hover,.jn-finale .fin-cta:hover{
  background-color:var(--color-accent-600)!important;color:#fff!important}
a[class*="bg-brand"]:active,button[class*="bg-brand"]:active{background-color:#5b21b6!important}
/* Tarife tragen ihre eigene Farbe als Fläche */
a[class*="bg-[#E0B23E]"],button[class*="bg-[#E0B23E]"],a[class*="bg-[#E8C04A]"]{
  background-color:var(--color-gold)!important;color:#141419!important;outline:none!important;
  box-shadow:0 1px 2px rgba(26,26,31,.14),0 10px 26px -14px rgba(224,178,62,.6)!important}
a[class*="bg-[#E0B23E]"] *,a[class*="bg-[#E8C04A]"] *{color:#141419!important;fill:currentColor}
a[class*="bg-[#E0B23E]"]:hover,a[class*="bg-[#E8C04A]"]:hover{background-color:var(--color-gold-300)!important;color:#141419!important}
a[class*="bg-cyan-4"],button[class*="bg-cyan-4"]{
  background-color:var(--color-accent-2)!important;color:#0B1F24!important;outline:none!important;
  box-shadow:0 1px 2px rgba(26,26,31,.14),0 10px 26px -14px rgba(34,211,238,.6)!important}
a[class*="bg-cyan-4"] *{color:#0B1F24!important;fill:currentColor}
a[class*="bg-cyan-4"]:hover{background-color:var(--color-accent-2-300)!important;color:#0B1F24!important}
/* Tastaturfokus bleibt sichtbar */
a[class*="bg-brand"]:focus-visible,button[class*="bg-brand"]:focus-visible,
a[class*="bg-[#E0B23E]"]:focus-visible,a[class*="bg-cyan-4"]:focus-visible,.dc-cta:focus-visible{
  outline:2px solid var(--color-accent)!important;outline-offset:2px!important}

/* — Nachtrag II: gefüllte CTAs tragen IMMER weißen Text, auch auf dunklem Grund.
     Die älteren „dunkler Grund"-Regeln (0,2,2) haben den Nachtrag sonst überstimmt. — */
#top a[class*="bg-brand"],#top a[class*="bg-brand"] *,#top button[class*="bg-brand"],#top button[class*="bg-brand"] *,
#demo a[class*="bg-brand"],#demo a[class*="bg-brand"] *,
#start a[class*="bg-brand"],#start a[class*="bg-brand"] *,#start button[class*="bg-brand"],#start button[class*="bg-brand"] *,
[class*="bg-night"] a[class*="bg-brand"],[class*="bg-night"] a[class*="bg-brand"] *,
[class*="bg-night"] button[class*="bg-brand"],[class*="bg-night"] button[class*="bg-brand"] *,
[class*="text-cream"] a[class*="bg-brand"],[class*="text-cream"] a[class*="bg-brand"] *,
[class*="text-cream"] button[class*="bg-brand"],[class*="text-cream"] button[class*="bg-brand"] *,
.lm-card a[class*="bg-brand"],.lm-card a[class*="bg-brand"] *,.lm-card button[class*="bg-brand"],.lm-card button[class*="bg-brand"] *,
.dc-bar .dc-cta,.dc-bar .dc-cta *{color:#fff!important}