/* ST4R — st4r.dev
   Farbwelt aus dem ST4R-Banner: Navy, Royalblau, weißer Stern.
   Nur HTML und CSS, im Browser läuft kein JavaScript. */

:root{
  --navy:#0F1530;
  --deep:#080C1E;
  --panel:#111737;
  --blue:#3D4FE0;
  --blue-2:#5566EE;
  --ink:#AEB7DA;
  --ink-2:#7C87B4;
  --line:rgba(120,140,220,.14);
  --line-2:rgba(120,140,220,.32);
}

*{ box-sizing:border-box }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--deep);
  color:#fff;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Hintergrund: Höhenlinien und Sternenfeld wie auf dem Banner.
   Eigenes Element statt Pseudo-Element mit negativem z-index — das wird
   sonst je nach Browser vom Seitenhintergrund verdeckt. */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    url("/assets/stars.svg") center/cover no-repeat,
    url("/assets/topo.svg") center/cover no-repeat,
    linear-gradient(170deg,#141B35 0%, #0A0E20 55%, #06091A 100%);
}

/* die schrägen Lichtbänder vom Banner */
.bg::after{
  content:"";
  position:absolute; inset:-10% -20%;
  background:linear-gradient(101deg,
    transparent 40%, rgba(5,7,16,.5) 40%, rgba(5,7,16,.5) 52%,
    rgba(5,7,16,.26) 52%, rgba(5,7,16,.26) 60%, transparent 60%);
}

.nav, .wrap, .foot{ position:relative; z-index:1 }

a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }

/* ---------------------------------------------------------- Kopfzeile */

.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:14px clamp(18px,5vw,56px);
  background:rgba(8,12,30,.8);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.brand{ display:flex; align-items:center; gap:11px }
.brand img{ width:32px; height:32px }
.brand span{
  font-family:'Montserrat',sans-serif; font-weight:800;
  letter-spacing:.2em; font-size:.92rem;
}

.nav-links{ display:flex; align-items:center; gap:20px; font-size:.88rem; color:var(--ink) }
.nav-links a:hover{ color:#fff }
.nav-links a.on{ color:#fff; border-bottom:2px solid var(--blue); padding-bottom:2px }

/* ---------------------------------------------------------- Inhalt */

.wrap{
  flex:1;
  width:100%; max-width:1120px; margin:0 auto;
  padding:clamp(28px,5vw,60px) clamp(18px,5vw,40px) 70px;
}

/* Startseite: großes animiertes Logo */

.hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(24px,6vw,64px) 0 clamp(34px,6vw,70px);
}

/* weicher Schein hinter dem Logo - als eigene Fläche, nicht als Filter auf dem
   GIF (ein Filter zeichnet sonst einen sichtbaren Kasten um das Bild) */
.hero::before{
  content:"";
  position:absolute; top:clamp(10px,4vw,44px); left:50%;
  width:min(60vw,430px); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(61,79,224,.28), transparent 62%);
  pointer-events:none;
}

.hero-logo{
  position:relative;
  width:clamp(150px,22vw,232px); height:auto;
}

.wordmark{
  margin:clamp(14px,2.5vw,26px) 0 0;
  font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:clamp(2.4rem,7vw,4.4rem); line-height:1;
  letter-spacing:.3em; text-indent:.3em;
  text-shadow:-0.008em 0 rgba(226,40,70,.3), 0.008em 0 rgba(64,110,255,.34);
}

.tagline{
  margin:clamp(12px,2vw,20px) 0 0;
  font-size:.82rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(174,183,218,.72);
}

/* Abschnitts-Kopf */

.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-bottom:14px; margin-bottom:20px;
  border-bottom:1px solid var(--line);
}

h1.big{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:3rem; margin:0 0 10px }
h2{ margin:0; font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:-.01em }
.sec-head p{ margin:0; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2) }

/* Modul-Kacheln */

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px }

.card{
  display:flex; flex-direction:column; gap:8px;
  padding:20px 20px 18px;
  border:1px solid var(--line); border-radius:13px;
  background:linear-gradient(165deg,var(--panel),#090D22);
  transition:transform .18s ease, border-color .18s ease;
}

.card:hover{ transform:translateY(-3px); border-color:var(--line-2) }
.card h3{ margin:0; font-size:1.02rem; font-weight:600 }
.card p{ margin:0; font-size:.87rem; line-height:1.6; color:var(--ink) }
.card-go{ margin-top:6px; font-size:.8rem; color:var(--blue-2) }

/* noch keine Module */

.empty-box{
  padding:44px 26px; text-align:center;
  border:1px dashed var(--line-2); border-radius:13px;
  background:rgba(17,23,55,.4);
}

.empty{ margin:0; color:var(--ink); font-size:.98rem }
.empty-sub{ margin:8px 0 0; color:var(--ink-2); font-size:.85rem }

/* Knöpfe */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 21px; border-radius:9px;
  background:var(--blue); color:#fff; font-weight:600; font-size:.89rem;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--blue-2); transform:translateY(-1px) }

/* ---------------------------------------------------------- Fußzeile */

.foot{
  display:flex; align-items:center; gap:10px;
  padding:18px clamp(18px,5vw,56px);
  border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-2);
  background:rgba(8,12,30,.6);
}

.foot-name{ letter-spacing:.16em; font-weight:600; color:var(--ink) }
.sep{ opacity:.5 }
.foot-right{ margin-left:auto; color:var(--ink) }
.foot-right:hover{ color:#fff }

/* ---------------------------------------------------------- Handy */

@media (max-width:640px){
  .nav{ gap:14px }
  .nav-links{ width:100%; overflow-x:auto; padding-bottom:2px }
  .wordmark{ letter-spacing:.24em; text-indent:.24em }
}

@media (prefers-reduced-motion:reduce){
  .card, .btn{ transition:none }
}