@charset "utf-8"; /* Definiert die Zeichenkodierung für das Stylesheet. */

html { /* Ermöglicht weiches Scrollen innerhalb der Webseite. */
    scroll-behavior: smooth;
}

body { /* Definiert das Layout des gesamten Inhalts der Webseite. */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h2 { /* Spezifische Stilregeln für h2-Überschriften. */
    margin-bottom: 10px;
}

.BOX /* Definiert Layout und Aussehen von BOX-Elementen. */	
{
	text-align:center;
    display: flex;
    flex-direction:column;
    gap: 0px;
	padding: 0px;
	margin: 0px;
	height: auto;
	width: 100%;
	background-color:#f1ebe7;  
	font-family: 'arial';
}

.nav-logo { /* Stil und Positionierung des Logos innerhalb der Navigation. */
    height: 40px;  
    margin-right: 30px; 
    margin-top: 7px; 
    align-self: center; 
    }

    .MainNav { /* Hauptnavigation Style. */
        display: flex;
        align-items: center; 
        justify-content: center; 
        height: 50px;                                            
        width: 100%;                                            
        background-color: #FF813F;
        border-bottom: solid 2px black;
        border-top: solid 2px black;
        padding-left: 20px; 
    }
    
    .NavLevel1, .NavLevel2 a { /* Formatierung aller Texte */
        display: grid;
        z-index: 999;
        text-decoration: none;
        color: #000000;
        font-size: 25px;
        text-align: center;
        font-family: "arial";
        font-weight: bold;
    }
    
    .NavLevel1 { /* Stil für die erste Ebene */
        display: flex;
        text-align: center;
        justify-content: center;
        padding: 10px 20px; /* Raum um den Text */
        z-index: 999;
        background-color: transparent;
        justify-content: center;
    }
    
    .NavLevel1 a {
        text-decoration: none; 
        color: #000000;
    }
    
    /* Ändern des Hintergrunds, wenn der Mauszeiger über ein Element schwebt */
    .NavLevel1:hover {
        background-color: #cacbcb;
        cursor: pointer;
    }
    
    .NavLevel1 a:visited {
        color: #000000;
        text-decoration: none;
    }
    
    /* Stil für die zweite Ebene */
    .NavLevel2 {
        display: none;											
        position: absolute;										 
        height: auto;
        width: 223px;
        background-color: #FF813F;
        text-align: center;
        z-index: 999;
        top: 52px; /* Platzierung 100px unterhalb der Nav-Leiste */
    }
    
    .NavLevel2 a {
        display: grid;
        line-height: 2.5;
        border-left: solid 2px black;
        border-right: solid 2px black;
        border-bottom: solid 2px black;
    }
    
    /* Ändern des Hintergrunds der zweiten Ebene beim Hovern */
    .NavLevel2 a:hover {
        background-color: #cacbcb;
        z-index: 999;  
    }
    
    .NavLevel1:hover > .NavLevel2 {                                    
        display: block;                                            
    }
	
.FOOTER {
    position: relative; /* Wichtig, damit die absolute Positionierung des Baggers funktioniert */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #FF813F;
    padding-left: 0;
    font-family: 'arial';
    border-top: solid 2px black;
    border-bottom: solid 2px black;
    z-index: 999; /* Stelle sicher, dass der Footer über anderen Inhalten liegt */
    }		
  
    .FOOTER ul {
	display: flex;
	justify-content: space-between;
	align-items:center;
	width: 80%;
	margin: 0 auto;
    }
  
  
    .FOOTER ul li {
	display: inline-block;
	align-self:end ;
	padding:10px;
	margin: auto;
	justify-content:space-between;
    }
  
    .FOOTER ul li a {
	font-family: 'arial';
	color: #000000;
	text-decoration:none;
	display:block;
	padding: 10px;	  
}

/* Definition der Keyframe-Animation für den fahrenden Bagger */
@keyframes fahrenderBagger {
    0% {
        transform: translateX(-920%); /* Startet außerhalb des Bildschirms links */
    }
    100% {
        transform: translateX(920%); /* Bewegt sich bis außerhalb des Bildschirms rechts */
    }
}

    .bagger-animation {
        position: absolute;
        bottom: 50px; /* Reduzierter Abstand vom unteren Rand des Footers */
        width: 70px; /* Breite des Baggerbildes */
        animation: fahrenderBagger 30s linear infinite; /* Dauer, Art und Wiederholung der Animation */
    }

    @media (max-width: 768px) {
    .bagger-animation {
        width: 50px; /* Kleinere Breite für kleinere Bildschirme */
    }
}

.CONTENT {
  width: 80%;
  color: #000000;
  background-color: #00000042;
  margin: 50px auto;
  font-family: 'arial';
  font-size: 24px;
  border-radius: 15px;
  text-align: left;
  padding-left: 35px;
  padding-right: 40px;
  height: auto;
}

.text-image-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px; /* Abstand zwischen den Abschnitten */
}

    .text-image-container:nth-child(odd) {
        flex-direction: row-reverse; /* Bild rechts */
    }

    .text-image-container:nth-child(even) {
        flex-direction: row; /* Bild links */
    }

    .text-image-container img {
        width: 40%; /* Anpassung je nach Bedarf */
        height: auto;
        margin: 0 20px; /* Horizontaler Abstand */
    }

    /* Individuelle Größenanpassungen für spezifische Bilder */
    .text-image-container img[src="Bilder/Steinbruch Bagger.jpg"] {
        width: 40%; /* Angepasste Breite für dieses spezifische Bild */
        cursor: pointer;
    }

    .text-image-container img[src="Bilder/Bohrwagen.jpg"] {
        width: 30%; /* Angepasste Breite für dieses spezifische Bild */
        cursor: pointer;
    }

    .text-image-container img[src="Bilder/Radlader.jpg"] {
        width: 40%; /* Angepasste Breite für dieses spezifische Bild */
        cursor: pointer;
    }

    .text-image-container img[src="Bilder/Muldenkipper_LKW.jpg"] {
        width: 40%; /* Angepasste Breite für dieses spezifische Bild */
        cursor: pointer;
    }

    .text-image-container img[src="Bilder/seilsaege.jpg"] {
        width: 25%; /* Angepasste Breite für dieses spezifische Bild */
        cursor: pointer;
    }

    .text-image-container div {
        flex-grow: 1;
        flex-basis: 50%; /* Wie viel Platz der Textbereich einnehmen sollte */
    }

    @media (max-width: 768px) {
        .text-image-container {
            flex-direction: column;
            cursor: pointer;
        }

    /* Alle Bilder auf 100% Breite in der mobilen Ansicht setzen */
    .text-image-container img {
        width: 100%; /* Bildbreite auf kleineren Bildschirmen */
        margin: 10px 0; /* Abstand oben und unten */
        cursor: pointer;

    }
}

.rock-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 20px 0;
}

.rock-type {
    width: 45%; /* Jedes Bild nimmt etwa 45% der Breite ein, um Platz für zwei pro Zeile zu schaffen */
    margin-bottom: 20px;
}

.rock-type img {
    width: 100%;
    height: auto;
    display: block; /* Verhindert unerwünschte Ränder */
}

.rock-type p {
    text-align: left;
    padding: 10px;
}

@media (max-width: 768px) {
    .rock-type {
        width: 100%; /* Auf kleinen Bildschirmen nimmt jedes Element die volle Breite ein */
    }
}

.container {
	display: flex;
	justify-content: flex-end;
	padding-right: 1px;
	align-items: center; /* Zentrierung von Bild und Sprechblase vertikal */
}
  
.text p {
	margin: 0; /* Um den Abstand des Textes innerhalb der Sprechblase zu entfernen */
	color: #ffffff;
}
  
.haken {
	position: absolute;
	top: 20px;
	right: -35px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 17px 42px 0 0;
	border-color: #000000 transparent transparent transparent;
}
  
.bild {
	margin-left: 1px; /* Abstand zwischen Sprechblase und Bild anpassen */
  }
  
.bild img {
	width: 30%; /* Hier die prozentuale Größe des Bildes anpassen */
}

.image-overlay-container {
    position: relative;
    text-align: center;
}

.responsive {
    width: 100%;  /* Setzt die Breite des Bildes auf 50% des Containers */
    height: auto; /* Behält das Seitenverhältnis bei */
}

.overlay-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(0, 0, 0);
    font-size: 20px;
    font-weight: bold;
    background-color: #ff823fb0; /* Halbtransparenter schwarzer Hintergrund */
    padding: 10px 20px; /* Innenabstand */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Schatten für 3D-Effekt */
}

.overlay-button {
    display: inline-block;
    background-color: #FF813F; /* Setze eine spezifische Hintergrundfarbe */
    color: black; /* Setze die Textfarbe auf Schwarz (oder eine andere gewünschte Farbe) */
    text-decoration: none; /* Entferne Unterstreichungen */
    padding: 10px 20px; /* Polsterung für besseren Klickbereich und Aussehen */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s;
    border: 2px solid #000000; /* Schwarzer Rahmen */

} 

.overlay-button:hover {
    background-color: #e57235; /* Dunklerer Orange für Hover-Effekt */
}

.scroll-down {
    position: absolute;
    bottom: 350px; /* Abstand vom unteren Rand des Bildes */
    left: 47%; /* Zentrierung horizontal */
    transform: translateX(-50%); /* Genauere Zentrierung */
    text-align: center;
    animation: bounce 3s infinite;
}

.scroll-link {
    text-decoration: none;
    color: #e57235; /* Pfeilfarbe */
    font-size: 10rem; /* Größe des Pfeils */
    transition: color 0.3s;
}

.scroll-link:hover {
    color: #000000; /* Farbe beim Hover */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.CONTENT {
    width: 80%;
    color: #000000;
    background-color: #00000042;
    margin: 50px auto;
    font-family: 'arial';
    font-size: 24px;
    border-radius: 15px;
    text-align: left;
    padding-left: 35px;
    padding-right: 40px;
    height: auto;
  }


  .button-musik {
    display: flex;
    justify-content: left;
    align-items: left;
    gap: 0px; /* Abstand zwischen den Buttons */
}

.button-musik button {
    background: none; /* Kein Hintergrund für den Button */
    margin-top: 0px;  /* Reduziere den oberen Rand, falls zu viel Platz vorhanden ist */
    border: none; /* Keine Ränder */
    cursor: pointer;
    padding: 6px; /* Polsterung um das Bild */
}

.button-musik button img {
    width: 40px; /* oder eine andere passende Größe */
    height: auto;
    display: block; /* Verhindert unerwünschte Ränder um das Bild */
}

.slider-wrapper {
    position: relative;
    max-width: 50rem;
    margin: 0 auto;
}

    .slider {
        display: flex;
        aspect-ratio: 16 / 9;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
        border-radius: 0.5rem;
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        scrollbar-width: none; /* Firefox */
    }

    /* Verstecken der Scrollbalken für Webkit-Browser wie Chrome und Safari */
    .slider::-webkit-scrollbar {
    display: none;
    }

    .slider img {
    flex: 1 0 100%;
    scroll-snap-align: start;
    object-fit: cover;
    }

    /* Navigationsknöpfe */
    .prev, .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #e57235;
        border: 2px solid black; /* Aktualisierte Rahmen-Eigenschaft */
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
        z-index: 10;
        border-radius: 0.5rem;
        opacity: 0.75;
        transition: opacity ease 250ms;
        display: none; /* Standardmäßig beide Buttons versteckt */
    }
    
    .prev:hover, .next:hover {
        opacity: 1;
    }
    
    .prev {
        left: 0;
    }
    
    .next {
        right: 0;
}

.center-button-geschichte { /* Weiter Knopf -> zur naechsten Seite */
    display: none; /* Versteckt den Button zu Beginn */
    text-align: center; /* Zentriert den Inhalt innerhalb des Divs */
    margin-top: 20px; /* Optionaler Abstand nach oben */
    margin-bottom: 50px; /* Optionaler Abstand nach unten */
}

.center-button { /* Weiter Knopf -> zur naechsten Seite */
    text-align: center; /* Zentriert den Inhalt innerhalb des Divs */
    margin-top: 20px; /* Optionaler Abstand nach oben */
    margin-bottom: 50px; /* Optionaler Abstand nach unten */
}

.verlinkung {
    display: inline-block; /* Erlaubt die Zentrierung mit text-align */
    padding: 10px 20px; /* Polsterung für besseren Klickbereich und Aussehen */
    background-color: #FF813F; /* Hintergrundfarbe */
    color: rgb(0, 0, 0); /* Textfarbe */
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
    border-radius: 5px; /* Abgerundete Ecken */
    border: 2px solid #000000; /* Schwarzer Rahmen */
    transition: background-color 0.3s, border-color 0.3s; /* Sanfte Übergänge für Hover-Effekt */
}

.verlinkung:hover {
    background-color: #e57235; /* Dunklerer Orange für Hover-Effekt */
    border-color: #000000; /* Weißer Rahmen beim Hover */
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%; /* passt die Breite der Eingabefelder an den Container an */
    padding: 10px; /* sorgt für etwas Polsterung innerhalb der Felder */
    box-sizing: border-box; /* inkludiert Padding und Border in der Breite */
    border-radius: 5px;
    border: 1px solid #ccc;
}

button {
    background-color: #FF813F; /* Setze eine spezifische Hintergrundfarbe */
    color: black; /* Setze die Textfarbe auf Schwarz (oder eine andere gewünschte Farbe) */
    text-decoration: none; /* Entferne Unterstreichungen */
    padding: 10px 20px; /* Polsterung für besseren Klickbereich und Aussehen */
    border-radius: 5px;
    transition: background-color 0.3s;
    border: 2px solid #000000; /* Schwarzer Rahmen */
}

button:hover {
    background-color: #cacbcb;
    cursor: pointer;
}