/* ============================================================
   SaintCity — FiveM Roleplay · Website-Design 2 (23.10.2026)
   Schwarz, schwebende Pillen-Navigation, große Hero-Zeile mit
   Lichtstreifen, Karten mit goldenem Rand-Glow (folgt der Maus).
   Vorbild für Aufbau und Rhythmus: expose-bots.de – Akzent bleibt
   das SaintCity-Gold. styles.css bleibt für das klassische
   Team-Panel unverändert bestehen.
   ============================================================ */

/* Inter selbst gehostet (OFL) – kein Abruf bei Google Fonts. */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;
  --ink:#000;
  --ink-2:#070708;
  --ink-3:#101012;
  --ink-4:#18181b;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --gold:#e5c46e;
  --gold-hi:#f6e2a4;
  --gold-lo:#b8893c;
  --gold-deep:#8a6526;

  --bone:#f4f1ea;
  --ash:#9ca3af;
  --ash-2:#6b7280;
  --muted:rgba(255,255,255,.5);
  --live:#5fd18a;
  --off:#e5484d;

  --grad-gold:linear-gradient(135deg,#f6e2a4 0%,#e5c46e 42%,#b8893c 100%);
  --shine-gold:linear-gradient(110deg,#e9c977 0%,#c99a4a 28%,#e5c46e 41%,#fff6d8 50%,#e5c46e 59%,#b8893c 76%,#e9c977 100%);
  --shine-white:linear-gradient(110deg,#fff 0%,#fff 40%,#f3d78f 50%,#fff 60%,#fff 100%);
  --ease:cubic-bezier(.32,.72,0,1);
  --shadow:0 24px 60px -24px rgba(0,0,0,.9);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);   /* alter Name – die Rechtsseiten nutzen ihn in ihren Inline-Styles */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
::selection{background:rgba(229,196,110,.32);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:1}
main{display:block}

.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.7rem 1rem;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:.9rem;transition:top .2s ease}
.skip:focus{top:1rem}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;color:#fff;text-wrap:balance}
p{text-wrap:pretty}
.eyebrow{
  display:inline-block;
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(229,196,110,.78);
}
.white{color:#fff}

/* Lichtstreifen über Text (wie „Shiny Text“) */
.gild,.shine-gold,.shine-white{
  background-size:250% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shine 7s var(--ease) infinite;
}
.gild,.shine-gold{background-image:var(--shine-gold)}
.shine-white{background-image:var(--shine-white);animation-delay:.35s}
.shine-gold,.shine-white{display:inline-block}
@keyframes shine{0%{background-position:100% 0}55%,100%{background-position:0% 0}}

/* ---------- Buttons (Pillen) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.55rem;border-radius:999px;border:0;
  font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.2;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}
.btn[hidden]{display:none}

.btn-gold{background:var(--grad-gold);color:#1a1206;box-shadow:0 10px 30px -12px rgba(229,196,110,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-gold:hover{box-shadow:0 14px 40px -12px rgba(229,196,110,.78),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-white{background:#fff;color:#000}
.btn-white:hover{background:#f1f1f1}
.btn-ghost{background:transparent;color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

/* Pfeil im eigenen Kreis, wandert beim Hover nach oben rechts */
.btn-arr{padding:.42rem .42rem .42rem 1.5rem;gap:.7rem}
.btn .arr{width:2.15rem;height:2.15rem;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .25s var(--ease)}
.btn .arr svg{width:13px;height:13px}
.btn-gold .arr{background:rgba(26,18,6,.13)}
.btn-white .arr{background:rgba(0,0,0,.06)}
.btn-arr:hover .arr{transform:translate(3px,-2px) scale(1.08)}

.btn-sm{padding:.55rem .95rem;font-size:.82rem;gap:.45rem}
.btn-sm svg{width:14px;height:14px}
.btn-sm.btn-arr{padding:.3rem .3rem .3rem .95rem;gap:.5rem}
.btn-sm .arr{width:1.7rem;height:1.7rem}
.btn-sm .arr svg{width:11px;height:11px}

/* ---------- Badge (Pille über Überschriften) ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.32rem .85rem;border-radius:999px;
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.badge .live{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:pulse 1.8s ease-in-out infinite}
.badge .spark{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(229,196,110,.8)}
@keyframes pulse{50%{opacity:.35}}

/* ---------- Navigation (schwebende Pille) ---------- */
header.nav{
  position:fixed;top:max(1rem,env(safe-area-inset-top));left:0;right:0;z-index:50;
  display:flex;justify-content:center;padding:0 16px;pointer-events:none;
}
.nav-shell{
  pointer-events:auto;position:relative;
  width:100%;max-width:68rem;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(255,255,255,.1);
  transition:box-shadow .5s var(--ease),background-color .5s var(--ease);
}
header.nav.scrolled .nav-shell{background:rgba(255,255,255,.045);box-shadow:0 0 0 1px rgba(255,255,255,.13),0 18px 50px -20px rgba(0,0,0,.9)}
.nav-inner{
  position:relative;display:flex;align-items:center;gap:1rem;
  padding:.4rem .45rem .4rem .85rem;border-radius:999px;
  background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;line-height:1;flex:none}
.brand-logo{height:36px;width:36px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brand-txt{color:#fff}
.brand-txt b{color:var(--gold);font-weight:800}

.nav-links{display:flex;align-items:center;gap:1.7rem;margin:0 auto}
.nav-links a{
  position:relative;font-size:.875rem;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.5);transition:color .5s var(--ease);
}
.nav-links a:hover{color:rgba(255,255,255,.92)}
.nav-links a.active{color:#fff}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;bottom:-.6rem;width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold);transform:translateX(-50%);
}
.nav-links .only-mobile{display:none}

.nav-cta{display:flex;align-items:center;gap:.45rem;flex:none}
.nav-online{
  display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:999px;
  font-size:.75rem;font-weight:500;color:rgba(255,255,255,.55);white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.nav-online .dot{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:pulse 1.8s ease-in-out infinite}
.nav-online b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

.user-menu{position:relative}
.user-menu[hidden]{display:none}
.user-chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.28rem .6rem .28rem .3rem;border-radius:999px;
  background:rgba(255,255,255,.03);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  color:#fff;cursor:pointer;transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.user-chip:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.user-av{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--ink-4);box-shadow:0 0 0 1px rgba(229,196,110,.35)}
.user-name{font-size:.82rem;font-weight:600;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-caret{width:14px;height:14px;color:rgba(255,255,255,.5);transition:transform .25s var(--ease)}
.user-chip[aria-expanded="true"] .user-caret{transform:rotate(180deg)}
.user-dd{
  position:absolute;top:calc(100% + .6rem);right:0;min-width:170px;padding:.35rem;border-radius:16px;
  background:rgba(10,10,12,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--shadow);z-index:20;
}
.user-dd[hidden]{display:none}
.user-logout{
  display:flex;align-items:center;gap:.6rem;width:100%;padding:.65rem .75rem;border-radius:11px;
  background:none;border:0;color:rgba(255,255,255,.85);font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.user-logout svg{width:16px;height:16px}
.user-logout:hover{color:var(--gold);background:rgba(255,255,255,.05)}

.menu-btn{
  display:none;position:relative;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.menu-btn span{position:absolute;left:12px;right:12px;height:1.5px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn span:first-child{top:15px}
.menu-btn span:last-child{top:22px}
.menu-btn[aria-expanded="true"] span:first-child{top:18.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:18.5px;transform:rotate(-45deg)}

/* ---------- Abschnitte ---------- */
section{position:relative;z-index:1}
.pad{padding:7rem 0}
.sec-head{text-align:center;max-width:46rem;margin:0 auto 3.5rem}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.25rem);font-weight:650;letter-spacing:-.035em;line-height:1.08;margin:.9rem 0 1.15rem}
.sec-head p{color:var(--ash);font-size:1.1rem;line-height:1.7;margin:0}

/* ---------- Hero (Startseite) ---------- */
.hero{position:relative;overflow:hidden;padding:9.5rem 0 5.5rem}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 42% at 50% -4%,rgba(229,196,110,.15),transparent 72%),
    radial-gradient(30% 30% at 50% 62%,rgba(229,196,110,.05),transparent 70%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:28rem;pointer-events:none;
  background-image:radial-gradient(rgba(229,196,110,.16) 1px,transparent 0);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(60% 70% at 50% 0%,#000 0%,transparent 70%);
  opacity:.55;
}
.hero-inner{position:relative;z-index:2;max-width:62rem;margin:0 auto;text-align:center}
.hero h1{
  font-size:clamp(3.3rem,12.4vw,8.8rem);font-weight:800;line-height:.92;letter-spacing:-.045em;
  text-transform:uppercase;margin:1.5rem 0 0;
}
.hero-lead{max-width:40rem;margin:1.9rem auto 2.6rem;color:var(--muted);font-size:clamp(1.02rem,1.55vw,1.2rem);line-height:1.68}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;align-items:center}

/* Rahmen mit Gold-Glow (wie der Video-Rahmen bei expose) – zeigt den Live-Status */
.frame{position:relative;max-width:62rem;margin:4.5rem auto 0;z-index:2}
.frame-glow{
  position:absolute;left:50%;top:50%;width:calc(100% + 90px);height:calc(100% + 90px);transform:translate(-50%,-50%);
  border-radius:3rem;pointer-events:none;
  background:radial-gradient(62% 62% at 50% 50%,rgba(229,196,110,.7) 0%,rgba(229,196,110,.25) 45%,rgba(229,196,110,0) 78%);
  filter:blur(42px);opacity:.33;
}
.frame-shell{position:relative;padding:3px;border-radius:2rem;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.frame-inner{border-radius:calc(2rem - 3px);background:#111113;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);padding:.55rem}
.frame-bar{display:flex;align-items:center;gap:.4rem;padding:.4rem .65rem .75rem}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12)}
.frame-bar i:first-child{background:rgba(229,196,110,.55)}

.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.stat-card{
  position:relative;display:flex;flex-direction:column;gap:.75rem;text-align:left;
  background:#000;border-radius:calc(2rem - 14px);padding:1.55rem 1.6rem 1.7rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.stat-card .sc-ic{
  width:2.4rem;height:2.4rem;border-radius:12px;display:grid;place-items:center;color:var(--gold);
  background:rgba(229,196,110,.07);box-shadow:inset 0 0 0 1px rgba(229,196,110,.18);
}
.stat-card .sc-ic svg{width:18px;height:18px}
.stat-card .sc-lbl{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2)}
.stat-card .sc-val{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:700;letter-spacing:-.035em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stat-card.is-online .sc-val{color:var(--live)}
.stat-card.is-offline .sc-val{color:var(--off)}

/* Startanimation des Hero (nur mit JS; ohne JS bleibt alles sichtbar) */
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .hero.home .hero-inner>*,.js .hero.home .frame{opacity:0;animation:heroUp .9s var(--ease) forwards}
.js .hero.home .hero-inner>.badge{animation-delay:.02s}
.js .hero.home .hero-inner>h1{animation-delay:.08s}
.js .hero.home .hero-inner>.hero-lead{animation-delay:.18s}
.js .hero.home .hero-inner>.hero-cta{animation-delay:.28s}
.js .hero.home .frame{animation-delay:.42s}

/* ---------- Karten mit Rand-Glow ---------- */
.glow-card{
  position:relative;isolation:isolate;border-radius:20px;background:#000;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.1),0 32px 64px rgba(0,0,0,.1);
  transition:border-color .5s var(--ease);
}
.glow-card::before{
  /* goldener Bogen auf dem Rand – zeigt zur Maus (--a), Stärke --p (0…1, aus site.js) */
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from calc(var(--a,0deg) - 70deg) at 50% 50%,
    transparent 0deg,rgba(229,196,110,.25) 25deg,var(--gold) 55deg,var(--gold-hi) 70deg,var(--gold) 85deg,rgba(229,196,110,.25) 115deg,transparent 140deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:var(--p,0);transition:opacity .45s var(--ease);
}
.glow-card::after{
  /* weiches Licht innen an der Mausposition */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(22rem circle at var(--x,50%) var(--y,50%),rgba(229,196,110,.085),transparent 58%);
  opacity:var(--p,0);transition:opacity .45s var(--ease);
}

/* ---------- Anspruch ---------- */
.philo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:66rem;margin:0 auto}
.philo-stats .cell{padding:2.1rem 1.4rem 2rem;text-align:center}
.philo-stats .num{
  font-size:clamp(2.3rem,4.2vw,3.1rem);font-weight:700;letter-spacing:-.045em;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.philo-stats .lbl{margin-top:.8rem;font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-2)}

/* ---------- Highlights ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feat{padding:2.1rem 2rem 2.2rem}
.feat .ic{
  width:2.9rem;height:2.9rem;border-radius:14px;display:grid;place-items:center;color:var(--gold);margin-bottom:1.5rem;
  background:rgba(229,196,110,.06);box-shadow:inset 0 0 0 1px rgba(229,196,110,.2);
}
.feat .ic svg{width:21px;height:21px}
.feat h3{font-size:1.18rem;font-weight:600;letter-spacing:-.015em;margin:0 0 .6rem}
.feat p{color:var(--ash);font-size:.95rem;line-height:1.65;margin:0}

/* ---------- Abschluss (Startklar?) ---------- */
.cta-box{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  border-radius:2rem;padding:5.5rem 1.5rem 5.25rem;background:#050505;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.cta-box::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 75% at 50% 0%,rgba(229,196,110,.17),transparent 72%);
}
.cta-box::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(229,196,110,.22) 1px,transparent 0);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(55% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(55% 80% at 50% 0%,#000,transparent 75%);
  opacity:.5;
}
.cta-box h2{font-size:clamp(2.1rem,5vw,3.7rem);font-weight:700;letter-spacing:-.04em;line-height:1.04;margin:1rem 0 1.15rem}
.cta-box p{color:var(--ash);font-size:1.08rem;max-width:34rem;margin:0 auto 2.4rem}

/* ---------- Footer ---------- */
.site-foot{position:relative;overflow:hidden;background:#000;padding:8rem 0 2.6rem}
.foot-dots{
  position:absolute;left:0;right:0;top:0;height:13rem;pointer-events:none;
  background-image:radial-gradient(rgba(229,196,110,.42) 1.2px,transparent 0);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(90% 160% at 50% -60%,transparent 55%,#000 57% 66%,transparent 68%);
  mask-image:radial-gradient(90% 160% at 50% -60%,transparent 55%,#000 57% 66%,transparent 68%);
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.foot-brand .brand{font-size:1.1rem}
.foot-brand p{color:rgba(255,255,255,.5);font-size:.95rem;line-height:1.65;max-width:21rem;margin:1.2rem 0 0}
.foot-col h4{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:.35rem 0 1.25rem}
.foot-col a{display:block;width:fit-content;color:rgba(255,255,255,.55);font-size:.95rem;padding:.38rem 0;transition:color .3s var(--ease)}
.foot-col a:hover{color:#fff}
.foot-bottom{
  margin-top:4.5rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:rgba(255,255,255,.42);
}
.foot-social{display:flex;gap:.6rem}
.foot-social a{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.foot-social a:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.foot-social svg{width:16px;height:16px}
.foot-note{margin:2.2rem 0 0;text-align:center;font-size:.72rem;color:rgba(255,255,255,.3)}

/* ---------- Unterseiten: Kopfbereich ---------- */
.page-hero{position:relative;overflow:hidden;text-align:center;padding:10.5rem 0 3.5rem}
.page-hero .glow{
  position:absolute;left:50%;top:-20rem;width:56rem;height:38rem;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(229,196,110,.17),transparent);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:22rem;pointer-events:none;
  background-image:radial-gradient(rgba(229,196,110,.15) 1px,transparent 0);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(50% 70% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(50% 70% at 50% 0%,#000,transparent 72%);
  opacity:.5;
}
.page-hero .wrap{z-index:2}
.page-hero .eyebrow,.page-hero .badge{
  display:flex;width:fit-content;margin:0 auto;align-items:center;gap:.55rem;padding:.32rem .85rem;border-radius:999px;
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.page-hero h1{
  font-size:clamp(2.8rem,8.2vw,5.8rem);font-weight:800;letter-spacing:-.045em;line-height:.95;
  text-transform:uppercase;margin:1.4rem 0 1.2rem;
}
.page-hero h1.gild{display:block;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding:0 .04em}
/* Inhalt direkt unter dem Kopfbereich nicht mit vollem Abschnittsabstand absetzen */
.page-hero + .pad{padding-top:1.5rem}
.page-hero p{color:var(--muted);max-width:38rem;margin:0 auto;font-size:1.1rem;line-height:1.7}
.page-hero.soon{min-height:82vh;display:flex;align-items:center;justify-content:center;padding:10rem 0 6rem}
.page-hero.soon .hero-cta{margin-top:2.5rem}

/* ---------- Regelwerk ---------- */
.rw-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;
  width:fit-content;max-width:100%;margin:0 auto 3.5rem;padding:.35rem;border-radius:999px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.rw-tab{
  font-family:var(--sans);font-size:.875rem;font-weight:500;letter-spacing:.005em;line-height:1.2;
  color:rgba(255,255,255,.55);background:transparent;border:0;border-radius:999px;
  padding:.78rem 1.25rem;cursor:pointer;
  transition:color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.rw-tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.rw-tab.active{color:#1a1206;background:var(--grad-gold);box-shadow:0 10px 30px -14px rgba(229,196,110,.6)}
.rw-panel{display:none}
.rw-panel.active{display:block}
.rw-panel h2{font-size:clamp(1.9rem,4.2vw,2.8rem);font-weight:700;letter-spacing:-.035em;text-align:center;margin:0 auto 2.4rem;display:block;width:fit-content}
.rw-body{max-width:54rem;margin:0 auto;color:var(--ash);font-size:1rem}
.rw-body .rule{
  margin:0 0 1rem;padding:1.6rem 1.75rem 1.7rem;border-radius:18px;
  background:#050505;border:1px solid rgba(255,255,255,.08);
}
.rw-body .rule h3{
  display:flex;align-items:baseline;gap:.65rem;
  font-size:1.06rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:#fff;margin:0 0 1rem;
}
.rw-body .rule h3::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(229,196,110,.65);transform:translateY(-2px)}
/* Kapitel-Kopf (Regel ohne Liste, z. B. „§ 1 · Allgemeines“) als Trenner statt Karte */
.rw-body .rule:not(:has(ul,p,ol)){background:none;border:0;padding:2.2rem 0 .4rem;margin:0}
.rw-body .rule:not(:has(ul,p,ol)):first-child{padding-top:0}
.rw-body .rule:not(:has(ul,p,ol)) h3{
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 .4rem;
}
.rw-body .rule:not(:has(ul,p,ol)) h3::before{display:none}
.rw-body .rule:not(:has(ul,p,ol)) h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(229,196,110,.35),transparent)}
.rw-body ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.rw-body li{position:relative;padding-left:1.35rem;line-height:1.68}
.rw-body li::before{content:"";position:absolute;left:.15rem;top:.78em;width:.5rem;height:1px;background:var(--gold-lo)}
.rw-body p{margin:0 0 1rem}
.rw-body b,.rw-body strong{color:var(--bone)}
.rw-body a{color:var(--gold)}
.rw-body a:hover{color:var(--gold-hi);text-decoration:underline}
.rw-body code{font-family:var(--mono);font-size:.85rem;color:var(--gold-hi);background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem}

/* ---------- Rechtsseiten (Feinheiten stehen inline in den Seiten) ---------- */
.legal{margin-left:auto;margin-right:auto}

/* ---------- Einblenden beim Scrollen (nur mit JS) ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none}
/* der Glow-Übergang darf nicht auf die Reveal-Verzögerung warten */
.js .glow-card.reveal{transition:opacity .9s var(--ease) calc(var(--d,0) * 70ms),transform .9s var(--ease) calc(var(--d,0) * 70ms),border-color .5s var(--ease)}

/* ---------- Responsive ---------- */
@media (min-width:1024px){
  .pad{padding:8.5rem 0}
}
@media (max-width:980px){
  .nav-links{
    display:none;position:absolute;top:calc(100% + .7rem);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.15rem;margin:0;padding:.5rem;border-radius:1.5rem;
    background:rgba(10,10,12,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.85rem 1rem;border-radius:1rem;font-size:1rem;color:rgba(255,255,255,.72)}
  .nav-links a:hover{background:rgba(255,255,255,.04)}
  .nav-links a.active{background:rgba(229,196,110,.07);color:#fff}
  .nav-links a.active::after{left:auto;right:1.1rem;bottom:50%;transform:translateY(50%)}
  .nav-links .only-mobile{display:block}
  .menu-btn{display:block}
  .nav-inner{justify-content:space-between}
  .nav-online{display:none}
  .nav-discord{display:none}
  .philo-stats{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:720px){
  .pad{padding:5rem 0}
  .hero{padding:8.2rem 0 4rem}
  .page-hero{padding:8.8rem 0 3.5rem}
  .frame{margin-top:3.2rem}
  .stat-cards{grid-template-columns:1fr}
  .stat-card{flex-direction:row;align-items:center;gap:1rem;padding:1.1rem 1.25rem;border-radius:calc(2rem - 14px)}
  .stat-card .sc-lbl{flex:1}
  .stat-card .sc-val{font-size:1.6rem}
  .feat-grid{grid-template-columns:1fr}
  .feat{padding:1.8rem 1.6rem}
  .cta-box{padding:4.2rem 1.25rem;border-radius:1.6rem}
  .user-name{display:none}
  .btn-sm .btn-txt{display:none}
  .btn-sm{padding:.55rem}
  .btn-sm#loginBtn .btn-txt{display:inline}
  .btn-sm#loginBtn{padding:.55rem .9rem}
  .rw-tabs{border-radius:1.4rem;width:100%}
  .rw-tab{flex:1 1 auto}
  .rw-body .rule{padding:1.3rem 1.25rem 1.4rem}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .philo-stats{gap:.8rem}
  .philo-stats .cell{padding:1.6rem 1rem}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
  .hero-cta .btn{width:100%;max-width:22rem}
  .btn-arr{justify-content:space-between}
}
@media (max-width:380px){
  .brand-txt{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.reveal,.js .hero.home .hero-inner>*,.js .hero.home .frame{opacity:1;transform:none}
  .gild,.shine-gold{background-position:100% 0}
}