/* Grundlegendes Layout */
body {
    font-family: Arial, sans-serif; /* Einheitliche Schrift */
    margin: 0;
    padding: 0;
    background: #f4f4f4; /* Helle Hintergrundfarbe */
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column; /* Flexibles Layout für Footer */
    min-height: 100vh; /* Gesamthöhe ausfüllen */
}

/* Header */
header {
    text-align: center;
    background: #333; /* Dunkler Hintergrund */
    color: white; /* Weißer Text */
    padding: 1rem 0;
    border-bottom: 2px solid #444; /* Trennlinie */
}

/* Navigation im Header */
header .main-nav {
    margin: 1rem 0;
}

header .main-nav a {
    color: #fff;
    text-decoration: none; /* Keine Unterstreichung */
    margin: 0 0.5rem;
    font-size: 1rem;
}

header .main-nav a:hover {
    text-decoration: underline;
}

/* Buchseite */
.book-page {
    flex: 1; /* Nimmt den restlichen Platz ein */
    max-width: 800px; /* Breite begrenzen */
    margin: 2rem auto; /* Zentrierung */
    padding: 2rem;
    background: #fff; /* Weißer Hintergrund für den Hauptinhalt */
    border: 1px solid #ddd; /* Leichte Umrandung */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
}

/* Kapitelüberschrift */
.book-page article h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #222; /* Dunkler Text */
    text-align: center;
    border-bottom: 2px solid #ccc; /* Unterstreichung */
    padding-bottom: 0.5rem;
}

/* Footer */
footer {
    background: #333; /* Dunkler Hintergrund */
    color: white; /* Weißer Text */
    text-align: center; /* Zentrierte Inhalte */
    padding: 1rem; /* Innenabstand */
    border-top: 2px solid #444; /* Trennlinie oben */
}

/* Footer-Navigation: Blätter-Funktion */
footer .navigation-links {
    display: flex; /* Links nebeneinander */
    justify-content: center; /* Zentrierte Links */
    gap: 1rem; /* Abstand zwischen Links */
    margin-bottom: 1rem; /* Abstand zur zweiten Link-Gruppe */
}

footer .navigation-links a {
    color: #fff; /* Weiße Links */
    text-decoration: none; /* Keine Unterstreichung */
    font-size: 0.9rem; /* Etwas kleinere Schrift */
}

footer .navigation-links a:hover {
    text-decoration: underline; /* Unterstreichen beim Hover */
}

footer .navigation-links .disabled {
    color: #aaa; /* Graue Farbe für deaktivierte Links */
    pointer-events: none; /* Kein Anklicken möglich */
    cursor: default; /* Standard-Cursor */
}

/* Footer-Navigation: Rechtliche Links */
footer .legal-links {
    margin-top: 1rem; /* Abstand zur ersten Link-Gruppe */
}

footer .legal-links a {
    color: #bbb; /* Hellere Farbe für rechtliche Links */
    text-decoration: none;
    font-size: 0.85rem; /* Etwas kleinere Schrift */
}

footer .legal-links a:hover {
    text-decoration: underline; /* Unterstreichung beim Hover */
}

/* Umfließende Bilder */
img.float-right {
    float: right; /* Bild rechts ausrichten */
    margin: 0 0 1rem 1rem; /* Abstand zum Text (oben, rechts, unten, links) */
    max-width: 40%; /* Maximale Breite des Bildes */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis zu erhalten */
}

img.float-left {
    float: left; /* Bild links ausrichten */
    margin: 0 1rem 1rem 0; /* Abstand zum Text */
    max-width: 40%;
    height: auto;
}

img.float-center {
    display: block; /* Block-Level für Zentrierung */
    margin: 1rem auto; /* Automatische Zentrierung */
    max-width: 50%; /* Breite reduzieren für zentrierte Bilder */
    height: auto;
    clear: both;
}

img.float-center.full-width {
    display: block; /* Block-Level für volle Breite */
    width: 100%; /* Füllt die gesamte Breite des Containers */
    margin: 0; /* Kein Rand um das Bild */
    max-width: 100%; /* Schutz gegen Überschreitung */
    height: auto; /* Proportionale Höhe */
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.container {
    display: flex;
    justify-content: center; /* Zentriert das Bild horizontal */
    align-items: flex-start; /* Oberkante ausrichten */
}