body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #2f2f2f; /* Anthrazitgrau */
    scroll-behavior: smooth; /* Smooth Scroll CSS */

}

.image-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    position: relative;
}

.image-container {
    position: relative;
    width: 45%;
    height: 300px; /* Einheitliche Höhe für beide Container */
    overflow: hidden; /* Überflüssige Teile des Bildes abschneiden */
}

.image-container img {
    width: 100%;
    height: 100%; /* Füllt die Höhe des Containers */
    object-fit: cover; /* Bild bleibt proportional und füllt den Container */
    border-radius: 15px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.image-container img:hover {
    opacity: 1;
}

.image-container .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px black;
    text-align: center;
}


.text-section {
    background-image: url('IMG/Abschnitt1_Banner.png');
    background-size: cover;
    background-position: center;
    text-align: center;
    color: white;
    padding: 20px;
    height: 500px;
    display: flex;
    flex-direction: column;  /* Anordnung der Inhalte untereinander */
    justify-content: center;  /* Vertikale Zentrierung */
    align-items: center;  /* Horizontale Zentrierung */
}

.text-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.text-section .button {
    display: inline-block; /* Button passt sich der Textbreite an */
    text-decoration: none;
    color: #ffffff;
    background-color: #315379;
    padding: 10px 20px; /* Hier kannst du die Breite des Buttons steuern */
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.3s;
    position: relative;
    left: -200px; /* Entfernt die linke Verschiebung */
    white-space: nowrap; /* Verhindert Zeilenumbruch im Button-Text */
}

.text-section .button:hover {
    background-color: #ecc19c;
    color: #3d3d3d;
    font-weight: bold;
}




.info-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 20px;
    color: white;
}

.info-section .info-image {
    width: 50%;
}

.info-section .info-image img {
    width: 100%;
    border-radius: 15px;
}

.info-section .info-list {
    width: 45%;
}

.info-section .info-list ul {
    list-style: none;
    padding: 0;
}

.info-section .info-list ul li {
    font-size: 3rem;
    margin-bottom: 10px;
}

.packages-section {
    padding: 60px 20px;
    color: white;
}

.packages-section h2 {
    font-size: 2.5rem;
    text-align: left;
    margin-bottom: 40px;
}

.packages-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.package {
    background-color: rgb(66, 64, 64);
    opacity: 0.7;
    padding: 20px;
    border-radius: 15px;
    width: 30%;
    position: relative;
    text-align: center;
}

.package h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.package p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.package img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 20px;
}

.package .price-button {
    position: absolute;
    bottom: 70px;
    left: 30px;
    padding: 10px 20px;
    background-color: white;
    color: black;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    cursor: default;
    
}

.three-images-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.three-images-container {
    display: flex;
    width: 100%;
}

.images_reifen {
    position: relative;
    flex: 1;
    height: 350px; /* Einheitliche Höhe für alle Container */
    overflow: hidden; /* Überstehende Bildteile ausblenden */
}

.images_reifen img {
    width: 100%;
    height: 100%; /* Füllt die Höhe des Containers */
    object-fit: cover; /* Behält das Seitenverhältnis bei und füllt den Container */
    transition: opacity 0.3s;
}

.images_reifen .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px black;
    text-align: center;
}


.contact-section {
background-color: #1a1a1a;
color: white;
text-align: center;
padding: 60px 20px;
}

.contact-section h2 {
font-size: 2.5rem;
margin-bottom: 40px;
}

.contact-container {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}

.contact-item {
flex: 1 1 30%;
max-width: 300px;
text-align: center;
background-color: #2f2f2f;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.contact-item h3 {
font-size: 1.8rem;
margin-bottom: 10px;
}

.contact-item p {
font-size: 1.2rem;
margin: 0;
}

.contact-item a {
text-decoration: none;
color: #00bcd4; /* Türkis */
font-weight: bold;
}

.contact-item a:hover {
color: #00e5ff; /* Heller Türkis */
}

.why-vivies-section {
background-color: #2f2f2f;
color: white;
text-align: center;
padding: 60px 20px;
}

.why-vivies-section h2 {
font-size: 2.5rem;
margin-bottom: 40px;
font-weight: bold;
}

.why-vivies-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px;
}

.why-vivies-image {
flex: 1;
max-width: 50%;
}

.why-vivies-image img {
width: 100%;
border-radius: 15px;
}

.why-vivies-points {
flex: 1;
max-width: 50%;
text-align: left;
}

.why-vivies-points ul {
list-style-type: disc;
padding-left: 20px;
}

.why-vivies-points li {
font-size: 1.2rem;
margin-bottom: 10px;
}