:root{
  --bg: #0b0d12;
  --panel: #11151e;
  --muted: #9aa3b2;
  --text: #e6e9ee;
  --brand: #6ee7ff;
  --brand-2: #9b8cff;
  --accent: #24d5a1;
  --danger: #ff6b6b;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(110,231,255,.08), transparent 60%),
              radial-gradient(800px 600px at 110% 10%, rgba(155,140,255,.08), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(11,13,18,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{display:flex;gap:12px;align-items:center}
.logo{width:auto;height:72px}
.brand-text{display:flex;flex-direction:column}
.brand-text strong{font-weight:800;letter-spacing:.3px}
.brand-text span{font-size:.85rem;color:var(--muted)}

.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;align-items:center}
.nav-link{display:inline-flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.06)}
.nav-link:hover{background:rgba(255,255,255,.06)}

.dropdown{position:relative}
.dropbtn{cursor:pointer}
.dropdown-menu{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:180px;padding:8px;margin:0;list-style:none;
  background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:var(--shadow);
  display:none;
}
.dropdown-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--text)}
.dropdown-menu a:hover{background:rgba(255,255,255,.06)}

.section{padding:64px 24px;max-width:1100px;margin:0 auto}
.hero{
  padding:28px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(135deg, rgba(110,231,255,.12), rgba(155,140,255,.12));
  box-shadow:var(--shadow);
}
.lead{font-size:1.1rem;color:#d8dee9}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);cursor:pointer}
.btn.cta{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#081018;font-weight:700}
.btn.link{color:var(--brand)}

.news h3{margin:28px 4px 12px}
.card{
  background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;box-shadow:var(--shadow);
}
.card h4{margin-top:0}
.card-badge{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#081018;background:var(--accent);padding:4px 8px;border-radius:999px;margin-bottom:8px;font-weight:800}
.kb-tag{background:rgba(110,231,255,.15);border:1px solid rgba(110,231,255,.35);padding:2px 8px;border-radius:999px}
.tight{margin:8px 0 0 0}
.tight li{margin:6px 0}

.grid-2{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

.code{background:#0b0f17;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;overflow:auto}
.note{color:var(--muted)}

.muted{color:var(--muted)}

.site-footer{padding:28px 20px;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,.06);margin-top:40px}

/* PIN Gate */
.gate{
  position:fixed;inset:0;background:linear-gradient(135deg, rgba(110,231,255,.2), rgba(155,140,255,.2)), rgba(8,10,15,.85);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.gate.hidden{display:none}
.gate-card{
  width:min(560px, 100%);background:rgba(13,17,26,.7);backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px;box-shadow:var(--shadow);
}
/* .gate-logo{display:flex;align-items:center;gap:12px;margin-bottom:10px} */
.gate-logo {display: flex; justify-content: center; align-items: center; margin-bottom: 20px;}
/* .gate-logo img{width:48px;height:48px} */
.gate-logo-img {height: 120px; width: auto;}
.subtitle{color:var(--muted);margin:0}
#pin-form{display:grid;gap:12px;margin-top:8px}
#pin-input{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0b0f17;color:var(--text);font-size:1.1rem;letter-spacing:.2em;text-align:center}
.hint{font-size:.85rem;color:var(--muted)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#081018;font-weight:800}
.error{color:var(--danger);min-height:1.2em}

/* spacing tweaks */
h2{margin:0 0 18px}
h3{margin:22px 0 12px}
.card{margin-top:18px}
.card + .card{margin-top:22px}
.lead{margin-bottom:16px}
.nav-link{padding:12px 14px}
.dropdown-menu{padding:10px}
.section p{margin:10px 0 12px}

/* disabled state */
.btn[disabled]{opacity:.55; cursor:not-allowed; filter:grayscale(25%);}
.input[disabled]{opacity:.7; cursor:not-allowed;}
/* logo size tweak */
/* .logo{width:64px;height:64px} */

/* nowrap for subtitle */
.subtitle{white-space:nowrap}
.brand-text span{white-space:nowrap}
.gate-logo{gap:14px}

/* Dropdown robust fix */
.nav .dropdown .dropdown-menu { display: none; }
.nav .dropdown.open .dropdown-menu { display: block; }

.announcement {
  margin-bottom: 24px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.login-card {
  margin-bottom: 28px;
}

/* ===== Auth Modal ===== */
.hidden{display:none !important;}

.modal{
  position: fixed;
  inset: 0;
  display: grid;          /* statt flex */
  place-items: center;    /* exakt mittig */
  padding: 24px 12px;     /* Luft an den Rändern */
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  z-index: 100;
}

.modal-card{
  position:relative; width:min(420px,92%); background:rgba(13,17,26,.9);
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px; box-shadow:var(--shadow);
} 

.modal-close{
  position:absolute; right:16px; top:10px; background:transparent; border:none;
  color:var(--text); font-size:22px; cursor:pointer;
}
.tabs{display:flex; gap:8px; margin:6px 0 12px}
.tab{
  flex:1; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:var(--text); cursor:pointer;
}
.tab.active{background:rgba(255,255,255,.06)}
.auth-form{display:grid; gap:10px}
.auth-form input{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:#0b0f17; color:var(--text);
}

/* === Mobile Tweaks === */
@media (max-width: 600px) {
  .section{padding:28px 12px}
  .hero, .card{padding:14px}
  h2{font-size:1.25rem} h3{font-size:1.1rem} h4{font-size:1rem}

  /* Header/Logo */
  .logo{height:48px;width:auto}
  .site-header{padding:10px 12px}
  .brand{gap:8px}

  /* Navigation */
  .nav ul{flex-wrap:wrap;gap:8px}
  .nav-link{padding:8px 10px}
  .dropdown-menu{right:auto;left:0;min-width:160px}

  /* Layout */
  .grid-2{grid-template-columns:1fr;gap:16px}
  .news h3{margin-top:20px}
  .login-card{margin-bottom:20px}

  /* Inputs/Buttons */
  .btn{width:100%;justify-content:center}
  #pin-input{font-size:1rem;letter-spacing:.15em}

  /* Media/Code */
  img, svg{max-width:100%;height:auto}
  .code{font-size:.9rem;white-space:pre-wrap;word-break:break-word}

  /* Spacing/Chips */
  .kb-tag{display:inline-block;margin:2px 0}
}

/* Verhindert horizontales Scrollen */
html,body{overflow-x:hidden}