/* ================================
   Base (Dark Theme only)
   ================================ */

/* Reset / Normierung (knapp gehalten) */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--np-font);
  font-size: var(--np-fs-md);
  line-height: 1.55;
  color: var(--np-text);
  background: radial-gradient(1200px 600px at 10% -10%, #1b1c1f, transparent 60%),
              radial-gradient(1000px 500px at 120% 20%, #1c1d21, transparent 60%),
              var(--np-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typo */
h1,h2,h3,h4,h5 { margin: 0 0 0.5rem; line-height: 1.25; }
h1 { font-size: var(--np-fs-xxl); }
h2 { font-size: var(--np-fs-xl); }
h3 { font-size: var(--np-fs-lg); }
p  { margin: 0 0 0.75rem; color: var(--np-text); }
small, .muted { color: var(--np-text-dim); font-size: var(--np-fs-sm); }

/* Links */
a {
  color: var(--np-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--np-tr-base);
}
a:hover { color: var(--np-link-hover); }

/* Bilder & Medien */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* Container & Wrapper */
.container, .wrap {
  max-width: var(--np-container);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(24,25,28,0.95), rgba(24,25,28,0.85));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--np-border);
}

/* Top bar mit Discord-Join */
.header-top {
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.75rem;
  background: #4752C4; /* Discord Blurple dark */
  color: #fff;
}
.header-top .discord-join-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none; font-weight: 600;
}
.header-top .discord-icon { width: 20px; height: 20px; color: #fff; }

/* Main Header-Zeile */
.header-main {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  padding: 0.6rem 0;
  gap: 1rem;
}
.brand .brand-link { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--np-text); }
.brand .brand-logo { width: 36px; height: 36px; border-radius: 8px; }
.brand .brand-text { font-weight: 700; letter-spacing: .3px; }

.searchbar {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr auto;
  gap: .5rem; align-items: center;
}
.searchbar select,
.searchbar input[type="text"] {
  background: var(--np-soft);
  color: var(--np-text);
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius-sm);
  padding: 0.55rem 0.75rem;
  outline: none;
}
.searchbar input[type="text"]::placeholder { color: #8b8d92; }
.searchbar button {
  background: var(--np-accent);
  color: #1a1a1a;
  border: 1px solid var(--np-accent);
  border-radius: var(--np-radius-sm);
  padding: 0.55rem 0.9rem;
  font-weight: 700; cursor: pointer;
  transition: filter var(--np-tr-base), transform var(--np-tr-fast);
}
.searchbar button:hover { filter: brightness(0.95); }
.searchbar button:active { transform: translateY(1px); }

/* Hauptbereich & Footer */
.site-main { padding: 1rem 0 2rem; }
.site-footer {
  border-top: 1px solid var(--np-border);
  background: #151619;
  padding: 1rem 0;
  color: var(--np-text-dim);
}
.footer-inner { text-align: center; }
.site-footer a { color: var(--np-accent); }
.site-footer a:hover { color: var(--np-accent-hover); }

/* Cards (global) */
.card {
  background: var(--np-card);
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius);
  box-shadow: var(--np-shadow);
  margin: var(--np-gap) 0;
  padding: var(--np-pad);
}
.card .h-title { margin-bottom: .4rem; }

/* Buttons (generisch) */
.btn, .btn-discord {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0.55rem 0.9rem; border-radius: var(--np-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-weight: 700;
}
.btn-discord {
  background: #5865F2; border-color: #5865F2; color: #fff;
}
.btn-discord:hover { filter: brightness(0.96); }

/* Utilities */
.hidden { display: none !important; }

@media (max-width: 900px) {
  .header-main { grid-template-columns: 1fr; gap: .75rem; }
  .searchbar { grid-template-columns: 1fr 1fr auto; }
}
@media (max-width: 600px) {
  .searchbar { grid-template-columns: 1fr; }
}