/* Globale Stile */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif; /* Globale serifenlose Schriftart festlegen */
    line-height: 1.5;
    min-height: 100vh; /* Mindesthöhe des Body auf 100% der Bildschirmhöhe setzen */
}

.container {
    flex: 1; /* Container füllt den verbleibenden Platz aus */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(137, 140, 143);
    border-left: 20px solid rgb(51, 51, 51);
    border-right: 20px solid rgb(51, 51, 51);
    overflow: hidden; /* Überlauf verstecken, um doppelte Scrollleisten zu verhindern */
}

.content {
    max-height: calc(100vh - 40px); /* Maximale Höhe des Inhalts auf die Bildschirmhöhe minus die oberen und unteren Rahmen setzen */
    overflow-y: auto; /* Vertikale Scrollleiste hinzufügen, wenn der Inhalt die Höhe des Containers überschreitet */
}

/* Stile für den Footer */
.footer {
    background-color: rgb(90, 93, 96);
    padding: 20px;
    border-left: 20px solid rgb(51, 51, 51);
    border-right: 20px solid rgb(51, 51, 51);
    width: calc(100%); /* Footer auf 100% Breite setzen */
    box-sizing: border-box; /* Berücksichtigung von Padding und Border in der Breite */
}

.datenschutz {
    width: 1000px; /* Breite des Blocks auf 1000px setzen */
    margin: 0 auto; /* Zentrieren des Blocks horizontal */
    padding: 20px; /* Beispielwert für das Padding */
    background-color: rgb(214, 217, 220);
    box-sizing: border-box; /* Berücksichtigung von Padding und Border in der Breite */
}

.block {
    flex: 1; /* Blöcke teilen den verfügbaren Platz gleichmäßig */
    width: 100%; /* Volle Breite für die Blöcke */
    max-width: 500px; /* Maximale Breite von 500px für die Blöcke beibehalten */
    background-color: rgb(214, 217, 220);
    margin: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px; /* Beispielwert für das Padding */
    box-sizing: border-box; /* Berücksichtigung von Padding und Border in der Breite */
    height: calc(500px / 0.618); /* Berechnung der Höhe basierend auf dem Seitenverhältnis */
}

.block img {
    height: auto; /* Automatische Anpassung der Höhe */
    width: 100%; /* Volle Breite für das Bild */
}

.container .block .logo_3 {
    width: 350px;
    height: auto;
    margin-left: 20px;
}


.block-text {
    height: calc(500 / 0.618); /* Automatische Anpassung der Höhe */
}

/* Stile für die Links im Block */
.block .links {
    margin-top: 200px; /* Abstand nach oben hinzufügen */
}

.container .block.right h3{
    margin-top: 250px;
    line-height: 0.5; /* Verringert den Zeilenabstand */
}

.block .links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.block .links ul li {
    margin-bottom: 35px;
    margin-left: 25px;
}

.block img {
    width: 100%; /* Volle Breite für das Bild */
    height: auto; /* Automatische Anpassung der Höhe */
    max-height: calc(100%); /* Maximale Höhe des Bildes im Block */
}

.block.right {
    padding-top: 195px;
    padding-bottom: 50px;
    padding-left: 80px; /* Einrücken des Textes im rechten Block */
}

/* Stile für den Header */
header {
    display: flex;
    justify-content: space-between; /* Rechtsbündige Ausrichtung */
    align-items: center;
    padding: 20px;
    background-color: rgb(90, 93, 96);
    border-left: 20px solid rgb(51, 51, 51);
    border-right: 20px solid rgb(51, 51, 51);
    position: relative; /* Position auf relativ setzen */
    z-index: 2; /* Höherer Z-Index als andere Elemente */
    width: calc(100%); /* Header auf 100% Breite setzen */
    box-sizing: border-box; /* Berücksichtigung von Padding und Border in der Breite */
}

.header .logo_3 {
    width: 180px;
    height: auto;
    margin-left: 20px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin-left: 20px; /* Abstand zwischen den Links */
}

nav ul li:first-child {
    margin-left: 0; /* Entfernt den Abstand vom ersten Link */
}

/* Globale Stile für alle Links */
a {
    color: rgb(93, 105, 112); /* Standardfarbe für Links */
    text-decoration: none; /* Entfernt Unterstreichungen */
    transition: color 0.3s; /* Animiert den Farbwechsel */
}

/* Stile für Links im Header */
header a {
    color: rgb(230, 235, 237); /* Weisse Farbe für Links im Header */
}

/* Stile für Links im Footer */
.footer a {
    color: rgb(230, 235, 237); /* Weisse Farbe für Links im Footer */
}

a:hover {
    color: gray; /* Farbe beim Überfahren mit der Maus */
}

a:active,
a:focus {
    color: darkgray; /* Farbe beim Anklicken */
}

.footer .links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.box-link {
    color: rgb(93, 105, 112); /* Standardfarbe für Links */
    text-decoration: none; /* Entfernt Unterstreichungen */
    transition: color 0.3s; /* Animiert den Farbwechsel */
    border: 2px solid rgb(93, 105, 112);
    padding: 5px 10px;
    margin: 5px;
    text-decoration: none; /* Entfernt die Standardunterstreichung */
    color: rgb(93, 105, 112); /* Linktextfarbe */
}
.box-link:hover {
    color: gray; /* Farbe beim Überfahren mit der Maus */
}

.box-link:active,
.box-link:focus {
    color: darkgray; /* Farbe beim Anklicken */
}



@media (max-width: 1150px) {
    .block {
        max-width: 500px; /* Maximale Breite von 500px für die Blöcke beibehalten */
        width: 100%; /* Volle Breite für die Blöcke */
        height: calc(100vw / 1.4); /* Berechnung der Höhe basierend auf dem Seitenverhältnis */
    }
}

/* Media Query für Portrait-Modus */
@media (orientation: portrait) {
    .container {
        flex-direction: column; /* Container wird in Spaltenrichtung angeordnet */
        align-items: center; /* Zentriert den Inhalt vertikal */
        height: auto; /* Automatische Höhe basierend auf dem Inhalt */
        min-width: 580px;
    }

    .block {
        width: calc(100% - 20px); /* Volle Breite für die Blöcke mit Abzug der margin */
        height: auto; /* Automatische Höhe basierend auf dem Inhalt */
    }
}