/* Störfaktoren für Topnav-Positionierung beseitigen */
body, html {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}
.container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  overflow: visible !important;
}
/* Wrapper für Topnav, damit sie immer ganz oben steht und Content darunter beginnt */
.topnav-wrapper {
  width: 100vw;
  position: relative;
  z-index: 3001;
}
/* Einheitliche Top-Right Navigation für CADaeh */
/* Topnav immer ganz oben, volle Breite, kein Scrollen/Versatz */
.topnav-wrapper {
  width: 100vw;
  background: transparent;
}
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 56px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  background: rgba(1,78,92,0.97);
  z-index: 3001;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(1,78,92,0.08);
}

.top-nav .nav-link {
  position: relative;
  background: linear-gradient(135deg, rgba(255,215,0,0.95), rgba(255,215,0,0.8));
  color: #014e5c;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(255,215,0,0.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.top-nav .nav-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .top-nav {
    height: 48px;
    padding: 0 6px;
    gap: 4px;
  }
  .top-nav .nav-link { padding: 6px 8px; font-weight: 800; font-size: 1em; }
}

/* Content-Container für alle Seiten mit Topnav */
/* Content beginnt exakt unter der Topnav, kein Springen */
.with-topnav-content {
  padding-top: 56px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .top-nav {
    height: 48px;
  }
  .with-topnav-content {
    padding-top: 48px;
  }
}

/* Spezieller Abstand für Puzzle-Seite */
.with-topnav-content.puzzle-content {
  padding-top: 100px;
}
@media (max-width: 768px) {
  .with-topnav-content.puzzle-content {
    padding-top: 85px;
  }
}
/* Kleiner orangefarbener Hinweis-Punkt für Benachrichtigungen */
.top-nav .nav-link .notif-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff9800;
  border: 2px solid #014e5c;
  box-shadow: 0 0 0 2px rgba(255,215,0,0.4);
}