/*
Theme Name: SG Stern Kaulsdorf - SKAU Theme
Theme URI: https://stern-kaulsdorf.org
Author: tomaso & AI
Description: Minimales, responsives Magazin-Theme für die SG Stern Kaulsdorf.
Version: 1.01
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    --royal-blue: #002366;
    --bg-light: #f4f5f7;
    --text-dark: #333;
    --white: #ffffff;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* --- Header Layout (Hier jetzt sauber zentriert) --- */
header.site-header {
    background-color: var(--royal-blue);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;    /* ÄNDERUNG: Zentriert Logo und Menü horizontal */
    text-align: center;     /* ÄNDERUNG: Zentriert den Text */
    padding: 20px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

header.site-header h1 {
    font-size: 1.8rem;      /* Leicht erhöht für besseren Look */
    margin: 0 0 15px 0;
}

header.site-header h1 a.site-title-link {
    color: var(--white) !important;
    text-decoration: none !important;
}

header.site-header h1 a.site-title-link:hover {
    opacity: 0.8;
}

/* --- Navigation (1. und 2. Ebene) --- */
nav.main-nav {
    width: 100%;
}

/* Erlaubt sowohl manuelles HTML als auch die dynamische WP-Klasse (nav-menu-list) */
nav.main-nav ul, nav.main-nav .nav-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* ÄNDERUNG: Schiebt die Menüpunkte exakt in die Mitte! */
    gap: 20px;
}

nav.main-nav li {
    position: relative;
}

nav.main-nav a {
    color: var(--white);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 5px 10px 8px 10px; /* Leicht vergrößert für bessere Klickbarkeit */
    display: inline-block;
}

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

/* Untermenü (2. Ebene) - Exakt aus deinem Original übernommen! */
nav.main-nav ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;               /* Zentrier-Korrektur für Dropdowns */
    transform: translateX(-50%);
    background-color: var(--royal-blue); 
    flex-direction: column;
    gap: 10px;
    min-width: 180px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    z-index: 999;
    border-radius: 0 0 5px 5px;
    text-align: left;        /* Text im Dropdown bleibt linksbündig */
}

/* Sorgt dafür, dass das WP-Menü das Dropdown triggert */
nav.main-nav li:hover > ul.sub-menu,
nav.main-nav li:hover > ul {
    display: flex;
}

/* --- Layout: Content & Sidebar --- */
/* --- Globaler Container für alle Seiten (Startseite, Single, Page) --- */
.container {
    max-width: 1200px;      /* Begrenzt die Breite überall auf den edlen Magazin-Look */
    margin: 40px auto;      /* Zentriert den Inhalt perfekt auf dem Bildschirm */
    padding: 0 20px;        /* Sicherheitsabstand für Handys und Tablets */
    box-sizing: border-box;
}

/* Für die Startseite (index.php) */
.content-master {
    width: 100%;
}

/* Für die Beitragsseite (single.php) */
.single-post-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 zu 1/3 Aufteilung */
    gap: 40px;
    width: 100%;
}

/* Für statische Seiten (page.php) */
.content-page {
    width: 100%;
}

main.content {
    background: var(--white);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

aside.sidebar {
    background: var(--white);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- 2-Spalten Layout für Beiträge --- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.post, .single-post, .page-content {
    background-color: #fcfcfc;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 0; 
}

.single-post, .page-content {
    margin-bottom: 30px;
}

.post h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

.post h2 a {
    color: var(--royal-blue);
    text-decoration: none;
}

.post h2 a:hover {
    text-decoration: underline;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    font-weight: bold;
    color: var(--royal-blue);
    text-decoration: none;
}

.pagination {
    margin-top: 30px; 
    padding-top: 15px; 
    border-top: 1px solid #eee;
    clear: both;
}

/* ==========================================================================
   --- RESPONSIVE ANPASSUNGEN (Mobile & Tablet) ---
   ========================================================================== */
/* Container hält alles zusammen und begrenzt die maximale Breite */
.posts-grid-master {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1200px;      /* Begrenzt die Breite im kicker.de / NZZ-Stil */
    margin: 40px auto;      /* Das 'auto' zentriert das gesamte Grid perfekt mittig! */
    padding: 0 20px;        /* Sicherheitsabstand für kleinere Bildschirme */
}

/* Zeile 1: Zwei gleich große Spalten (1/2 + 1/2) */
.grid-half-half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Ab Zeile 2: Drei gleich große Spalten (1/3 + 1/3 + 1/3) */
.grid-thirds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* --- RESPONSIVE ANPASSUNGEN (Damit es mobil perfekt bleibt) --- */
@media (max-width: 1024px) {
    .grid-half-half, .grid-thirds {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-half-half, .grid-thirds {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    aside.sidebar {
        display: none;
    }

    .posts-grid {
        grid-template-columns: 1fr;
    }

    header.site-header {
        padding: 15px;
    }

    nav.main-nav ul, nav.main-nav .nav-menu-list {
        flex-wrap: wrap; 
        gap: 10px 15px;
    }

    nav.main-nav ul.sub-menu {
        position: static; 
        background-color: rgba(0, 0, 0, 0.1); 
        box-shadow: none;
        padding: 10px 0 0 15px;
        margin-top: 5px;
        border-radius: 3px;
        min-width: 100%;
        transform: none;
    }
}
/* ==========================================================================
   --- MODERNES PORTAL-FOOTER LAYOUT ---
   ========================================================================== */
.site-footer {
    background-color: var(--royal-blue);
    color: var(--white);
    margin-top: 60px;
    padding-top: 5px; /* Platzhalter für den oberen Rand */
    font-size: 0.95rem;
}

/* Das 3-Spalten-Raster für Desktop */
.footer-top-wrap {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-col h3 {
    color: var(--white);
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Links in Spalte 1 untereinander bringen */
.footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-col a:hover {
    color: var(--white);
    text-decoration: underline;
    padding-left: 3px; /* Kleiner dynamischer Effekt beim Hovern */
}

/* Adress-Stile */
.footer-address {
    line-height: 1.5;
    margin-bottom: 15px;
}

.footer-contact-info {
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* Logo-Ausrichtung */
.footer-logo-col {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.footer-backup-logo, .footer-logo img {
    width: 150px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background: var(--white);
    padding: 5px;
}

/* Bodenzeile-Stile */
.footer-bottom-bar {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    margin-top: 20px;
    font-size: 0.85rem;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-legal-nav {
    display: flex;
    gap: 20px;
}

.footer-legal-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.footer-legal-nav a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* --- RESPONSIVE ANPASSUNGEN FOR DEN FOOTER --- */
@media (max-width: 900px) {
    .footer-top-wrap {
        grid-template-columns: 1fr 1fr; /* 2 Spalten auf Tablets */
    }
    .footer-logo-col {
        grid-column: 1 / -1; /* Logo rutscht mittig unter die Spalten */
        justify-content: center;
        margin-top: 10px;
    }
}

@media (max-width: 600px) {
    .footer-top-wrap {
        grid-template-columns: 1fr; /* 1 Spalte auf Handys */
        gap: 30px;
        text-align: center;
    }
    .footer-col h3 {
        padding-bottom: 5px;
    }
    .footer-logo-col {
        justify-content: center;
    }
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
}