/* 
Setzt das Box-Sizing für das gesamte Dokument auf border-box.
Damit werden Padding und Border in die Breite und Höhe der Elemente einbezogen.
Wir starten beim html-Element, weil es die Wurzel des Dokuments ist.
*/
html {
    box-sizing: border-box;
}

/* 
Alle Elemente und ihre Pseudoelemente (::before, ::after) 
erben das Box-Sizing vom html-Element.
Das sorgt für ein konsistentes Layout im ganzen Dokument.
*/
*, *::before, *::after {
    box-sizing: inherit;
}

/* 
Allgemeines Styling für den Body der Seite 
*/
body {
    margin: 0; /* Entfernt den Standard-Außenabstand des Body */
    padding: 0; /* Entfernt den Standard-Innenabstand des Body */
    background-color: #000; /* Setzt den Hintergrund auf Schwarz (kürzere Hex-Notation für #000000) */
    color: #fff; /* Setzt die Schriftfarbe auf Weiß (kürzere Hex-Notation für #ffffff) */
    font-family: Arial, sans-serif; /* Verwendet Arial oder eine alternative serifenlose Schriftart */
    font-weight: 400; /* Normale Schriftstärke */
    line-height: 1.6; /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* Stile für Links, die mit "tel:" beginnen (Telefonnummern) */
a[href^="tel:"] {
    color: #ffffff; /* Weiße Schriftfarbe für Telefon-Links */
}

/* Stile für Links, die mit "mailto:" beginnen (E-Mail-Adressen) */
a[href^="mailto:"] {
    color: #ffffff; /* Weiße Schriftfarbe für E-Mail-Links */
}


/* Styling für die Überschrift der rechtlichen Hinweise (h1 mit der Klasse "legal-notice-heading") */
h1.legal-notice-heading {
    text-align: center; /* Zentriert den Text */
    color: #ffffff; /* Weiße Schriftfarbe */
    font-size: 1.1rem; /* Setzt die Schriftgröße auf 1.1rem */
    margin-top: 35px; /* Abstand oben */
    margin-bottom: 0px; /* Kein Abstand unten */
}

/* Wrapper für den Inhalt: Zentriert den Inhalt und sorgt für Flexbox-Layout */
.content-wrapper {
    display: flex; /* Setzt das Layout auf Flexbox */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: flex-start; /* Richtet die Elemente am oberen Rand aus */
    gap: 50px; /* Fügt einen Abstand von 50px zwischen den Flex-Elementen hinzu */
    margin: 0 auto; /* Zentriert das Element horizontal */
    max-width: 80vw; /* Setzt die maximale Breite auf 80% der Viewport-Breite */
    padding: 20px 0; /* Fügt oben und unten 20px Abstand hinzu */
}

/* Styling für die linken und rechten Spalten */
.left-column,
.right-column {
    max-width: 40%; /* Setzt die maximale Breite jeder Spalte auf 40% */
    padding: 10px; /* Fügt 10px Innenabstand hinzu */
}

/* Stil für die linke Spalte: Text wird nach rechts ausgerichtet */
.left-column {
    text-align: right; /* Text in der linken Spalte wird nach rechts ausgerichtet */
}

/* Stil für die rechte Spalte: Text wird nach links ausgerichtet */
.right-column {
    text-align: left; /* Text in der rechten Spalte wird nach links ausgerichtet */
}

/* Responsive Design: Anpassung für Bildschirme mit einer maximalen Breite von 768px */
@media (max-width: 768px) {
    /* Layout für den Content Wrapper: Spalten werden gestapelt */
    .content-wrapper {
        flex-direction: column; /* Richtet die Spalten vertikal anstatt horizontal aus */
        align-items: center; /* Zentriert die Spalten */
        gap: 20px; /* Reduziert den Abstand zwischen den Spalten auf 20px */
    }

    /* Stil für die linke und rechte Spalte im responsiven Layout */
    .left-column,
    .right-column {
        max-width: 90%; /* Setzt die maximale Breite der Spalten auf 90% */
        text-align: left; /* Text wird in beiden Spalten links ausgerichtet */
    }
}