/*keine Schatten beim Menu, keiner Strich unter dem Menutext weg */

#topmenu ul.nav > li a, #topmenu ul.nav > li span.separator {
    text-shadow: none;
    border: none;
}


/*feiner Hintergrund im Maincontent weg und Ränder von Content anpassen, und weisse dünne Linie weg*/

#maincontent {
   background-image: none;
   border: 0px;
   padding: 0px 0% 0px 0%;
}

#content {
    margin: 0px 4px 0px 4px;
}


#maincontent > div:not([class*="blog"]):not(#system-message-container), #maincontent .blog-item {
   /*padding: 2%;*/
   /* margin-bottom: 0px;*/
}


#header   {
    border-left: 0px;
    border-right: 0px;
    background-image: none;
}

/*Banner ein Mü nach links */

img {
  max-width: 100%;
  margin: 0px 0px 0px -1px;
}

/*keine Schatten beim Mainconten */

.shadowed:before, .shadowed:after {
     box-shadow: none;
}


/*Navi an Menu schieben */

@media (min-width: 768px) {
#header {
     margin: 0 0 -30px 0;
     }
}


/*Navi an Menu schieben */

@media (max-width: 767px) {
#header {
     margin: 0 0 -70px 0;
     }
}
  

@media (max-width: 767px) {
#content {
margin: 0px 13px 0px 11px;
     }
}




/*Navigation mobil bündig zu Bild */


@media (max-width: 767px) {
    #topmenu .navbar{
      margin: 50px 0px 50px 0px;
      }
}  


/*Container Richtung Navi raufschieben, je mehr minus, je höher oben */

@media (max-width: 767px) {
    #container {
     padding: 0px 0px 0;
     margin-top: -30px;
    }
}



/*passt "Nach oben" dem Datum an in Höhe*/

.footer-inner {
    display: inline-block;
    width: 100%;
    min-height: 20px;
}




/*Impressum und Datenschutz anpassen*/

#footermodules, #footermodules a, #footermodules ul.menu {
    text-shadow: 0 0px 0px #ffff;   
}

/*Links werden hellgrün dargestellt*/

a:hover {
    color: lightgreen;
}  

/*Keinen komischen Rand um das Banner rum auf dem Desktop*/

@media (min-width: 768px) {
    .has-ribbons #header {
        margin: 0 0px -15px 0px;
        padding: 0 0px;
    }
}


/*Footer ohne Schatten*/
#footer {
     background-image: none;
}


/*keinen Rahmen um den Subfooter*/
#subfoot {
     box-shadow: none;
}


/*Anpassung Menu ohne Hamburger*/

#topmenu .mod-menu li.nav-item a, #topmenu .mod-menu li.nav-item > span {
    padding-left: 40px;  /*Damit Menupunkt zum Text passt*/
}


@media (max-width: 768px) {
    #topmenu ul.nav {
        margin: 30px 0px 0px -1px;
        padding: 0px 0px 25px 0px;
    }
}



@media (max-width: 768px) {
    #topmenu .mod-menu li.nav-item a, #topmenu .mod-menu li.nav-item > span {
        padding-left: 0px;
    }
}





  
/* =========================================
    HAUPTCONTAINER
    ========================================= */

/*kleine Anpassungen zum vorgeschlagenen Code*/

.mein-layout {
    width: 100%;  
    margin: 0;
}


/* =========================================
    HAUPTCONTAINER
    ========================================= */

/*kleine Anpassungen zum vorgeschlagenen Code*/

.mein-layout {
    width: 100%;  
    margin: 0 auto;
    padding: 20px 0px;                   /*padding hinzugefügt, Original 0 und 20px*/
}


/* =========================================
   ALLGEMEINE REIHEN
   ========================================= */

.meine-reihe {
    display: flex;
    width: 100%;
    margin-bottom: 40px 0;    /* 40px*/
}


/* =========================================
   1. UND 4. REIHE
   ========================================= */

.meine-reihe {
    display: flex;
    align-items: center;      /* Bild und Text vertikal ausrichten */
    gap: 20px;                /* Abstand zwischen Bild und Text */
    margin-bottom: 40px;      /*gap 40px*/
}

/* Textbereich wächst automatisch */
.meine-text {
    flex: 1;
}

/* Bildbereich passt sich der Bildgröße an */
.meine-bild {
    flex: 0 0 auto;
}

.meine-bild img {
    display: block;
    max-width: 300px;         /* maximale Bildbreite */
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {

    .meine-reihe {
        flex-direction: column;
        gap: 100px;
    }

    .meine-bild img {
        max-width: 100%;
    }

}

/* =========================================
   2. REIHE - EIN GROSSES BILD
   ========================================= */

.mein-einzelbild {
    width: 100%;
    padding: 0;     /*padding ursprünglich mit  20px, flex zusätzlich*/
    flex: 0 0 auto;
}

.mein-einzelbild img {
    width: 100%;
    height: auto;
    display: block;
}


/* =========================================
   3. REIHE - 6 NAVIGATIONSBILDER
   ========================================= */

.meine-sechs-bilder {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;       /*gap zwischenraum kleine blider*/
    width: 100%;
    padding: 0;    /*padding ursprünglich mit  20px*/
}


/* Link / Bild */

.meine-sechs-bilder a {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}


/* Bild */

.meine-sechs-bilder a img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease,
                opacity 0.3s ease;
}


/* Text unter dem Bild */

.meine-sechs-bilder a span {
    display: block;
    padding: 10px 5px;
    text-align: center;
    font-weight: bold;
}


/* Hover-Effekt */

.meine-sechs-bilder a:hover img {
    transform: scale(1.08);
    opacity: 0.75;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 800px) {

    .meine-sechs-bilder {
        grid-template-columns: repeat(4, 1fr);
    }

}


/* =========================================
   SMARTPHONE
   ========================================= */

@media (max-width: 600px) {

    /* Reihen untereinander */

    .meine-reihe {
        flex-direction: column;
        gap: 20px;
}

    /* Spalten volle Breite */

    .meine-spalte {
        width: 100%;
    }

    /* Navigation 2 x 3 */

    .meine-sechs-bilder {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

}