/* 1. MOBILE & TABLET (Absteigend) */
@media (max-width: 390px) and (orientation: portrait) {
  
    .Bild_in_HTML {
        height: 100px !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
        /* display: block !important; */
        /*width: 100% !important;*/
    } 
    .Bild_in_HTML img {
      width: 100% !important;   /* Volle Breite des Containers */
      height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
    .Banner-Tabelle {
        width: 100% !important;
        font-size: 0.9rem; /* Schrift etwas kleiner, damit 6 Spalten passen */
    }
    .menu-link {   /* die Klasse für alle Menüpunkte */
    gap: 2px;               /* Abstand zwischen Logo und Text */
    }
    
    .menu-item-wrapper {
        padding: 0 0px !important; /* Minimaler Außenabstand */
        display: flex !important;
        justify-content: center !important; /* Zentriert die Einheit Icon+Text */
        gap: 0px; /* Fester, kleiner Abstand zwischen Icon und Text */
       /*flex-direction: column !important; /* Stapelt Icon über Text */
    }

    .menu-item-wrapper svg {
        margin-right: 0 !important; /* Entfernt den alten Margin, da 'gap' übernimmt */
        margin-left: 0;
        flex-shrink: 0;
    }

    .menu-item-wrapper span {
        font-size: 0.8rem !important; /* Etwas kleiner, um Platz für das Icon zu schaffen */
        display: inline-block;
    }
    .wa-icon{ /* für Menüpumt News (WhatsApp) */
    margin-right: 1px !important; /* Abstand zum Text */
    }
    .dl-icon { /* dl = donwload, für Menüpunkt Addon */
    margin-right: 1px !important;
    }    
   .buch-bild {
   width: 75% !important;
}
}

@media (max-width: 480px) and (orientation: portrait) {
  
    .Bild_in_HTML {
        height: 100px !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
        /* display: block !important; */
        /*width: 100% !important;*/
    } 
    .Bild_in_HTML img {
      width: 100% !important;   /* Volle Breite des Containers */
      height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
    .Banner-Tabelle {
        width: 100% !important;
        font-size: 0.9rem; /* Schrift etwas kleiner, damit 6 Spalten passen */
    }
    .menu-link {   /* die Klasse für alle Menüpunkte */
    gap: 2px;               /* Abstand zwischen Logo und Text */
    }
    
    .menu-item-wrapper {
        padding: 0 0px !important; /* Minimaler Außenabstand */
        display: flex !important;
        justify-content: center !important; /* Zentriert die Einheit Icon+Text */
        gap: 0px; /* Fester, kleiner Abstand zwischen Icon und Text */
       /*flex-direction: column !important; /* Stapelt Icon über Text */
    }

    .menu-item-wrapper svg {
        margin-right: 0 !important; /* Entfernt den alten Margin, da 'gap' übernimmt */
        margin-left: 0;
        flex-shrink: 0;
    }

    .menu-item-wrapper span {
        font-size: 0.8rem !important; /* Etwas kleiner, um Platz für das Icon zu schaffen */
        display: inline-block;
    }
    .wa-icon{ /* für Menüpumt News (WhatsApp) */
    margin-right: 1px !important; /* Abstand zum Text */
    }
    .dl-icon { /* dl = donwload, für Menüpunkt Addon */
    margin-right: 1px !important;
    }    
}
    
/* ab 700 orientation querformat....  abfangen*/
@media (max-width: 768px) and (orientation: portrait) {
    .Banner-Tabelle {
        width: 100%;
        font-size: 0.8rem; /* Schrift etwas kleiner, damit 6 Spalten passen */
    }
    .Bild_in_HTML { max-height: 250px; }
    .Bild_in_HTML img { 
        width: 120% !important; 
        object-fit: cover; 
    }
    .buch-container { 
        display: flex; /* Sicherstellen, dass Flex aktiv ist */
        flex-direction: column !important; /* Stapelt die Elemente untereinander */
    }
    .buch-text {
        flex: 0 0 100%;
        order: 1; /* Text nach oben */
    }
    .buch-bild {
        flex: 0 0 auto; /* Nimmt sich den Platz, den es braucht, statt der PC-Prozente */
        max-width: 150px; /* Begrenzt die Bildgröße, damit es am Handy nicht riesig wird */
        order: 2; /* Bild nach unten */
        margin: 20px auto 0 auto !important; /* Zentriert das Bild mit Abstand nach oben */
        text-align: center;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .Banner-Tabelle {
        width: 100%;
        font-size: 0.8rem; /* Schrift etwas kleiner, damit 6 Spalten passen */
    }
    .Bild_in_HTML { max-height: 250px; }
    .Bild_in_HTML img { 
        width: 120% !important; 
        object-fit: cover; 
    }
    .buch-container { 
        display: flex; /* Sicherstellen, dass Flex aktiv ist */
        flex-direction: column !important; /* Stapelt die Elemente untereinander */
    }
    .buch-text {
        flex: 0 0 100%;
        order: 1; /* Text nach oben */
    }
    .buch-bild {
        flex: 0 0 auto; /* Nimmt sich den Platz, den es braucht, statt der PC-Prozente */
        max-width: 150px; /* Begrenzt die Bildgröße, damit es am Handy nicht riesig wird */
        order: 2; /* Bild nach unten */
        margin: 20px auto 0 auto !important; /* Zentriert das Bild mit Abstand nach oben */
        text-align: center;
    }
}@media (max-width: 768px) and (orientation: landscape) {
    .Banner-Tabelle {
        width: 100%;
        font-size: 0.8rem; /* Schrift etwas kleiner, damit 6 Spalten passen */
    }
    .Bild_in_HTML { max-height: 100px !important; }
    .Bild_in_HTML img { 
        width: 120% !important; 
        object-fit: cover; 
    }
    .buch-container { 
        display: flex; /* Sicherstellen, dass Flex aktiv ist */
        flex-direction: column !important; /* Stapelt die Elemente untereinander */
    }
    .buch-text {
        flex: 0 0 100%;
        order: 1; /* Text nach oben */
    }
    .buch-bild {
        flex: 0 0 auto; /* Nimmt sich den Platz, den es braucht, statt der PC-Prozente */
        max-width: 150px; /* Begrenzt die Bildgröße, damit es am Handy nicht riesig wird */
        order: 2; /* Bild nach unten */
        margin: 20px auto 0 auto !important; /* Zentriert das Bild mit Abstand nach oben */
        text-align: center;
    }
}

@media (max-width: 820px) { /* ************* 820 ************* */
    .Banner-Tabelle {
        width: 100%;
        font-size: 0.8rem; /* Schrift etwas kleiner, damit 6 Spalten passen */
    }
    .Bild_in_HTML { max-height: 250px; }
     .Bild_in_HTML img { 
        width: 120% !important; 
        object-fit: cover; 
    }
    .buch-container { 
        display: flex; /* Sicherstellen, dass Flex aktiv ist */
        flex-direction: column !important; /* Stapelt die Elemente untereinander */
    }
    .buch-text {
        flex: 0 0 100%;
        order: 1; /* Text nach oben */
    }
    .buch-bild {
        flex: 0 0 auto; /* Nimmt sich den Platz, den es braucht, statt der PC-Prozente */
        max-width: 400px; /* Begrenzt die Bildgröße, damit es am Handy nicht riesig wird */
        order: 2; /* Bild nach unten */
        margin: 20px auto 0 auto !important; /* Zentriert das Bild mit Abstand nach oben */
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .Bild_in_HTML {  
        max-height: 250px; 
    .Banner-Tabelle { width: 90.5vw; }
    .Bild_in_HTML img { width: 90.5vw; object-fit: cover;} 
    }
}

/* 2. DESKTOP & HOCHAUFLÖSUNG (Aufsteigend) */

/* 1350 - Laptop mit 4K aber 250% Skalierung wie von Windows empfohlen (logisch ca. 1536px) echt 1397px */
@media screen and (min-width: 1350px) { 
    .Bild_in_HTML {
        height: 200px !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
        /* display: block !important; */
    }
    .Bild_in_HTML img { /*fertig */
        width: 100% !important;   /* Volle Breite des Containers */
        height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
}

/* 1700 - PC HD mit einschränkenden Skalierungen Büro-Monitor zeigt Breite 1746 */
@media screen and (min-width: 1600px) { /*fertig */
    .Bild_in_HTML {
        height: 238px !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
    }
    .Bild_in_HTML img {
      /*  width: 100% !important;   /* Volle Breite des Containers */
      /*  height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
}

/* 1800 - Michael Breite 1875 */
@media screen and (min-width: 1800px) { 
    .Bild_in_HTML {
        height: 248px !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
    }
    .Bild_in_HTML img { 
      /*  width: 100% !important;   /* Volle Breite des Containers */
      /*  height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
}

/* Echtes Full-HD oder Bildschirme ab 1900px */
@media screen and (min-width: 1900px) { 
    .Bild_in_HTML {
        height: 260px !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
    }
    .Bild_in_HTML img { /*fertig */
      /*  width: 100% !important;   /* Volle Breite des Containers */
      /*  height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
}

@media (min-width: 2100px)  { 
    .Bild_in_HTML {
        height: 100% !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
    }
    .Bild_in_HTML img { /*fertig */
      /*  width: 100% !important;   /* Volle Breite des Containers */
      /*  height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
}


@media (min-width: 2300px)  { 
    .Bild_in_HTML {
        height: 100% !important; /* Der Container ist jetzt der Rahmen */
        overflow: hidden;         /* Alles was übersteht, verschwindet */
    }
    .Bild_in_HTML img { /*fertig */
      /*  width: 100% !important;   /* Volle Breite des Containers */
      /*  height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
    .Inhalt div {
        font-size: 1.3rem;
    }
}
@media screen and (min-width: 3000px) { 
  .Bild_in_HTML {
        height: 100vw !important; /* Der Container ist jetzt der Rahmen */
        width: 100% !important;
        overflow: hidden;         /* Alles was übersteht, verschwindet */
    }
    .Bild_in_HTML img { /*fertig */
       width: 100% !important;   /* Volle Breite des Containers */
       height: 100% !important;  /* Volle Höhe des Containers */
        object-fit: cover !important;        /* Füllt den Bereich aus, behält Proportionen, schneidet Ränder ab */
        object-position: center !important;    
        margin: 0 auto !important;
    }
     .Inhalt div {
        font-size: 1.3rem;
    }
}

/* Nativer 4K Monitor (3840px ohne Skalierung) */



/*
3. Ein technischer Hinweis zu flex
In deiner menu.css nutzt du für den Container .Bild_in_HTML:
display: flex; justify-content: center;

Das ist super zum Zentrieren! Aber: Wenn das Bild darin width: 90% hat, "weiß" das Flex-Element manchmal nicht, worauf sich die 90% beziehen sollen,
 wenn der Container selbst keine feste Breite hat.

Empfehlung:
Stelle sicher, dass der Container .Bild_in_HTML immer width: 100% hat, damit das Bild darin weiß, wovon es 90% berechnen soll.


Unterschied @media (max-width: 1024px) --- @media (min-width: 1024px):
max-width: „Bis zu einer maximalen Breite von...“
            Gilt für alles, was kleiner oder gleich 1024px ist.
            Denkweise: Du schreibst zuerst das Design für den großen Monitor und nutzt max-width, um Ausnahmen für kleinere Geräte (Tablets, Handys) zu definieren.
min-width: „Ab einer minimalen Breite von...“
            Gilt für: Alles, was größer oder gleich 1024px ist.
            Denkweise: („Mobile First“) Du schreibst zuerst das Design für das Handy (ganz ohne Media Query) 
            und nutzt min-width, um Erweiterungen für größere Bildschirme hinzuzufügen.

Merkmal     max-width: 800px        	        min-width: 800px
Bedeutung	„Maximal 800px breit“	            „Mindestens 800px breit“
Zielgruppe	Kleinere Geräte (Handy, Tablet)	    Größere Geräte (Laptop, 4K)
Wann aktiv?	Von 0px bis 800px	                Von 800px bis unendlich
Strategie	Desktop First	                    Mobile First

 */