    <style>
/* 1. VARIABLEN & RESET */
:root {
    --c-green: #9ED709;
    --c-purple: #8373BE;
    --c-dark: #434242;
    --c-white: #ffffff;
    --c-gray-light: #f5f5f5;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --radius: 12px;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Hier liegt der Fehler: Der Body braucht die explizite Zuweisung der Schrift & Farbe */
body { 
    font-family: var(--font-main); 
    color: var(--c-dark); 
    line-height: 1.6; 
    overflow-x: hidden; 
    background: #fff; 
}

body.menu-open { overflow: hidden; } 

/* --- TYPOGRAFIE --- */
h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 700; line-height: 1.05; margin-bottom: 25px; }
h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); color: var(--c-purple); margin-bottom: 20px; font-weight: 700; }
h3 { font-size: 1.5rem; margin-bottom: 12px; font-weight: 700; }
.lead { font-size: 1.25rem; max-width: 800px; margin: 0 auto 50px; color: #666; }

/* --- HEADER & NAV (Deine Original-Logik) --- */
header { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 20px 0; transition: var(--transition); color: white; }
header.scrolled { background: rgba(255, 255, 255, 0.98); color: var(--c-dark); padding: 10px 0; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }

nav ul { display: flex; list-style: none; gap: 25px; align-items: center; }
nav a { text-decoration: none; color: inherit; font-weight: 500; font-size: 1rem; position: relative; display: inline-block; transition: color 0.3s ease; }
nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background-color: var(--c-green); transition: width 0.3s ease; }
nav a:hover::after { width: 100%; }
nav a:hover { color: var(--c-green); }

/* --- HERO --- */
.hero { height: 100vh; display: flex; align-items: center; color: white; position: relative; overflow: hidden; }
.video-bg { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: -2; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: -1; }

/* Mobil-Optimierung für Hero & Logo */
@media (max-width: 992px) {
    .hero { padding-top: 100px; height: auto; min-height: 100vh; }
    .hero h1 { font-size: clamp(2rem, 10vw, 3.5rem); }
    nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: rgba(30, 30, 30, 0.98); display: flex; transition: right 0.5s ease; z-index: 999; }
    nav.active { right: 0; }
    nav a { color: white !important; font-size: 1.8rem; }
}

/* --- SEKTIONEN & SCHRÄGE --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
section { padding: 100px 0; position: relative; }

.slanted-section {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
    margin-top: -60px;
    position: relative;
    z-index: 5;
    padding-top: 160px;
}

/* --- PARTNER LAUFBAND --- */
.partner-marquee-wrapper { position: relative; overflow: hidden; height: 180px; width: 100%; margin-top: 25px; display: flex; align-items: center; }
.partner-track { display: flex; width: max-content; gap: 100px; animation: scrollHorizontal 45s linear infinite; align-items: center; padding: 0 50px; }
.partner-slide img { height: 130px; width: auto; filter: grayscale(1); opacity: 0.6; transition: all 0.5s ease; }
.partner-slide img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.15); }
@keyframes scrollHorizontal { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- KONTAKT SEKTION --- */
.section-kontakt { 
    background: url('https://www.kamml.info/daten/foto/back_kontakt2.jpg') center/cover no-repeat; 
    background-attachment: fixed; padding-bottom: 120px; position: relative; z-index: 1;
}
.section-kontakt::before { content: ''; position: absolute; inset: 0; background: rgba(30, 30, 30, 0.7); z-index: -1; }

.book-container { display: flex; flex-wrap: wrap; background: #fff; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); overflow: hidden; margin: 0 auto; max-width: 1000px; }
.book-left { flex: 1; min-width: 300px; padding: 50px 60px; background: #fff; text-align: left; }
.book-right { flex: 1; min-width: 300px; background: #e0e0e0; min-height: 450px; display: flex; align-items: center; justify-content: center; }

/* Buttons & Rest */
.btn { padding: 10px 24px; border-radius: 8px; font-weight: 600; text-decoration: none; display: inline-block; transition: var(--transition); border: 2px solid transparent; }
.btn-primary { background: var(--c-green); color: var(--c-dark); }
.btn-primary:hover { background: var(--c-dark); color: white; }

        :root {
            --c-green: #9ED709;
            --c-purple: #8373BE;
            --c-dark: #434242;
            --c-white: #ffffff;
            --c-gray-light: #f5f5f5;
            --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --radius: 12px;
            --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        /* --- BASE & LAYOUT --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-main); color: var(--c-dark); line-height: 1.6; overflow-x: hidden; background: #fff; }
        body.menu-open { overflow: hidden; } 
        
        /* ESSENZIELLE BARRIEREFREIHEIT: Sichtbarer Fokus nur bei Tastaturnutzung */
        *:focus-visible { outline: 3px solid var(--c-green); outline-offset: 4px; border-radius: 4px; }
        
        /* Fix für den versteckten Rahmen beim Akkordeon */
        .news-header:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
        .card:focus-visible { z-index: 10; } /* Damit der Rahmen über allem liegt */

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        section { padding: 100px 0; position: relative; }
        .bg-light { background-color: var(--c-gray-light); }
        .text-center { text-align: center; }

        /* Globale Klasse für Sektionen mit Schräge */
        .slanted-section {
            clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
            margin-top: -60px;
            position: relative;
            z-index: 5;
            padding-top: 160px;
        }

        /* --- HEADER & NAVIGATION --- */
header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 2000; /* Erhöht, damit es sicher über der Hero-Section liegt */
    padding: 20px 0; 
    transition: var(--transition); 
    color: white; 
}

/* Wichtig: Das Logo braucht einen hohen z-index */
.logo {
    position: relative;
    z-index: 2001;
}

.logo img { 
    height: 50px; 
    display: block;
}
        header.scrolled { background: rgba(255, 255, 255, 0.98); color: var(--c-dark); padding: 10px 0; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
        .nav-flex { display: flex; justify-content: space-between; align-items: center; }
        .logo img { height: 50px; position: relative; z-index: 1001; }
        
        nav ul { display: flex; list-style: none; gap: 25px; align-items: center; }
        nav a { text-decoration: none; color: inherit; font-weight: 500; font-size: 1rem; position: relative; display: inline-block; transition: color 0.3s ease; }
        nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background-color: var(--c-green); transition: width 0.3s ease; }
        nav a:hover::after { width: 100%; }
        nav a:hover { color: var(--c-green); }

        /* --- MOBILE NAVIGATION (HAMBURGER) --- */
        .mobile-menu-toggle {
            display: none; flex-direction: column; justify-content: space-between;
            width: 30px; height: 21px; background: transparent; border: none;
            cursor: pointer; z-index: 1001; color: inherit;
        }
        .mobile-menu-toggle .bar { height: 3px; width: 100%; background-color: currentColor; border-radius: 3px; transition: var(--transition); }
        
        @media (max-width: 992px) {
            .mobile-menu-toggle { display: flex; }
            nav {
                position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
                background: rgba(30, 30, 30, 0.98); backdrop-filter: blur(10px);
                display: flex; align-items: center; justify-content: center;
                transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 999;
            }
            nav.active { right: 0; }
            nav ul { flex-direction: column; gap: 40px; text-align: center; }
            nav a { font-size: 1.8rem; color: white !important; font-weight: 700; }
            
            .mobile-menu-toggle.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
            .mobile-menu-toggle.active .bar:nth-child(2) { opacity: 0; }
            .mobile-menu-toggle.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
            
            body.menu-open header { background: transparent !important; box-shadow: none !important; color: white !important; }
        }

        /* --- TYPOGRAPHY --- */
        h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 700; line-height: 1.05; margin-bottom: 25px; }
        h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); color: var(--c-purple); margin-bottom: 20px; font-weight: 700; }
        h3 { font-size: 1.5rem; margin-bottom: 12px; font-weight: 700; transition: var(--transition); }
        .lead { font-size: 1.25rem; max-width: 800px; margin: 0 auto 50px; color: #666; }

        /* Spezielle Klasse für einzeilige Überschrift */
        .title-nowrap { white-space: nowrap; }
        @media (max-width: 850px) {
            .title-nowrap { white-space: normal; }
        }

        /* --- HERO --- */
.hero { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    color: white; 
    position: relative; 
    overflow: hidden;
    z-index: 1; /* Niedriger als der Header */
    padding-top: 80px; /* Platz für den Header schaffen */
}

/* Mobil-Anpassung */
@media (max-width: 992px) {
    .hero { 
        padding-top: 120px; /* Mehr Platz auf Handys, da das Logo Platz braucht */
        height: auto; 
        min-height: 100vh; 
    }
}
        .video-bg { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: -2; }
        .hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: -1; }

        /* --- BUTTONS --- */
        .btn { 
            padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: 1rem; 
            text-decoration: none; display: inline-block; cursor: pointer; position: relative;
            overflow: hidden; z-index: 1; border: 2px solid transparent;
            transition: color 0.4s ease, border-color 0.4s ease;
        }
        .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .btn:hover::before { width: 100%; }

        .btn-primary { background: var(--c-green); color: var(--c-dark); border-color: var(--c-green); }
        .btn-primary::before { background: var(--c-dark); }
        .btn-primary:hover { color: var(--c-white); border-color: var(--c-dark); }

        .btn-outline { color: white; border-color: white; }
        .btn-outline::before { background: white; }
        .btn-outline:hover { color: var(--c-dark); }

        /* --- GRIDS & CARDS --- */
        .grid { display: grid; gap: 30px; }
        .grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
        .grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

        .card { 
            background: white; padding: 35px; border-radius: var(--radius); 
            box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-bottom: 6px solid var(--c-green); 
            display: flex; flex-direction: column; position: relative; top: 0; transition: var(--transition);
        }
        .card:hover { top: -10px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-bottom-color: var(--c-purple); }
        .card-icon { width: 45px; height: 45px; margin-bottom: 20px; color: var(--c-green); transition: var(--transition); }
        .card:hover .card-icon { color: var(--c-purple); transform: rotate(10deg) scale(1.1); }
        .card:hover h3 { color: var(--c-purple); }

        .check-list { list-style: none; padding: 0; margin-top: 15px; }
        .check-list li { padding-left: 25px; position: relative; margin-bottom: 8px; font-size: 0.95rem; font-weight: 600; text-align: left; }
        .check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--c-green); font-weight: 800; }

        /* --- SPECIFIC SECTIONS --- */
        
        /* Transparenz Sektion */
        .section-dark { background: var(--c-dark); color: #eee; }
        .section-dark h2 { color: var(--c-green); }

        /* Hightech Box */
        .hightech-box { display: flex; align-items: flex-start; gap: 18px; background: white; padding: 25px; border-radius: 8px; border-left: 5px solid var(--c-green); box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 30px; width: 100%; }
        .hightech-box svg { width: 35px; height: 35px; color: var(--c-purple); flex-shrink: 0; margin-top: 3px; }
        .hightech-box strong { display: block; font-size: 1.1rem; color: var(--c-dark); margin-bottom: 6px; font-weight: 700; }
        .hightech-box p { font-style: italic; margin: 0; font-size: 0.95rem; color: #555; }

        /* Dahoam Box */
        .dahoam-box {
            background: white; padding: 40px; border-radius: var(--radius); 
            box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; 
            border-bottom: 6px solid var(--c-purple); width: 100%; max-width: 400px;
            transition: var(--transition); position: relative; top: 0;
        }
        .dahoam-box:hover { top: -5px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); border-bottom-color: var(--c-green); }

        /* Engagement Links */
        .engagement-link { color: var(--c-purple); text-decoration: none; transition: color 0.3s ease; display: block; }
        .engagement-link:hover, .engagement-link:hover h3 { color: var(--c-green); }

        /* --- PARTNER LAUFBAND: GRAU ZU FARBE --- */
        .partner-marquee-wrapper { 
            position: relative; 
            overflow: hidden; 
            height: 180px; 
            width: 100%; 
            margin-top: 25px; 
            display: flex; 
            align-items: center; 
            background: transparent;
        }
        
        .partner-track { 
            display: flex; 
            width: max-content; 
            gap: 100px; 
            animation: scrollHorizontal 45s linear infinite; 
            align-items: center;
            padding: 0 50px;
        }

        /* Animationstopp bei Hover */
        .partner-marquee-wrapper:hover .partner-track {
            animation-play-state: paused;
        }
        
        .partner-slide { 
            flex-shrink: 0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        }
        
        .partner-slide img { 
            height: 130px; 
            width: auto; 
            object-fit: contain; 
            /* Hier die Magie: 100% Grau im Ruhezustand */
            filter: grayscale(1); 
            opacity: 0.6; 
            transition: all 0.5s ease; 
            cursor: pointer;
        }
        
        .partner-slide img:hover { 
            /* Zurück zur Farbe und voller Deckkraft */
            filter: grayscale(0); 
            opacity: 1; 
            transform: scale(1.15); /* Etwas stärkerer Zoom für den Effekt */
        }

        @keyframes scrollHorizontal {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        /* Mobile Optimierung */
        @media (max-width: 768px) {
            .partner-slide img { height: 85px; }
            .partner-track { gap: 60px; }
            .partner-marquee-wrapper { height: 160px; }
        }

        /* Schatten-Verläufe an den Seiten */
        .partner-marquee-wrapper::before, .partner-marquee-wrapper::after { 
            content: ''; position: absolute; top: 0; width: 150px; height: 100%; z-index: 5; pointer-events: none; 
        }
        .partner-marquee-wrapper::before { left: 0; background: linear-gradient(to right, var(--c-gray-light), transparent); }
        .partner-marquee-wrapper::after { right: 0; background: linear-gradient(to left, var(--c-gray-light), transparent); }

        @media (max-width: 768px) {
            .partner-slide img { height: 80px; }
            .partner-track { gap: 60px; }
            .partner-marquee-wrapper { height: 160px; }
        }

        /* --- NEWS AKKORDEON --- */
        .news-section { background: var(--c-white); padding-bottom: 60px; }
        .news-item { background: #fff; border-radius: var(--radius); box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 20px; border-left: 5px solid var(--c-purple); overflow: visible; transition: var(--transition); }
        .news-header { padding: 25px 35px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.3s ease; border-radius: var(--radius); }
        .news-header:hover { background: #fafafa; }
        .news-date { display: block; font-size: 0.85rem; color: #888; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
        .news-header h3 { margin: 0; font-size: 1.4rem; color: var(--c-dark); transition: color 0.3s ease; }
        .news-item.active .news-header h3 { color: var(--c-green); }
        
        .news-toggle-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--c-gray-light); display: flex; align-items: center; justify-content: center; color: var(--c-purple); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.3s ease; flex-shrink: 0; }
        .news-item.active .news-toggle-icon { transform: rotate(135deg); background: var(--c-purple); color: white; }
        
        .news-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); background: #fafafa; border-radius: 0 0 var(--radius) var(--radius); }
        .news-inner { padding: 0 35px 35px; display: flex; gap: 40px; border-top: 1px solid #eee; margin-top: 20px; padding-top: 30px; }
        
        .news-image { flex: 0 0 350px; border-radius: 8px; overflow: hidden; }
        .news-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .news-text { flex: 1; }
        .news-text h4 { color: var(--c-dark); margin-bottom: 15px; font-size: 1.1rem; }
        .news-text p { color: #555; font-size: 1rem; margin-bottom: 15px; }

        @media (max-width: 768px) {
            .news-inner { flex-direction: column; padding: 0 20px 25px; gap: 20px; }
            .news-header { padding: 20px; }
            .news-image { flex: auto; max-height: 250px; }
        }

        /* Kontakt Sektion */
        .section-kontakt { background: url('https://www.kamml.info/daten/foto/back_kontakt2.jpg') center/cover no-repeat; background-attachment: fixed; padding-bottom: 120px; }
        .section-kontakt::before { content: ''; position: absolute; inset: 0; background: rgba(30, 30, 30, 0.7); z-index: -1; }
        .book-container { display: flex; flex-wrap: wrap; background: #fff; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); overflow: hidden; margin: 0 auto; max-width: 1000px; }
        .book-left { flex: 1; min-width: 300px; padding: 50px 60px; background: #fff; position: relative; z-index: 2; box-shadow: 15px 0 20px -15px rgba(0,0,0,0.15); text-align: left; }
        .book-right { flex: 1; min-width: 300px; background: #e0e0e0; display: flex; align-items: center; justify-content: center; min-height: 450px; position: relative; z-index: 1; padding: 20px; text-align: center; }
        @media (max-width: 600px) { .book-left { padding: 40px 25px; } }

        /* --- FADE-IN ANIMATION --- */
        .fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in.visible { opacity: 1; transform: translateY(0); }

        /* --- FOOTER & BACK TO TOP --- */
        footer { background: #111; color: #aaa; padding: 80px 0 30px; font-size: 0.95rem; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 50px; margin-bottom: 50px; }
        footer h4 { color: var(--c-green); font-size: 1.1rem; margin-bottom: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
        .footer-nav { list-style: none; padding: 0; }
        
        .footer-nav.two-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 12px; }
        .footer-nav:not(.two-cols) li { margin-bottom: 12px; }
        
        .footer-nav a { text-decoration: none; color: #aaa; font-weight: 500; font-size: 0.95rem; position: relative; display: inline-block; transition: color 0.3s ease; }
        .footer-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: var(--c-white); transition: width 0.3s ease; }
        .footer-nav a:hover::after { width: 100%; }
        .footer-nav a:hover { color: var(--c-white); }
        .footer-bottom { border-top: 1px solid #333; padding-top: 30px; text-align: center; font-size: 0.85rem; color: #777; }

        .back-to-top {
            position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px;
            background-color: var(--c-green); color: var(--c-dark); border-radius: 50%;
            display: flex; align-items: center; justify-content: center; text-decoration: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2); opacity: 0; visibility: hidden;
            transform: translateY(20px); transition: all 0.3s ease; z-index: 998;
        }
        .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
        .back-to-top:hover { background-color: var(--c-purple); color: white; transform: translateY(-5px); }
        @media (max-width: 768px) { .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; } }

/* --- DSGVO COOKIE BANNER (KOMPLETT ERSETZT & OPTIMIERT) --- */
.cookie-banner {
    position: fixed; 
    bottom: -150%; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 95%; 
    max-width: 900px;
    background: #222; 
    color: white; 
    padding: 30px; 
    border-radius: 16px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    z-index: 9999; 
    display: flex; 
    flex-direction: column; 
    gap: 15px;
    transition: bottom 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
    border-bottom: 5px solid var(--c-green);
}

.cookie-banner.show { 
    bottom: 20px; 
}

.cookie-header h3 { margin-bottom: 5px; color: var(--c-green); font-size: 1.2rem; }
.cookie-header p { font-size: 0.9rem; color: #ccc; margin-bottom: 5px; line-height: 1.4; }

.cookie-links { margin-top: 5px; }
.cookie-links a { color: #888; font-size: 0.8rem; text-decoration: underline; margin-right: 15px; transition: 0.3s; }
.cookie-links a:hover { color: var(--c-white); }

.cookie-options { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    margin: 10px 0; 
    background: #1a1a1a; 
    padding: 15px; 
    border-radius: 8px; 
}

.cookie-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cookie-toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--c-green); cursor: pointer; }
.cookie-toggle span { font-size: 0.9rem; font-weight: 600; color: #eee; }
.cookie-toggle small { font-weight: 400; color: #888; margin-left: 5px; display: block; font-size: 0.75rem; }

.cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }

.btn-cookie-gray { background: transparent; color: #aaa; border: 2px solid #555; }
.btn-cookie-gray:hover { color: white; border-color: #888; }

/* MOBIL-OPTIMIERUNG */
@media (max-width: 768px) {
    .cookie-banner { 
        bottom: -150%; 
        width: 100%; 
        max-height: 85vh; /* WICHTIG: Begrenzt Höhe auf Handys */
        overflow-y: auto; /* WICHTIG: Macht Inhalt scrollbar */
        border-radius: 20px 20px 0 0; 
        padding: 20px; 
        left: 0;
        transform: none;
    }
    
    .cookie-banner.show { 
        bottom: 0; 
    }

    .cookie-buttons { 
        flex-direction: column; 
        gap: 8px;
    }
    
    .cookie-buttons button, 
    .cookie-buttons .btn { 
        width: 100%; 
        text-align: center; 
        padding: 12px !important; 
    }
}
        }
    </style>