/* Gewicht 300 (Light) - Passe den Namen an deine echte Datei an, z.B. light.woff2 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/inter-v20-latin-300.woff2') format('woff2');
    /* Hier deinen echten Dateinamen eintragen */
}

/* Gewicht 400 (Regular) - Korrigiert auf deinen exakten Download-Namen */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}

/* Gewicht 500 (Medium) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
}

/* Gewicht 600 (Semi-Bold / Halbfett für deine Kacheln) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* Gewicht 700 (Bold / Fett für große Überschriften) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}

/* 2. Zentrale Farbvariablen (Aktualisiert auf Finanz & KI-Design) */
:root {
    --bg-color: #050C1A;
    /* Sehr tiefes, edles Marineblau/Nachtblau */
    --primary-color: #22C55E;
    /* Klickstarkes Lime-Grün / Neongrün */
    --primary-dark: #10B981;
    /* Dunkleres Smaragdgrün für Übergänge */
    --text-dark: #F8FAFC;
    /* Fast Reinweiß für Haupttexte (maximaler Kontrast) */
    --text-muted: #94A3B8;
    /* Dezentes Schiefergrau für Meta-Daten & Footer */
    --card-bg: #0A192F;
    /* Dunkles Marineblau für Inhalts-Karten & Container */
    --card-border: #1E293B;
    /* Subtiler, dunkler Rahmen für Struktur */
    --card-inner-bg: #112240;
    /* NEU: Der etwas hellere Hintergrund für Inlays/Textbereiche */
    --card-inner-border: #1E3A5F;
    /* NEU: Der passende Rahmen dazu */
    --site-title: "onlinevorteile";

    /* Farben für Blog-Artikel mit hellem Hintergrund */
    --blog-bg-color: #F1F5F9;
    --blog-primary-color: #16A34A;
    --blog-primary-dark: #059669;
    --blog-text-dark: #0F172A;
    --blog-text-muted: #64748B;
    --blog-card-bg: #F8FAFC;
    --blog-card-border: #CBD5E1;
}

/* 3. Globales Layout & Schrift */
body {
    background-color: var(--bg-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}

.site-logo::after {
    content: var(--site-title);
}

/* 4. Navigation rechts (Start / Blog Links) & Header-Kompression */

/* 4.1. Zwingt den gesamten Header-Bereich und seine Container flach zu werden & fügt den farbigen Balken hinzu */
header {
    background-color: var(--card-bg) !important;
    /* Der dunkelblaue Balken aus index.html */
    border-bottom: 1px solid var(--card-border) !important;
    /* Die subtile Trennlinie */
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

header,
header>div,
nav,
nav>div,
.max-w-5xl {
    padding-top: 0.25rem !important;
    /* Überschreibt Klassen wie py-4 oder py-6 im HTML */
    padding-bottom: 0.25rem !important;
    /* Überschreibt Klassen wie py-4 oder py-6 im HTML */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    /* Hebelt Klassen wie h-12, h-16 oder h-20 aus */
    min-height: auto !important;
    box-sizing: border-box !important;
}

/* Garantiert die zentrierte Ausrichtung der Inhalte innerhalb des breiten Balkens */
header>div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1024px !important;
    /* Gleiche Breite wie dein Kachel-Grid */
    margin: 0 auto !important;
}


/* 4.2. Richtet das Logo und die Links sauber auf einer Linie aus */
nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* Verhindert das vertikale Dehnen */
}

/* 4.3. Verhindert, dass das Logo oder die linke Textseite die Leiste hochdrückt */
.site-logo,
header a[href*="index"],
header h1,
header p {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4.4. Komprimiert die eigentlichen Links auf der rechten Seite */
nav div a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 400 !important;
    font-size: 0.95rem;
    transition: color 0.2s ease;

    /* Perfekte, flache Höhenjustierung direkt am Link */
    padding: 4px 12px !important;
    /* Minimiert das Padding auf ein Minimum */
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

nav div a:hover {
    color: var(--primary-color);
}

/* Neutralisiert Framework-Aufblähungen für aktive Navigations-Links */
nav div a,
nav div a:active,
nav div a[class*="active"],
nav div a[class*="current"] {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
}

/* 5. Container-Zentrierung */
main>div,
.max-w-5xl {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* 6. Header BLOG-Tag */
header span {
    color: var(--primary-color);
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
7. Grid-Systeme & Links (Standard Desktop-Ansicht auf dem PC)==========================================================================*/

/* 7.1. Das BLOG-Grid: Bleibt auf dem PC exakt 2 Spalten nebeneinander */
.blog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: 100% !important;
}

/* 7.2. Das TOOLS-Grid: Schaltet auf dem PC auf 3 Spalten nebeneinander um */
.tools-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* Dreispaltig für Start & Empfehlungen */
    gap: 24px !important;
    /* Etwas kompakterer Abstand für 3 Spalten */
    width: 100% !important;
}

/* Gilt für die Links in beiden Grid-Typen */
.blog-grid a,
.tools-grid a {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
}

/* 8. Footer */
footer,
main footer,
.blog-grid+footer {
    display: block !important;
    clear: both !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;

    /* HIER DIE HÖHE EINSTELLEN */
    padding: 1rem 0 !important;
    /* Reines, flaches Padding (1rem oben und unten) */

    position: relative !important;
    float: none !important;
}

footer a {
    text-decoration: none !important;
    /* Entfernt die Standard-Unterstreichung */
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 15px !important;
    /* Erzeugt Abstand zwischen den Links */
    transition: color 0.2s ease;
    display: inline-block !important;
    /* Erlaubt margins und zentriert via text-align */
}

footer a:hover {
    text-decoration: none !important;
    /* Garantiert: KEIN Unterstrich bei Mouseover */
    color: var(--primary-color);
    /* Wechselt die Schriftfarbe sanft ins Lime-Grün */
}

/* ==========================================================================
   9. Responsive Design (Mobilgeräte & Tablets)
   ========================================================================== */
@media (max-width: 900px) {

    /* Zwingt BEIDE Grid-Typen auf dem Handy in eine einzige Spalte */
    .blog-grid,
    .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .article-card {
        padding: 20px !important;
        border-radius: 1.25rem !important;
    }

    /* KORREKTUR: Erlaubt dem Header-Inhalt, sich untereinander aufzuteilen */
    header>div {
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        text-align: center !important;
    }

    /* Richtet die Navigations-Leiste mobil zentriert aus */
    nav {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Der Container für die Links: Erlaubt bei Platzmangel den Umbruch in 2 Zeilen */
    nav div {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 8px !important;
        /* Steuert den Abstand zwischen den Links (oben/unten und links/rechts) */
    }

    /* Macht die Links auf dem Smartphone touch-freundlich und kompakt */
    nav div a {
        padding: 6px 10px !important;
        margin: 0 !important;
        display: inline-block !important;
    }

}


/* 10. Styling für Blog-Einzelbeiträge (Artikel-Karte) & Kachel-Hover-Glow */
.article-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 1.5rem;
    padding: 2.5rem;
    max-width: 56rem;
    margin: 0 auto;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);

    /* REPARATUR: Durch das Splitten auf Einzelzeilen verschwindet der Editor-Fehler sofort */
    transition-property: border-color, transform, box-shadow !important;
    transition-duration: 0.3s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Reaktiviert den edlen, neongrünen Leuchtrahmen und den Schwebe-Effekt */
.article-card:hover {
    border-color: var(--primary-color) !important;
    /* Färbt den Rahmen bei Mouseover Lime-Grün */
    transform: translateY(-4px) !important;
    /* Lässt die Kachel elegant nach oben schweben */
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.2) !important;
    /* Erzeugt einen subtilen, grünen Tiefenglanz nach unten */
}


.article-back-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-block;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.article-back-link:hover {
    color: var(--primary-color);
}

.article-category {
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}

.article-title {
    color: var(--text-dark);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1rem 0;
}

.article-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.article-image {
    width: 100%;
    border-radius: 1rem;
    margin-bottom: 2rem;
    object-fit: cover;
}

.article-content {
    color: var(--text-dark);
    font-size: 1.125rem;
    line-height: 1.7;
}

.article-content h2 {
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary-color);
    padding-left: 0.75rem;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

/* 10.1. Dynamischer Theme-Switcher für den globalen Hintergrund (Heller Modus) */
body.light-theme {
    background-color: var(--blog-bg-color) !important;
    /* Färbt den Bereich außerhalb der Kachel hell */
}

/* Steuerung der eigentlichen Artikel-Karte, wenn der helle Modus aktiv ist */
body.light-theme .article-card {
    background-color: var(--blog-card-bg) !important;
    border-color: var(--blog-card-border) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
}

/* Textfarben-Wechsel innerhalb der hellen Karte */
body.light-theme .article-card .article-title,
body.light-theme .article-card .article-content,
body.light-theme .article-card .article-content h2 {
    color: var(--blog-text-dark) !important;
}

body.light-theme .article-card .article-meta,
body.light-theme .article-card .article-content p,
body.light-theme .article-card .article-content ul li {
    color: var(--blog-text-dark) !important;
}

/* Indikatoren und Links im hellen Modus anpassen */
body.light-theme .article-card .article-category {
    color: var(--blog-primary-color) !important;
}

body.light-theme .article-card .article-content h2 {
    border-left-color: var(--blog-primary-color) !important;
}

/* Hover-Glow der Kachel im hellen Modus anpassen */
body.light-theme .article-card:hover {
    border-color: var(--blog-primary-color) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.15) !important;
}

/* --- 11. CTA-Button-Klasse für interne Landingpages --- */
.finance-cta-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #050C1A !important;
    /* Passt zur dunklen Hintergrundfarbe für perfekten Kontrast */
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 32px;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 1rem 0;
}

.finance-cta-button:hover {
    background: linear-gradient(135deg, #4ADE80 0%, #059669 100%);
    color: #050C1A !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* --- 12. NEU: Landingpage Layout-Komponenten --- */
.lp-vollbild-zentrum {
    flex-grow: 1;
    padding-top: 64px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-header-container {
    text-align: center !important;
    width: 100% !important;
    max-width: 800px !important;
    /* KORREKTUR: Macht die Überschriften gezielt schmaler */
    margin: 0 auto 30px auto !important;
    /* Zentriert die schmale Box perfekt auf dem Bildschirm */
    padding: 0 20px;
    box-sizing: border-box;
}

.lp-title {
    color: var(--text-dark);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

.lp-subtitle {
    color: var(--text-muted);
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* 12A Flexbox-Zweispaltensystem (Desktop) */
.lp-content-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    margin-bottom: 40px;
}

/* Linke Spalte (Bild) */
.lp-image-column {
    flex: 1 1 350px;
    max-width: 400px;
    text-align: center;
}

.lp-responsive-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 1rem;
    /* Passt optisch zu den Artikel-Karten */
}

/* Rechte Spalte (Texte und Liste) */
.lp-text-column {
    flex: 1 1 450px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Haupttext - Exakt an die Listenbreite angepasst */
.lp-main-text {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 24px;
    color: var(--text-dark);
    max-width: 450px;
    text-align: left;
}

/* Styling für die Haken-Liste */
.lp-list {
    list-style: none !important;
    /* Entfernt radikal alle Standardpunkte */
    margin-bottom: 0;
    padding-left: 24px !important;
    /* Schafft Platz auf der linken Seite für das ausgerückte Häkchen */
    max-width: 450px;
    width: 100%;
}

.lp-list li {
    position: relative;
    padding-left: 0 !important;
    /* Kein innerer Abstand mehr innerhalb des Listenelements */
    margin-bottom: 12px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-dark);
    text-align: left;
}

/* Zwingt das Häkchen an die exakt gleiche linke Kante wie den Haupttext */
.lp-list li::before {
    content: "✓" !important;
    position: absolute;
    left: -24px !important;
    /* Rückt das Häkchen exakt nach links an den Haupttext-Rand */
    top: -2px;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 1.2rem;
}

/* Unterer CTA & Footer Bereich */
.lp-footer-container {
    width: 100%;
    text-align: center;
    padding: 0 20px;
}

.lp-disclaimer {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.4;
}

/* 13 Responsive Anpassung für Mobilgeräte (unter 768px) */
@media (max-width: 768px) {
    .lp-title {
        font-size: 1.75rem;
    }

    .lp-text-column {
        align-items: center;
        text-align: center;
    }

    .lp-main-text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .lp-list {
        display: inline-block;
        max-width: fit-content;
        margin: 0 auto;
    }

    .lp-list li {
        font-size: 1rem;
    }
}