/*------ START -- Section für die ContainerBox_01_Navi klasse Navi --------- */
.ContainerBox_01_Navi{
    /*border: 1px solid red;*/
    height: auto;
    width: 1330px;
    margin: auto;
}
/*------ ENDE -- Section für die ContainerBox_01_Navi klasse Navi --------- */
/*.Background_box_0{
    border: 1px solid green;
    border-top: 1px solid #ffa500;
    background-color: #141414; /*Black
    max-height: auto;
    width: 100vw;
    height: 20%;
    justify-content: center;
    margin: 0 auto;
    z-index: 0;
}*/

.Background_box_1{
                    /*border: 1px solid green;*/
                    border-left: 1px solid #ffa500;
                    border-right: 1px solid #ffa500;
                    background-color: #141414; /*Black*/
                    max-height: auto;
                    width: 1330px;
                    height: 20%;
                    justify-content: center;
                    margin: 0 auto;
}

@media only screen and (max-width: 1330px) {
    .Background_box_1 {
         /* Vollständige Breite für Tablet-Geräte und kleinere Bildschirme */
        width: 100vw;
        border-left: none; /* Entfernt die linke Seite auf Tablets */
        border-right: none; /* Entfernt die rechte Seite auf Tablets */
    }
}


.Text_box_1{
                /*border: 1px solid green;*/
                padding: 2em;
}

.Text_box_1 h2{
                padding-top: 0;
                padding-bottom: 1em;
}


/*------ START -- Abschnitt für die ContainerBox_02_Slider Klasse --------- */
#Test_box {
    /*border: 1px solid red;*/
    margin-top: 60px;
    max-width: 100%;
    
}

/* Für den ContainerBox_02_Slider */
.ContainerBox_02_Slider {
    /*border: 1px solid green;*/
    max-width: 1334px; /* Responsiv für maximale Breite */
    width: 100%;
    max-height: auto;
    margin: 0 auto;
    text-align: center;
    background-color: black;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Verhindert Überlauf auf kleineren Bildschirmen */
}

/* Änderungen hinzugefügt */
.ContainerBox_02_Slider::after {
    /*border: 1px solid red;*/
    content: "";
    display: block;
    padding-top: 50%; /* 56.25% Verhältnis 16:9, passen Sie dies an Ihr Bildverhältnis an */
    
}

/* Die Bilder im Slider */
.content_Slider .images_Slider {
    /*border: 1px solid yellow;*/
    display: flex;
    overflow: hidden;
    margin: 0 auto;
    padding-bottom: 30px;
}

.content_Slider .images_Slider img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    transition: opacity 0.5s;
    
}

/* Aktive Slide */
.slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-size: cover;
    background-position: center;
    opacity: 1; /* Ändere die Opazität, um das Bild sichtbar zu machen */
    transition: opacity 0.5s;
}

/* Navigationsbuttons */
.button_box {
    border: 1px solid blue;
    max-width: 100%;
    display: flex;
    justify-content: center; /* Horizontal mittig ausrichten */
    align-items: baseline; /* Vertikal mittig ausrichten */
}

.button_box .slide {
    /* Dein bestehender Stil für die Schaltflächen */
    cursor: pointer;
    max-height: 100%;
    display: flex;
    align-items: center; /* Die Schaltflächen vertikal mittig ausrichten */
}

.button_box .slide span {
    font-size: 35px;
    color: white;
    line-height: 35px;
}

.btm-sliders_Slider { /* hier positioniere ich die buttons */
    /*border: 1px solid yellow;*/
    position: absolute;
    justify-content: center;
    align-items:last baseline;
    bottom: 13px; /* Damit kann ich die BTM position positionieren. */
    
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    
}

.btm-sliders_Slider span {
    height: 8px;
    width: 40px;
    border: 1px solid white;
    margin: 0 10px; /* Hier mit definiere ich den platz zwischen den Button. */
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
}

.btm-sliders_Slider span:hover {
    background: white;
}

/* Slider-Navigation (rechts/links) */
.content_Slider .slide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    border: 1px solid white;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    max-height: 100%;
}

.content_Slider .slide:hover {
    background: rgba(255, 255, 255, 0.2);
}

.slide span {
    font-size: 35px;
    color: white;
    line-height: 35px;
}

.content_Slider .left { /* Navi Pfeile im slider ist aktuell deaktiviert*/
    left: 0;
    display: none;
}

.content_Slider .right { /* Navi Pfeile im slider ist aktuell deaktiviert*/
    right: 0;
    display: none;
}
/*------ ENDE -- Section für die ContainerBox Klasse Slider --------- */




/*------ START -- Section für die ContainerBox Klasse InfoBOX --------- */
.ContainerBox_03_InfoBOX{
    border: 1px solid red;
    height: auto;
    width: 1330px;
    margin: 0 auto;  
    padding-top: 25px;
    /*background-image: linear-gradient(45deg,#333333,#161618);*/
    
}

@media screen and (max-width: 1334px) {
    #content_slider {
        width: 100%;
        height: 100%;
        padding-top: 100px; /* Anpassung nach Bedarf */
    }
}
/*------ ENDE -- Section für die ContainerBox Klasse InfoBOX --------- */

/*------ START -- Section 1 --------- */

#hero_slider_section    {
                            /*border: 1px solid orange;*/
                            padding: 50px 0;
                            /*background-color: var(--second-color);*/
                            display: flex;
                            justify-content: center; /* Hier mit kann ich den Content bereich in die gewünschte Position centrieren.*/
                            align-items: left;
                            gap:20px; /* ist für die Lücke zwischen dem Bild und dem Text. */
                            flex-wrap: wrap; /* (Responsiv) Damit der Inhalt des Content untereinander automatisch verschoben wird.*/
}

.hero_slider_container  {
                            /*border: 1px solid #ffffff;*/
                            border-radius: 5px;
                            /*box-shadow: 10px 16px 17px #ffb10075;*/
                            /*box-shadow: 10px 16px 17px #000000;*/
                            box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
                            /*background-color: var(--third-color);*/
                            background-color: #141414;
                            width: 640px;
                            max-width: 50%;
                            padding-left: 15px;
                            padding-right: 15px;
                            
                        }

#hero_slider_section img    {
                                width: 400px;
                                max-width: calc(90% - 30px);
                                /*border: 2px solid #ffffff;*/
                                /*border: 2px solid var(--third-color);*/
                                /*box-shadow: 10px 16px 17px #ffb10075;*/
                                /*box-shadow: 10px 16px 17px #000000;*/
                                box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
                            }

/* Der code ist wieder nur für die Handy auflösung.*/
@media(max-width: 800px){
                            #hero_slider_section{
                                                    padding: 50px 0;
                                                }
                            #hero_slider_section h2 {
                                                        text-align: center;
                                                        font-size: 12vw;
                                                    }
                        }

/*------ ENDE -- Section 1 --------- */

/*------ START -- Section 2 --------- */
#Top_Lernvideos_section    {
    /*border: 1px solid orange;*/
    padding: 50px 0;
    background-color: var(--primary-color);
    display:flex;
    justify-content: center; /* Hier mit kann ich den Content bereich in die gewünschte Position centrieren.*/
    align-items: right;
    gap:40px; /* ist für die Lücke zwischen dem Bild und dem Text. */
    flex-wrap: wrap; /* (Responsiv) Damit der Inhalt des Content untereinander automatisch verschoben wird.*/

}

#Top_Lernvideos_section img    {
        width: 600px;
        max-width: calc(90% - 30px);
        border: 2px solid #ffffff;
        /*border: 5px solid var(--text-color);*/
        /*box-shadow: 15px 15px 10px #000000;*/
        box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);

    }

/*-----------------------------------------------*/

.Top_Lernvideos_container  {
        /*border: 1px solid yellow;*/
        width: 640px;
        max-width: 90%;
     
    }

.Top_Lernvideos_container h2   {
        
        font-size: 40px;
        line-height: 175%;
    }

.Top_Lernvideos_container p    {
        text-align: justify;
        line-height: 175%;
    }

/*-----------------------------------------------*/

.Informations_section    {
    /*border: 1px solid orange;*/
    padding: 50px 0;
    background-color: var(--primary-color);
    display:flex;
    justify-content: center; /* Hier mit kann ich den Content bereich in die gewünschte Position centrieren.*/
    align-items: right;
    gap:40px; /* ist für die Lücke zwischen dem Bild und dem Text. */
    flex-wrap: wrap; /* (Responsiv) Damit der Inhalt des Content untereinander automatisch verschoben wird.*/
    
}


.Informations_section img    {
        /*width: 600px;*/
        width: 470px;
        max-width: calc(90% - 30px);
        border: 2px solid #ffffff;
        /*border: 5px solid var(--text-color);*/
        /*box-shadow: 15px 15px 10px #000000;*/
        box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
    }

/*-----------------------------------------------*/

.Informations_container  {
        /*border: 1px solid yellow;*/
        width: 640px;
        max-width: 90%;     
    }
    
.Informations_container h2   {
        
        font-size: 40px;
        line-height: 175%;
    }

.Informations_container p    {
        text-align: justify;
        line-height: 175%;
    }

.content_container_test {
    border-top: 1px solid #ffffff;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    /*background-color: var(--third-color);*/
    background-color: #141414;
    box-shadow: 10px 14px 15px rgba(0, 0, 0, 0.3);
}


@media screen and (max-width: 768px) {
    .Informations_section {
      padding: 30px 0; /* Anpassung des Padding für kleinere Bildschirme */
    }
  
    .Informations_section img {
      width: 100%; /* Volle Breite für das Bild auf kleineren Bildschirmen */
      max-width: none; /* Keine maximale Breite */
      margin-bottom: 20px; /* Abstand unter dem Bild */
    }
  
    .Informations_container {
      width: 100%; /* Volle Breite für den Container */
      max-width: none; /* Keine maximale Breite */
    }
  
    .content_container_test {
      padding-left: 10px;
      padding-right: 10px;
      margin-top: 1px;
    }
  
    .Informations_container h2 {
      font-size: 28px; /* Reduziere die Schriftgröße für Überschriften */
      line-height: 150%; /* Verringere die Zeilenhöhe für Überschriften */
    }
  
    .Informations_container p,
    .content_container_test p {
      font-size: 14px; /* Reduziere die Schriftgröße für Absätze */
      line-height: 150%; /* Verringere die Zeilenhöhe für Absätze */
    }

}

/* Responsive Design für Handys */
@media screen and (max-width: 480px) {
    .Informations_section {
      padding: 20px 0; /* Anpassung des Padding für kleinere Bildschirme */
    }
  
    .Informations_section img {
      margin-bottom: 15px; /* Abstand unter dem Bild verringern */
    }
  
    .Informations_container {
      width: 100%; /* Volle Breite für den Container */
      max-width: none; /* Keine maximale Breite */
    }
  
    .content_container_test {
      padding-left: 5px;
      padding-right: 5px;
      margin-top: 1px;
    }
  
    .Informations_container h2 {
      font-size: 24px; /* Reduziere die Schriftgröße für Überschriften */
      line-height: 140%; /* Verringere die Zeilenhöhe für Überschriften */
    }
  
    .Informations_container p,
    .content_container_test p {
      font-size: 12px; /* Reduziere die Schriftgröße für Absätze */
      line-height: 140%; /* Verringere die Zeilenhöhe für Absätze */
    }
}


/* Der code ist wieder nur für die Handy auflösung.*/
@media(max-width: 800px){
    #Top_Lernvideos_section{
                            padding: 50px 0;
                        }
    #Top_Lernvideos_section h2 {
                                text-align: center;
                                font-size: 12vw;
                            }
}

/*------ ENDE -- Section 2 --------- */











/*------ START -- Content Bereich --------- */
/*-------------- Feedermontage ------------ */

#contentBox_section    {
    /*border: 1px solid orange;*/
    padding: 50px 0;
    /*background-color: var(--second-color);*/
    display: flex;
    justify-content: center; /* Hier mit kann ich den Content bereich in die gewünschte Position centrieren.*/
    align-items: left;
    gap:50px; /* ist für die Lücke zwischen dem Bild und dem Text. */
    flex-wrap: wrap; /* (Responsiv) Damit der Inhalt des Content untereinander automatisch verschoben wird.*/
}

.container_contentBox_section  {
    /*border: 1px solid green;*/
    width: 640px;
    max-width: 90%;
}

#contentBox_section img    {
        width: 600px;
        max-width: calc(90% - 30px);
        border: 5px solid var(--text-color);
    }

/* Der code ist wieder nur für die Handy auflösung.*/
@media(max-width: 800px){
    #contentBox_sectionn{
                            padding: 50px 0;
                        }
    #contentBox_section h2 {
                                text-align: center;
                                font-size: 12vw;
                            }
}

/*------ ENDE -- Section 1 --------- */

/*------ START -- Section 2 --------- */
#contentBox_section     {
/*border: 1px solid orange;*/
padding: 50px 0;
background-color: var(--primary-color);
display:flex;
justify-content: center; /* Hier mit kann ich den Content bereich in die gewünschte Position centrieren.*/
align-items: right;
gap:50px; /* ist für die Lücke zwischen dem Bild und dem Text. */
flex-wrap: wrap; /* (Responsiv) Damit der Inhalt des Content untereinander automatisch verschoben wird.*/
}

.container_contentBox_section  {
/*border: 1px solid yellow;*/
width: 640px;
max-width: 90%;

}

#contentBox_section img    {
width: 600px;
max-width: calc(90% - 30px);
border: 5px solid var(--text-color);
}

.container_contentBox_section h2   {
font-size: 60px;
}

.container_contentBox_section p    {
text-align: justify;
line-height: 175%;
}


/* Der code ist wieder nur für die Handy auflösung.*/
@media(max-width: 800px){
#contentBox_section {
    padding: 50px 0;
}
#contentBox_section  h2 {
        text-align: center;
        font-size: 12vw;
    }
}

/*------ ENDE -- Section 2 --------- */

.content_limit_box{
    border-left: 1px solid #ffa500;
    border-right: 1px solid #ffa500;
    display: flex;
    margin: 0 auto;
    padding-top: 85px;
    max-width: 1330px; 
}

.impressum_box{
    /*border: 1px solid red;*/
    display: flex;
    justify-content:center;
    /*align-items: center;*/
    min-height: 63vh;               /* Anpassen der Höhe nach Bedarf */
    text-align: left;
    
}

.impressum_container{
    /*border: 1px solid blue;*/
    width: 1330px;              /* Anpassen der maximalen Breite nach Bedarf */
    /*margin-top: 60px;*/
    padding: 50px;
}


/* Media Query für Tablets (z.B., Bildschirme bis 768px Breite) */
@media only screen and (max-width: 1364px) {
    .content_limit_box {
        flex-direction: column; /* Ändert die Anordnung der Flexbox auf Spalten */
        border-left: none; /* Entfernt die linke Seite auf Tablets */
        border-right: none; /* Entfernt die rechte Seite auf Tablets */
    }
    .impressum_container {
        width: 100%; /* Füllt die gesamte Bildschirmbreite auf Tablets aus */
    }
}

/* Media Query für Handys (z.B., Bildschirme bis 480px Breite) */
@media only screen and (max-width: 480px) {
    .impressum_container {
        padding: 20px; /* Reduziert den Padding auf Handys für eine bessere Lesbarkeit */
        border-left: none; /* Entfernt die linke Seite auf Handys */
        border-right: none; /* Entfernt die rechte Seite auf Handys */
    }
}




.philo-container_box {
    /*border: 1px solid red;*/
    /*background-color: #f0f0f0;*/
    border-left: 1px solid #ffa500;
    border-right: 1px solid #ffa500;
    
    min-height: 72vh;               /* Anpassen der Höhe nach Bedarf der Auflösung*/
    max-width: 1330px;
    Margin: 0 auto;
    margin-top: -20px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr ;
    gap: 0 10px;
    grid-auto-flow: column;
    grid-template-areas:
      "philo_banner_box philo_content_box";
      
  }
  
.close-container_box{
    /*border: 1px solid pink;*/
    display: flex;
    width: 1330px;
   
}

.philo_banner_box { 
    /*border: 1px solid orange;*/
    /*border-top-right-radius: 15px;*/
    border-bottom-left-radius: 15px;
    
    
    /*background-color: rgba(0, 0, 0, 0.3);*/
    grid-area: philo_banner_box; 
    width: 20%;
    padding: 15px;
    
    text-align: center;
    background: linear-gradient(to bottom, rgba(20 20 20), transparent);

}
  
  .philo_content_box { 
    grid-area: philo_content_box; 
   /* border: 1px solid green;*/
    width: 80%;
    padding: 15px;
    padding-top: 60px;
}
  
.philo_content_box p { 
    padding: 8px;
    /*font-size: 15px;*/
}

/* Media Query für Tablets und Handys */
@media (max-width: 1330px) {
    .philo-container_box {
        grid-template-columns: 1fr; /* Ändert die Spaltenanordnung auf eine einzige Spalte */
        max-width: 100%; /* Setzt die maximale Breite auf 100% */
    }

    .close-container_box {
        width: 100%; /* Setzt die Breite des Containers auf 100% */
    }

    .philo_banner_box {
        width: 40%; /* Setzt die Breite der Banner-Box auf 100% */

        border-bottom-left-radius: 15px; /* Entfernt die abgerundeten Ecken */
    }

    .philo_content_box {
        width: 100%; /* Setzt die Breite der Content-Box auf 100% */
    }

    .philo_content_box h2 {
        font-size: 24px; /* Ändert die Schriftgröße des h2-Tags für kleinere Bildschirme */
    }

    .philo_content_box p {
        font-size: 14px; /* Ändert die Schriftgröße des Texts in philo_content_box für kleinere Bildschirme */
    }
}







  

  .copyright_box{
    /*border: 1px solid yellow;*/
    background-color: black;
    position: fixed;
    bottom: 0;
    left: 50%;                      /* Positioniert es horizontal in der Mitte */
    Transform: translateX(-50%);    /* Zentriert es horizontal */
        width: 100%;
        text-align: center;
        padding-top: 8px;
        
  }