/* styles2.css */
/* Grundlegende Stile für den Body */
body {
    font-family: Arial, sans-serif; /* Schriftart für den gesamten Body festlegen */
    margin: 0; /* Entfernt Standard-Margin des Browsers */
    padding: 0; /* Entfernt Standard-Padding des Browsers */
    background-image: url('background.png'); /* Hintergrundbild setzen */
    background-position: center center; /* Hintergrundbild zentrieren */
    background-repeat: repeat; /* Wiederholung des Hintergrundbilds */
    background-size: cover; /* Hintergrundbild skalieren, um den gesamten Bildschirm zu bedecken */
    background-attachment: scroll; /* Fixieren entfernen für mobile Unterstützung */
}

body::before {
    content: ""; /* Leeres Pseudo-Element erstellen */
    position: fixed; /* Fixiert das Pseudo-Element, sodass es den gesamten Bildschirm bedeckt */
    top: 0; /* Setzt das Pseudo-Element an den oberen Rand des Bildschirms */
    left: 0; /* Setzt das Pseudo-Element an den linken Rand des Bildschirms */
    width: 100%; /* Breite auf 100% des Bildschirms setzen */
    height: 100%; /* Höhe auf 100% des Bildschirms setzen */
    background-image: url('background.png'); /* Hintergrundbild setzen */
    z-index: -1; /* Hinter den gesamten Inhalt legen */
    pointer-events: none; /* Verhindert, dass das Pseudo-Element interaktiv ist */
}

* {
    box-sizing: border-box;
}

/* Grundlegende Stile für Links */
a {
    color: #80FF00; /* Standard-Link-Farbe */
    text-decoration: none; /* Keine Unterstreichung für Links */
}

a:hover {
    text-decoration: none; /* Keine Unterstreichung beim Hover-Effekt */
}

/* Grundlegende Stile für den Header */
header {
    background-color: transparent; /* Transparenter schwarzer Hintergrund */
    display: flex; /* Flexbox-Layout */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal (falls nötig) */
    padding: 10px; /* Abstand um das Bild herum */
    position: relative; /* Positionierung relativ */
    z-index: 2; /* Stellt sicher, dass der Header über dem Hintergrundbild liegt */
}

header img {
    max-width: 1000px; /* Maximale Breite des Bildes */
    width: 100%; /* Bildbreite auf 100% des Containers setzen */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
}

/* Main Content */
main {
    max-width: 1000px; /* Maximale Breite für main */
    margin: 0 auto; /* Zentriert den Inhalt */
    background: transparent; /* Transparenter Hintergrund für main */
    position: relative; /* Positionierung relativ */
	padding: 20px;
    z-index: 2; /* Stellt sicher, dass der Hauptinhalt über dem Hintergrundbild liegt */
	color: #ffffff;
}

#impressum {
    background-color: transparent; /* Transparenter schwarzer Hintergrund */
    text-align: left; /* Zentriert den Text innerhalb der Section */
}

#impressum .content {
    max-width: 1000px; /* Maximale Breite für den Text */
    margin: 0 auto; /* Zentriert das .content-Element */
	text-align: left;
}

#impressum h1 {
    font-size: 2.5em; /* Größe der Hauptüberschrift */
    margin-bottom: 10px; /* Abstand nach unten */
	text-align: center;
}

#impressum p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 20px; /* Abstand zwischen Absätzen */
	text-align: center;
}

#impressum a {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 10px; /* Abstand zwischen Absätzen */
	text-align: center;
}

#impressum .highlight {
    color: #80FF00; /* Grün für hervorgehobenen Text */
}

#impressum a.highlight {
    color: #80FF00; /* Grün für den Link */
    text-decoration: none; /* Unterstreichen entfernen */
}

#impressum a.highlight:hover {
    text-decoration: none; /* Unterstreichen beim Hover-Effekt */
}


#impressum2 {
    background-color: transparent; /* Transparenter schwarzer Hintergrund */
    text-align: center; /* Zentriert den Text innerhalb der Section */
}

#impressum2 .content {
    max-width: 1000px; /* Maximale Breite für den Text */
    margin: 0 auto; /* Zentriert das .content-Element */
	text-align: justify;
}

#impressum2 h1 {
    font-size: 2.5em; /* Größe der Hauptüberschrift */
    margin-bottom: 20px; /* Abstand nach unten */
	text-align: center;
}

#impressum2 p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 20px; /* Abstand zwischen Absätzen */
}

#impressum2 h1 {
    font-size: 2.5em; /* Größe der Hauptüberschrift */
    margin-bottom: 20px; /* Abstand nach unten */
	text-align: center;
}

#impressum2 p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 20px; /* Abstand zwischen Absätzen */
}

#impressum2 .highlight {
    color: #80FF00; /* Grün für hervorgehobenen Text */
}

#impressum2 a.highlight {
    color: #80FF00; /* Grün für den Link */
    text-decoration: none; /* Unterstreichen entfernen */
}

#impressum2 a.highlight:hover {
    text-decoration: none; /* Unterstreichen beim Hover-Effekt */
}



#datenschutz {
    background-color: transparent; /* Transparenter schwarzer Hintergrund */
    text-align: center; /* Zentriert den Text innerhalb der Section */
}

#datenschutz .content {
    max-width: 1000px; /* Maximale Breite für den Text */
    margin: 0 auto; /* Zentriert das .content-Element */
	text-align: justify;
}

#datenschutz h1 {
    font-size: 2.5em; /* Größe der Hauptüberschrift */
    margin-bottom: 20px; /* Abstand nach unten */
	text-align: center;
}

#datenschutz p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 20px; /* Abstand zwischen Absätzen */
}

#datenschutz .highlight {
    color: #80FF00; /* Grün für hervorgehobenen Text */
}

#datenschutz a.highlight {
    color: #80FF00; /* Grün für den Link */
    text-decoration: none; /* Unterstreichen entfernen */
}

#datenschutz a.highlight:hover {
    text-decoration: none; /* Unterstreichen beim Hover-Effekt */
}

#apendix {
    background-color: transparent; /* Transparenter schwarzer Hintergrund */
    color: #ffffff; /* Weißer Text */
    text-align: center; /* Zentriert den Text innerhalb der Section */
}

#apendix .content {
    max-width: 1000px; /* Maximale Breite für den Text */
    margin: 0 auto; /* Zentriert das .content-Element */
	text-align: center;
}

#apendix p {
    font-size: 1.2em; /* Schriftgröße der Absätze */
    line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
	margin-bottom: 20px; /* Abstand zwischen Absätzen */
}

#apendix .highlight {
    color: #80FF00; /* Grün für hervorgehobenen Text */
}

#apendix a.highlight {
    color: #80FF00; /* Grün für den Link */
    text-decoration: none; /* Unterstreichen entfernen */
}

#apendix a.highlight:hover {
    text-decoration: none; /* Unterstreichen beim Hover-Effekt */
}

#impressum .mittig {
    max-width: 1000px; /* Maximale Breite für den Text */
    margin: 0 auto; /* Zentriert das .content-Element */
	text-align: center;
}

#apendix .mittig {
    max-width: 1000px; /* Maximale Breite für den Text */
    margin: 0 auto; /* Zentriert das .content-Element */
	text-align: center;
	color: #80FF00;
}

/* Footer */
footer {
    background-color: #000000; /* Schwarzer Hintergrund */
    padding: 10px 0; /* Innenabstand oben und unten */
    width: 100%; /* Breite des Footers auf 100% setzen */
    position: relative; /* Fixiert den Footer am Bildschirmrand */
    bottom: 0; /* Positioniert den Footer am unteren Rand des Viewports */
    left: 0; /* Sorgt dafür, dass der Footer am linken Bildschirmrand beginnt */
    z-index: 2; /* Stellt sicher, dass der Footer über dem Hintergrundbild liegt */
    text-align: center; /* Zentriert den Text im Footer */
	border-top: 2px solid #ffff00; /* Gelber Rand oben im Footer */
}

.footer-content {
    max-width: 1000px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentriert den Inhalt horizontal */
    color: #ffffff; /* Weißer Text */
    text-align: center; /* Zentriert den Text */
    font-size: 1em; /* Schriftgröße anpassen */
    box-sizing: border-box; /* Stellt sicher, dass Padding zur Gesamtbreite beiträgt */
}

/* Stil für die line-container */
.line-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	height: 40px; /* Stellt sicher, dass der Container mindestens so hoch ist wie die Linie */
}

.responsive-line {
    width: 80%; /* Breite der Linie */
    max-width: 600px; /* Maximale Breite */
    height: 2px; /* Exakte Höhe der Linie */
    overflow: hidden; /* Verhindert Überlauf des Bildes */
}

.responsive-line img {
    display: block;
    width: 100%; /* Füllt die Breite des Elternelements */
    height: 2px; /* Exakte Höhe des Bildes */
    object-fit: cover; /* Behält das Seitenverhältnis bei und schneidet ggf. ab */
    object-position: center; /* Zentriert das Bild vertikal */
}