/* Gemeinsame Gestaltung aller Seiten: Glas-Look, Menüleiste oben, Scrollleiste.
   Schrift: fonts/roboto.css (Roboto, SIL Open Font License). Menü: site.js */

:root {
  /* Hintergrund aller Glas-Kaesten (Menue, Kaesten, Aufklappmenues) - hoeher = weniger transparent */
  --glass-bg: rgba(46, 54, 70, 0.56);
}

/* Scrollleiste ausgeblendet (Scrollen per Mausrad, Touch und Tastatur funktioniert weiter) */
html, * { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.18);
  backdrop-filter: blur(20px) saturate(165%) brightness(1.18);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
  border-radius: 6px;
}

/* Seiten mit Menueleiste: Platz fuer die Leiste (Startseite legt sie ueber das Bild) */
body.has-topbar { padding-top: 60px; }

#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 2900;
  border-width: 0 0 1px 0; border-radius: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* Die Glasflaeche der Leiste liegt in einem eigenen Element, damit die Aufklappmenues darin
   ihren eigenen Weichzeichner auf das Bild dahinter bekommen (verschachtelte Filter wuerden ihn verlieren) */
#topbar.glass { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 0; }
#topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.18); backdrop-filter: blur(20px) saturate(165%) brightness(1.18);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
}
/* niedrige Spezifitaet (:where), damit z. B. "margin: 0 auto" der Leiste nicht überschrieben wird */
:where(#topbar, #topbar *) { box-sizing: border-box; margin: 0; }
.topbar-inner {
  display: flex; align-items: center; gap: 12px; height: 100%;
  max-width: 1440px; margin: 0 auto; padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 20px; font-weight: 700; margin-right: 22px; }
.brand img { height: 30px; width: auto; display: block; }
.topnav { display: flex; align-items: center; gap: 2px; height: 100%; }
.tn-item { position: relative; height: 100%; display: flex; align-items: center; }
.tn-link {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 5px; background: none;
  color: rgba(255,255,255,0.88); font: 500 14.5px "Roboto", system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.tn-link:hover, .tn-item.open .tn-link, .tn-item:hover .tn-link { background: rgba(255,255,255,0.13); color: #fff; }
.tn-link.active { background: rgba(255,255,255,0.16); color: #fff; }
.tn-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.7; }
.tn-dd { position: absolute; top: 100%; left: 0; display: none; gap: 0; padding: 14px 16px; border-radius: 6px; }
.tn-item:hover .tn-dd, .tn-item.open .tn-dd { display: flex; }
.dd-col { display: flex; flex-direction: column; gap: 2px; min-width: 175px; }
.dd-label { padding: 4px 10px 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
/* Mehrere Spalten (z.B. Galerie): senkrechter Trennstrich dazwischen, wie eine kleine Tabelle */
.dd-col + .dd-col { border-left: 1px solid rgba(255,255,255,0.28); margin-left: 12px; padding-left: 12px; }
.dd-col a { padding: 8px 10px; border-radius: 5px; color: rgba(255,255,255,0.93); font-size: 15px; text-decoration: none; white-space: nowrap; }
.dd-col a:hover { background: rgba(255,255,255,0.15); }
.top-discord {
  margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 6px;
  background: rgba(88,101,242,0.85); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none;
}
.top-discord:hover { background: rgba(88,101,242,1); }

/* Hamburger (Seitenmenue) nur auf kleinen Bildschirmen */
body .hamburger { display: none; }

@media (max-width: 1000px) {
  .topnav, .top-discord { display: none; }
  body .hamburger { display: grid; top: 8px; left: 10px; z-index: 3200; }
  .topbar-inner { padding-left: 62px; }
}

/* Seitenmenue auf kleinen Bildschirmen (Hamburger): gleicher Glas-Look wie die Menueleiste.
   "body ..." erhoeht die Spezifitaet, damit es die alten Stile in den einzelnen Seiten ueberschreibt. */
body .side-menu {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.18);
  backdrop-filter: blur(20px) saturate(165%) brightness(1.18);
  border-right: 1px solid rgba(255,255,255,0.16);
  box-shadow: 12px 0 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
}
body .menu-backdrop { background: rgba(0,0,0,0.4); }
body .menu-header { background: none !important; border-bottom: 1px solid rgba(255,255,255,0.22); }
body .menu-title { font-weight: 700; }
body .menu-close { border-radius: 6px; border-color: rgba(255,255,255,0.22); }
body .menu-close:hover { background: rgba(255,255,255,0.13); }
body .menu-item,
body .menu-toggle {
  border: 0; border-radius: 6px; background: transparent;
  font-family: inherit; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.92);
}
body .submenu { border-left: 1px solid rgba(255,255,255,0.28); }
body .submenu a {
  border: 0; border-radius: 6px; font-family: inherit; font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.93);
}
body .submenu a:hover,
body .menu-item:hover,
body .menu-toggle:hover { background: rgba(255,255,255,0.15); }
body .hamburger span { height: 3px; }