/* 1. Der gesamte Hintergrund der Webseite */
body {
    margin: 0;
    padding: 0;
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    
    /* Hintergrund-Einstellungen */
    background-image: url('../media/hintergrund.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Das Bild bleibt beim Scrollen feststehen */
    background-size: cover; /* Das Bild füllt immer den kompletten Bildschirm aus */
    
    color: #333333;
}


/* 2. Die weiße, zentrierte Inhaltsbox mit Schatten */
.main-wrapper {
    max-width: 960px; /* Breite der Box */
    margin: 50px auto; /* Zentriert die Box auf der Seite und gibt Abstand nach oben */
    background-color: rgba(255, 255, 255, 0.90); /* Weiß mit minimaler Transparenz */
    'border-radius: 15px; /* Leicht abgerundete Ecken */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); /* Weicher Schatten nach außen */
    padding: 0;
}

/* 3. Das Logo oben zentrieren */
.site-header .logo {
    text-align: center;
    margin-bottom: 30px;
}

.site-header .logo img {
    max-width: 400px; /* Passt die Größe des Logos an */
    height: auto;
}

/* 4. Die horizontale Navigation */
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    justify-content: center; /* Zentriert das Menü */
    border-top: 2px dashed #b0d0e0; /* Verspielte Trennlinien */
    border-bottom: 2px dashed #b0d0e0;
}

.main-navigation li {
    margin: 0 15px;
}

.main-navigation a {
    display: block;
    padding: 15px 10px;
    text-align: center;
    text-decoration: none;
    color: #4a6b82;
    font-weight: bold;
    font-size: 1.1rem;
    position: relative; /* Neu hinzugefügt */
    z-index: 10;        /* Neu hinzugefügt: Schiebt die Links vor die Diashow */
}


.main-navigation a:hover, 
.main-navigation a.active {
    color: #e67e22; /* Farbe beim Drüberfahren oder wenn aktiv */
}

/* 5. Der Inhaltsbereich für Ihre Module */
.content-area {
    line-height: 1.6;
    font-size: 1.1rem;
    padding: 0 20px;
}

/* 6. Der Fußbereich ganz unten */
.site-footer {
    margin-top: 50px;
    text-align: center;
    font-size: 0.9rem;
    color: #7f8c8d;
    border-top: 1px solid #eeeeee;
    padding-top: 20px;
}
/* --- Steuerung für die Unterseiten-Diashow --- */

/* 1. Der Container für die Diashow */
.banner-slideshow {
    position: relative;
    width: 100%;
    padding-top: 33.3%; /* Behält das originale Seitenverhältnis Ihrer Banner-Dateien bei */
    overflow: hidden;
    /* Hier runden wir die oberen Ecken direkt ab, damit das Banner nicht über die Box ragt */
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background: #ffffff;
}

/* 2. Die Bilder in der Diashow */
.banner-slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Zwingt das Bild, die komplette Breite auszufüllen */
    height: 100%; /* Zwingt das Bild, die komplette Höhe auszufüllen */
    
    /* WICHTIGE ÄNDERUNG: 'fill' sorgt dafür, dass das komplette Panorama-Banner 
       ohne Beschnitt von Rand zu Rand vollständig sichtbar angezeigt wird */
    object-fit: fill; 
    
    opacity: 0;
    animation: bildWechsel 21s linear infinite; 
}


/* Jedes der 8 Bilder startet exakt 5 Sekunden nach dem vorherigen */
.banner-slideshow img:nth-child(1) { animation-delay: 0s; }
.banner-slideshow img:nth-child(2) { animation-delay: 3s; }
.banner-slideshow img:nth-child(3) { animation-delay: 6s; }
.banner-slideshow img:nth-child(4) { animation-delay: 9s; }
.banner-slideshow img:nth-child(5) { animation-delay: 12s; }
.banner-slideshow img:nth-child(6) { animation-delay: 15s; }
.banner-slideshow img:nth-child(7) { animation-delay: 18s; }
.banner-slideshow img:nth-child(8) { animation-delay: 21s; }

/* Der mathematische Ablauf für das sanfte Ein- und Ausblenden */
@keyframes bildWechsel {
    0% { opacity: 0; }
    2% { opacity: 1; }    /* Blendet innerhalb von knapp 1 Sekunde weich ein */
    12% { opacity: 1; }   /* Bleibt ca. 4 Sekunden voll sichtbar */
    15% { opacity: 0; }   /* Blendet innerhalb von 1 Sekunde weich aus */
    100% { opacity: 0; }
}
/* --- Der Überschriften-Wagen --- */
.content-block {
    margin-bottom: 40px;
    clear: both;
}

.headline-container {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    
    /* Hier erzwingen wir die Sichtbarkeit des gesamten Zugs */
    background-image: url('../media/ueberschrift_bg.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    
    /* 1. DIE BREITE: Stellen Sie hier die exakte Pixel-Breite Ihrer Bilddatei ein (z.B. 450px oder 500px) */
    width: 500px; 
    /* 2. DIE HÖHE: Die genaue Höhe Ihrer Bilddatei (z.B. 40px oder 50px) */
    height: 70px; 
    
    margin-left: auto;  /* Zentriert den gesamten Zug in der weißen Box */
    margin-right: auto;
}

.page-headline {
    color: #4a6b82;
    font-size: 1.5rem;
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    
    /* Schiebt den Text absolut sicher an die richtige Position */
    position: absolute;
    top: 5px;          /* Abstand vom oberen Rand des Wagens (nachjustieren falls nötig) */
    left: 45px;        /* Schiebt den Text nach rechts direkt in den ERSTEN Waggon */
    
    white-space: nowrap; /* Verhindert, dass längere Wörter unschön umbrechen */
}

/* --- Bilder-Ausrichtungen im Text --- */
.image-left {
    float: left;
    margin: 0 20px 20px 0;
    max-width: 250px;
}

.image-right {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 250px;
}

.image-center {
    text-align: center;
    margin: 20px 0;
    clear: both;
}

/* Verhindert, dass nachfolgende Überschriften in das Bild rutschen */
.content-area::after {
    content: "";
    clear: both;
    display: table;
}

/* Ein kompletter Inhaltsabschnitt */
.story-block {
    margin-bottom: 40px;
    padding-bottom: 30px;
    clear: both;
}

/* Gestrichelte Trennlinie zwischen den Blöcken */
.story-block + .story-block {
    border-top: 2px dashed #b0d0e0;
    padding-top: 40px;
}

/* Kleine Zwischenüberschriften im Text (z.B. Lesung Thalia) */
.story-headline {
    color: #4a6b82;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Container für Bild und Text */
.story-content {
    display: block;
    width: 100%;
}

/* Das fließende Bild */
.story-image {
    max-width: 220px; /* Breite der Inhaltsbilder wie im Original */
    margin-bottom: 15px;
}

.story-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Bild linksbündig */
.align-left {
    float: left;
    margin-right: 25px;
}

/* Bild rechtsbündig */
.align-right {
    float: right;
    margin-left: 25px;
}

/* Der Textbereich daneben */
.story-text {
    overflow: hidden; /* Zwingt den Text, sauber als Block neben dem Bild zu bleiben */
    font-family: 'Comic Sans MS', sans-serif;
    line-height: 1.6;
    color: #555555;
}

/* --- CSS-Effekt für die Zoom-Bilder --- */
.zoom-link {
    position: relative;
    display: block;
    cursor: zoom-in; /* Verwandelt den Mauszeiger in eine Lupe */
    overflow: hidden;
    border-radius: 4px;
}

.zoom-link img {
    transition: transform 0.3s ease; /* Macht die Bewegung geschmeidig */
}

/* Wenn die Maus über das Bild fährt, zoomt es sich leicht im Rahmen heran */
.zoom-link:hover img {
    transform: scale(1.05); 
}

/* Das kleine Lupen-Symbol, das beim Drüberfahren sanft auftaucht */
.zoom-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zoom-link:hover .zoom-icon {
    opacity: 1;
}

/* Ergänzung für große, zentrierte Einzelbilder */
.story-image.image-center {
    float: none;
    margin: 20px auto;
    max-width: 100%;
    text-align: center;
    clear: both;
}

.story-image.image-center img {
    display: inline-block;
    max-height: 500px; /* Verhindert, dass Riesenbilder den Bildschirm sprengen */
    width: auto;
}

/* --- CSS für Blöcke mit zwei Bildern und Text mittig --- */
.flex-layout {
    display: flex;
    align-items: flex-start; /* Richtet Bilder und Text oben bündig aus */
    gap: 20px; /* Abstand zwischen den Spalten */
}

.story-image.side-left,
.story-image.side-right {
    flex: 0 0 200px; /* Gibt den Bildern eine feste, unverzerrte Breite */
    max-width: 200px;
    margin: 0; /* Löscht alte Abstände */
}

.story-text.text-middle {
    flex: 1; /* Der Text nimmt sich vollautomatisch den restlichen Platz in der Mitte */
    overflow: hidden;
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
    .flex-layout {
        flex-direction: column; /* Stapelt Bilder und Text untereinander, wenn der Platz zu eng wird */
        align-items: center;
    }
}
/* Ein kompletter Inhaltsabschnitt */
.story-block {
    margin-bottom: 40px;
    padding-bottom: 30px;
    clear: both;
    text-align: left; /* Zwingt den Inhalt nach links */
}

/* Die Zwischenüberschrift im Modul (sauber linksbündig) */
.story-headline {
    color: #4a6b82;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 5px; /* Wenig Abstand zum Datum */
    position: relative;
    left: 0; /* Löscht eventuelle Vererbung vom Zug-Kopf */
}

/* NEU: Das Design für das Datum */
.story-date {
    font-family: 'Comic Sans MS', sans-serif;
    color: #99abc0; /* Ein dezentes, schönes Graublau */
    font-size: 0.95rem;
    margin-bottom: 20px; /* Abstand zum nachfolgenden Bild/Text */
}
/* 1. Den Haupt-Inhaltsbereich kontrollieren */
.content-area {
    padding: 20px 30px 40px 300px ; /* Bestimmt den Abstand vom linken und rechten Rand der weißen Box */
    clear: both;
}

/* 2. Den Block komplett nach links zwingen */
.story-block {
    margin: 0 0 40px 0; /* Löscht jeglichen ungewollten linken Außenabstand */
    padding-bottom: 30px;
    clear: both;
    text-align: left;
    width: 100%; /* Nutzt die volle verfügbare Breite */
}

/* 3. Sicherstellen, dass auch die Überschrift ganz links steht */
.story-headline {
    color: #4a6b82;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.4rem;
    margin: 0 0 5px 0; /* Setzt alle Außenabstände außer unten auf 0 */
    padding: 0;
}

/* 4. Das Datum linksbündig ausrichten */
.story-date {
    font-family: 'Comic Sans MS', sans-serif;
    color: #99abc0;
    font-size: 0.95rem;
    margin: 0 0 20px 0;
    padding: 0;
}
/* --- Styling für die neuen News-Links --- */
.link-wrapper {
    margin-top: 15px;
}

.news-button {
    display: inline-block;
    padding: 10px 18px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Farbe für den Web-Link (Passend zum Blau der Seite) */
.news-button.web-link {
    background-color: #4a6b82;
    color: #ffffff;
}

.news-button.web-link:hover {
    background-color: #e67e22; /* Wechselt beim Drüberfahren charmant zu Orange */
}

/* Farbe für den PDF-Link */
.news-button.pdf-link {
    background-color: #eaf2f8;
    color: #2b7bb2;
    border: 2px dashed #b0d0e0;
}

.news-button.pdf-link:hover {
    background-color: #2b7bb2;
    color: #ffffff;
    border-style: solid;
}
/* Zweispaltiges Layout für die Buchseite */
.book-page-layout {
    display: flex;
    gap: 30px;
    text-align: left;
    width: 100%;
    margin-top: 20px;
}

/* Linke Spalte: Genau 30% Breite */
.book-sidebar {
    flex: 0 0 30%;
    max-width: 30%;
    border-right: 2px dashed #b0d0e0;
    padding-right: 20px;
    box-sizing: border-box;
}

.book-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.book-sidebar li {
    margin-bottom: 15px;
}

.book-sidebar a {
    font-family: 'Comic Sans MS', sans-serif;
    color: #4a6b82;
    text-decoration: none;
    font-size: 1.05rem;
    display: block;
    transition: all 0.2s ease;
}

.book-sidebar a:hover, 
.book-sidebar a.active-book {
    color: #e67e22; /* Aktiviertes Buch wird wunderbar orange */
    font-weight: bold;
    transform: translateX(5px); /* Bewegt den Link beim Drüberfahren leicht nach rechts */
}

/* Rechte Spalte: Genau 70% Breite */
.book-content {
    flex: 0 0 70%;
    max-width: 70%;
}

/* Bild und Textanordnung im Buchkombinat */
.book-story-body {
    display: block;
    width: 100%;
    clear: both;
}

.book-story-image {
    float: right; /* Zwingt das Drachenbild an den RECHTEN Rand des Textes */
    margin-left: 25px;
    margin-bottom: 20px;
    max-width: 260px; /* Perfekte Breite für den Kordelrahmen */
}

.book-story-image img {
    width: 100%;
    height: auto;
    display: block;
}

.book-story-text {
    font-family: 'Comic Sans MS', sans-serif;
    line-height: 1.6;
    color: #555555;
}
/* Zweispaltiges Layout für die Buchseite */

/* Das Buch-Layout zieht sich exklusiv nach links */

/* Das Layout für die Buchseite bekommt rechts einen schützenden Rand */
.book-page-layout {
    display: flex;
    gap: 30px;
    text-align: left;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    
    /* DIESE ZEILE SETZT DEN ABSTAND RECHTS (Uhrzeigersinn: Oben Rechts Unten Links) */
    padding: 0 30px 0 0; 
}

/* Linke Spalte: Um 30px nach rechts erweitert (ca. 33% Breite) */
.book-sidebar {
    flex: 0 0 33% !important;
    max-width: 33% !important;
    border-right: 2px dashed #b0d0e0;
    padding-right: 25px; /* Gibt dem Text zusätzlichen Puffer zur Linie */
    box-sizing: border-box;
}

/* Rechte Spalte: Entsprechend angepasst (ca. 67% Breite) */
.book-content {
    flex: 0 0 67% !important;
    max-width: 67% !important;
    padding-left: 5px; /* Schafft einen schönen Abstand von der Linie zum Buchtext */
    box-sizing: border-box;
}



/* Die beiden Buch-Überschriften harmonisch verkleinern */
.book-title-header {
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    color: #2b7bb2;
    font-size: 1.3rem; /* Angenehme Größe für den Buchtitel */
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 5px 0;
    padding: 0;
}

.book-chapter-header {
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    color: #4a6b82;
    font-size: 1.0rem; /* Etwas kleiner für das Kapitel */
    font-weight: normal;
    line-height: 1.3;
    margin: 0 0 25px 0;
    padding: 0;
}

/* Das Drachenbild fließt nach rechts außen */
.book-story-image {
    float: right;
    margin-left: 25px;
    margin-bottom: 20px;
    max-width: 260px;
}
.content-area-books { clear: both; display: block; }

/* --- Flexibles Bildergalerie-Layout für 1 bis 4 Bilder --- */
.gallery-row-layout {
    display: flex;
    gap: 15px; /* Abstand zwischen den Bildern */
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}

/* Jedes einzelne Bild in der Reihe */
.gallery-item {
    flex: 1; /* Zwingt alle Bilder, sich den Platz gleichmäßig zu teilen */
    max-width: 25%; /* Bei 4 Bildern hat jedes exakt ein Viertel Platz */
}

.gallery-item img {
    width: 100%;
    height: 140px; /* Gibt allen Katzenbildern eine einheitliche, schöne Höhe */
    object-fit: cover; /* Schneidet die Bilder perfekt zu, ohne sie zu verzerren */
    border-radius: 6px;
    display: block;
}
/* --- Styling für das Kontaktformular --- */
.custom-contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px; /* Begrenzt die Breite, damit es elegant aussieht */
    width: 100%;
}

.form-group-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.form-group-item label {
    font-family: 'Comic Sans MS', sans-serif;
    color: #4a6b82;
    font-weight: bold;
    font-size: 0.95rem;
}

.form-group-item input[type="text"],
.form-group-item input[type="email"],
.form-group-item textarea {
    font-family: 'Comic Sans MS', sans-serif;
    padding: 10px;
    border: 2px solid #b0d0e0;
    border-radius: 8px;
    background-color: #fcfdfe;
    color: #555555;
    font-size: 1rem;
    transition: border-color 0.2s;
}

/* Wenn man in ein Feld hineinklickt, leuchtet der Rand leicht auf */
.form-group-item input:focus,
.form-group-item textarea:focus {
    outline: none;
    border-color: #e67e22; /* Schickes Orange beim Auswählen */
    background-color: #ffffff;
}
/* 1. Das Logo perfekt in der Mitte zentrieren */
.logo, .logo-container img, .header-area img { 
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 320px; /* Oder Ihre gewünschte Logobreite */
    height: auto;
}

/* 2. NEU: Styling für den Text zwischen Logo und Menü */
.sub-logo-text {
    text-align: center;
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    color: #4a6b82; /* Passendes Graublau */
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 15px;      /* Abstand nach oben zum Logo */
    margin-bottom: 25px;   /* Abstand nach unten zum Menü */
    letter-spacing: 1px;
}

/* 3. Das Menü nach unten schieben und Abstände optimieren */
.main-navigation {
    margin-top: 10px;      /* Schiebt das gesamte Menü nach unten */
    margin-bottom: 30px;   /* Abstand vom Menü zum nachfolgenden Wagen */
    text-align: center;
}

.main-navigation ul {
    display: flex;
    justify-content: center; /* Zentriert die Menüpunkte horizontal */
    gap: 30px;               /* Abstand zwischen den einzelnen Links */
    list-style: none;
    padding: 0;
    margin: 0;
}