/* ==========================================================================
   Neues modernes Design für sparundkredit.de
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grundlegende Einstellungen & Farbvariablen
   -------------------------------------------------------------------------- */
:root {
    --color-background: #F8F9FA;  /* Helles Grau für Body */
    --color-surface: #FFFFFF;    /* Weiß für Content-Bereiche */
    --color-text: #212529;      /* Sehr dunkles Grau (fast Schwarz) */
    --color-primary: #005A9C;    /* Vertrauenswürdiges Blau */
    --color-primary-light: #418FDE; /* Helleres Blau für Hover/Akzente */
    --color-secondary: #FFC107;   /* Gold/Gelb für Buttons (z.B. Vergleich) */
    --color-border: #DEE2E6;    /* Dezente Trennlinien */

    --font-family-base: 'Roboto', Verdana, sans-serif;
    --font-family-heading: 'Montserrat', Verdana, sans-serif;

    --border-radius: 6px;
    --box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Universal Box-Sizing & Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   2. Body & Typografie
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-family-base);
    font-size: 16px; /* 18px war sehr groß, 16px ist Standard */
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0; /* Entfernt Standard-Margin */
}

/* Layout Grid für Desktop */
@media (min-width: 768px) { /* Passt zum alten '30em' */
    body {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr; /* Sidebar | Main | Sidebar */
        grid-template-rows: auto 1fr auto; /* Header | Content | Footer */
        grid-template-areas:
            "header header header"
            "nav-main main aside-right" /* Angepasste Areas */
            "footer footer footer";
        gap: 1.5em; /* Luftiger Abstand */
        max-width: 1400px; /* Maximale Breite für Lesbarkeit */
        margin: 1.5em auto; /* Zentriert das Layout */
        padding: 1em; /* Innenabstand zum Body-Rand */
    }
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}
a:visited {
    color: var(--color-primary); /* Gleiche Farbe wie normale Links */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Entfernt alte Ränder/Padding von Layout-Elementen */
header, nav, main, article, section, aside, footer {
    border: none;
    border-radius: 0;
    padding: 0; /* Padding wird spezifischer gesetzt */
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
header {
    grid-area: header;
    background-color: var(--color-surface); /* Weißer Hintergrund */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden; /* Für Bild-Radius */
}

#headerImage {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    max-height: 150px; /* Höhe begrenzen (anpassen nach Bedarf) */
    overflow: hidden;
}
#headerImage img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Verhindert Verzerrung */
}

#siteName {
    text-align: center; /* Zentriert */
    font-weight: bolder;
    font-size: 1.8rem; /* Größer */
    font-variant: normal; /* KEINE SMALL CAPS */
    padding: 0.5em 0;
    color: var(--color-primary);
    background-color: var(--color-surface); /* Weißer Hintergrund */
}

/* --------------------------------------------------------------------------
   4. Hauptnavigation (#globalNav)
   -------------------------------------------------------------------------- */
#globalNav {
    grid-area: header; /* Bleibt im Header-Bereich */
    display: flex; /* Moderne Ausrichtung */
    justify-content: center; /* Zentriert die Links */
    background-color: var(--color-surface); /* Weißer Hintergrund */
    padding: 0.5em 0;
    margin-top: -10px; /* Zieht es näher an den Titel */
    position: relative; /* Für z-index */
    z-index: 10;
}

#globalNav a {
    border: none;
    padding: 0.8em 1.2em;
    text-decoration: none;
    font-weight: bold;
    background: none; /* Kein Hintergrund */
    font-size: 1rem;
    font-variant: normal; /* KEINE SMALL CAPS */
    color: var(--color-primary);
    border-radius: var(--border-radius);
    margin: 0 0.3em;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#globalNav a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-surface);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. Linke Sidebar (Sparten)
   -------------------------------------------------------------------------- */
#navBar-container { /* Neuer Wrapper für Grid-Area */
    grid-area: nav-main;
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1.5em;
}

#navBar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#navBar li {
    margin: 0; /* Entfernt alten Margin */
    display: block; /* Stellt sicher, dass sie block-level sind */
}
#navBar a {
    border: none;
    padding: 0.7em 1em;
    margin: 0.2em 0;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    background: none; /* Kein Hintergrund */
    font-size: 0.95rem;
    line-height: 1.4;
    font-variant: normal; /* KEINE SMALL CAPS */
    color: var(--color-primary);
    display: block; /* Wichtig für vollen Klickbereich */
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
}
#navBar a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-surface);
    text-decoration: none;
}

/* Spezielles Styling für relatedLinks entfernen/überschreiben */
.relatedLinks h3 { margin-top: 1.5em; }
.relatedLinks a {
    background-color: transparent !important; /* Überschreibt alten Stil */
    color: var(--color-primary) !important; /* Überschreibt alten Stil */
}
.relatedLinks a:hover {
    background-color: var(--color-primary-light) !important;
    color: var(--color-surface) !important;
}

/* --------------------------------------------------------------------------
   6. Hauptinhalt
   -------------------------------------------------------------------------- */
main {
    grid-area: main;
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 2em;
}

/* --------------------------------------------------------------------------
   7. Rechte Sidebar (Kreditvergleich, Ads)
   -------------------------------------------------------------------------- */
#aside-right-container { /* Neuer Wrapper für Grid-Area */
    grid-area: aside-right;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.advert-box { /* Wrapper für jede Box in der rechten Sidebar */
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1.5em;
}
.advert-box h3 { /* Styling für Titel in den Boxen */
    font-size: 1.1rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}
.advert-box ul { /* Styling für Listen (z.B. TOP-Zinsen) */
    list-style: none;
    padding: 0;
}
.advert-box ul li {
    margin-bottom: 0.5em;
    padding-left: 1.2em;
    position: relative;
}
/* Kleiner Checkmark oder Bullet davor */
.advert-box ul li::before {
    content: '✓';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Spezielles Styling für den Tarifcheck/Kreditvergleich Button */
.advert-box a[href*="tarifcheck"] { /* Annahme für den Button */
    display: block;
    background-color: var(--color-secondary);
    color: var(--color-text);
    padding: 0.8em 1em;
    text-align: center;
    border-radius: var(--border-radius);
    font-weight: bold;
    text-decoration: none;
    margin-top: 1em;
    transition: background-color 0.2s ease;
}
.advert-box a[href*="tarifcheck"]:hover {
    background-color: #e0a800; /* Dunkleres Gold */
    text-decoration: none;
}
.advert-box img[src*="tarifcheck"] { /* Das Logo darunter */
    margin: 0.5em auto 0 auto;
}

/* Für andere Ads (.advert) */
.advert { text-align: center; }
.advert img { margin: 0 auto; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
footer {
    grid-area: footer;
    background-color: var(--color-text); /* Dunkler Footer */
    color: var(--color-background); /* Helle Schrift */
    padding: 2em;
    border-radius: var(--border-radius);
    text-align: center;
}
footer a {
    color: var(--color-surface); /* Weiße Links */
}
footer a:hover {
    color: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   9. Responsive Design (Mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body {
        display: block; /* Standard Block-Layout */
        margin: 0;
        padding: 0;
    }

    #wrapper { /* Wenn Sie einen Wrapper beibehalten wollen */
        max-width: 100%;
        margin: 0 auto;
        border-radius: 0;
    }

    header, #navBar-container, main, #aside-right-container, footer {
        margin-bottom: 1em; /* Abstand zwischen gestapelten Blöcken */
        box-shadow: none; /* Schatten auf Mobile oft unnötig */
        border-radius: 0;
    }

    main, #navBar-container, .advert-box {
        padding: 1em; /* Weniger Padding auf Mobile */
    }

    #siteName { font-size: 1.5rem; }
    #globalNav { flex-wrap: wrap; } /* Navigation umbrechen lassen */
    #globalNav a { font-size: 0.9rem; padding: 0.6em 0.8em; }

    /* Hier könnte ein Mobile-Menü-Button sinnvoll sein */
}
/* ==========================================================================
   MOBILE NAVIGATION TOGGLE (Hamburger Menü für linke Sidebar)
   ========================================================================== */

.mobile-nav-toggle {
    display: none; /* Standardmäßig auf Desktop versteckt */
    background-color: var(--color-primary); /* Gleiches Blau wie Hauptnavi */
    color: white;
    border: none;
    padding: 0.8em 1.5em;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin: 1em; /* Abstand */
    border-radius: var(--border-radius);
    width: calc(100% - 2em); /* Nimmt fast volle Breite ein */
    text-align: left; /* Text linksbündig */
}

/* --- Mobile Ansicht --- */
@media (max-width: 767px) {
    .mobile-nav-toggle {
        display: block; /* Auf Mobile anzeigen */
    }

    #navBar-container {
        /* Standardmäßig verstecken - Variante 1: Display none */
        /* display: none; */

        /* Standardmäßig verstecken - Variante 2: Max-height (für Animation) */
        max-height: 0;
        overflow: hidden;
        padding: 0 1.5em; /* Padding entfernen, wenn eingeklappt */
        transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Sanfte Animation */
        box-shadow: none; /* Kein Schatten, wenn eingeklappt */
        background: none; /* Kein Hintergrund, wenn eingeklappt */

        /* Wichtig: Grid-Area entfernen auf Mobile, da wir es manuell platzieren */
        grid-area: auto;
    }

    #navBar-container.is-open {
        /* Wenn offen - Variante 1: Display block */
        /* display: block; */

        /* Wenn offen - Variante 2: Max-height */
        max-height: 2000px; /* Großer Wert, damit alles reinpasst */
        padding: 1.5em; /* Padding wieder hinzufügen */
        margin-bottom: 1em; /* Abstand nach unten */
        background-color: var(--color-surface); /* Hintergrund wieder da */
        box-shadow: var(--box-shadow); /* Schatten wieder da */
        border-radius: var(--border-radius); /* Radius wieder da */

    }

    /* Verschiebt die rechte Sidebar auf Mobile unter den Content */
    /* (Diese Regel muss ggf. angepasst werden, je nach finaler Struktur) */
    body {
        display: flex; /* Flexbox für Body auf Mobile */
        flex-direction: column;
    }
    header { order: 1; }
    .mobile-nav-toggle { order: 2; }
    #navBar-container { order: 3; }
    main { order: 4; }
    #aside-right-container { order: 5; }
    footer { order: 6; }
}

/* --- Desktop Ansicht --- */
/* Stellt sicher, dass die Sidebar auf Desktop immer sichtbar ist
   und die Grid-Area wieder aktiv ist */
@media (min-width: 768px) {
    #navBar-container {
        /* Variante 1: Display block */
        /* display: block !important; */ /* Überschreibt display:none */

        /* Variante 2: Max-height zurücksetzen */
        max-height: none !important; /* !important, um Inline-Style von JS zu überschreiben */
        overflow: visible !important;
        padding: 1.5em !important; /* Padding sicherstellen */
        background-color: var(--color-surface) !important;
        box-shadow: var(--box-shadow) !important;
        border-radius: var(--border-radius) !important;


        grid-area: nav-main !important; /* Grid Area wiederherstellen */
    }
}