/* ───────────────────────── analysis_base.css ────────────────────────
   Globale Tokens & Layout – Namespace: an-
   Version 2025-06-05 · Robust Cards & Disabled State
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');

/* ---------- Design-Tokens ---------- */
:root{
  /* Basisfarben */
  --an-bg            : #000000;
  --an-bg-grad       : radial-gradient(ellipse at 50% 0%,
                        #0e0e0e 0%, #050505 55%, #000000 100%);
  --an-card-bg       : rgba(46,47,50,.78);          /* robuster = weniger transparent */
  --an-card-border   : 1px solid rgba(255,255,255,.06);

  --an-text-light    : #efefef;
  --an-text-dark     : #111827;

  --an-accent        : #ff5765;
  --an-accent-dim    : #ff7a86;

  /* Effekte */
  --an-blur          : blur(14px) saturate(160%);
  --an-shadow-1      : 0 6px 14px      hsla(0 0% 0% /.28);  /* kräftiger Schatten */
  --an-shadow-2      : 0 14px 36px -8px hsla(0 0% 0% /.42);

  /* Disabled-Effekt */
  --an-disabled-filter  : grayscale(1) brightness(.55);
  --an-disabled-opacity : .48;

  /* Layout */
  --an-radius-lg     : 22px;
  --an-radius-md     : 14px;
  --an-gutter        : clamp(1rem, 2.5vw, 2rem);

  /* Bootstrap-Override */
  --bs-body-bg       : #000000;
}

/* ---------- Grundlayout ---------- */
*,*::before,*::after{box-sizing:border-box}

html,
body{
  height:100%;
  margin:0;
  font-family:'Source Sans Pro',sans-serif;
  color:var(--an-text-light)!important;
  scroll-behavior:smooth;

  /* Schwarzer Radial-Gradient (ersetzt Weiß) */
  background:var(--an-bg-grad) fixed;
}

/* ---------- Glas-Container ---------- */
.an-container{
  width:min(92%,1100px);
  margin:6rem auto 3rem;
  padding:var(--an-gutter);
  background:var(--an-card-bg);
  border:var(--an-card-border);
  border-radius:var(--an-radius-lg);
  backdrop-filter:var(--an-blur);
  -webkit-backdrop-filter:var(--an-blur);
  box-shadow:var(--an-shadow-1);
  transition:transform .4s,box-shadow .4s;
}
.an-container:hover{
  transform:translateY(-4px);
  box-shadow:var(--an-shadow-2);
}

/* ---------- Karten-Grid ---------- */
.an-grid{
  --an-min:240px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--an-min),1fr));
  gap:clamp(1rem,2vw,1.5rem);
  margin-top:3rem;
}

/* ---------- Einzelkarte ---------- */
.an-card{
  position:relative;
  padding:1.9rem 1.5rem;                 /* etwas üppiger */
  background:var(--an-card-bg);
  border:var(--an-card-border);
  border-radius:var(--an-radius-md);
  box-shadow:var(--an-shadow-1);
  cursor:pointer;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .35s,box-shadow .35s,filter .35s,opacity .35s;
  text-decoration:none;
}
.an-card:link,
.an-card:visited{
  color:var(--an-text-light);
}

/* Hover-Effekte nur bei Zeigegeräten */
@media (hover:hover){
  .an-card:hover{
    transform:rotateX(6deg) rotateY(var(--an-rx,0deg)) translateY(-3px);
    box-shadow:0 26px 36px -12px hsla(0 0% 0% /.50);
  }
  .an-card:hover::before{opacity:1}
}

/* Glow-Fläche */
.an-card::before{
  content:'';
  position:absolute;
  inset:-60%;
  background:radial-gradient(circle at var(--an-cx,50%) var(--an-cy,50%),
              var(--an-accent-dim) 0%,transparent 52%);
  opacity:0;
  transition:opacity .4s;
}

/* ---------- Disabled-Variante ---------- */
.an-card--disabled{
  pointer-events:none;                   /* nicht anklickbar */
  filter:var(--an-disabled-filter);
  opacity:var(--an-disabled-opacity);
  box-shadow:none;                       /* wirkt “flach” */
  transform:none!important;
}
.an-card--disabled::before{display:none}

/* Titel & Text */
.an-title{
  font-size:1.17rem;
  font-weight:600;
  margin:0 0 .8rem;
  border-bottom:1px solid hsl(0 0% 85% /.38);
  padding-bottom:.55rem;
}
.an-desc{
  font-size:.96rem;
  line-height:1.45;
}

/* Fade-In beim Scrollen */
@keyframes an-floatUp{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:translateY(0)}
}
.an-card{opacity:0}
.an-card.an-visible{animation:an-floatUp .6s ease-out forwards}

/* ---------- Mobile ---------- */
@media(max-width:600px){
  .an-container{margin:5rem auto 2rem;padding:1.25rem}
  .an-title{font-size:1.05rem}
  .an-desc {font-size:.9rem}
}

/* ---------- Particles-Canvas ---------- */
#particles-js{
  position:fixed;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;               /* über dem Gradient, unter dem Content */
}