/* --- Globales Design --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9; /* Ein sehr heller Hintergrund */
    line-height: 1.6;
}

h1, h2 {
    font-family: 'Georgia', serif; /* Eine etwas elegantere Schrift für Titel */
    
}

a {
    color: #007bff; /* Standard-Linkfarbe */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- 1. Header & Allgemeine Navigation --- */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
    border-bottom: 5px solid #555;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

nav ul {
    list-style: none; /* Entfernt die Aufzählungs-Punkte */
    padding: 0;
    margin-top: 20px;
    display: flex; /* Stellt die Links nebeneinander */
    justify-content: center; /* Zentriert die Links */
    flex-wrap: wrap; /* Lässt Links auf Mobilgeräten umbrechen */
}

nav li {
    margin: 5px 10px; /* Abstand zwischen den Links */
}

nav a {
    color: #fff;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s, transform 0.2s; /* Sanfter Übergang */
    display: block;
}

/* Standard-Hover-Effekt (falls kein Thema zugeordnet ist) */
nav a:hover {
    background-color: #fff;
    color: #333;
    transform: translateY(-2px); /* Hebt den Link leicht an */
    text-decoration: none;
}


/* --- 5. Navigation - Spezielle Hover-Effekte (Eure Anforderung!) --- */
/* * Hier nutzen wir die Klassen, die wir im HTML vergeben haben (.nav-onepiece etc.).
 * Wir überschreiben den Standard-Hover-Effekt mit themenspezifischen Farben.
 */

/* OnePiece TCG (z.B. Rot/Gold) */
.nav-onepiece a:hover {
    background-color: #e63946; /* Ein kräftiges Rot */
    color: #fff;
}

/* Garten (z.B. Grün) */
.nav-garden a:hover {
    background-color: #2a9d8f; /* Ein sattes Grün */
    color: #fff;
}

/* DIY (z.B. Braun/Orange) */
.nav-crafts a:hover {
    background-color: #f4a261; /* Ein warmes Orange/Holzton */
    color: #333;
}

/* Essen (z.B. Gelb/Creme) */
.nav-food a:hover {
    background-color: #e9c46a; /* Ein appetitliches Gelb */
    color: #333;
}

/* Urlaub (z.B. Meerblau) */
.nav-urlaub a:hover {
    background-color: #0096c7; /* Ein klares Meerblau */
    color: #fff; /* Weißer Text passt hier gut */
}

/* Alltag (z.B. Hellblau/Grau) */
.nav-everyday a:hover {
    background-color: #a8dadc; /* Ein sanftes Hellblau */
    color: #333;
}

/* * 5b. Navigation - Aktiver Status
 * Hebt den Link der Seite hervor, auf der wir uns gerade befinden.
 * Wir verwenden hier dieselben Farben wie bei den Hover-Effekten.
 */
nav li.active a { transform: none; } /* Deaktiviert den "Anhebe"-Effekt */
nav li.nav-onepiece.active a { background-color: #e63946; color: #fff; }
nav li.nav-garden.active a { background-color: #2a9d8f; color: #fff; }
nav li.nav-crafts.active a { background-color: #f4a261; color: #333; }
nav li.nav-food.active a { background-color: #e9c46a; color: #333; }
nav li.nav-everyday.active a { background-color: #a8dadc; color: #333; }
nav li.nav-urlaub.active a { background-color: #0096c7; color: #fff; }


/* --- 2. Layout-Container (Flexbox) --- */
.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto; /* Zentriert den Inhalt */
    gap: 20px; /* Abstand zwischen Hauptinhalt und Seitenleiste */
}

main {
    flex: 3; /* Hauptinhalt nimmt 3/4 der Breite */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

aside {
    flex: 1; /* Seitenleiste nimmt 1/4 der Breite */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Sorgt dafür, dass die Box nicht höher als der Inhalt ist */
    height: fit-content; 
}


/* --- 3. Intro-Sektion --- */
#intro {
    text-align: center; /* Zentriert Text und Bild */
}

.intro-image {
    max-width: 200px;
    height: auto;
    border-radius: 50%; /* Macht das Bild rund */
    margin-bottom: 15px;
    border: 5px solid #eee;
}


/* --- 4. Letzte Posts (Seitenleiste) --- */
#recent-posts h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

#recent-posts ul {
    list-style: none;
    padding: 0;
}

#recent-posts li {
    margin-bottom: 10px;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
}

#recent-posts li:last-child {
    border-bottom: none; /* Letztes Element braucht keine Linie */
}

/* --- 3b. Kategorieseite Post-Liste --- */
#category-page h2 {
    /* Stil für den Kategorie-Titel */
    border-bottom: 3px solid #eee;
    padding-bottom: 10px;
    font-size: 2.2rem;
}

/* Der Container für einen einzelnen Post-Vorschau-Artikel */
.post-preview {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 20px;
}
.post-preview:last-child {
    border-bottom: none; /* Letzter Post braucht keine Linie */
}

/* Optionales Vorschaubild */
.post-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.post-preview h3 {
    margin-top: 0;
    font-size: 1.8rem;
}
/* Der Link im Titel soll nicht die Standard-Linkfarbe haben */
.post-preview h3 a {
    color: #333;
    text-decoration: none;
}
.post-preview h3 a:hover {
    color: #007bff; /* Farbe ändert sich bei Hover */
    text-decoration: underline;
}

/* Metadaten (z.B. Datum) */
.post-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 10px;
}

/* "Weiterlesen"-Button */
.read-more {
    display: inline-block; /* Damit Padding funktioniert */
    background-color: #007bff;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}
.read-more:hover {
    background-color: #0056b3; /* Dunkleres Blau bei Hover */
    text-decoration: none;
    color: #fff;
}


/* --- 6. Fußzeile (Aktualisiert) --- */
footer {
    text-align: center;
    padding: 30px; /* Etwas mehr Platz nach oben */
    margin-top: 30px;
    background-color: #333;
    color: #aaa;
    font-size: 0.9em;
}

/* Die neue Footer-Navigation */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0; /* Abstand nach unten zum Copyright */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Falls es zu viele Links werden */
    gap: 20px; /* Abstand zwischen den Links */
}

.footer-nav a {
    color: #fff; /* Footer-Links sollen hell sein */
    text-decoration: none;
    font-weight: bold;
}
.footer-nav a:hover {
    text-decoration: underline;
}

/* Der Copyright-Text */
footer p {
    margin: 0; /* Entfernt den Standard-Absatz-Abstand */
}

/* --- 7. Responsive Design (Media Queries) --- */

/* * Dies sind unsere "Breakpoints". 
 * Diese Stile gelten NUR, wenn der Bildschirm 768px breit oder schmaler ist.
 */

@media (max-width: 768px) {

    /* * 1. Haupt-Layout (Container)
     * Wir ändern die Flex-Richtung von 'row' (nebeneinander)
     * auf 'column' (untereinander).
     */
    .container {
        flex-direction: column;
        margin: 10px; /* Weniger Seitenabstand auf Mobilgeräten */
    }

    /* * 2. Header & Navigation
     * Wir wollen, dass die Navigationslinks untereinander statt nebeneinander stehen.
     */
    nav ul {
        flex-direction: column;
        align-items: center; /* Zentriert die Links auf der vollen Breite */
    }

    nav li {
        width: 90%; /* Die Links sollen fast die volle Breite einnehmen */
        text-align: center; /* Text im Link zentrieren */
    }

    /* Header-Schrift verkleinern, damit sie besser passt */
    header h1 {
        font-size: 2.0rem;
    }

    /* * 3. Intro-Bild
     * Das runde Bild ggf. etwas kleiner machen.
     */
    .intro-image {
        max-width: 150px;
    }

    /* * 4. Hauptinhalt und Seitenleiste
     * Da sie jetzt untereinander liegen, brauchen wir keine 'flex: 3' oder 'flex: 1' mehr.
     * Sie nehmen automatisch die volle Breite ein (die durch 'flex-direction: column' vorgegeben wird).
     */
}

/* --- 9. Breadcrumb-Navigation --- */
.breadcrumbs {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px; /* Abstand zum Inhalt darunter */
    padding: 10px 15px;
    background-color: #f4f4f4; /* Leichter Hintergrund */
    border-radius: 5px;
    border: 1px solid #eee;
}

/* Links innerhalb der Breadcrumbs */
.breadcrumbs a {
    color: #007bff;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

/* Der 'Pfeil' oder 'Trenner' */
.breadcrumbs .separator {
    margin: 0 8px;
    color: #aaa;
}

/* --- 10. Full-Width-Artikel-Vorlage --- */

/* * Dies ist der Haupt-Wrapper für den Inhalt auf einer Post-Seite.
 * Wir entfernen das Flex-Layout und zentrieren den Inhalt einfach.
 */
.post-main {
    max-width: 900px; /* Breiter als die 75% von vorher */
    margin: 20px auto;  /* Zentriert den Block (oben/unten 20px, links/rechts auto) */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Wichtig für die Lesbarkeit */
    line-height: 1.8; /* Etwas mehr Zeilenabstand als der Rest der Seite */
    font-size: 1.1rem; /* Leicht größere Schrift für Fließtext */
}

/* * Innerhalb des Artikels wollen wir freie Hand, 
 * aber ein paar Grundregeln für die Elemente festlegen.
 */
.post-main h2,
.post-main h3,
.post-main h4 {
    font-family: 'Georgia', serif;
    margin-top: 40px;
    margin-bottom: 15px;
    line-height: 1.3;
    color: #222;
}
.post-main h2 { font-size: 2.2rem; }
.post-main h3 { font-size: 1.8rem; border-bottom: 2px solid #eee; padding-bottom: 5px; }
.post-main h4 { font-size: 1.4rem; }

/* Alle Bilder im Post werden responsiv */
.post-main img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0; /* Abstand über/unter dem Bild */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Schöner Schatten */
}


/* Gutes Styling für Listen */
.post-main ul,
.post-main ol {
    padding-left: 30px;
    margin-bottom: 20px;
}
.post-main li {
    margin-bottom: 10px;
}

/* Gutes Styling für Zitate */
.post-main blockquote {
    border-left: 5px solid #007bff;
    background-color: #f8f9fa;
    padding: 15px 20px;
    margin: 20px 0;
    font-style: italic;
    font-size: 1.2rem;
    color: #555;
}

/* Der Titel (wird vom Breadcrumb-JS geholt, aber hier gestylt) */
.post-main .post-title {
    font-size: 2.8rem;
    margin-top: 0;
    line-height: 1.2;
}

/* Meta-Daten (Datum/Autor) */
.post-main .post-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

/* --- 11. Kontakt-Formular Seite (Korrigiert & Verbessert) --- */

/* Der Haupt-Container für die Kontaktseite (unverändert) */
.contact-page-main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px 30px 40px 30px; /* Mehr Platz unten */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Weicherer Schatten */
}

.contact-page-main h2 {
    text-align: center;
    font-size: 2.2rem;
    color: #333;
}
.contact-page-main p {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* * Das eigentliche Formular 
 * KORREKTUR: Wir verwenden die ID (#) statt der Klasse (.)
 */
#contact-form .form-group {
    margin-bottom: 22px; /* Etwas mehr Abstand */
}

#contact-form label {
    display: block; /* Label über das Feld */
    margin-bottom: 8px; /* Mehr Abstand zum Feld */
    font-weight: bold;
    color: #444; /* Etwas dunkler */
}

/* Alle Text-Felder (Inputs und Textarea) */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    width: 100%;
    padding: 14px; /* Größere, modernere Felder */
    border: 1px solid #ccc;
    border-radius: 8px; /* Stärkere Abrundung */
    box-sizing: border-box; 
    font-size: 1rem;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* Leichter Hintergrund */
    
    /* Sanfter Übergang für den Fokus-Effekt */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* * Moderner Fokus-Effekt:
 * Wenn man in ein Feld klickt...
 */

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form textarea:focus {
    border-color: #007bff; /* Blauer Rand */
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.2); /* Leucht-Effekt */
    outline: none; /* Entfernt den Standard-Fokus-Rahmen */
}

#contact-form textarea {
    resize: vertical; /* Erlaube nur vertikales Ändern der Größe */
    min-height: 150px; /* Mindesthöhe für das Textfeld */
}

/* Der Sende-Button */
#contact-form .submit-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 8px; /* Passend zu den Feldern */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

#contact-form .submit-button:hover {
    background-color: #0056b3; /* Dunkler bei Hover */
}

#contact-form .submit-button:active {
    transform: translateY(1px); /* Klick-Effekt */
}

/* --- 12. Post-Interne Bildergalerie (mit Bildunterschriften) --- */

/* Der Grid-Container (unverändert) */
.post-gallery-grid {
    display: grid;
    /* Standardmäßig 3 Spalten */
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; /* Abstand zwischen den Bildern */
    margin: 25px 0;
}

/* * Das <figure>-Element, das Bild UND Text umschließt.
 * Es ist jetzt das "Kind" des Grids.
 */
.post-gallery-grid figure {
    margin: 0; /* Entfernt den Standard-Browser-Abstand von <figure> */
    border: 1px solid #eee; /* Feiner Rand */
    border-radius: 8px; /* Abrundung auf dem Container */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Leichter Schatten */
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #fff; /* Stellt sicher, dass der Hintergrund weiß ist */
    overflow: hidden; /* Sorgt dafür, dass das Bild die Ecken mit abrundet */
}
.post-gallery-grid figure:hover {
    transform: scale(1.03); /* Etwas kleinerer Zoom-Effekt */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Das Bild selbst */
.post-gallery-grid figure img {
    width: 100%;
    height: auto;
    display: block; /* Entfernt kleinen Abstand unter dem Bild */
}

/* Die Bildunterschrift (<figcaption>) */
.post-gallery-grid figure figcaption {
    padding: 10px 12px; /* Innenabstand für den Text */
    font-size: 0.9em;
    color: #555;
    text-align: center; /* Zentrierter Text */
    line-height: 1.4;
    background-color: #fcfcfc; /* Sehr heller Hintergrund für den Textbereich */
    border-top: 1px solid #eee; /* Feine Linie über dem Text */
    min-height: 50px; /* Gibt allen Boxen eine ähnliche Mindesthöhe */
}

/* --- Responsive Anpassungen (unverändert) --- */

/* Für Tablets (z.B. iPad) -> 2 Spalten */
@media (max-width: 768px) {
    .post-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Für Handys -> 1 Spalte */
@media (max-width: 480px) {
    .post-gallery-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --- 13. Rechtliche Seiten (Impressum, Datenschutz) --- */

.legal-page-main {
    max-width: 900px; /* Gleiche Breite wie Blog-Posts */
    margin: 20px auto;
    padding: 20px 40px 40px 40px; /* Mehr Innenabstand */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    line-height: 1.7; /* Gute Lesbarkeit für Textwände */
}

/* Spezielle Stile für die Listen in diesen Texten */
.legal-page-main ul {
    list-style-type: disc; /* Normale Aufzählungszeichen */
    padding-left: 25px;
}
.legal-page-main li {
    margin-bottom: 10px;
}

/* Stile für die Titel, die von Generatoren oft verwendet werden */
.legal-page-main h2 {
    font-size: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.legal-page-main h3 {
    font-size: 1.6rem;
    margin-top: 30px;
}

/* --- 14. Fehler-Seiten (404) --- */

.error-page-main {
    max-width: 700px;
    margin: 40px auto; /* Mehr Abstand oben/unten */
    padding: 40px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center; /* Alles zentrieren */
    line-height: 1.7;
}

.error-page-main h1 {
    font-size: 6rem; /* Riesige "404" */
    color: #e0e0e0; /* Helles Grau */
    margin: 0;
    line-height: 1;
}

.error-page-main h2 {
    font-size: 2.2rem;
    color: #333;
    margin-top: 10px;
}

.error-page-main p {
    font-size: 1.1rem;
    color: #555;
    margin-top: 20px;
}

/* Ein Link, der wie ein Button aussieht */
.error-page-main .button-link {
    display: inline-block;
    margin-top: 25px;
    padding: 14px 28px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.error-page-main .button-link:hover {
    background-color: #0056b3;
}

/* --- 15. Thematische Hintergründe --- */


/* --- Jetzt die individuellen Themes --- */

/* Thema: Garten */
body.theme-garten {
    /* * Ersetze dies mit dem Pfad zu deinem Bild.
     * 'repeat' sorgt dafür, dass es gekachelt wird.
     */
    background-image: url('/images/themes/garten-pattern.png');
    background-repeat: repeat;
    /* Eine Fallback-Farbe, falls das Bild nicht lädt */
    background-color: #f4f9f4; /* Ein sehr helles Grün */
}

/* Thema: OnePiece TCG */
body.theme-onepiece {
    background-image: url('/images/themes/onepiece-pattern.png');
    background-repeat: repeat;
    /* Fallback-Farbe */
    background-color: #f9f4f4; /* Ein sehr helles Rot */
}

/* Thema: Basteln & Werkeln (DIY) */
body.theme-diy {
    background-image: url('/images/themes/diy-pattern.png');
    background-repeat: repeat;
    /* Fallback-Farbe */
    background-color: #f9f7f4; /* Ein sehr helles Beige/Braun */
}

/* Thema: Essen */
body.theme-essen {
    background-image: url('/images/themes/essen-pattern.png');
    background-repeat: repeat;
    /* Fallback-Farbe */
    background-color: #fcfaf3; /* Ein sehr helles Gelb/Creme */
}

/* Thema: Alltag */
body.theme-alltag {
    background-image: url('/images/themes/alltag-pattern.png');
    background-repeat: repeat;
    /* Fallback-Farbe */
    background-color: #f4f7f9; /* Ein sehr helles Blau/Grau */
}

/* Thema: Urlaub */
body.theme-urlaub {
    background-image: url('/images/themes/urlaub-pattern.png');
    background-repeat: repeat;
    /* Fallback-Farbe */
    background-color: #f3f9f8; /* Ein sehr helles Türkis */
}