/* ============================================================
   ShimmerGates — Base / Design-System
   ============================================================ */

/* ── Webfonts (lokal einbinden oder datenschutzfreundlich) ── */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/cinzel-v19-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-black-v23-latin.woff2') format('woff2')}

/* ── CSS-Variablen ── */
:root{
  /* Farben */
  --abyss:#060608;
  --void:#0a0a0b;
  --stone:#121214;
  --slate:#1a1a1d;
  --iron:#242428;
  --ash:#2e2e33;
  --mist:#8a8680;
  --bone:#c8c4bc;
  --light:#e8e4dc;
  --shimmer-deep:#3b2f6b;
  --shimmer-cold:#4a6fa5;
  --shimmer-ghost:#7aa1d2;
  --shimmer-silver:#a8b0c0;
  --accent-violet:#5b4fc4;
  --accent-cyan:#4a8fa8;
  --accent-magenta:#7a5a8a;

  /* Abstände */
  --space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2.5rem;--space-xl:4rem;--space-2xl:6rem;--space-3xl:9rem;

  /* Typografie */
  --font-display:'Archivo Black','Arial Black',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-narrow:'Inter',system-ui,sans-serif;

  /* Layout */
  --max-w:1280px;
  --radius:2px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
}

/* ── Grundgerüst ── */
html{background:#050711}
body{background:transparent;color:var(--bone);font-family:var(--font-body);font-size:1rem;line-height:1.7;min-height:100vh;position:relative;isolation:isolate}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}
body::after{content:'';position:fixed;inset:-18px;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,14,.38),rgba(7,7,15,.54)),url('../images/site-starry-sky.jpg') center/cover no-repeat;filter:blur(6px) saturate(.9);transform:scale(1.025)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--stone)}
::-webkit-scrollbar-thumb{background:var(--iron);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--ash)}

/* ── Auswahl ── */
::selection{background:rgba(91,79,196,.25);color:var(--light)}

/* ── Dust Canvas ── */
#dust-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1;opacity:1}


/* ── Container ── */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--space-md)}
@media(min-width:768px){.container{padding-inline:var(--space-lg)}}
@media(min-width:1024px){.container{padding-inline:var(--space-xl)}}

/* ── Sektionen ── */
.section{padding-block:var(--space-2xl)}
.section--dark{background:rgba(18,18,20,.76);backdrop-filter:blur(2px)}
.section--darker{background:rgba(6,6,8,.84);backdrop-filter:blur(2px)}
.section-header{text-align:center;margin-bottom:var(--space-xl)}
.section-header h2{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,3rem);color:var(--light);margin-bottom:var(--space-sm);letter-spacing:.02em}
.section-header p{color:var(--mist);max-width:60ch;margin-inline:auto;font-size:1.05rem}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 2rem;font-family:var(--font-narrow);font-size:.9rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--iron);background:var(--slate);color:var(--bone);border-radius:var(--radius);transition:all .25s ease;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(91,79,196,.08),transparent);opacity:0;transition:opacity .3s}
.btn:hover::before{opacity:1}
.btn:hover{border-color:var(--shimmer-deep);color:var(--light);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--primary{background:var(--shimmer-deep);border-color:var(--accent-violet);color:var(--light)}
.btn--primary:hover{background:var(--accent-violet);box-shadow:0 4px 20px rgba(91,79,196,.2)}
.btn--ghost{background:transparent;border-color:var(--ash)}
.btn--ghost:hover{border-color:var(--shimmer-cold);color:var(--shimmer-ghost)}
.btn--sm{padding:.55rem 1.25rem;font-size:.8rem}
.btn--lg{padding:1rem 2.5rem;font-size:1rem}

/* ── Karten ── */
.card{background:var(--slate);border:1px solid var(--iron);border-radius:var(--radius);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);border-color:var(--ash);box-shadow:var(--shadow-lg)}
.card__image{aspect-ratio:16/9;overflow:hidden;background:var(--stone)}
.card__image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__image img{transform:scale(1.04)}
.card__body{padding:var(--space-md)}
.card__title{font-family:var(--font-display);font-size:1.15rem;color:var(--light);margin-bottom:.35rem}
.card__meta{font-size:.8rem;color:var(--mist);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-xs)}
.card__text{color:var(--mist);font-size:.95rem;line-height:1.6}

/* ── Trenner ── */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--iron),transparent);margin-block:var(--space-xl)}
.divider--thick{height:2px;background:linear-gradient(90deg,transparent,var(--ash),transparent)}

/* ── Tags / Labels ── */
.tag{display:inline-block;padding:.25rem .65rem;font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:var(--iron);color:var(--mist);border-radius:var(--radius);border:1px solid var(--ash)}
.tag--active{background:rgba(91,79,196,.12);color:var(--shimmer-ghost);border-color:var(--shimmer-deep)}

/* ── Visually hidden (Accessibility) ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}