/* ============================================================
   FALLEN STATE — Stylesheet
   Design-System: HUD-Panels, Neon-Grün auf Schwarz, Oswald lokal
   ============================================================ */

/* ---------- 1. Lokale Font-Einbindung (Oswald, self-hosted) ---------- */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-200-normal.woff2") format("woff2"),
       url("../fonts/oswald-latin-200-normal.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-300-normal.woff2") format("woff2"),
       url("../fonts/oswald-latin-300-normal.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"),
       url("../fonts/oswald-latin-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"),
       url("../fonts/oswald-latin-500-normal.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2"),
       url("../fonts/oswald-latin-600-normal.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-700-normal.woff2") format("woff2"),
       url("../fonts/oswald-latin-700-normal.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Design-Tokens ---------- */
:root{
  --neon:        #00ff80;   /* Primär-Neon-Grün */
  --neon-2:      #00cc66;   /* Sekundär-Grün */
  --dark-green:  #003322;   /* Dunkelgrün-Basis */
  --black:       #0d0d0d;   /* Schwarz-Basis */
  --concrete:    #2a2a2a;   /* Beton-Grau */
  --warn:        #ff4040;   /* Warn-Rot */
  --smoke:       #1a2a1f;   /* Rauch-Grau-Grün */
  --glow:        #00ff99;   /* Glow-Akzent */
  --text:        #e5e5e5;
  --text-dim:    #cccccc;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --radius: 2px;
  --panel-shadow: 0 0 0 1px rgba(0,255,128,.08), 0 20px 60px rgba(0,0,0,.6);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family: var(--font-display);
  font-weight:300;
  letter-spacing:.01em;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 .5em;
  color:#fff;
}
a{color:var(--neon); text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--neon); color:#001a0d;}

/* subtle grain overlay across whole page */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- 3. Utility bar / top nav ---------- */
.topbar{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  background:rgba(13,13,13,.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,255,128,.15);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.12em; color:var(--text);}
.brand:hover{color:var(--text);}
.brand img{height:34px; width:auto; filter:drop-shadow(0 0 6px rgba(0,255,128,.4));}
.brand .state{color:var(--neon-2);}
.nav-links{display:flex; gap:26px; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;}
.nav-links a{color:var(--text-dim); position:relative; padding:4px 0;}
.nav-links a:hover, .nav-links a.active{color:var(--neon);}
.nav-links a:hover::after, .nav-links a.active::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--neon); box-shadow:0 0 8px var(--neon);
}
.nav-toggle{display:none; background:none; border:1px solid var(--neon-2); color:var(--neon); padding:6px 10px; font-family:var(--font-mono);}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:56px 0 auto 0; flex-direction:column; gap:0;
    background:var(--black); border-bottom:1px solid var(--concrete);
    transform:translateY(-120%); transition:transform .35s var(--ease);
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:14px 28px; border-bottom:1px solid rgba(255,255,255,.05);}
  .nav-toggle{display:block;}
}

/* ---------- 4. HUD panel system ---------- */
.panel{
  position:relative;
  background:linear-gradient(180deg, rgba(0,51,34,.35), rgba(13,13,13,.9));
  border:1px solid rgba(0,255,128,.18);
  box-shadow:var(--panel-shadow);
  padding:32px;
}
.panel::before,.panel::after,
.panel .corner-tl,.panel .corner-br{
  content:""; position:absolute; width:14px; height:14px;
  border-color:var(--neon); border-style:solid;
}
.panel::before{top:-1px; left:-1px; border-width:2px 0 0 2px;}
.panel::after{bottom:-1px; right:-1px; border-width:0 2px 2px 0;}

.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--neon-2); text-transform:uppercase; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:"//"; color:var(--neon);}

/* ---------- 5. Buttons / inputs ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--neon-2); color:#001a0d; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; font-size:.85rem;
  padding:13px 26px; border:none; cursor:pointer;
  transition:box-shadow .25s var(--ease), transform .2s var(--ease), background .2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn:hover{background:var(--neon); box-shadow:0 0 24px rgba(0,255,128,.55); transform:translateY(-1px);}
.btn:focus-visible{outline:2px solid var(--neon); outline-offset:3px;}
.btn.ghost{
  background:transparent; color:var(--neon); border:1px solid var(--neon-2);
}
.btn.ghost:hover{background:rgba(0,255,128,.08);}
.btn.warn{background:var(--warn); color:#1a0000;}

input,textarea,select{
  background:var(--black); color:var(--text);
  border:1px solid var(--concrete); padding:11px 14px;
  font-family:var(--font-display); font-size:.95rem;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(0,255,128,.18);
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  padding-top:0; overflow:hidden;
}
.hero-media{
  position:relative;
  width:100%;
  aspect-ratio: 1536 / 828;
  max-height:86vh;
  overflow:hidden;
}
.hero-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  animation:hero-kenburns 24s ease-out forwards;
}
@keyframes hero-kenburns{
  0%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,0) 62%, rgba(13,13,13,.55) 85%, var(--black) 100%);
  pointer-events:none;
}
.hero-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(13,13,13,.35) 0%, transparent 18%);
  pointer-events:none;
}
.hero-top-fade{
  position:absolute; top:0; left:0; right:0; height:120px; z-index:2;
  background:linear-gradient(180deg, rgba(13,13,13,.65), transparent);
  pointer-events:none;
}

.hero-copy{
  position:relative; z-index:2; margin-top:-96px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 24px;
}
.hero-copy p.tagline{
  font-family:var(--font-mono); font-weight:400; color:var(--text-dim);
  font-size:.95rem; letter-spacing:.06em; max-width:600px; margin:0 0 30px;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}

.hud-stats{
  position:relative; z-index:2;
  margin:48px auto 0; display:flex; gap:0; flex-wrap:wrap; justify-content:center;
  border:1px solid rgba(0,255,128,.18); max-width:fit-content;
}
@media (prefers-reduced-motion:reduce){
  .hero-media img{animation:none;}
}
@media (max-width:700px){
  .hero-media{aspect-ratio:16/14; max-height:70vh;}
  .hero-copy{margin-top:-60px;}
}
.hud-stat{
  font-family:var(--font-mono); padding:14px 26px; text-align:left;
  border-right:1px solid rgba(0,255,128,.18);
}
.hud-stat:last-child{border-right:none;}
.hud-stat .v{color:var(--neon); font-size:1.3rem; display:block;}
.hud-stat .l{color:var(--text-dim); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;}

/* boot sequence */
#boot{
  position:fixed; inset:0; z-index:10000; background:var(--black);
  color:var(--neon); font-family:var(--font-mono); font-size:.9rem;
  padding:40px; display:flex; flex-direction:column; justify-content:flex-end;
  transition:opacity .5s var(--ease);
}
#boot.hide{opacity:0; pointer-events:none;}
#boot .line{opacity:0; animation:appear .25s forwards;}
@keyframes appear{ to{opacity:1;} }
@media (prefers-reduced-motion:reduce){
  #boot{display:none;}
}

/* ---------- 7. Sections generic ---------- */
section{padding:96px 24px;}
.wrap{max-width:1140px; margin:0 auto;}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);}
.grid{display:grid; gap:24px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr;} }

.feature-card h3{font-size:1.05rem; color:var(--neon-2); display:flex; align-items:center; gap:10px;}
.feature-card p{color:var(--text-dim); font-size:.92rem;}

/* ---------- 8. Regelwerk (tabs + chapters) ---------- */
.rw-tabs{display:flex; gap:2px; flex-wrap:wrap; margin-bottom:0;}
.rw-tab{
  font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  padding:12px 20px; background:var(--concrete); color:var(--text-dim); border:none; cursor:pointer;
}
.rw-tab.active{background:var(--dark-green); color:var(--neon); box-shadow:inset 0 -2px 0 var(--neon);}
.rw-body{display:grid; grid-template-columns:260px 1fr; gap:0; border:1px solid rgba(0,255,128,.18);}
@media (max-width:760px){ .rw-body{grid-template-columns:1fr;} }

.rw-chapters{background:rgba(0,51,34,.25); border-right:1px solid rgba(0,255,128,.12); padding:10px;}
.rw-chapters button{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--text-dim);
  font-family:var(--font-display); padding:11px 12px; cursor:pointer; font-size:.92rem;
  border-left:2px solid transparent;
}
.rw-chapters button:hover{color:var(--text); background:rgba(0,255,128,.05);}
.rw-chapters button.active{color:var(--neon); border-left-color:var(--neon); background:rgba(0,255,128,.08);}
.rw-chapters .num{font-family:var(--font-mono); color:var(--neon-2); margin-right:8px; font-size:.75rem;}

.rw-content{padding:36px 40px;}
.rw-content h3{color:var(--neon); font-size:1.4rem;}
.rw-content ol,.rw-content ul{padding-left:1.2em; color:var(--text-dim);}
.rw-content li{margin-bottom:.6em;}
.rw-content li::marker{color:var(--neon-2); font-family:var(--font-mono);}

/* ---------- 9. FAQ accordion ---------- */
.faq-item{border-bottom:1px solid rgba(0,255,128,.15);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--text);
  font-family:var(--font-display); font-size:1.02rem; padding:20px 4px;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.faq-q:hover{color:var(--neon);}
.faq-q .ind{font-family:var(--font-mono); color:var(--neon-2); transition:transform .25s;}
.faq-item.open .ind{transform:rotate(45deg); color:var(--neon);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease);}
.faq-a p{color:var(--text-dim); padding:0 4px 20px; font-size:.94rem;}

/* ---------- 10. Wiki cards ---------- */
.wiki-card{
  padding:22px; background:rgba(0,51,34,.2); border:1px solid rgba(0,255,128,.15);
  transition:border-color .2s, transform .2s;
}
.wiki-card:hover{border-color:var(--neon); transform:translateY(-3px);}
.wiki-card .tag{font-family:var(--font-mono); font-size:.68rem; color:var(--neon-2); text-transform:uppercase;}

/* ---------- 10b. Wiki-Artikelseiten ---------- */
.breadcrumb{
  font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim);
  letter-spacing:.05em; margin-bottom:28px;
}
.breadcrumb a{color:var(--neon-2);}
.breadcrumb a:hover{color:var(--neon);}
.breadcrumb .sep{margin:0 8px; color:var(--concrete);}
.breadcrumb .current{color:var(--text);}

.wiki-layout{display:grid; grid-template-columns:260px 1fr; gap:0; border:1px solid rgba(0,255,128,.18);}
@media (max-width:820px){ .wiki-layout{grid-template-columns:1fr;} }

.wiki-side{background:rgba(0,51,34,.25); border-right:1px solid rgba(0,255,128,.12); padding:22px 10px;}
.wiki-side h4{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--neon-2); padding:0 12px; margin-bottom:10px;
}
.wiki-side ul{list-style:none; margin:0 0 22px; padding:0;}
.wiki-side li a{
  display:block; padding:9px 12px; color:var(--text-dim); font-size:.9rem;
  border-left:2px solid transparent;
}
.wiki-side li a:hover{color:var(--text); background:rgba(0,255,128,.05);}
.wiki-side li a.active{color:var(--neon); border-left-color:var(--neon); background:rgba(0,255,128,.08);}

.wiki-article{padding:40px 44px;}
.wiki-article .tag{font-family:var(--font-mono); font-size:.7rem; color:var(--neon-2); text-transform:uppercase; letter-spacing:.1em;}
.wiki-article h1{font-size:clamp(1.6rem,3.5vw,2.2rem); margin-top:.3em;}
.wiki-meta{
  display:flex; gap:18px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.72rem;
  color:var(--text-dim); border-bottom:1px solid rgba(0,255,128,.12); padding-bottom:18px; margin-bottom:28px;
}
.wiki-meta span{color:var(--neon-2);}

.toc{
  background:rgba(0,51,34,.2); border:1px solid rgba(0,255,128,.15); padding:18px 20px;
  margin-bottom:32px; max-width:420px;
}
.toc .eyebrow{margin-bottom:8px;}
.toc ol{margin:0; padding-left:1.2em; font-size:.88rem;}
.toc a{color:var(--text-dim);}
.toc a:hover{color:var(--neon);}

.wiki-article h2{
  color:var(--neon); font-size:1.25rem; margin-top:2.2em; padding-top:.3em;
  border-top:1px solid rgba(0,255,128,.1);
}
.wiki-article h2:first-of-type{border-top:none; margin-top:0;}
.wiki-article p, .wiki-article li{color:var(--text-dim); font-size:.96rem;}
.wiki-article table{width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.9rem;}
.wiki-article th{
  font-family:var(--font-mono); text-align:left; color:var(--neon-2); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; border-bottom:1px solid var(--neon-2);
}
.wiki-article td{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); color:var(--text-dim);}
.wiki-article tr:hover td{color:var(--text); background:rgba(0,255,128,.03);}

.callout{
  border-left:2px solid var(--neon); background:rgba(0,255,128,.06);
  padding:12px 18px; margin:1.4em 0; font-size:.9rem; color:var(--text-dim);
}
.callout strong{color:var(--neon);}

/* Callout-Varianten für Regelwerk-Hinweisboxen (ehem. Wiki.js .is-info etc.) */
.callout.is-info{
  border-left-color:var(--neon-2); background:rgba(0,204,102,.06);
}
.callout.is-info strong{color:var(--neon-2);}

.callout.is-success{
  border-left-color:var(--glow); background:rgba(0,255,153,.09);
}
.callout.is-success strong{color:var(--glow);}

.callout.is-warning{
  border-left-color:var(--warn); background:rgba(255,64,64,.05);
}
.callout.is-warning strong{color:var(--warn);}

.callout.is-danger{
  border-left-color:var(--warn); background:rgba(255,64,64,.1);
  box-shadow:inset 0 0 0 1px rgba(255,64,64,.15);
}
.callout.is-danger strong{color:var(--warn);}

.wiki-footer-nav{
  display:flex; justify-content:space-between; gap:16px; margin-top:40px;
  padding-top:20px; border-top:1px solid rgba(0,255,128,.12);
  font-family:var(--font-mono); font-size:.8rem;
}
.wiki-footer-nav a{color:var(--text-dim);}
.wiki-footer-nav a:hover{color:var(--neon);}

/* ---------- 11. Footer ---------- */
footer{
  border-top:1px solid rgba(0,255,128,.12); padding:48px 24px 32px; margin-top:60px;
  font-size:.85rem; color:var(--text-dim);
}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--neon);}
.legal-links{display:flex; gap:20px; flex-wrap:wrap;}

/* ---------- 12. Cookie banner ---------- */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:2000;
  max-width:640px; margin:0 auto;
  background:rgba(13,13,13,.97); border:1px solid var(--neon-2);
  box-shadow:0 0 30px rgba(0,0,0,.6), 0 0 40px rgba(0,255,128,.08);
  padding:22px 24px; transform:translateY(140%); transition:transform .4s var(--ease);
}
#cookie-banner.show{transform:translateY(0);}
#cookie-banner p{font-size:.86rem; color:var(--text-dim); margin:0 0 14px;}
.cookie-actions{display:flex; gap:12px; flex-wrap:wrap;}
.cookie-actions .btn{padding:10px 18px; font-size:.78rem;}

/* ---------- 13. Legal page content ---------- */
.legal h2{color:var(--neon); margin-top:2em;}
.legal p, .legal li{color:var(--text-dim); font-size:.95rem;}
.legal address{font-style:normal; color:var(--text-dim);}
.placeholder-note{
  border-left:2px solid var(--warn); padding:10px 16px; background:rgba(255,64,64,.08);
  font-family:var(--font-mono); font-size:.8rem; color:#ffb3b3; margin:1.5em 0;
}

/* skip link for a11y */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--neon); color:#001a0d;
  padding:10px 16px; z-index:10001;
}
.skip-link:focus{left:16px; top:16px;}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}