body {
    background-color: #F5ECCE; /* Setzt den Hintergrund auf ein sanftes Beige */
    font-family: Arial, Helvetica, sans-serif; /* Definiert die Schriftart */
    margin: 0; /* Entfernt den Standardabstand */
    display: flex; /* Aktiviert Flexbox für den gesamten Body */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
}

.container {
    width: 100%; /* Container nimmt die gesamte Breite ein */
    max-width: 1200px; /* Maximale Breite des Containers auf 1200px beschränkt */
    display: flex; /* Aktiviert Flexbox für den Container */
    flex-direction: column; /* Anordnung der Elemente im Container in einer Spalte */
    justify-content: space-between; /* Verteilt die Elemente gleichmäßig mit Abstand */
    height: 100%; /* Container nimmt die gesamte Höhe des Bildschirms ein */
}

.menu {
    display: flex; /* Aktiviert Flexbox für das Menü */
    justify-content: center; /* Zentriert die Menüelemente */
    padding: 20px 20px 0px 20px; /* Fügt Innenabstand hinzu */
}

header {
    display: flex; /* Aktiviert Flexbox für das Header */
    justify-content: flex-start; /* Linksbündige Ausrichtung der Header-Inhalte */
    align-items: center; /* Zentriert die Elemente im Header vertikal */
    height: 85px; /* Setzt die Höhe des Headers */
    padding: 15px; /* Fügt Abstand zum Header-Inhalt hinzu */
    padding-top: 10px; /* Fügt zusätzlichen Abstand nach oben hinzu */
}

header h1 {
    font-size: 30px; /* Setzt die Schriftgröße des Haupttitels */
    font-weight: bold; /* Setzt den Titel in fett */
    margin: 0; /* Entfernt den Standardabstand */
    width: 450px; /* Setzt eine feste Breite für den Titel */
}

header h2 {
    font-size: 35px; /* Setzt die Schriftgröße für den Untertitel */
    font-weight: bold; /* Setzt den Untertitel in fett */
    margin: 0; /* Entfernt den Standardabstand */
    padding-right: 40px; /* Fügt Abstand nach rechts hinzu */
}

header h3 {
    font-size: 15px; /* Setzt die Schriftgröße für den kleineren Titel */
    margin: 0; /* Entfernt den Standardabstand */
    font-style: italic; /* Setzt den Text kursiv */
}

.content {
    display: flex; /* Aktiviert Flexbox für den Inhalt */
    padding: 20px; /* Fügt Innenabstand zum Inhalt hinzu */
    border-top: 3px solid #C0C0C0; /* Fügt eine graue obere Border hinzu */
    border-bottom: 3px solid #C0C0C0; /* Fügt eine graue untere Border hinzu */
	margin-bottom: 50px;
}

.sidebar {
    width: 300px; /* Setzt eine feste Breite für die Sidebar */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Richtet den Inhalt links aus */
}

.sidebar img {
    width: 250px; /* Setzt die Breite des Bildes in der Sidebar */
    height: auto; /* Setzt die Höhe des Bildes automatisch */
    display: block;
    max-width: 100%; /* Stellt sicher, dass das Bild nicht überläuft */
}

.sidebar a {
    display: block;
    text-align: center;
    width: 100%; /* Der Link wird über die gesamte Breite des Containers verteilt */
	margin-top: 30px;
	margin-left: -28px;
}

.main-content {
    flex-grow: 1; /* Lässt den Hauptinhalt den verbleibenden Platz ausfüllen */
    font-size: 18px; /* Setzt die Schriftgröße im Hauptinhalt */
    line-height: 1.5; /* Setzt den Zeilenabstand im Hauptinhalt */
}

.main-lauftext {
    flex-grow: 1; /* Lässt den Hauptinhalt den verbleibenden Platz ausfüllen */
    font-size: 14px; /* Setzt die Schriftgröße im Hauptinhalt */
    line-height: 2.0; /* Setzt den Zeilenabstand im Hauptinhalt */
}

.main-inhalt {
    flex-grow: 1; /* Lässt den Hauptinhalt den verbleibenden Platz ausfüllen */
    font-size: 14px; /* Setzt die Schriftgröße im Hauptinhalt */
    line-height: 2.0; /* Setzt den Zeilenabstand im Hauptinhalt */
}

.main-content h2 {
    margin: 0px; /* Entfernt den Standardabstand oben beim h2-Element */
}

.links {
    display: flex; /* Aktiviert Flexbox für die Links */
    flex-wrap: wrap; /* Erlaubt das Umwickeln von Links auf mehreren Zeilen */
    gap: 20px; /* Fügt Abstand zwischen den Links hinzu */
}

.link-item {
    flex: 1 1 200px; /* Jedes Link-Element nimmt mindestens 200px ein und wächst flexibel */
    min-width: 200px; /* Setzt die minimale Breite eines Link-Elements */
}

.button {
    padding: 5px; /* Fügt Innenabstand zu den Buttons hinzu */
    text-align: center; /* Zentriert den Text im Button */
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
    display: inline-block; /* Macht den Button zu einem Inline-Block */
    font-family: sans-serif; /* Setzt die Schriftart auf sans-serif */
    font-size: 12px; /* Setzt die Schriftgröße für den Button */
    margin: 2px; /* Fügt Abstand zwischen den Buttons hinzu */
    transition-duration: 0.4s; /* Setzt die Dauer für Übergänge */
    cursor: pointer; /* Zeigt einen Zeiger-Cursor an, wenn über den Button gefahren wird */
    height: 10px; /* Setzt die Höhe des Buttons */
    width: 150px; /* Setzt die Breite des Buttons */
}

.button-common {
    background-color: #C0C0C0; /* Grauer Hintergrund für den Button */
    color: grey; /* Graue Schriftfarbe für den Button */
    border: 1px solid #275846; /* Dunkelgrüne Border für den Button */
}

.button-common:hover {
    background-color: #04AA6D; /* Grüner Hintergrund bei Hover */
    color: black; /* Setzt die Schriftfarbe auf Schwarz bei Hover */
}

.footer {
    display: flex; /* Aktiviert Flexbox für den Footer */
    justify-content: center; /* Zentriert die Footer-Inhalte */
    align-items: center; /* Zentriert die Footer-Inhalte vertikal */
    padding: 20px; /* Fügt Innenabstand zum Footer hinzu */
	margin-top: -50px;
}

.footer-title {
    font-size: 35px; /* Setzt die Schriftgröße für den Footer-Titel */
    font-weight: bold; /* Macht den Footer-Titel fett */
    text-align: center; /* Zentriert den Text im Footer */
}

a {
    color: #000; /* Setzt die Textfarbe der Links auf Schwarz */
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
}

.content .main {
    flex: 1; /* Lässt den Hauptinhalt den verfügbaren Platz ausfüllen */
    font-size: 18px; /* Setzt die Schriftgröße im Hauptinhalt */
    padding: 0 0 0 0; /* Kein Padding im Hauptinhalt */
}
.content-lauftext {
    flex: 1; /* Lässt den Hauptinhalt den verfügbaren Platz ausfüllen */
    font-size: 14px; /* Setzt die Schriftgröße im Hauptinhalt */
    padding: 0 0 0 0; /* Kein Padding im Hauptinhalt */
}

.content-inhalt {
    flex: 1; /* Lässt den Hauptinhalt den verfügbaren Platz ausfüllen */
    font-size: 12px; /* Setzt die Schriftgröße im Hauptinhalt */
    padding: 0 0 0 0; /* Kein Padding im Hauptinhalt */
}

.content .main p {
    margin-top: 0px; /* Entfernt den Abstand oben beim p-Element im Hauptinhalt */
}

/* Link mit Vorschau-Bild */
.link-with-preview {
    position: relative; /* Wichtig, um die Vorschau relativ zum Link zu positionieren */
    text-decoration: none; /* Entfernt die Unterstreichung (optional) */
    color: black; /* Textfarbe des Links */
}

/* Vorschau-Bild innerhalb des Links */
.link-with-preview .preview {
    position: absolute; /* Positioniert das Vorschaubild absolut */
    top: 0; /* Vorschaubild wird auf gleicher Höhe wie der Link angezeigt */
    left: 100%; /* Positioniert das Bild rechts vom Link */
    margin-left: 10px; /* Abstand zwischen Link und Vorschaubild */
    width: auto; /* Passt sich automatisch an den Inhalt an */
    max-width: 200px; /* Maximalbreite des Vorschaubilds */
    opacity: 0; /* Unsichtbar, solange nicht gehovt */
    visibility: hidden; /* Verhindert Interaktion, wenn unsichtbar */
    transition: opacity 1.0s ease, visibility 1.0s ease; /* Sanfter Übergang beim Einblenden */
    z-index: 1000; /* Stellt sicher, dass es über anderen Elementen liegt */
    border: 2px solid #C0C0C0; /* Graue Umrandung des Vorschaubildes */
    padding: 0; /* Entfernt die Polsterung innerhalb des Containers */
}

/* Bild innerhalb der Vorschau */
.link-with-preview .preview img {
    width: 100%; /* Bild füllt die gesamte Breite des Containers */
    height: 100%; /* Bild füllt die gesamte Höhe des Containers */
    object-fit: cover; /* Bild wird an die Box angepasst, ohne das Seitenverhältnis zu verzerren */
    display: block; /* Entfernt den Abstand unter dem Bild */
}

/* Hover-Effekt für die Vorschau */
.link-with-preview:hover .preview {
    opacity: 1; /* Macht das Vorschaubild sichtbar */
    visibility: visible; /* Sichtbar beim Hover */
}