/* Allgemeine Stile */
        body {
            margin: 0;
            padding: 0 20px;                 /*padding den Innenabstand zwischen dem Inhalt eines Elements und dessen Rahmen (Border). 
                                               Es ist der Bereich, der sich direkt um den Inhalt herum befindet und zur gleichen 
                                               Hintergrundfarbe wie das Element gehört. 
                                               Man kann Padding für alle vier Seiten eines Elements (oben, rechts, unten, links) einzeln festlegen */
            font-family: Arial, sans-serif;
            background-color: #414141;
            color: white;
        }

        /* Fixierter Kopfbereich */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            height: 70px;
            background-color: #1A1A1A;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 0 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            border-bottom: 5px solid #EE00EE;
        }

        .logo img {
            height: 60px;             /* Höhe des 7S Logo in der Kopzeile */
            transition: transform 0.3s ease, filter 0.3s ease;
        }
 .logo img:hover {
        transform: scale(0.9) rotate(0deg);
        filter: drop-shadow(0 0 20px #EE00EE);
    }

.nav-buttons {                       /*Klasse .nav-buttons Stile auf alle HTML-Elemente an, die diese Klasse tragen, typischerweise ein Container für Navigationsschaltflächen oder Links.*/
    display: flex;
    flex-wrap: wrap;                 /* Buttons umbrechen */
    gap: 0.5rem;                     /* Abstand zwischen Buttons */
    justify-content: flex-start;     /* Links ausrichten, damit nichts abgeschnitten wird */
    padding: 0.5rem 0.5rem;            /* Abstand rundum, wichtig für mobile Ansicht */
    box-sizing: border-box;          /* Padding wird in die Breite eingerechnet */
    overflow: visible;               /* Buttons nicht abschneiden */
}

.nav-buttons a {                     /* ist eine Nachfahrenauswahl, die Stile auf alle <a>-Elemente (Links) anwendet, die sich innerhalb des Elements mit der Klasse .nav-buttons befinden */
    font-family: 'RobotoSlab', sans-serif;
    font-size: clamp(0.8rem, 2vw, 1.2rem);  /* Button Schriftgröße, nie kleiner 0,8rem, nie größer 1,2rem */
    font-weight: bold;
    color: white;
    text-decoration: none;
    background-color: #444;
    padding: 0.5rem 0.75rem;                /* entspricht 8px 12px */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    flex: 0 0 auto;                         /* Buttons behalten ihre Größe */
    box-sizing: border-box;                 /* Padding in Button-Größe inkludieren */
}

        .nav-buttons a:nth-child(1) { background-color: #E63946; }
        .nav-buttons a:nth-child(2) { background-color: #F4A261; }
        .nav-buttons a:nth-child(3) { background-color: #2A9D8F; }
        .nav-buttons a:nth-child(4) { background-color: #A8DADC; }
        .nav-buttons a:nth-child(5) { background-color: #457B9D; }

        .nav-buttons a:hover {
            background-color: #000;    /* Buttons Farbe beim Hovern: Schwarz */
            border: 1px solid white;   /* Buttons-Rahmen Farbe beim Hovern: Weiß */
        }

        .nav-buttons a.active {
  background-color: #333;  /* gemeinsames Grau */
  color: #fff;            /* weiße Schrift (neutral) */
  font-weight: bold;
}

/* Rahmen in Originalfarbe je Button */
.nav-buttons a:nth-child(1).active { border: 4px solid #E63946; }
.nav-buttons a:nth-child(2).active { border: 4px solid #F4A261; }
.nav-buttons a:nth-child(3).active { border: 4px solid #2A9D8F; }
.nav-buttons a:nth-child(4).active { border: 4px solid #A8DADC; }
.nav-buttons a:nth-child(5).active { border: 4px solid #457B9D; }

        /* Inhaltsbereich */
        .content {
            margin-top: 80px;
            padding: 20px;
        }

        @font-face {
            font-family: 'RobotoSlab';
            src: url('../fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf') format('truetype');
            font-weight: 800;
            font-style: normal;
        }

        @font-face {
            font-family: 'Handschrift';
            src: url('../fonts/Handlee/Handlee-Regular.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
        }

        .schraeg {
            font-family: 'Handschrift', sans-serif;
            transform: rotate(-5deg);
            display: inline-block;
        }

        /* Linien */
        .linie {
            width: calc(100% - 40px);
            height: 4px;
            margin: 0 auto;
            display: block;
        }

        .linie_orange { background-color: #FF5733; }
        .linie_blau { background-color: #00A0E4; }
        .linie_gruen { background-color: #00A000; }
        .linie_lila { background-color: #FF6699; }


          /* schräge Linien */


        .linie_orange-horizontal {
            width: calc(100% - 40px); /* Breite der Linie */
            height: 4px;  /* Dicke der Linie */
            background-color: #FF5733; /* Farbe der Linie */
            transform: rotate(0deg); /* Drehung um 10 Grad */
            transform-origin: left; /* Drehpunkt anpassen (optional) */
            margin: 0 auto; /* Zentriert die Linie horizontal als Blockelement behandelt*/
            display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
        }

        .linie_hellrot-horizontal {
            width: calc(100% - 40px); /* Breite der Linie */
            height: 4px;  /* Dicke der Linie */
            background-color: #f0398f; /* Farbe der Linie */
            transform: rotate(0deg); /* Drehung um 10 Grad */
            transform-origin: left; /* Drehpunkt anpassen (optional) */
            margin: 0 auto; /* Zentriert die Linie horizontal als Blockelement behandelt*/
            display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
        }

        .linie_blau_unten-oben {
            width: calc(100% - 40px); /* Breite der Linie */
            height: 5px;  /* Dicke der Linie */
            background-color: #00A0E4; /* Farbe der Linie */
            transform: rotate(-1deg); /* Drehung um 10 Grad */
            transform-origin: left; /* Drehpunkt anpassen (optional) */
            margin: 0 auto; /* Zentriert die Linie horizontal */
            display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
        }



        .linie_blau_oben-unten {
            width: calc(100% - 40px); /* Breite der Linie */
            height: 5px;  /* Dicke der Linie */
            background-color: #00A0E4; /* Farbe der Linie */
            transform: rotate(1deg); /* Drehung um 10 Grad */
            transform-origin: left; /* Drehpunkt anpassen (optional) */
            margin: 0 auto; /* Zentriert die Linie horizontal */
            display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
        }



        .linie_blau-horizontal {
            width: calc(100% - 40px); /* Breite der Linie */
            height: 5px;  /* Dicke der Linie */
            background-color: #00A0E4; /* Farbe der Linie */
            transform: rotate(0deg); /* Drehung um 10 Grad */
            transform-origin: left; /* Drehpunkt anpassen (optional) */
            margin: 0 auto; /* Zentriert die Linie horizontal */
            display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
        }



        .linie_grün-horizontal {
            width: calc(100% - 40px); /* Breite der Linie */
            height: 5px;  /* Dicke der Linie */
            background-color: #00A000; /* Farbe der Linie */
            transform: rotate(0deg); /* Drehung um 10 Grad */
            transform-origin: left; /* Drehpunkt anpassen (optional) */
            margin: 0 auto; /* Zentriert die Linie horizontal */
            display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
            position: relative; /* Erlaubt Verschiebung */
            top: 0px; /* Schiebt das zweite Bild nach oben */
        }



    .linie_lila_oben-unten {
        width: calc(100% - 40px); /* Breite der Linie */
        height: 5px;  /* Dicke der Linie */
        background-color: #FF6699; /* Farbe der Linie */
        transform: rotate(1deg); /* Drehung um 10 Grad */
        transform-origin: left; /* Drehpunkt anpassen (optional) */
        margin: 0 auto; /* Zentriert die Linie horizontal */
        display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
    }



    .linie_lila_unten-oben { 
        width: calc(100% - 40px); /* Breite der Linie */
        height: 5px;  /* Dicke der Linie */
        background-color: #FF6699; /* Farbe der Linie */
        transform: rotate(-1deg); /* Drehung um 10 Grad */
        transform-origin: left; /* Drehpunkt anpassen (optional) */
        margin: 0 auto; /* Zentriert die Linie horizontal */
        display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
    }



        .linie_unten {
            width: calc(100% - 40px); /* Breite der Linie */
            height: 4px;  /* Dicke der Linie */
            background-color: #EE00EE; /* Farbe der Linie */
            transform: rotate(0deg); /* Drehung um 10 Grad */
            transform-origin: left; /* Drehpunkt anpassen (optional) */
            margin: 0 auto; /* Zentriert die Linie horizontal */
            display: block; /* Macht sicher, dass die Linie als Block-Element behandelt wird */
        }

        /* Bilder */
        .image-container {
            text-align: center;
            padding: 10px;
        }

        .image-container img {
            max-width: 100%;
            height: auto;
        }

        .image-container-neben {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .image-container-neben img {
            max-width: calc(50% - 10px);
            height: auto;
        }

        /* Container für die Bilder: Bilder Überlappen  dynamische Größe */
        .image-container-oben {
            text-align: center; /* Zentriert die Bilder */
        }

        /* Gemeinsamer Stil für beide Bilder */
        .image-container-oben .image {
            display: block;
            max-width: 90%; /* Passt die Breite an */
            height: auto;    /* Hält das Seitenverhältnis */
            margin: 0 auto; /* Zentriert die Bilder */
            margin-bottom: 0px;
        }

        /* Individueller Stil für das zweite Bild */
        .image-container-oben .image.second {
            position: relative; /* Erlaubt Verschiebung */
            top: -20px; /* Schiebt das zweite Bild nach oben */
        }
          /* Zentrieren und responsives Verhalten des Bildes */
        .responsive-image {
            display: block;
            max-width: 90%; /* Breite beschränkt auf 100% des Containers */
            height: auto;    /* Höhe passt sich proportional an */
            margin: 0 auto;  /* Zentrieren des Bildes */
			margin-bottom: 0px; /* Abstand zwischen den Bildern */
        }

        /* Optional: Styling des Containers */
        .image-container {
            text-align: center; /* Alternative Zentrierung über den Container */
            padding: 10px;
        }

        /*Bild positionieren  */

.image-container-position {
    display: block;
    
 text-align: center;  /* Horizontal zentrieren */
  /* align-items: center;      /* Vertikal zentrieren */
  /* height: 100vh;            /* Container nimmt volle Höhe der Viewport-Höhe ein */
  }
  
  .styled-image {
    position: relative;
  top: 20px;               /* Verschiebung des Bildes nach unten */
   max-width: 90%; /* Breite beschränkt auf 100% des Containers */
  height: auto;             /* Höhe automatisch im Verhältnis zur Breite */
  border: none;
     }

/* Farbe der Links */
       .custom-link {
      color: #2A9D8F;
    }
  
    .custom-link:visited {
      color: #E63946;
    }
  
    .custom-link:hover {
      color: #F4A261;
    }
  
    .custom-link:active {
      color: #457B9D;
    }


    /* Container für das Video */
    .video-container {
        text-align: center; /* Horizontale Zentrierung */
        margin: 20px 0;    /* Optional: Abstand oben und unten */
    }

    video {
        border: 0px solid #FF5733; /* Optional: Rahmen um das Video */
        border-radius: 10px;       /* Optionale Abrundung der Ecken */
    }

.video-wrapper {
   max-width: 900px;  /* maximale Breite des gesamten Containers */  
   max-height: 80vh;     /* Container maximal 80% der Fensterhöhe */
    width: auto;          /* Breite passt sich proportional an */
    margin: 20px auto;    /* zentriert */
    text-align: center;
  }
  
  .video-wrapper video {
    height: 100%;         /* füllt Container-Höhe */
    width: auto;          /* proportional */
    max-width: 80%;      /* passt auf kleine Bildschirme */
    border-radius: 12px;
    display: inline-block;
  }


video::-webkit-media-controls {
  opacity: 0;
  transition: opacity 0.3s;
}
video:hover::-webkit-media-controls {
  opacity: 1;
}





/* Burger Symbol standardmäßig ausblenden */
.burger {
  display: none;
  font-size: 24px;
  background: none;
  border: none;
  color: #eeeeee;
  cursor: pointer;
}


       /* --- Tablet Ansicht --- */

       /* ---ausgeblendet 

@media (max-width: 768px) {
  .nav-buttons {
    flex-direction: column;
    gap: 5px;
    align-items: flex-start; // Links ausrichten statt abgeschnitten
     padding: 0.25rem 1rem; /* kleineres Padding 
    margin-top: 150px;      /* Abstand unterhalb 
      background-color: #000;   /* schwarzer Hintergrund
            border: 2px solid #EE00EE;
    padding: 10px;            /* innenabstand rundum 
    border-radius: 10px;       /* optional abgerundete Ecken 
      transition: box-shadow 0.3s ease, border-color 0.3s ease; /* sanfte Animation 
  }

  .nav-buttons a {
    font-size: 1rem;
    padding: 6px 10px;
    width: 100%;            /* Buttons nehmen ganze Breite 
    box-sizing: border-box; /* damit Padding sauber mitgerechnet wird 
  }

  .nav-buttons:hover {
    border-color: #FF66FF;           /* Rahmenfarbe beim Hover etwas heller 
    box-shadow: 0 0 10px #EE00EE;    /* leichter Leuchteffekt 
}

  .image-container-neben img {
    max-width: 100%;
  }
}

--- */

/* --- Handy Ansicht ab 460px--- */
@media (max-width: 900px) {
  .nav-buttons {
    display: none;  /* standardmäßig ausgeblendet */
    flex-direction: column;
    align-items: center;
    background: #555;
    position: absolute;
    top: 70px; /* unterhalb Header – ggf. anpassen */
    width: 95%; /* breite des Hintergrundes der Buttons */
    left: 0;
    right: 0;
    margin: 0 auto; /* Button kleiner als Background */
    padding: 15px 0;
    border-radius: 0 0 8px 8px;
    z-index: 1000; /* sicherstellen, dass Menü über dem Inhalt liegt */
  }


  .nav-buttons.show {
    display: flex; /* wird per JS-Klick ein/ausgeblendet */
  }

  .burger {
 display: block;
    position: relative;  /* nicht absolut, läuft im Flex-Layout mit */
    right: auto;
    top: auto;
    margin-left: 30px;   /* etwas Abstand vom Logo oder Text */
    font-size: 30px;
    background: none;
    border: none;
    color: #eeeeee;
    cursor: pointer;
    z-index: 1100;
  }

  .nav-buttons a {
    padding: 10px 0;
    width: 95%;             /* breite der farbigen Buttons zum Hintergrund beim offenen Burger-Menü */
    text-align: center;
    border-bottom: 1px solid #444;
  }

  .nav-buttons a:last-child {
    border-bottom: none;
  }
}

.social-container {
  text-align: center;      /* Text zentrieren */
}

.social-text {
  font-family: 'Roboto Slab', serif; /* Schriftart */
  font-size: 1.125rem;
  color: #eeeeee;
  font-weight: bold;
  margin-bottom: 10px;     /* Abstand zum Icon-Block */
}

.social-icons {
  display: inline-flex;     /* Icons nebeneinander */
  gap: 25px;                /* Abstand zwischen den Icons */
}

.social-icons img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}