/* =============================================================
   1. LOKALE SCHRIFTARTEN & BASIS
   ============================================================= */

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

@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-deep: #020617;
    --accent-cyan: #00f5ff;
    --accent-gold: #d4af37;
    --text-slate: #64748b;
    --bestatter-gold: #d4af37;
    --light-bg: #fcfcfd;
}

/* =============================================================
   2. GLOBALE TYPOGRAFIE (DIE KM-HANDSCHRIFT)
   ============================================================= */

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-deep);
    color: #f8fafc;
    overflow-x: hidden;
    line-height: 1.6;
}

/* HERO HEADLINE: Immer Playfair Display */
h1, .km-h1 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    line-height: 1.3 !important; /* Etwas mehr Luft für Unterlängen */
    font-size: clamp(2.5rem, 8vw, 4.5rem) !important;
    padding-bottom: 0.2em !important; /* Verhindert das Abschneiden des 'g' */
}

/* 1. STANDARD (Index-Seite / Dark Mode) -> Modern & Sachlich */
h2, .km-h2 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-style: italic !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    line-height: 1.2 !important;
}

h3, .km-h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
}

/* 2. LIGHT-MODE (Bestatter-Seite) -> Elegant & Klassisch */
/* Dieser Block überschreibt die obigen Werte NUR auf Seiten mit .light-mode im Body */

.light-mode h2, 
.light-mode .km-h2 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-style: italic !important; /* Der elegante Bestatter-Look */
}

.light-mode h3, 
.light-mode .km-h3 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-style: normal !important; /* H3 in den Karten lieber gerade */
}

/* FLIESSTEXT */
p, .km-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem; /* 18px Basis */
    color: var(--text-slate);
}

/* LABELS (Die kleinen Badges) */
.km-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--accent-gold);
}

/* =============================================================
   3. VISUELLE EFFEKTE (INDEX-SEITE)
   ============================================================= */

.bg-mesh {
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 245, 255, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(212, 175, 55, 0.08) 0px, transparent 50%);
}

.gradient-text {
    background: linear-gradient(135deg, #00f5ff 0%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.glass-card {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
}

.glass-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0, 245, 255, 0.2);
}

/* =============================================================
   4. LIGHT-MODE FRAMEWORK (LANDINGPAGES)
   ============================================================= */

/* Diese Klasse hängst du einfach an den Body der Bestatter-Seite */
.light-mode {
    background-color: var(--light-bg);
    color: #0f172a;
}

.light-mode h2 {
    color: #0f172a;
}

/* --- BASIS-ZUSTAND (Standard) --- */
.hover-card-light {
    /* Ein sattes Weiß, das sich vom Hintergrund abhebt */
    background-color: #ffffff !important; 
    
    /* Ein deutlich sichtbarer Rahmen (Slate-200) */
    border: 1px solid #e2e8f0 !important; 
    
    /* Ein permanenter, weicher Schatten, der die Box "anhebt" */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 
                0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
                
    border-radius: 3rem; /* Passend zu deinem Layout */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- HOVER-ZUSTAND --- */
.hover-card-light:hover {
    transform: translateY(-10px);
    border-color: #d4af37 !important; /* KM-Gold Rahmen beim Hover */
    
    /* Verstärkter Schatten beim Drüberfahren */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* --- HINTERGRUND-KONTRAST --- */
/* Wir machen den Bereich hinter den Boxen minimal dunkler, 
   damit die weißen Boxen darauf "strahlen" */
#kooperation {
    background-color: #f8fafc !important; /* Ein sehr helles Grau */
}

/* Gezielte Vergrößerung der Überschriften in den drei Kooperations-Boxen */
.hover-card-light h3, 
#kooperation h3 {
    font-size: 1.5rem !important; /* Erhöht auf 32px */
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

/* Damit auch die mittlere (dunkle) Box die gleiche Größe bekommt */
#kooperation .bg-slate-900 h3 {
    font-size: 1.5rem !important;
}

/* Vergrößerung der vier Ergebnis-Überschriften */
#ergebnisse h4 {
    font-size: 1.5rem !important;
    font-family: 'Playfair Display', serif !important; /* Passend zum neuen Bestatter-Look */
    font-weight: 700 !important;
    color: #0f172a !important; /* Ein tiefes Dunkelblau/Schwarz für maximalen Kontrast */
    margin-bottom: 0.75rem !important;
}

#partner {
    background-color: #ffffff !important;
}

/* Optional: Falls das Label noch feiner justiert werden soll */
#partner .rounded-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#ablauf .text-6xl {
    color: #d4af37 !important;
    opacity: 0.25 !important;
    text-shadow: 2px 2px 4px rgba(212, 175, 55, 0.1);
    font-weight: 700;
}

/* =============================================================
   5. RECHTLICHES & ANIMATION
   ============================================================= */

.policy-content h2 {
    color: var(--accent-gold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 800;
    margin-top: 2.5rem;
    border-left: 2px solid var(--accent-gold);
    padding-left: 1rem;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================
   6. LANDING PAGE OPTIN & BUSINESS CASE - ULTIMATIVE LÖSUNG
   ============================================================= */

/* Header-Fix */
.lp-header {
    background-color: #020617 !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    height: 64px !important;
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 100;
}

/* Hero-Sektion: Weg von 100vh auf Mobile */
.hero-optin-section {
    position: relative;
    background-color: #020617 !important;
    display: block; /* Klassischer Block-Flow für Mobile */
    padding-top: 100px !important; /* Platz für Header */
    padding-bottom: 40px !important;
    min-height: 100vh;
}

/* =============================================================
   6. LANDING PAGE OPTIN & BUSINESS CASE - COMPACT EDITION
   ============================================================= */

/* Grund-Definition der Weißen Box */
.white-box-lp {
    background-color: #ffffff !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6) !important;
    border-radius: 2.5rem !important;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
    padding: 2.2rem 1.5rem !important; /* Etwas kompakteres vertikales Padding */
}

/* DESKTOP-LOGIK (INDEX-STYLE FÜR MAC RETINA) */
@media (min-width: 1024px) {
    .hero-optin-section {
        height: calc(100vh - 64px) !important;
        min-height: calc(100vh - 64px) !important;
        max-height: calc(100vh - 64px) !important;
        overflow: hidden !important;
        display: flex;
        align-items: center;
        padding: 0 !important;
    }

    .hero-optin-section .max-w-6xl {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .white-box-lp {
        padding: 2.5rem !important;
        border-radius: 3.5rem !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-height: 88vh !important; 
        margin: 0 auto !important;
        overflow: hidden;
    }

    /* Schrumpf-Fix für kleine Laptop-Fenster (MacBook 13) */
    @media (max-height: 900px) {
        .white-box-lp {
            padding: 1.25rem 1.75rem !important;
            border-radius: 2.2rem !important;
        }
        .white-box-lp img {
            width: 110px !important; /* Etwas kleiner für mehr Raum */
            margin-bottom: 0.5rem !important;
        }
        .white-box-lp h2 {
            font-size: 1.55rem !important;
            margin-bottom: 0.25rem !important;
        }
        .subtitle-lp {
            margin-bottom: 0.6rem !important;
            font-size: 0.65rem !important;
        }
        .input-lp {
            padding: 0.55rem 0.9rem !important; /* Schlanke Inputs im Schrumpf-Modus */
            margin-bottom: 0.35rem !important;
            font-size: 14px !important;
        }
        .lp-privacy-note {
            margin-bottom: 0.4rem !important;
            font-size: 9px !important;
        }
        .button-lp {
            padding: 0.85rem !important;
            margin-top: 0.4rem !important;
        }
    }
}

/* FORMULAR-FELDER - JETZT SCHLANKER */
.input-lp {
    width: 100% !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.6rem !important; /* Etwas kantiger/moderner */
    color: #0f172a !important;
    padding: 0.75rem 1rem !important; /* Reduziert von 0.9rem */
    margin-bottom: 0.5rem !important; /* Reduziert von 0.6rem */
    font-size: 16px !important; 
    -webkit-appearance: none;
}

@media (min-width: 1024px) {
    .input-lp { 
        font-size: 14px !important; /* Leicht verkleinert für edlere Optik */
        margin-bottom: 0.6rem !important;
    }
}

/* BUTTONS (INDEX-STYLE) */
.button-lp {
    width: 100% !important;
    background-color: #d4af37 !important;
    color: #020617 !important;
    padding: 1rem !important; /* Minimal reduziert für Proportionen */
    border-radius: 0.75rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-size: 13px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.button-lp:hover {
    background-color: #ffffff !important;
    color: #020617 !important;
    transform: scale(1.04); /* Etwas subtilerer Scale */
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
}

/* TEXTE IN DER BOX */
.white-box-lp h2 {
    white-space: nowrap !important;
    font-size: 2rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.6rem !important; 
    color: #0f172a !important;
    font-family: serif;
    font-style: italic;
    text-align: center;
}

.white-box-lp p.subtitle-lp {
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
    color: #64748b !important;
    font-style: normal !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.2rem;
}

.lp-privacy-note {
    font-size: 10px !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.8rem !important;
    text-align: center;
}

.lp-privacy-note a {
    color: #64748b;
    text-decoration: underline;
}

/* BADGE & GLOW */
.badge-gold {
    display: inline-block;
    padding: 0.375rem 1rem !important;
    margin-bottom: 1.2rem !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    background-color: rgba(212, 175, 55, 0.05) !important;
    border-radius: 9999px !important;
    color: #d4af37 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.hero-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* BUSINESS CASE GRID */
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: 4rem; }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
.graphic-container { background: #ffffff; padding: 1.5rem; border-radius: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; }
.feature-list-check { list-style: none; padding: 0; }
.feature-list-check li { position: relative; padding-left: 2rem; margin-bottom: 1rem; color: #475569; }
.feature-list-check li::before { content: "✓"; position: absolute; left: 0; color: #d4af37; font-weight: bold; }

/* =============================================================
   7. GLOBALER FOOTER FIX (IDENTISCH AUF ALLEN SEITEN)
   ============================================================= */

#global-footer footer {
    background-color: #020617 !important; /* Slate 950 */
    color: #64748b !important;           /* Slate 500 (dein Standard) */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;           /* Exakte Größe festlegen */
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;  /* Sorgt für sauberes Rendering auf dunklem Grund */
    -moz-osx-font-smoothing: grayscale;
}

#global-footer footer a, 
#global-footer footer button {
    color: #64748b !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#global-footer footer a:hover, 
#global-footer footer button:hover {
    color: #d4af37 !important; /* Gold bei Hover */
}

/* Verhindert, dass die Optin-Seite den Text im Footer abdunkelt */
#global-footer div {
    color: inherit !important;
}