/* Grundlegende Stile */
html, body {
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
   font-size: 16px; /* Standard-Schriftgröße */
}

.bold-text {
   font-weight: bold;
}

.wrapper {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

header {
   background-color: #333;
   color: #fff;
   padding: 1rem;
   text-align: center;
}

h1 {
   margin: 0;
}

main {
   flex: 1; /* Hauptinhalt nimmt den verfügbaren Platz ein */
   padding: 1rem;
}


/* Stile für die Bildergalerie */
.gallery {
   margin: 2rem 0;
}

.gallery h2 {
   text-align: center;
   margin-bottom: 1rem;
}

h2 {
   position: relative; /* Positionierung für das Pseudo-Element */
   margin-top: 30px; /* Abstand oben */
   margin-bottom: 10px; /* Abstand unter dem Titel */
}
h2::before {
   content: ''; /* Leeres Pseudo-Element */
   position: absolute; /* Absolut positioniert */
   left: -20px; /* Links von der Überschrift */
   top: -50%; /* Vertikal zentriert */
   transform: translateY(-50%); /* Vertikale Zentrierung */
   width: 100%; /* Breite der Linie */
   height: 2px; /* Höhe der Linie */
   background-color: #333; /* Farbe der Linie */
}
.image-container {
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.image-container img {
   max-width: 100%;
   height: auto;
   border: 2px solid #333;
   border-radius: 5px;
}

/* Stile für das Video */
.video {
   text-align: center;
   margin: 2rem 0;
}

.video video {
   max-width: 100%;
   border: 2px solid #333;
   border-radius: 5px;
}

.video-container {
   display: flex;                /* Flexbox aktivieren */
   justify-content: center;      /* Horizontale Zentrierung */
   align-items: center;          /* Vertikale Zentrierung */
   height: 100vh;               /* Höhe des Viewports */
}

video {
   max-width: 100%;             /* Video passt sich an die Breite des Containers an */
   height: auto;                /* Höhe automatisch */
   border: 2px solid #333;      /* Rahmen für das Video */
   border-radius: 5px;          /* Abgerundete Ecken */
}

/* Stile für den Inhalt */
.content {
   margin: 2rem 0;
}

.content h2 {
   margin-bottom: 1rem;
}

/* Footer-Stile */
footer {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 1rem;
}

.small-img {
   width: 150px;
   height: auto;
}

.medium-img {
   width: 300px;
   height: auto;
}

.large-img {
   width: 500px;
   height: auto;
}
.extralarge-img {
   width: 1000px;
   height: auto;
}
/* Stile für die gesamte Liste */
.my-list {
   list-style-type: disc; /* Standard-Aufzählungszeichen, bei <ol> könnte es z.B. decimal sein */
   padding-left: 20px; /* Einrückung der Liste */
   margin: 20px 0; /* Abstände vor und nach der Liste */
}

/* Stile für einzelne Listenelemente */
.my-list li {
   font-weight: bold; /* Macht die Schrift fett */
   font-size: 16px; /* Schriftgröße */
   color: #333; /* Textfarbe */
   margin-bottom: 10px; /* Abstand zwischen den Listenelementen */
   line-height: 1.5; /* Zeilenhöhe */
}

.contact-info {
    list-style-type: none; /* Keine Aufzählungszeichen */
    padding: 0; /* Kein Padding */
    margin: 20px 0; /* Abstände vor und nach der Liste */
}
.contact-info li {
    margin-bottom: 5px; /* Abstand zwischen den Listenelementen */
    font-size: 16px; /* Schriftgröße */
    color: #333; /* Textfarbe */
}