/* Global Styles */
body {
    font-family: Arial, sans-serif; /* Schriftart für die gesamte Seite */
    margin: 0; /* Entfernt Standardabstände */
    padding: 0; /* Entfernt Standardabstände */
    box-sizing: border-box; /* Sorgt für konsistente Größenberechnung */
    background-image: url("background.jpg"); /* Hintergrundbild */
    background-size: cover; /* Bild skaliert auf gesamten Bildschirm */
    background-position: center; /* Hintergrundbild zentrieren */
    background-attachment: fixed; /* Hintergrund bleibt beim Scrollen */
}

/* Header Styling */
header {
    background-color: #ffffff; /* Hauptfarbe des Headers */
    color: #000000; /* Schriftfarbe im Header */
    padding: 10px 20px; /* Abstand im Header */
    display: flex; /* Flexbox für Layout */
    justify-content: space-between; /* Platz zwischen Logo und Navigation */
    align-items: center; /* Vertikale Ausrichtung */
    position: sticky; /* Fixiert Header beim Scrollen */
    top: 0; /* Oben auf der Seite */
    z-index: 1000; /* Schichtung des Headers */
}

header img {
    max-height: 100px; /* Maximale Höhe des Logos */
}

/* Navigation Styling */
nav ul {
    list-style: none; /* Entfernt Punkte von Listen */
    margin: 0; /* Entfernt Außenabstand */
    padding: 0; /* Entfernt Innenabstand */
    display: flex; /* Horizontale Ausrichtung der Navigation */
}

nav ul li {
    margin: 0 15px; /* Abstand zwischen den Navigationspunkten */
}

nav ul li a {
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    color: #000000; /* Schriftfarbe der Links */
    font-size: 1rem; /* Schriftgröße der Links */
}

nav ul li a.cta {
    background-color: #8CA4BC; /* Farbe des Buttons */
    color: white; /* Textfarbe */
    padding: 10px 20px; /* Innenabstand für den Button-Look */
    border-radius: 5px; /* Abgerundete Ecken */
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-weight: bold; /* Text fett */
    transition: background-color 0.3s; /* Weicher Übergang beim Hover */
}

nav ul li a.cta:hover {
    background-color: #6F8DA1; /* Farbe beim Hover */
}



/* Hamburger Menü für mobile Ansicht */
.menu-icon {
    display: none; /* Wird nur bei kleinen Bildschirmen angezeigt */
    font-size: 1.5rem; /* Schriftgröße für Symbol */
    cursor: pointer; /* Zeigt Handcursor beim Klicken */
}

/* Hero Section Styling */
.hero {
    text-align: center; /* Zentriert Text */
    padding: 50px; /* Abstand oben und unten */
    background-color: rgba(140, 164, 188, 0.8); /* Hintergrundfarbe mit Transparenz */
    color: black; /* Schriftfarbe */
}

.hero h1 {
    font-size: 2.5rem; /* Überschriftengröße */
}

.hero p {
    font-size: 1.2rem; /* Textgröße */
}

/* Body Layout */
.container {
    display: flex; /* Horizontales Layout */
    justify-content: space-between; /* Abstand zwischen linken und rechten Teil */
    align-items: center; /* Vertikale Ausrichtung */
    padding: 50px; /* Abstand zum Rand */
    color: #ffffff; /* Schriftfarbe */
    background-image: url(img/background-3.jpg);
    
}

.container .content {
    flex: 1; /* Nutzt gleiche Breite wie das Bild */
    margin-right: 20px; /* Abstand zum Bild */
}

.container .content h2 {
    font-size: 2rem; /* Titelgröße */
    margin-bottom: 20px; /* Abstand unterhalb des Titels */
}

.container .content p {
    font-size: 1.2rem; /* Textgröße */
}


.container .image {
    flex: 0.5; /* Gleiche Breite wie Textinhalt */
}


.container .image img {
    max-width: 300px; /* Maximale Breite von 300 Pixel */
    width: 100%; /* Fallback für kleinere Container */
    height: auto; /* Beibehaltung der Proportionen */
}

/* Footer Styling */
footer {
    background-color: #89939E; /* Dunkler Hintergrund */
    color: white; /* Weißer Text */
    padding: 20px; /* Innenabstand */
}

.footer-container {
    display: flex; /* Flexbox für Spaltenlayout */
    justify-content: space-between; /* Gleichmäßiger Abstand zwischen Spalten */
    flex-wrap: wrap; /* Zeilenumbruch bei kleinen Bildschirmen */
    max-width: 1200px; /* Maximale Breite des Footers */
    margin: 0 auto; /* Zentrierung des Containers */
}

.footer-column {
    flex: 1; /* Alle Spalten gleich breit */
    margin: 10px; /* Abstand zwischen Spalten */
}

.footer-column h3 {
    font-size: 1.2rem; /* Überschriftengröße */
    margin-bottom: 10px; /* Abstand nach unten */
}

.footer-column ul {
    list-style: none; /* Entfernt Listenpunkte */
    padding: 0; /* Kein Innenabstand */
}

.footer-column ul li {
    margin-bottom: 5px; /* Abstand zwischen Links */
}

.social-media a {
    color: white; /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
}

.footer-column ul li a {
    color: white; /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
}

.footer-column ul li a:hover {
    color: #0b0d0e; /* Farbe beim Hover */
}

/* Newsletter Styling */
footer form {
    display: flex; /* Elemente nebeneinander */
    flex-direction: column; /* Anordnung untereinander bei kleinen Bildschirmen */
}

footer input[type="email"] {
    padding: 10px; /* Innenabstand */
    margin-bottom: 10px; /* Abstand nach unten */
    border: none; /* Keine Umrandung */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 1rem; /* Schriftgröße */
}

footer button {
    background-color: #8CA4BC; /* Button-Farbe */
    color: white; /* Textfarbe */
    padding: 10px; /* Innenabstand */
    border: none; /* Keine Umrandung */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 1rem; /* Schriftgröße */
    cursor: pointer; /* Zeigt Handcursor beim Hover */
}

footer button:hover {
    background-color: #6F8DA1; /* Farbe beim Hover */
}

/* Logo Styling */
.footer-logo {
    max-width: 150px; /* Maximale Breite des Logos */
    margin-bottom: 10px; /* Abstand nach unten */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Spalten untereinander anordnen */
        text-align: center; /* Zentrierter Text */
    }

    .footer-column {
        margin: 20px 0; /* Abstand zwischen Spalten */
    }

    footer form {
        align-items: center; /* Zentrierte Newsletter-Form */
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .menu-icon {
        display: block; /* Zeigt das Hamburger-Menü */
    }

    nav ul {
        display: none; /* Versteckt Navigation standardmäßig */
        flex-direction: column; /* Vertikale Navigation für kleine Bildschirme */
        background-color: #ffffff; /* Hintergrundfarbe für Menü */
        position: absolute; /* Fixiert Menü */
        top: 120px; /* Abstand vom Header */
        right: 0; /* Ausrichtung am rechten Bildschirmrand */
        width: 100%; /* Volle Breite */
    }

    nav ul.show {
        display: flex; /* Zeigt Navigation beim Klicken */
    }

    nav ul li {
        margin: 10px 0; /* Vertikaler Abstand zwischen Links */
    }

    /* Body Layout Anpassung */
    .container {
        flex-direction: column; /* Vertikales Layout für kleine Bildschirme */
    }

    .container .content {
        margin-right: 0; /* Entfernt Abstand bei mobilem Layout */
        margin-bottom: 20px; /* Abstand zum Bild */
    }
}

.apps {
    max-width: 5000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

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

.apps_column {
    flex: 1;
    padding:0%;
    text-align: center;
}