/* Mobile Styles */
@media screen and (max-width: 768px) {

    /* Header */
    header .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    header .logo {
        margin-bottom: 10px;
    }

    header .subtext {
        font-size: 1.5rem;
        margin-bottom: 10px;
        font-weight: bold;
    }

    header .buttons a {
        display: block;
        margin: 10px 0;
        text-align: center;
    }

    /* Image Section */
    .image-section {
        flex-direction: column;
        align-items: center;
        text-align: center; /* Zentrieren von Text */
    }

    .image-container {
        width: 80%; /* Verkleinern der Bildbreite */
        margin-bottom: 20px;
    }

    .text-overlay {
        font-size: 1.5rem;
    }

    /* Text Section */
    .text-section {
        padding: 30px 20px; /* Weniger Padding für kleinere Bildschirme */
        height: auto; /* Anpassung an Inhalt */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .text-section h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
        text-align: center; /* Zentrierter Text */
    }

    .text-section .button {
        padding: 8px 16px;
        font-size: 1rem;
        position: relative;
        left: 0;
        margin-top: 10px;
    }

    /* Info Section */
    .info-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .info-image {
        width: 80%;
        margin-bottom: 20px;
    }

    .info-list {
        display: flex;
        justify-content: center; /* Zentriert die gesamte Liste */
    }
    
    .info-list ul {
    list-style-type: disc; /* Standard-Punkt */
    list-style-position: inside; /* Punkt innerhalb des Textbereichs */
    padding: 0; /* Entfernt unnötiges Padding */
    text-align: center; 
    }
    
    .info-list ul li {
        margin: 10px 0; /* Abstand zwischen den Punkten */
        font-size: 1rem; /* Schriftgröße anpassen */
        position: relative;
    }

    /* Packages Section */
    .packages-section h2 {
        font-size: 2rem;
        text-align: center;
    }

    .packages-container {
        display: flex;
        flex-direction: column; /* Pakete untereinander anordnen */
        align-items: center;
    }

    .package {
        width: 80%; /* Breite der Pakete anpassen */
        margin-bottom: 20px;
        text-align: center; /* Inhalte innerhalb der Pakete zentrieren */
    }

    .package h3 {
        font-size: 1.6rem;
    }

    .package p {
        font-size: 1rem;
    }

    .price-button {
        font-size: 1rem;
        padding: 10px 20px;
    }

    /* Three Images Section */
    .three-images-section {
        flex-direction: column;
        text-align: center;
    }

    .three-images-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .images_reifen {
        width: 80%;
        margin-bottom: 20px;
    }

    .text-overlay {
        font-size: 1.2rem;
    }

    /* Contact Section */
    .contact-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-item {
        width: 80%;
        margin-bottom: 20px;
    }

    /* Why Vivies Section */
    .why-vivies-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .why-vivies-image {
        width: 80%;
        margin-bottom: 20px;
    }

    .why-vivies-points ul {
        padding-left: 0;
        list-style-type: none;
    }

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

    /* Footer */
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-logo img {
        width: 150px;
        margin-bottom: 20px;
    }

    .footer-content {
        text-align: center;
    }

    .footer-links {
        margin-top: 20px;
    }

    .footer-links a {
        display: block;
        margin-bottom: 10px;
    }
}

/* Extra Small Devices (Mobile Portrait) */
@media screen and (max-width: 480px) {

    /* Header */
    header .subtext {
        font-size: 1rem;
    }

    header .buttons a {
        font-size: 0.9rem;
    }

    /* Image Section */
    .image-container img {
        width: 100%;
    }

    /* Packages Section */
    .package h3 {
        font-size: 1.6rem;
    }

    .package p {
        font-size: 1rem;
    }

    .price-button {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    /* Button */
    .text-section .button {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    /* Contact Section */
    .contact-item h3 {
        font-size: 1.5rem;
    }

    .contact-item p {
        font-size: 1rem;
    }

    .contact-item a {
        font-size: 1rem;
    }
}