/* Allgemeine Einstellungen für mobile Geräte */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Reduzierte Schriftgröße für kleinere Bildschirme */
    }

    header {
        height: 70vh; /* Weniger Höhe für Header */
        padding: 10px; /* Weniger Padding */
    }

    header img {
        width: 300px; /* Kleinere Breite für Bilder */
    }

    .small-header {
        height: 40vh; /* Angepasste Höhe */
    }

    nav ul {
        flex-direction: column; /* Navigation vertikal ausrichten */
        gap: 10px;
    }

    nav ul li {
        margin: 5px 0; /* Weniger Abstand */
    }

    .services {
        grid-template-columns: 1fr; /* Eine Spalte auf kleinen Geräten */
        padding: 10px;
    }
	
	#about {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), 
                    url('https://marcelhansen.de/wp-content/uploads/2022/09/image00003-U.png') 
                    center/cover no-repeat;
    }

    .about-content {
        flex-direction: column; /* Inhalt untereinander anordnen */
    }

    .about-content img {
        width: 100%; /* Bildbreite an den Bildschirm anpassen */
    }

    .about-content p {
        font-size: 1rem;
        line-height: 1.4;
    }
}

/* Einstellungen für Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 17px; /* Leicht größere Schrift als auf Mobilgeräten */
    }

    header {
        height: 80vh;
    }

    .services {
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten für Tablets */
        gap: 15px;
    }

    .about-content {
        gap: 15px;
    }
}

/* Einstellungen für große Bildschirme */
@media (min-width: 1025px) {
    header {
        height: 100vh; /* Volle Höhe für große Bildschirme */
    }

    .services {
        grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
    }
}

/* Responsive-spezifische Stile */
@media (max-width: 768px) {
    .feedback-container {
        flex-direction: column;
        gap: 15px;
    }

    .feedback-item {
        flex: 1;
        text-align: center;
    }

    .feedback-item img {
        width: 60px;
        height: 60px;
    }

    .feedback-item p {
        font-size: 0.9rem;
    }

    .feedback-item:nth-child(2) {
        transform: none;
        flex: 1;
    }
}