#DIV_Banner_Menue {
 position: sticky;   /* Der magische Befehl */
 top: 0;            /* Klebt direkt an der Oberkante */
 z-index: 1000;     /* Sorgt dafür, dass das Menü ÜBER dem Inhalt schwebt */    
 background-color:#2f3e46; /* Hintergrundfarbe des Divs wenn Bild kleiner */   
 }

.Bild_in_HTML{ /* Banner ober dem Menü */
  /* Damit ist das per <img> angegebene Bild im DIV zentriert es wird noch keine Größe festgelegt, außer der maximalen */
  display: block; /* display:flex; */
  max-height:423px;
  background-color:#2f3e46; /* Hintergrundfarbe des Divs wenn Bild kleiner */
  overflow:hidden;
  width: 100%;
  height: auto;
  justify-content:center;
  
}
.Bild_in_HTML img{  /* ----- Einstellungen für das per <img> angegebene Bild im <div> 
                    Höhe und Breite sollen sich später aus der media.css ergeben */
    display:block;
    width: 100%; 
    height: auto;
    margin: 0 auto;
    object-fit:cover;
    object-position:center; /*  object-position:center 40%; würde die Mitte verschieben*/
    
   /* margin-left: auto;
    margin-right: auto; /* Zentrierung vorbereiten */
}


.Banner-Tabelle {
  width: 100%;  /* Breite wie das Bild (an deine Media-Queries anpassen) */
  margin: 0 auto; /* Zentriert die Tabelle auf der Seite */
  background-color: #d63220;
  color: #f0e30c;
  font-weight:bolder;
  font-size:medium;
  border-collapse: collapse; /* Tabellen-Layout: Verhindert Abstände zwischen den Zellen */
  table-layout: fixed;      /* Erzwingt 6 exakt gleich große Spalten */
}
.Banner-Tabelle td {
    display: table-cell;    /* WICHTIG: Zurück auf Standard */
    vertical-align: middle; /* Vertikale Zentrierung (Tabellen-Art) */
    text-align: center;     /* Horizontale Zentrierung */
    height: 50px;
    background-color: #d63220;
    color: #f0e30c;
    border: 1px solid transparent;
    padding: 0;             /* Padding entfernen wir hier */
}
.Banner-Tabelle td span {
    display: inline-block;
}
.Banner-Tabelle td:hover {
	/*93B6EB
	background-color:#668ec9;*/
	background-color:#f0e30c;
    color:#d63220;
	border-style:solid; border-width: 0px 0px 0px 0px; border-color:#f0e30c;
	cursor:pointer;
    /* Optional: Sanfter Übergang der Farbe */
    transition: background-color 0.6s ease;
}

.menu-link {   /* die Klasse für alle Menüpunkte */
    display: flex;          /* Sorgt dafür, dass Icon und Text nebeneinander stehen */
    align-items: center;    /* Vertikale Zentrierung */
    text-decoration: none;  /* Entfernt die blaue Unterstreichung */
    color: inherit;         /* Übernimmt die Schriftfarbe vom Menü */
    gap: 8px;               /* Abstand zwischen Logo und Text */

    /*Versuch den Link auf die Zellengröße aufzublasen*/
    justify-content: center;/* Horizontal zentrieren */
    width: 100%;            /* Füllt die Breite der <td> */
    height: 100%;           /* Füllt die Höhe der <td> */
}
.menu-link:hover span { /* Der Hover-Effekt */
    color: #d63220;         /* Text wird YouTube-Rot beim Drüberfahren */
    transition: color 0.2s ease;
}
.menu-link:hover .yt-icon-multi { /* Falls das Icon beim Hover auch reagieren soll (z.B. leicht größer werden) */
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.menu-item-wrapper { /* Das innere Element für das Icon-Text-Paar */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.menu-item-wrapper svg {
    flex-shrink: 0;
    margin-right: 5px;
}
.menu-item-wrapper span { /* Verhindert den Umbruch des Textes */
    white-space: nowrap;
}

/*  ------------------- Menüpunkte ----------------------- */
.menu-Addons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.menu-kaufen {
    display: flex !important; /* Erzwingt Flex-Layout in der Zelle */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* WICHTIG: Verhindert, dass Text unter das Icon rutscht */
    overflow: hidden;
}
.menu-kaufen span { /* Falls der Text immer noch umbrechen will, packen wir ihn in ein Span */
    display: inline-block;
}

/*  ------------------- ICONS im Menü ----------------------- */
.dl-icon { /* dl = donwload, für Menüpunkt Addon */
    width: 1.1em;      /* Leicht kleiner als die Schrift, wirkt harmonischer */
    height: 1.1em;
    margin-right: 3px;
    flex-shrink: 0;    /* Verhindert Quetschen */
    vertical-align: middle;
    transition: fill 0.3s ease; /* Falls du die Farbe beim Hovern änderst */
}
.amz-icon { /* für Menüpunkt Kaufen */
    width: 1.3em;
    height: 1.3em;
    margin-right: 6px;
    flex-shrink: 0; /* Icon darf niemals kleiner werden */
    display: inline-block;
    fill: #FF9900;   /* Amazon: Marken-Orange */
}
.wa-icon{ /* für Menüpumt News (WhatsApp) */
    width: 1.1em;      /* Skaliert mit der Schriftgröße */
    height: 1.1em;
    margin-right: 6px; /* Abstand zum Text */
    flex-shrink: 0;    /* Verhindert das Zusammenquetschen des Icons */
    fill: #25D366;   /* WhatsApp: Marken-Grün */
}
.info-icon, .yt-icon-multi  {
    width: 1.2em;
    height: 1.2em;
    margin-right: 6px;
    flex-shrink: 0;
}
.yt-icon-multi .korpus { fill: #FF0000; }
.yt-icon-multi .dreieck { fill: #FFFFFF; }