:root{
  --void:#020711;
  --panel:#041624;
  --panel-2:#061d30;
  --line:rgba(31,166,255,.4);
  --line-soft:rgba(159,206,255,.1);
  --ink:#edf8ff;
  --ink-dim:#8fa9bd;
  --ink-faint:#5c7186;
  --brand:#159cff;
  --brand-bright:#4fc3ff;
  --f-asche:#c2410c;
  --f-schatten:#8b5cf6;
  --f-allianz:#f43f5e;
  --f-symb:#10b981;
  --f-pirat:#f59e0b;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Libre Franklin',-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--void);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}
#dust{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.9}
a{color:inherit}
img{max-width:100%;display:block}

/* Anker unter der sticky Topbar nicht verdecken */
#fraktionen,#wege,#galaxie,#chronik,#rangliste,#berichte{scroll-margin-top:88px}

header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 44px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(2,7,17,.8);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
}
.wordmark{
  font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.01em;
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
}
.wordmark .sigil{width:26px;height:26px;border-radius:8px;object-fit:cover;flex-shrink:0;box-shadow:0 0 12px rgba(21,156,255,.5)}
nav{display:flex;gap:34px;font-size:14px;color:var(--ink-dim)}
nav a{text-decoration:none;transition:color .2s;position:relative;padding-bottom:2px}
nav a:hover,nav a.active{color:var(--ink)}
nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--brand)}
.actions{display:flex;gap:12px}
.btn{
  font-family:var(--sans);font-size:13px;font-weight:600;
  padding:10px 20px;border:1px solid var(--line);text-decoration:none;
  transition:.2s;display:inline-block;cursor:pointer;
}
.btn-ghost{color:var(--ink-dim);border-color:var(--line-soft);background:transparent}
.btn-ghost:hover{color:var(--ink);border-color:var(--line)}
.btn-fill{background:linear-gradient(#2aa8ff,#0b6fd1);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 0 18px rgba(21,156,255,.3)}
.btn-fill:hover{box-shadow:0 0 26px rgba(21,156,255,.55)}

/* ---- Hero (echtes Planetenfoto, volle Breite) ---- */
.hero-shell{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero-photo{
  position:absolute;inset:-40px;
  background-image:url('/assets/backgrounds/login.jpg');background-size:cover;background-position:55% 45%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 32%,#000 58%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 32%,#000 58%);
  filter:saturate(1.15) brightness(1.05);
}
.hero-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(21,156,255,.2),transparent 55%);mix-blend-mode:screen}
.hero{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;
  padding:90px 44px 100px;max-width:1360px;margin:0 auto;
  align-items:start;
}
.hero-copy{opacity:0;animation:rise .9s ease-out .1s forwards}
.hero-dispatch{opacity:0;animation:rise .9s ease-out .3s forwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.kicker{font-family:var(--mono);font-size:12px;color:var(--brand-bright);letter-spacing:.03em;margin-bottom:22px}
.hero h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(38px,4.4vw,58px);
  line-height:1.06;letter-spacing:-.01em;max-width:14ch;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--brand-bright)}
.hero-sub{margin-top:26px;font-size:17px;color:var(--ink-dim);max-width:46ch;line-height:1.6}
.hero-actions{margin-top:36px;display:flex;gap:14px;align-items:center}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}

.dispatch-card{
  border:1px solid var(--line);background:rgba(4,22,36,.9);backdrop-filter:blur(6px);
  padding:26px 26px 22px;position:relative;
}
.dispatch-card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--fc,var(--f-symb))}
.dispatch-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.04em}
.dispatch-head b{color:var(--fc,var(--brand-bright));font-weight:600}
.dispatch-body{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink)}
.dispatch-coord{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.dispatch-coord span:first-child{color:var(--fc,var(--f-symb))}

/* ---- Section shell ---- */
section{max-width:1360px;margin:0 auto;padding:0 44px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;padding-top:90px;border-top:1px solid var(--line-soft)}
.section-head h2{font-family:var(--serif);font-weight:600;font-size:28px}
.section-head p{color:var(--ink-dim);font-size:14px;margin-top:6px}
.section-head .see-all{font-size:13px;color:var(--brand-bright);text-decoration:none;font-family:var(--mono);white-space:nowrap}
.section-head .see-all:hover{color:var(--ink)}

/* ---- Factions ---- */
.factions{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft)}
.faction{padding:30px 26px 8px;border-left:1px solid var(--line-soft)}
.faction:first-child{border-left:none}
.faction-top{height:3px;margin:-30px -26px 22px;background:var(--fc);box-shadow:0 0 10px var(--fc)}
.faction-sym{font-size:26px;margin-bottom:14px}
.faction h3{font-family:var(--serif);font-weight:600;font-size:19px;margin-bottom:4px}
.faction .leader{font-family:var(--mono);font-size:11px;color:var(--fc);margin-bottom:14px}
.faction p{font-size:13.5px;color:var(--ink-dim);line-height:1.6}
.faction .hq{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}

/* ---- Pillars (echte Spiel-Bilder) ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft)}
.pillar{padding:34px 30px 34px 0;border-left:1px solid var(--line-soft);padding-left:30px}
.pillar:first-child{border-left:none;padding-left:0}
.pillar-art{height:96px;display:flex;align-items:center;margin-bottom:18px}
.pillar-art img{max-height:88px;filter:drop-shadow(0 0 16px rgba(21,156,255,.45))}
.pillar h3{font-family:var(--serif);font-weight:600;font-size:19px;margin-bottom:10px}
.pillar p{font-size:14px;color:var(--ink-dim);line-height:1.65;max-width:34ch}

/* ---- Galaxy register ---- */
.register{display:grid;grid-template-columns:.62fr .38fr;gap:56px;align-items:start}
.register-map{border:1px solid var(--line-soft);background:radial-gradient(circle at 50% 45%,rgba(21,156,255,.08),transparent 60%);height:340px;position:relative;overflow:hidden}
.register-map svg{position:absolute;inset:0;width:100%;height:100%}
.register-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-soft)}
.reg-stat{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.reg-stat:nth-child(odd){padding-right:20px;border-right:1px solid var(--line-soft)}
.reg-stat:nth-child(even){padding-left:20px}
.reg-stat b{display:block;font-family:var(--mono);font-size:30px;font-weight:500;color:var(--brand-bright)}
.reg-stat span{font-size:12px;color:var(--ink-dim);margin-top:4px;display:block}
.register-cta{margin-top:24px;font-size:13.5px;color:var(--ink-dim);line-height:1.6}
.register-cta a{color:var(--brand-bright);text-decoration:none;font-weight:600}

/* ---- Chronicle ledger ---- */
.ledger{border-top:1px solid var(--line-soft)}
.ledger-row{display:grid;grid-template-columns:14px 130px 1fr auto;gap:20px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.ledger-mark{width:8px;height:8px;border-radius:50%;background:var(--fc);box-shadow:0 0 8px var(--fc)}
.ledger-coord{font-family:var(--mono);font-size:11.5px;color:var(--fc)}
.ledger-text{font-size:14.5px;color:var(--ink)}
.ledger-time{font-family:var(--mono);font-size:11px;color:var(--ink-faint);white-space:nowrap}

/* ---- Rankings ---- */
.standings{border-top:1px solid var(--line-soft)}
.standing-row{display:grid;grid-template-columns:40px 1fr auto;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.standing-row.top{border-bottom:1px solid var(--brand)}
.st-rank{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--ink-faint)}
.standing-row.top .st-rank{color:var(--brand-bright)}
.st-name{font-size:14.5px}
.st-score{font-family:var(--mono);font-size:14px;color:var(--ink-dim)}
.standing-row.top .st-score{color:var(--brand-bright)}

/* ---- Field reports (Entwicklerlog) ---- */
.reports{border-top:1px solid var(--line-soft);display:grid;gap:0;max-height:372px;overflow-y:auto}
.reports::-webkit-scrollbar{width:6px}
.reports::-webkit-scrollbar-thumb{background:rgba(21,156,255,.35);border-radius:3px}
.reports::-webkit-scrollbar-track{background:transparent}
.report{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:22px 4px 22px 0;border-bottom:1px solid var(--line-soft)}
.report-tag{font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding-top:2px}
.report-tag.feature{color:var(--f-symb)}
.report-tag.balancing{color:var(--brand-bright)}
.report-tag.bugfix{color:var(--f-allianz)}
.report-tag.content{color:var(--f-schatten)}
.report h3{font-family:var(--serif);font-weight:600;font-size:16.5px;margin-bottom:6px}
.report p{font-size:13.5px;color:var(--ink-dim);line-height:1.6}
.report time{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}

/* ---- Footer ---- */
footer{margin-top:110px;border-top:1px solid var(--line-soft);padding:34px 44px;display:flex;justify-content:space-between;align-items:center;max-width:1360px;margin-left:auto;margin-right:auto;font-size:12.5px;color:var(--ink-faint);gap:20px;flex-wrap:wrap}
footer .motto{font-family:var(--serif);font-style:italic;color:var(--ink-dim)}
.cookie-settings-link{color:var(--ink-faint);text-decoration:underline;font-size:11.5px}
/* T-102: rechtliche Pflichtseiten -- eigene, kleine Link-Gruppe im Footer */
footer .legal-links{display:flex;gap:16px;flex-wrap:wrap}
footer .legal-links a{color:var(--ink-faint);text-decoration:none;font-size:11.5px}
footer .legal-links a:hover{text-decoration:underline;color:var(--ink-dim)}

/* ---- Cookie-Banner (DSGVO/TTDSG) ---- */
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;max-width:640px;margin:0 auto;background:var(--panel-2);border:1px solid var(--brand);border-radius:8px;padding:20px 24px;box-shadow:0 10px 40px rgba(0,0,0,.5);z-index:200;display:none}
.cookie-banner.show{display:block}
.cookie-banner p{font-size:13px;line-height:1.6;color:var(--ink-dim);margin-bottom:14px}
.cookie-banner-actions{display:flex;gap:10px;justify-content:flex-end}

/* ---- Loading-Platzhalter für async befüllte Listen ---- */
.loading-row{padding:20px 0;color:var(--ink-faint);font-size:13px;font-family:var(--mono)}

/* ---- Responsive ---- */
@media(max-width:980px){
  header{padding:18px 24px}nav{display:none}
  .hero{grid-template-columns:1fr;padding:50px 24px 70px;gap:40px}
  section{padding:0 24px}
  .factions,.pillars{grid-template-columns:1fr 1fr}
  .faction:nth-child(2),.pillar:nth-child(2){border-left:1px solid var(--line-soft)}
  .faction:nth-child(odd),.pillar:nth-child(odd){padding-left:0}
  .register{grid-template-columns:1fr}
  footer{flex-direction:column;gap:10px;text-align:center}
}
@media(max-width:600px){
  .factions,.pillars{grid-template-columns:1fr}
  .faction,.pillar{border-left:none !important;padding-left:0 !important;border-top:1px solid var(--line-soft)}
  .faction:first-child,.pillar:first-child{border-top:none}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px}
  .ledger-row{grid-template-columns:14px 1fr;grid-template-areas:"mark text" ". coord" ". time"}
  .ledger-coord,.ledger-time{grid-column:2}
  .actions .btn-ghost{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy,.hero-dispatch{animation:none;opacity:1}
}