/* Grund-Einstellungen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
    font-family: sans-serif;
    color: white; /* Textfarbe an Hintergrund anpassen */
    overflow: hidden; /* Verhindert Scrollen */
}

/* Der adaptive Hintergrund */
body {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Bild füllt den Bildschirm immer aus */
}

/* Gemeinsame Stile für den Rechtstext oben rechts */
.legal-info {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.75rem;
    opacity: 0.8;
    text-align: left;
    z-index: 10;
    max-width: 250px;
    line-height: 1.3;

}

/* QUERFORMAT (PC / Tablet Landscape) */
@media (orientation: landscape) {
    body {
        background-image: url('hintergrund-quer.jpg');
        max-width: 1920px; /* Begrenzung laut Anforderung */
        max-height: 1080px;
        margin: 0 auto; /* Zentriert die Seite, falls Monitor größer als 1920px */
    }

    /* Logo im Querformat: unten links */
    .logo {
        bottom: 2rem;
        left: 2rem;
    }
}

/* HOCHFORMAT (Smartphone / Tablet Portrait) */
@media (orientation: portrait) {
    body {
        background-image: url('hintergrund-hoch.jpg');
    }

    /* Logo im Hochformat: unten mittig */
    .logo {
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Basis-Layout für den Inhalt */
.content-overlay {
    height: 100%;
    position: relative; /* Wichtig für die absolute Positionierung des Logos */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Kontakt-Info bleibt vertikal zentriert */
    align-items: center;     /* Kontakt-Info horizontal zentriert */
    text-align: left;
    background: rgba(0, 0, 0, 0.3); /* Optional: dunkler Schleier für Lesbarkeit */
    padding: 2rem;
}

/* Logo-Einstellungen */
.logo {
    position: absolute;
    max-width: 300px; /* Maximale Breite für das Logo, passt sich gut an */
    width: 30vw;      /* Alternativ flexibel über Bildschirmbreite */
    height: auto;
}

/* Abstand zwischen Logo und Kontakt im Flow korrigieren */
.contact-info {
    margin-top: auto;
    margin-bottom: auto;
}