:root{ --favicon-size:40px; --favicon-gap:16px; }


nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  background: #000;
  padding: 10px;
  /* Verhindert den Umbruch */
  flex-wrap: nowrap !important;
  /* Erlaubt horizontales Scrollen auf kleinen Bildschirmen (Handys) */
  overflow-x: auto;
  /* Versteckt den Scrollbalken in manchen Browsern, falls gewünscht */
  scrollbar-width: none; 
  /* ... deine bisherigen Einstellungen ... */
  position: relative;
  /* Erzeugt einen visuellen Hinweis, dass rechts mehr kommt */
  background: linear-gradient(to right, #000 95%, #333 100%);
}


/* Scrollbar Styling für Chrome, Edge, Safari */
nav::-webkit-scrollbar {
  height: 4px; /* Sehr dünn */
  display: block; /* Wir schalten ihn wieder ein */
}

nav::-webkit-scrollbar-track {
  background: #000; 
}

nav::-webkit-scrollbar-thumb {
  background: #d40606; /* Dein Rot */
  border-radius: 10px;
}

/* Für Firefox */
nav {
  scrollbar-width: thin;
  scrollbar-color: #d40606 #000;
}

/* Link-Style */
nav a.navitem {
  font-size: 40px;
  color: #d40606;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px !important; /* Der Abstand zwischen Icon und Text */
  flex-shrink: 0 !important; /* Verbot zu schrumpfen */

  /* ... deine bisherigen Einstellungen ... */
  position: relative;
  /* Erzeugt einen visuellen Hinweis, dass rechts mehr kommt */
  background: linear-gradient(to right, #000 95%, #333 100%);
  transition: all 0.3s ease;

/* Hover-Effekt: Text wird weiß, Icon hebt sich ab */
nav a.navitem:hover {
  color: #fff !important;
  transform: translateY(-2px); /* Leichter Sprung nach oben */
}

nav a.navitem:hover::before {
  filter: brightness(1.2);
}

  
  /* DIE ENTSCHEIDENDEN ZEILEN: */
  white-space: nowrap !important; /* Verhindert Zeilenumbruch im Text */
  flex: 0 0 auto !important;     /* Verhindert, dass der Link schrumpft */
}

/* Optional: Ein Indikator für Touch-Geräte */
nav::after {
  content: "→";
  position: sticky;
  right: 0;
  color: #d40606;
  font-size: 24px;
  padding: 0 5px;
  background: #000;
  opacity: 0.7;
  pointer-events: none;
}





 
/* UNKAPUTTBAR */
nav a[class*="topic"]::before{
  content:"" !important;
  display:inline-block !important;
  width:var(--favicon-size) !important;
  height:var(--favicon-size) !important;
  flex:0 0 auto !important;
  /* ... deine bisherigen Einstellungen ... */
  position: relative;
  /* Erzeugt einen visuellen Hinweis, dass rechts mehr kommt */
  /*background: linear-gradient(to right, #000 95%, #333 100%);*/

  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  background-image:url("/favicon_default.png?v=20260208a") !important;
}





/* 2. Die spezifische Zuweisung (Stärker durch 'nav a.topic') */
 

/* Ersetze deine topic2 Zeile hiermit: */
nav a.navitem.topic2::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon2.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav a.navitem.topic3::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon3.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav a.navitem.topic4::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon4.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav a.navitem.topic5::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon5.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav a.navitem.topic6::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon6.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav a.navitem.topic7::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon7.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav a.navitem.topic8::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon8.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}

nav a.navitem.topic9::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon9.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}


nav a.navitem.topic10::before {
    content: "" !important;
    display: inline-block !important;
    background-image: url("/favicon10.png?v=3") !important;
    visibility: visible !important;
    opacity: 1 !important;
}



  

 

















.lang-link { color: red; text-decoration: none; }
.lang-link:hover { color: yellow; }