/* GLOBALE STYLES */

/* SCHRIFTEN (selbst gehostet, siehe /fonts) */
@font-face{
  font-family:'Inter'; src:url('../fonts/Inter-Variable.woff') format('woff');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk'; src:url('../fonts/SpaceGrotesk-Variable.woff') format('woff');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Variable.woff') format('woff');
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* DESIGN-TOKENS (Farben) */
:root{
  --bg: #0A1420;
  --bg-2: #0D1B2A;
  --line: #2C4A6E;
  --line-bright: #47749E;
  --accent: #5EEAD4;
  --accent-soft: rgba(94,234,212,0.12);
  --accent-2: #FFB454;
  --text: #EAF2F8;
  --text-muted: #7C93AC;
  --card-bg: rgba(17,32,52,0.55);
  --border: rgba(94,234,212,0.16);
  --placeholder: #FFB454;
}

/* BASIS-RESET */
*{ margin:0; padding:0; box-sizing:border-box; }
/* Das hidden-Attribut muss sich auch gegen eigene display-Regeln */
[hidden]{ display:none !important; }

/* HAUPTNAVIGATION
   Der Abstand der Navigationspunkte steht bewusst hier und nicht in jeder
   Seiten-CSS einzeln: so ist er ueberall gleich und gilt automatisch auch
   fuer neue Seiten. Die Mobilfassung weiter unten setzt ihn ueber die
   hoehere Spezifitaet (.nav-right .nav-links) wieder auf 0 zurueck. */
.nav-links{ display:flex; align-items:center; gap:28px; }

/* BURGER-MENUE (mobil, unter 960px) */
.nav-right{ display:flex; align-items:center; gap:20px; }

/* BACKEND-LOGIN-LINK */
.nav-link--backend{ opacity:0.5; font-size:12px !important; transition:opacity 0.2s ease; }
.nav-link--backend:hover{ opacity:1; }
.nav-burger{
  display:none; position:relative;
  width:36px; height:36px; background:transparent; border:1px solid var(--border); border-radius:2px;
  cursor:pointer; padding:0; flex:0 0 auto;
}
.nav-burger span{
  position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:var(--text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Drei Linien, exakt auf den Button-Mittelpunkt zentriert — so … */
.nav-burger span:nth-child(1){ transform: translate(-50%,-50%) translateY(-5px); }
.nav-burger span:nth-child(2){ transform: translate(-50%,-50%); }
.nav-burger span:nth-child(3){ transform: translate(-50%,-50%) translateY(5px); }
.nav-burger.open span:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform: translate(-50%,-50%) rotate(-45deg); }

@media (max-width:960px){
  /* Hoehere Spezifitaet */
  .nav-right .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(10,20,32,0.97); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border); padding:8px clamp(20px,5vw,64px) 16px;
  }
  .nav-right .nav-links.open{ display:flex; }
  .nav-right .nav-links .nav-link{ width:100%; padding:14px 0; font-size:14px; border-bottom:1px solid var(--border); }
  .nav-right .nav-links .nav-link:last-child{ border-bottom:none; }
  .nav-burger{ display:flex; }
}

/* TERMINAL-CARET (blinkender Cursor-Block) */
.caret{
  display:inline-block; width:8px; height:13px; background:var(--accent);
  margin-left:7px; vertical-align:-1px;
  animation: caretBlink 1.1s steps(1) infinite;
}
/* Waehrend des Schreibmaschineneffekts (js/start.js) leuchtet der */
.caret.typing{ animation:none; }
@keyframes caretBlink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

/* COOKIE-HINWEIS */
#cookieBanner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  transform: translateY(120%); transition: transform 0.6s cubic-bezier(.16,1,.3,1);
  background: var(--bg-2); border-top:1px solid var(--border);
  padding: 24px clamp(20px,5vw,48px);
}
#cookieBanner.visible{ transform: translateY(0); }
.cookie-inner{ max-width:1080px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cookie-text{ max-width:560px; }
.cookie-text .eyebrow{ margin-bottom:8px; }
.cookie-text p{ font-size:13px; line-height:1.6; color:var(--text-muted); }
.cookie-text a{ color:var(--accent); }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-btn{
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.02em; padding:11px 18px;
  border-radius:2px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cookie-btn:hover{ border-color:var(--accent); }
.cookie-btn.primary{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
.cookie-btn.primary:hover{ opacity:0.9; }
.cookie-settings{ max-width:1080px; margin:20px auto 0; display:none; border-top:1px solid var(--border); padding-top:20px; }
.cookie-settings.open{ display:block; }
.cookie-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; }
.cookie-row + .cookie-row{ border-top:1px solid var(--border); }
.cookie-row-text strong{ font-size:14px; color:var(--text); font-weight:600; }
.cookie-row-text p{ margin-top:4px; font-size:13px; color:var(--text-muted); max-width:520px; }
.switch{ position:relative; width:42px; height:24px; flex:0 0 auto; display:block; cursor:pointer; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .track{ position:absolute; inset:0; background:#20344C; border-radius:999px; transition:background 0.2s ease; }
.switch .thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-muted); transition:transform 0.2s ease, background 0.2s ease; }
.switch input:checked + .track{ background:var(--accent-soft); }
.switch input:checked + .track .thumb{ transform:translateX(18px); background:var(--accent); }
.switch input:disabled + .track{ opacity:0.5; }

/* BACK-TO-TOP-BUTTON */
#backToTop{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:46px; height:46px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--border); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, visibility 0.3s;
  cursor:pointer;
}
#backToTop.visible{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ border-color:var(--accent); }
#backToTop svg{ width:18px; height:18px; display:block; }

/* REDUZIERTE BEWEGUNG (Barrierefreiheit) */
@media (prefers-reduced-motion: reduce){
  .caret{ animation:none !important; }
}