/* ============================================================================
   Civic Glanz — gemeinsames Premium-Design-Kit (dunkel, Violett/Magenta)
   Zusätzliche Schicht ÜBER stil.css. Klassen-Präfix: cv-
   ----------------------------------------------------------------------------
   Stand 20.07.2026: Die Civic-Farben bleiben unverändert (eigenständige
   Untermarke). Radien, Schriftgrößen, Abstände, Schatten und die Bewegungs-
   kurve kommen jetzt aus nexus-design.css (--nx-…), damit Civic dieselbe
   Maßleiter benutzt wie alle anderen Nexus-Apps.
   Einbinden NACH nexus-design.css und stil.css.
   ========================================================================= */
:root{
  /* Civic-Farben — bleiben. */
  --cv-bg:#07080D; --cv-bg2:#0C0E16; --cv-card:rgba(255,255,255,.05);
  --cv-line:rgba(255,255,255,.10); --cv-hi:rgba(255,255,255,.14);
  --cv-ink:#F5F7FF; --cv-ink2:#C3C9DC; --cv-mute:#8A93AB;
  --cv-a1:#3F7BFF; --cv-a2:#0E93B0; --cv-a3:#2CB4CE;
  --cv-glow:rgba(63,123,255,.5);
  /* Form & Bewegung — aus dem gemeinsamen Design-System. */
  --cv-rad:var(--nx-radius);
  --cv-rad-klein:var(--nx-radius-klein);
  --cv-rad-mini:var(--nx-radius-mini);
  --cv-ease:var(--nx-ease);
}
html{scrollbar-color:rgba(138,147,171,.45) transparent}
::selection{background:var(--cv-a1);color:#fff}
body.cv-body{background:var(--cv-bg);color:var(--cv-ink);overflow-x:hidden}
body.cv-body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(1100px 660px at 80% -10%,rgba(63,123,255,.20),transparent 62%),
             radial-gradient(900px 600px at 6% 14%,rgba(14,147,176,.12),transparent 58%),
             radial-gradient(1000px 900px at 50% 120%,rgba(63,123,255,.10),transparent 60%),
             linear-gradient(180deg,#05060B,#07080D 40%,#0A0C13)}
/* sanft driftende Aurora hinter allem */
body.cv-body::after{content:"";position:fixed;inset:-28%;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(42% 40% at 24% 28%,rgba(63,123,255,.16),transparent 70%),
             radial-gradient(46% 42% at 78% 62%,rgba(14,147,176,.13),transparent 70%),
             radial-gradient(38% 36% at 58% 92%,rgba(44,180,206,.08),transparent 72%);
  animation:cvdrift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes cvdrift{0%{transform:translate3d(-2%,-2%,0) scale(1.05)}100%{transform:translate3d(2%,3%,0) scale(1.12) rotate(2deg)}}

/* Navigation: transparent, wird beim Scrollen fest */
.cv-nav{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent;
  transition:background .4s var(--cv-ease),border-color .4s var(--cv-ease)}
.cv-nav.cv-fest{background:rgba(7,8,13,.66);backdrop-filter:var(--nx-glas-blur);
  -webkit-backdrop-filter:var(--nx-glas-blur);border-bottom:1px solid var(--cv-line)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .cv-nav.cv-fest{background:var(--cv-bg)}
}
.cv-mark{width:24px;height:24px;border-radius:var(--cv-rad-mini);display:inline-flex;
  align-items:center;justify-content:center;
  vertical-align:-5px;margin-right:var(--nx-abstand-2);color:#fff;
  font-weight:var(--nx-gew-fett);font-size:var(--nx-t-mini);
  background:conic-gradient(from 210deg,var(--cv-a1),var(--cv-a2),var(--cv-a1));box-shadow:0 0 14px var(--cv-glow)}

/* Glas-Karten */
.cv-glass{position:relative;overflow:hidden;border-radius:var(--cv-rad);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--cv-line);backdrop-filter:var(--nx-glas-blur);-webkit-backdrop-filter:var(--nx-glas-blur);
  box-shadow:var(--nx-schatten-3),inset 0 1px 0 var(--cv-hi);
  transition:transform .3s var(--cv-ease),border-color .3s,box-shadow .35s var(--cv-ease)}
.cv-glass::after{content:"";position:absolute;left:-45%;top:-60%;width:55%;height:220%;
  background:linear-gradient(90deg,transparent,var(--cv-hi),transparent);
  transform:rotate(18deg) translateX(-30%);transition:transform .9s var(--cv-ease);pointer-events:none;opacity:.7}
.cv-glass>*{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .cv-glass{background:var(--cv-bg2)}
}
@media(hover:hover){
 .cv-glass:hover{transform:translateY(-5px);border-color:rgba(63,123,255,.45);
   box-shadow:0 44px 84px -42px var(--cv-glow),inset 0 1px 0 var(--cv-hi)}
 .cv-glass:hover::after{transform:rotate(18deg) translateX(360%)}
 .cv-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;z-index:0;
   transition:opacity .35s var(--cv-ease);pointer-events:none;
   background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(63,123,255,.13),transparent 62%)}
 .cv-glass:hover::before{opacity:1}
}

/* Buttons */
.cv-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--nx-abstand-2);
  font-weight:var(--nx-gew-halb);font-size:var(--nx-t-lead);
  padding:var(--nx-abstand-3) var(--nx-abstand-5);border-radius:var(--cv-rad-klein);
  border:1px solid transparent;
  color:#fff;cursor:pointer;text-decoration:none;letter-spacing:.01em;
  background:linear-gradient(120deg,var(--cv-a1),var(--cv-a2));
  box-shadow:0 12px 36px -12px var(--cv-glow),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s var(--cv-ease),box-shadow .35s var(--cv-ease);
  transform:translate(var(--mx,0px),var(--my,0px))}
.cv-btn:hover:not(:disabled){transform:translate(var(--mx,0px),var(--my,0px)) translateY(-1px);
  box-shadow:0 20px 52px -12px var(--cv-glow),inset 0 1px 0 rgba(255,255,255,.5)}
.cv-btn:active:not(:disabled){transform:translate(var(--mx,0px),var(--my,0px)) scale(.97)}
/* Fehlte bisher: gesperrter Knopf und Knopf, der gerade arbeitet. */
.cv-btn:disabled,.cv-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;
  transform:none;box-shadow:none;filter:grayscale(.3)}
.cv-btn.cv-laedt{pointer-events:none;opacity:.75}
.cv-btn.cv-laedt::after{content:"";width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:cv-dreh .8s linear infinite}
@keyframes cv-dreh{to{transform:rotate(360deg)}}
.cv-btn-ghost{background:var(--cv-card);border-color:var(--cv-line);color:var(--cv-ink);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:none}
.cv-btn-ghost:hover:not(:disabled){border-color:var(--cv-a1);background:rgba(63,123,255,.14);box-shadow:none}

/* Pille / Verlaufstext / Label */
.cv-pill{display:inline-flex;align-items:center;gap:var(--nx-abstand-2);
  font-size:var(--nx-t-klein);font-weight:var(--nx-gew-halb);color:var(--cv-ink2);
  border:1px solid var(--cv-line);background:rgba(255,255,255,.04);
  padding:7px var(--nx-abstand-4);border-radius:var(--nx-radius-pille);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cv-pill i{width:7px;height:7px;border-radius:50%;background:var(--nx-gruen-dunkel);animation:cvpuls 2.4s infinite}
@keyframes cvpuls{0%,100%{box-shadow:0 0 0 0 rgba(48,209,88,.5)}70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}}
.cv-grad{background:linear-gradient(90deg,var(--cv-a3),var(--cv-a1) 30%,var(--cv-a2) 50%,var(--cv-a1) 70%,var(--cv-a3));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:cvgradflow 5s linear infinite}
/* Nahtloser Endlos-Fluss (Anfang=Ende des Verlaufs -> kein Sprung) */
@keyframes cvgradflow{from{background-position:0% center}to{background-position:-200% center}}
@media(prefers-reduced-motion:reduce){.cv-grad{animation:none}}
.cv-eyebrow{display:inline-flex;align-items:center;gap:var(--nx-abstand-3);
  font-size:var(--nx-t-klein);font-weight:var(--nx-gew-fett);
  letter-spacing:.2em;text-transform:uppercase;color:var(--cv-a3)}
.cv-eyebrow::before{content:"";width:26px;height:1px;background:var(--cv-a1)}

/* Einblenden beim Scrollen */
.cv-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--cv-ease),transform .8s var(--cv-ease)}
.cv-reveal.cv-in{opacity:1;transform:none}
[data-cv-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--cv-ease),transform .7s var(--cv-ease)}
[data-cv-stagger].cv-in>*{opacity:1;transform:none}

/* Hero-Buehne fuer die 3D-Szene */
.cv-hero{position:relative;overflow:hidden}
.cv-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 86%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 86%,transparent)}
.cv-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 52%,rgba(7,8,13,.88) 0%,rgba(7,8,13,.45) 42%,transparent 68%)}
.cv-hero>*:not(.cv-hero-canvas):not(.cv-hero-veil){position:relative;z-index:2}

/* Ruhige Variante */
@media(prefers-reduced-motion:reduce){
  body.cv-body::after{animation:none}
  .cv-reveal,[data-cv-stagger]>*{opacity:1!important;transform:none!important;transition:none}
  .cv-glass::after{display:none}.cv-pill i{animation:none}
  .cv-btn.cv-laedt::after{animation:none}
}
@media(max-width:640px){.cv-btn{padding:var(--nx-abstand-3) var(--nx-abstand-5)}}