/* Grundstil & Reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }

/* Gate/Login Seite */
.fullscreen-black {
  min-height: 100vh;
  background: #000;
  color: #e5e5e5;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.card {
  width: 100%;
  max-width: 420px;
  background: #0c0c0c;
  border: 1px solid #1e1e1e;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.card h1, .card h2 { margin: 0 0 12px; color: #f1f1f1; }
.card p { color: #bdbdbd; margin: 0 0 16px; font-size: 0.95rem; }
.input, .button {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #2a2a2a;
  background: #111; color: #eee; outline: none;
}
.input:focus { border-color: #5c8aff; box-shadow: 0 0 0 4px rgba(92,138,255,.15); }
.button {
  background: linear-gradient(180deg, #5c8aff, #446fe6);
  border: none; cursor: pointer; font-weight: 600; letter-spacing: .2px;
}
.button:disabled { opacity: .6; cursor: not-allowed; }
.row { display: grid; gap: 12px; }
.mt { margin-top: 14px; }
.err { background:#2a1111; color:#ffb3b3; border:1px solid #5a1a1a; padding:10px 12px; border-radius:10px; font-size:.9rem; }
.ok { background:#112a19; color:#b8ffd8; border:1px solid #1a5a33; padding:10px 12px; border-radius:10px; font-size:.9rem; }

/* Dashboard + Responsive Menü */
.header {
  position: sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background: rgba(12,12,12,.7); border-bottom:1px solid #1e1e1e;
}
.container { max-width: 1100px; margin: 0 auto; padding: 14px 18px; }
.brand { color:#fff; font-weight:700; letter-spacing:.3px; }

.navbar { display:flex; align-items:center; justify-content:space-between; }
.nav-links { display:flex; gap: 10px; align-items:center; }
.nav-links a {
  color:#e6e6e6; text-decoration:none; padding:10px 12px; border-radius:10px;
}
.nav-links a:hover { background:#1a1a1a; }
.cta { background: linear-gradient(180deg, #5c8aff, #446fe6); font-weight:600; }

.menu-toggle { display:none; }
.hamburger { display:none; cursor:pointer; padding:10px; border-radius:10px; border:1px solid #2a2a2a; }
.hamburger span { display:block; width:22px; height:2px; background:#e6e6e6; margin:5px 0; }

@media (max-width: 750px) {
  .hamburger { display:block; }
  .nav-links {
    position: absolute; top:60px; left:0; right:0;
    background:#0c0c0c; border-bottom:1px solid #1e1e1e;
    flex-direction:column; gap:0; display:none;
  }
  .nav-links a { width:100%; padding:14px 18px; border-radius:0; }
  .menu-toggle:checked ~ .nav-links { display:flex; }
}

.main {
  color:#e6e6e6; background:#0a0a0a; min-height:100vh; padding: 28px 0 60px;
}
.grid {
  display:grid; gap:18px; grid-template-columns: repeat(12, 1fr);
}
.card2 { grid-column: span 12; background:#0f0f0f; border:1px solid #1f1f1f; border-radius:16px; padding:18px; }
@media (min-width: 800px) {
  .card2.span4 { grid-column: span 4; }
  .card2.span8 { grid-column: span 8; }
}

/* Kleines Flair */
.badge { font-size:.75rem; color:#9ec1ff; border:1px solid #2d447a; background:#0e1730; padding:4px 8px; border-radius:999px; }
.footer { color:#8a8a8a; text-align:center; padding:26px 0 40px; }

/* Dateien – Grid & Karten */
.file-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
@media (min-width: 700px) { .file-grid { grid-template-columns: repeat(4, 1fr); } }

.file-card { background:#111; border:1px solid #222; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.thumb { aspect-ratio: 4/3; width:100%; display:block; object-fit:cover; background:#0a0a0a; }
.card-body { padding:10px; display:flex; flex-direction:column; gap:8px; }
.card-title { font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { color:#9a9a9a; font-size:.85rem; display:flex; justify-content:space-between; gap:8px; }

.actions { display:flex; gap:8px; }
.actions a, .actions button {
  flex:1; text-align:center; padding:8px 10px; border-radius:10px;
  border:1px solid #2a2a2a; background:#0f0f0f; color:#e6e6e6; text-decoration:none;
}
.actions a:hover { background:#171717; }

.file-icon { display:grid; place-items:center; height:120px; font-size:2.2rem; }
.video { width:100%; display:block; background:#000; }