/* TITAN-07 – Webseite. Farben und Schriften wie im Hauptmenue des Spiels. */
@font-face{font-family:"Barlow SC";src:url(/fonts/BarlowSemiCondensed-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(/fonts/BarlowSemiCondensed-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(/fonts/BarlowSemiCondensed-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/fonts/Rajdhani-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/fonts/Rajdhani-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --nacht:#0c1520;      /* Nachthimmel ueber Freihafen */
  --tafel:#132233;      /* HUD-Tafeln */
  --linie:#2b4d63;      /* Rahmen der Tafeln */
  --bernstein:#f4a531;  /* Akzent: Auswahl, Knoepfe */
  --zyan:#5be4f2;       /* Reaktorkern, HUD */
  --text:#e6edf1;
  --grau:#a3b4c1;
  --mass:72rem;
  --rand:clamp(1rem,4vw,2.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--nacht);color:var(--text);font:500 1.125rem/1.6 "Barlow SC",system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--zyan);text-underline-offset:.18em}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--bernstein);outline-offset:3px}
h1,h2,h3{font-family:"Rajdhani",sans-serif;font-weight:700;line-height:1.05;letter-spacing:.01em;margin:0 0 .5em}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:1.6rem}
p{margin:0 0 1em;max-width:62ch}
.inhalt{max-width:var(--mass);margin:0 auto;padding:0 var(--rand)}
.leise{color:var(--grau)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfzeile */
.kopf{position:absolute;z-index:5;inset:0 0 auto 0;display:flex;align-items:center;gap:1.5rem;padding:1rem var(--rand)}
.kopf .marke{font:700 1.35rem "Rajdhani";color:var(--text);text-decoration:none;letter-spacing:.04em}
.kopf nav{margin-left:auto;display:flex;gap:1.25rem;flex-wrap:wrap}
.kopf nav a{color:var(--text);text-decoration:none;font-weight:600}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--bernstein)}
.kopf .sprache{border:1px solid var(--linie);padding:.1rem .5rem}
.seite .kopf{position:static;border-bottom:1px solid var(--linie)}

/* Held: Keyart mit HUD-Rahmen */
.held{position:relative;min-height:min(100svh,62rem);display:grid;align-items:end;isolation:isolate;overflow:hidden}
.held>picture{position:absolute;inset:0;z-index:-2}
.held>img,.held>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:atmen 24s ease-in-out infinite alternate}
@keyframes atmen{from{transform:scale(1.02)}to{transform:scale(1.08) translateY(-1%)}}
.held::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,21,32,.55) 0,rgba(12,21,32,0) 22%,rgba(12,21,32,0) 45%,rgba(12,21,32,.92) 88%,var(--nacht) 100%),linear-gradient(90deg,rgba(12,21,32,.7) 0,rgba(12,21,32,0) 55%)}
.kompass{position:absolute;top:4.4rem;left:50%;transform:translateX(-50%);width:min(38rem,80vw);height:1.6rem;border:1px solid rgba(91,228,242,.55);border-radius:3px;background:repeating-linear-gradient(90deg,rgba(91,228,242,.5) 0 1px,transparent 1px 2.2rem);opacity:.75;display:flex;justify-content:space-around;align-items:center;font:600 .8rem "Barlow SC";color:var(--zyan)}
.ecken{position:absolute;inset:6.5rem var(--rand) 2rem;pointer-events:none;
  background:
   linear-gradient(var(--zyan),var(--zyan)) 0 0/2.2rem 2px,linear-gradient(var(--zyan),var(--zyan)) 0 0/2px 2.2rem,
   linear-gradient(var(--zyan),var(--zyan)) 100% 0/2.2rem 2px,linear-gradient(var(--zyan),var(--zyan)) 100% 0/2px 2.2rem,
   linear-gradient(var(--zyan),var(--zyan)) 0 100%/2.2rem 2px,linear-gradient(var(--zyan),var(--zyan)) 0 100%/2px 2.2rem,
   linear-gradient(var(--zyan),var(--zyan)) 100% 100%/2.2rem 2px,linear-gradient(var(--zyan),var(--zyan)) 100% 100%/2px 2.2rem;
  background-repeat:no-repeat;opacity:.6}
.held .inhalt{width:100%;padding-bottom:clamp(3rem,9vh,6rem)}
.titel{font:700 clamp(4rem,13vw,10rem)/.85 "Rajdhani";letter-spacing:.02em;margin:0;color:#fff;
  text-shadow:-.025em 0 rgba(91,228,242,.7),.025em 0 rgba(244,165,49,.75)}
.titel small{display:block;font-size:.24em;letter-spacing:.55em;color:var(--bernstein);text-shadow:none;margin:.6em 0 0 .15em}
.held p{font-size:clamp(1.15rem,2vw,1.4rem);max-width:36ch;margin:1.4rem 0 1.8rem}
.held .vermerk{position:absolute;right:var(--rand);bottom:1rem;font-size:.85rem;color:var(--grau)}

/* Knopf mit abgeschraegten Ecken wie im Spielmenue */
.knopf{--f:var(--bernstein);display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1.6rem .85rem 1.3rem;background:var(--f);color:#14100a;font:700 1.25rem "Rajdhani";text-decoration:none;letter-spacing:.03em;
  clip-path:polygon(.9rem 0,100% 0,100% calc(100% - .9rem),calc(100% - .9rem) 100%,0 100%,0 .9rem);transition:filter .15s}
.knopf:hover{color:#14100a;filter:brightness(1.12)}
.knopf.zweit{--f:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--linie);clip-path:none}
.knopf.zweit:hover{color:var(--bernstein)}
.knoepfe{display:flex;flex-wrap:wrap;gap:1rem}

/* Abschnitte */
section{padding:clamp(4rem,9vw,7rem) 0}
.pitch p{font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.45;max-width:46ch}
.pitch p+p{font-size:1.15rem;color:var(--grau);max-width:60ch}

/* Merkmal: Bild im HUD-Rahmen + Text */
.merkmal{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(4rem,8vw,6.5rem)}
.merkmal:nth-of-type(even){grid-template-columns:1fr 1.35fr}
.merkmal:nth-of-type(even) figure{order:2}
.merkmal:last-child{margin-bottom:0}
figure{margin:0}
.rahmen{position:relative;padding:.5rem;background:var(--tafel);border:1px solid var(--linie)}
.rahmen::before,.rahmen::after{content:"";position:absolute;width:1.4rem;height:1.4rem;border:2px solid var(--zyan)}
.rahmen::before{top:-3px;left:-3px;border-right:0;border-bottom:0}
.rahmen::after{bottom:-3px;right:-3px;border-left:0;border-top:0}
figcaption{font-size:.9rem;color:var(--grau);margin-top:.5rem}
.merkmal ul{padding-left:1.1rem;margin:0;color:var(--grau)}
.merkmal li{margin:.3rem 0}
.merkmal li::marker{color:var(--bernstein)}

/* Gegner */
.gegner{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:2.5rem 0 1.5rem}
.gegner article{background:var(--tafel);border:1px solid var(--linie)}
.gegner article img{aspect-ratio:16/10;object-fit:cover;width:100%}
.gegner article div{padding:1rem 1.2rem 1.3rem}
.gegner h3{margin:0 0 .3rem}
.gegner p{margin:0;color:var(--grau);font-size:1rem}

/* Zahlenleiste als HUD-Tafel */
.anzeige{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linie);background:var(--tafel);margin-top:3rem}
.anzeige div{padding:1.2rem 1.4rem;border-left:1px solid var(--linie)}
.anzeige div:first-child{border-left:0}
.anzeige b{display:block;font:700 2.6rem/1 "Rajdhani";color:var(--zyan)}
.anzeige span{color:var(--grau);font-size:1rem}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:2rem}
.galerie a{display:block;border:1px solid var(--linie);overflow:hidden}
.galerie a:nth-child(1),.galerie a:nth-child(6){grid-column:span 2;grid-row:span 2}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;transition:transform .3s}
.galerie a:hover img{transform:scale(1.04)}
dialog{padding:0;border:1px solid var(--linie);background:var(--nacht);max-width:min(96vw,1600px)}
dialog::backdrop{background:rgba(5,9,14,.88)}
dialog img{max-height:86vh;width:auto}
dialog form{position:absolute;top:.5rem;right:.5rem}
dialog button{font:600 1rem "Barlow SC";background:var(--tafel);color:var(--text);border:1px solid var(--linie);padding:.3rem .8rem;cursor:pointer}

/* Stand / Systemanforderungen */
.stand{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}
.tabelle{width:100%;border-collapse:collapse;font-size:1rem}
.tabelle th,.tabelle td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle th{color:var(--grau);font-weight:500;width:38%}
.geplant{color:var(--grau);font-size:1rem}
.geplant strong{color:var(--text)}

/* Fuss */
footer{border-top:1px solid var(--linie);padding:2.5rem 0 3rem;color:var(--grau);font-size:1rem}
footer .inhalt{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
footer nav{display:flex;gap:1.25rem;flex-wrap:wrap}
footer a{color:var(--grau)}

/* Unterseiten */
.seite main{padding:3rem 0 5rem}
.seite main h1{font-size:clamp(2.4rem,6vw,4rem)}
.text{max-width:46rem}
.text h2{font-size:1.8rem;margin-top:2.2rem}
.text h3{font-size:1.3rem;margin-top:1.6rem}
.text li{margin:.3rem 0}
.platzhalter{background:#5a2a10;color:#ffd7a8;padding:0 .3em}
.presse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.5rem 0}
.presse-grid a{border:1px solid var(--linie);display:block}
.fakten{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem}
.beitrag-kopf img{border:1px solid var(--linie);margin:1.5rem 0 2rem;width:100%}
.beitraege{display:grid;gap:1.25rem;margin-top:2rem}
.beitraege a{display:grid;grid-template-columns:16rem 1fr;gap:1.4rem;align-items:center;text-decoration:none;color:var(--text);background:var(--tafel);border:1px solid var(--linie)}
.beitraege a:hover h2{color:var(--bernstein)}
.beitraege img{aspect-ratio:16/9;object-fit:cover;height:100%}
.beitraege h2{font-size:1.6rem;margin:.6rem 0 .3rem}
.beitraege p{color:var(--grau);font-size:1rem;margin:0 0 .8rem}

@media (max-width:860px){
  .merkmal,.merkmal:nth-of-type(even),.stand,.fakten{grid-template-columns:1fr}
  .merkmal:nth-of-type(even) figure{order:0}
  .gegner{grid-template-columns:1fr}
  .anzeige{grid-template-columns:repeat(2,1fr)}
  .anzeige div:nth-child(3){border-left:0}
  .anzeige div:nth-child(n+3){border-top:1px solid var(--linie)}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .presse-grid{grid-template-columns:repeat(2,1fr)}
  .beitraege a{grid-template-columns:1fr}
  .kompass{display:none}
  .kopf nav{gap:.9rem;font-size:1rem}
  .kopf .marke{display:none}
  .held .vermerk{position:static;padding:0 var(--rand) 1rem}
}
.ohne-oben{padding-top:0}
.presse-zip{margin:1.5rem 0 2.5rem}
h2.abstand{margin-top:2.5rem}
.logos a{background:var(--nacht);padding:1.5rem}

@media (max-width:700px){.held p{text-shadow:0 0 3px var(--nacht),0 1px 14px var(--nacht),0 1px 24px var(--nacht)}}