/* 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;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    text-decoration: none !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;
}

/* Kachel-Überschriften auf Startseite, Blog-Übersicht & Empfehlungen */
.article-card h2,
.article-card h2.article-title {
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
    margin: 6px 0 12px 0 !important;
    font-weight: 600 !important;
}

.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;
    }
}

/* ==========================================================================
   14 Landingpages (p1 bis p4): Desktop- & Mobile-Layout
   ========================================================================== */

/* 1. Desktop-Ansicht (2-Spaltig nebeneinander) */
.lp-content-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 40px !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.lp-image-column {
    flex: 1 1 350px !important;
    max-width: 450px !important;
    text-align: center !important;
}

.lp-text-column {
    flex: 1 1 450px !important;
    max-width: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.lp-main-text {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    max-width: 450px !important;
    width: 100% !important;
    text-align: left !important;
}

.lp-list {
    list-style: none !important;
    margin-bottom: 0 !important;
    padding-left: 24px !important;
    max-width: 450px !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.lp-list li {
    text-align: left !important;
}

/* 2. Mobile Ansicht (unter 768px: Block mittig zentriert, Text LINKSBÜNDIG) */
@media (max-width: 768px) {
    .lp-content-layout {
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }

    .lp-image-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .lp-image-column img {
        max-width: 320px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Der Text-Container wird als 450px-Block mittig platziert (margin: 0 auto),
       aber der Text darin ist strikt linksbündig (text-align: left) */
    .lp-text-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 450px !important;
        margin: 0 auto !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 0 !important;
    }

    .lp-main-text {
        width: 100% !important;
        max-width: 450px !important;
        text-align: left !important;
        margin: 0 auto 20px auto !important;
    }

    .lp-list {
        width: 100% !important;
        max-width: 450px !important;
        text-align: left !important;
        margin: 0 auto !important;
        padding-left: 24px !important;
    }
}

/* ==========================================================================
   15 Fixes: Footer-Klasse & CTA-Button Mobile-Passform
   ========================================================================== */

/* 1. Deklaration der Footer-Klasse (lp-footer-rahmen) */
.lp-footer-rahmen {
    width: 100% !important;
    background: var(--card-bg) !important;
    border-top: 1px solid var(--card-border) !important;
    padding: 1.2rem 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-top: 40px !important;
    clear: both !important;
}

.lp-footer-rahmen a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    margin: 0 15px !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

.lp-footer-rahmen a:hover {
    color: var(--primary-color) !important;
}

/* 2. Globaler Box-Sizing Fix für CTA-Buttons */
.finance-cta-button {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* 3. Mobile Optimierung für Buttons auf schmalen Handys */
@media (max-width: 768px) {
    .finance-cta-button {
        width: 100% !important;
        max-width: 320px !important;
        padding: 14px 16px !important;
        /* Kompakteres Padding verhindert seitlichen Überlauf */
        box-sizing: border-box !important;
    }

    .lp-footer-container {
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   Sticky Footer (Fixiert den Footer immer am untersten Bildschirmrand)
   ========================================================================== */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

main {
    flex: 1 !important;
}

.lp-footer-rahmen {
    margin-top: auto !important;
}

/* ==========================================================================
   In-Text CTA (Zwischen-CTA) Box - Dark & Light Theme
   ========================================================================== */
.in-text-cta {
    background-color: var(--card-inner-bg, #112240);
    border-left: 4px solid var(--primary-color, #22C55E);
    padding: 18px 20px;
    margin: 2.5rem 0;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.in-text-cta p {
    color: var(--text-dark, #F8FAFC) !important;
}

.in-text-cta a {
    color: var(--primary-color, #22C55E) !important;
}

/* Umschaltung für den hellen Hintergrund (body.light-theme) */
body.light-theme .in-text-cta {
    background-color: #E2E8F0 !important;
    /* Softes Hellgrau/Eisgrau */
    border-left-color: var(--blog-primary-color, #16A34A) !important;
}

body.light-theme .in-text-cta p {
    color: var(--blog-text-dark, #0F172A) !important;
}

body.light-theme .in-text-cta a {
    color: var(--blog-primary-color, #16A34A) !important;
}

/* ==========================================================================
   Untere CTA- / Empfehlungs-Box - Dark & Light Theme
   ========================================================================== */
.bottom-cta-box {
    background-color: var(--card-inner-bg, #112240);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-top: 2.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bottom-cta-box h3 {
    color: var(--text-dark, #F8FAFC) !important;
}

.bottom-cta-box p {
    color: var(--text-muted) !important;
}

/* Umschaltung für den hellen Hintergrund (body.light-theme) */
body.light-theme .bottom-cta-box {
    background-color: #E2E8F0 !important;
    /* Softes Hellgrau wie beim In-Text CTA */
    border-color: #CBD5E1 !important;
}

body.light-theme .bottom-cta-box h3 {
    color: var(--blog-text-dark, #0F172A) !important;
}

body.light-theme .bottom-cta-box p {
    color: #475569 !important;
}

/* ==========================================================================
   Landing-Page Anpassungen: Untertitel, Disclaimer & Vollbild-Zentrum  
   ========================================================================== */
.lp-subtitle {
    margin-bottom: 1.25rem !important;
}

.lp-disclaimer {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.lp-vollbild-zentrum {
    padding-top: 16px !important;
}

/* ==========================================================================
   HELLER LOOK ("Trust Light") - Exakte Abstufung ab Blog-Farbe (#F1F5F9)
   ========================================================================== */

body.page-light {
    /* 1. SEITEN-HINTERGRUND: Exakt die Farbe der Blogartikel im hellen Modus */
    --bg-color: #F1F5F9;
    /* Eisgrau (Slate 100) */

    /* 2. TEXT-HINTERGRUND: Eine Nuance dunkler als der Seitenhintergrund */
    --card-inner-bg: #E2E8F0;
    /* Milder Grauton (Slate 200) */

    /* 3. BILD-HINTERGRUND: Noch eine Nuance dunkler als der Textbereich */
    --card-bg: #CBD5E1;
    /* Abgedunkeltes Graublau (Slate 300) */

    /* Rahmen & Typografie für scharfe Lesbarkeit */
    --card-border: #94A3B8;
    /* Kräftigerer Rahmen (Slate 400) für klare Konturen */
    --text-dark: #0F172A;
    /* Tiefes Schiefergrau für beste Lesbarkeit */
    --text-muted: #334155;
    /* Dunkles Schiefergrau für Nebentexte */
    --primary-color: #10B981;
    /* Smaragdgrün */
    --primary-dark: #059669;

    background-color: var(--bg-color) !important;
    color: var(--text-dark) !important;
}

/* Kacheln auf hellen Seiten: Bildbereich oben nutzen */
body.page-light .article-card {
    background-color: var(--card-bg) !important;
    /* Dunkelste Stufe (#CBD5E1) für den Bild-Container */
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

/* Unterer Text-Container in den Kacheln (Mittlere Helligkeitsstufe) */
body.page-light .article-card .card-content,
body.page-light .article-card>div:last-child {
    background-color: var(--card-inner-bg) !important;
    /* Mittlere Stufe (#E2E8F0) */
}

/* Überschriften & Texte in den Kacheln */
body.page-light .article-title,
body.page-light h2 {
    color: #0F172A !important;
}

body.page-light .article-meta {
    color: #334155 !important;
}

/* 🟢 HOVER-EFFEKT: Grünes Aufleuchten & Schweben bei Mouseover */
body.page-light .article-card:hover {
    border-color: #10B981 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.25) !important;
}

/* Buttons auf den hellen Seiten */
body.page-light .finance-cta-button {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

body.page-light .finance-cta-button:hover {
    background: linear-gradient(135deg, #34D399 0%, #047857 100%) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

/* ==========================================================================
   STARTSEITE (.tools-grid): Fette Titel & gleiche Button-Höhe
   Isoliert die Kachel-Regeln exklusiv auf index.html, damit empfehlungen.html
   vollständig unberührt und im ursprünglichen Zustand bleibt.
   ========================================================================== */

/* 1. Kachel als Flex-Container mit symmetrischem Innenabstand (nur Startseite) */
.tools-grid .article-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 24px !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Textbereich oben mit geringem, sauberen Abstand nach unten */
.tools-grid .article-card>div:first-child {
    margin-bottom: 12px !important;
}

/* 3. Kachel-Überschrift: Kräftig & fett (nur im Startseiten-Grid) */
.tools-grid .article-card h2,
.tools-grid .article-card h2.article-title {
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
    margin: 6px 0 10px 0 !important;
    font-weight: 700 !important;
}

/* 4. CTA-Button: Perfekt auf gleicher Höhe unten ausgerichtet */
.tools-grid .article-card .finance-cta-button {
    margin-top: auto !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Reines CSS-Theme-Switching ohne JavaScript über den Anker #light */
body:has(#light:target) {
    --bg-color: #F1F5F9;
    --card-inner-bg: #E2E8F0;
    --card-bg: #CBD5E1;
    --card-border: #94A3B8;
    --text-dark: #0F172A;
    --text-muted: #334155;
    --primary-color: #10B981;
    --primary-dark: #059669;

    background-color: var(--bg-color) !important;
    color: var(--text-dark) !important;
}