/*
 Theme Name:     GeneratePress Child
 Theme URI:      https://basic-tutorials.de
 Description:    Ein Child-Theme für GeneratePress
 Author:         Basic Tutorials
 Author URI:     https://basic-tutorials.de
 Template:       generatepress
 Version:        3.3.0
*/

/* ============================= VARIABLEN ============================= */
:root{
--header-h-desktop:72px;
--nav-h-desktop:52px;
--section-spacing:80px;
--container-gap:60px;
--card-gap:20px;
--accent-color:#1f75bf;
--accent-hover:#16568f;
--accent-color-rgb:31,117,191;
--dark-bg:#1a1a1a;
--light-text:#666;
--border-color:#e8e8e8;
--bg-light:#fafafa;
--bg-hover:#f5f5f5;
--transition-fast:.2s ease;
--transition-base:.3s ease;
--shadow-sm:0 2px 8px rgba(0,0,0,.08);
--shadow-md:0 4px 15px rgba(0,0,0,.1);
--shadow-lg:0 8px 25px rgba(0,0,0,.12);
--border-width:3px;
--border-radius:0;
--font-size-xs:11px;
--font-size-sm:13px;
--font-size-base:14px;
--font-size-md:16px;
--font-size-lg:18px;
--font-size-xl:20px
}

/* ============================= 0. GLOBAL & RESET ============================= */
body { background: #ffffff; color: #333; }

/* Top Bar und ALLE Labels global ausblenden */
.top-bar, 
.site-header .top-bar,
.header-widget label,
.header-widget .wp-block-search__label { 
    display: none !important; 
    height: 0 !important; 
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important; /* Aus dem Fluss nehmen */
}

/* ============================= 1. HEADER DESKTOP (VORSCHLAGHAMMER V3) ============================= */
@media(min-width: 1281px) {
    
    /* Container: Dunkelgrau */
    .site-header {
        background: #1d1d1d !important;
        border-bottom: none;
        height: 64px !important;
        position: sticky;
        top: 0;
        z-index: 10000;
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
        display: flex !important;
        align-items: center !important;
    }

    /* Layout-Logik: Flexbox Start */
    .inside-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Alles linksbündig */
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important; 
        box-sizing: border-box !important;
    }

    /* 1. LOGO */
    .site-branding { 
        margin: 0 !important; 
        padding: 0 !important; 
        flex-shrink: 0 !important; 
        line-height: 0 !important; 
        display: block !important;
        width: auto !important;
    }
    .site-header .site-logo img { 
        height: 34px !important; 
        width: auto !important; 
        filter: none !important;
        max-width: none !important; 
    }

    /* 2. NAVIGATION (Direkt nach den 40px Margin vom Logo) */
    .main-navigation { 
        background: transparent !important;
        /* HIER IST DER ABSTAND: 40px links VOM Menü */
        margin-left: 40px !important; 
        margin-right: auto !important; /* Drückt alles was danach kommt nach ganz rechts */
        width: auto !important; /* Darf nicht wachsen */
        flex-grow: 0 !important; /* Darf nicht wachsen */
        flex-shrink: 0 !important;
    }

    .main-navigation .main-nav > ul { 
        display: flex !important; 
        gap: 0 !important; 
        margin: 0 !important;
        justify-content: flex-start !important;
    }

    /* Menü-Items */
    .main-navigation .main-nav > ul > li > a {
        display: block !important;
        font-family: system-ui, -apple-system, sans-serif;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        color: #aaa !important; 
        padding: 0 14px !important;
        line-height: 64px !important;
        height: 64px !important;
        transition: all 0.2s ease;
        border-right: 1px solid #2a2a2a !important; 
    }
    .main-navigation .main-nav > ul > li:first-child > a { border-left: 1px solid #2a2a2a !important; }

    /* Hover */
    .main-navigation .main-nav > ul > li:hover > a,
    .main-navigation .main-nav > ul > li.current-menu-item > a,
    .main-navigation .main-nav > ul > li.sfHover > a {
        background: #000 !important;
        color: #fff !important;
    }

    /* Dropdown */
    .main-navigation ul ul {
        background: #222 !important;
        border: 1px solid #333 !important;
        top: 64px !important;
        left: 0 !important;
        width: auto !important;
        min-width: 200px !important;
    }
    .main-navigation ul ul li { border-bottom: 1px solid #333 !important; margin: 0 !important; }
    .main-navigation ul ul li a {
        color: #ccc !important;
        font-size: 12px !important;
        padding: 10px 15px !important;
        border: none !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
    .main-navigation ul ul li:hover > a {
        background: var(--accent-color) !important;
        color: #fff !important;
    }

    /* 3. WIDGETS (Ganz Rechts) */
    .header-widget {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important; 
        height: 100% !important;
        margin-left: 0 !important; 
        flex-shrink: 0 !important;
    }
    
    /* Reset für Widget Container */
    .header-widget .widget, .header-widget aside { 
        margin: 0 !important; padding: 0 !important; border: none !important; 
        background: transparent !important; box-shadow: none !important;
    }

    /* Social Icons */
    .header-widget .gp-socials-widget { gap: 12px !important; display: flex !important; margin: 0 !important; }
    .header-widget .gp-socials-widget svg { fill: #888 !important; width: 16px !important; height: 16px !important; display: block !important; }
    .header-widget .gp-socials-widget a:hover svg { fill: #fff !important; }

    /* --- SUCHE FIX (PILLE, BLAU, ICON) --- */
    
    .header-widget .widget_search form,
    .header-widget .wp-block-search {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Wrapper: Die Pille */
    .header-widget .wp-block-search__inside-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 220px !important;
        height: 34px !important;
        background: #000 !important;
        border: 2px solid var(--accent-color) !important; /* Blauer Rahmen */
        border-radius: 20px !important;
        overflow: hidden !important; 
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Input: Textfeld */
    .header-widget .wp-block-search__input {
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        padding: 0 40px 0 15px !important; /* Rechts Platz für Lupe */
        font-size: 13px !important;
        width: 100% !important;
        height: 34px !important; /* Volle Höhe */
        line-height: normal !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .header-widget .wp-block-search__input:focus { outline: none !important; }

    /* Button: Lupe statt Text */
    .header-widget .wp-block-search__button {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: 40px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        
        /* Text unsichtbar machen */
        color: transparent !important;
        font-size: 0 !important;
        
        cursor: pointer !important;
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        z-index: 10 !important;
    }

    /* Icon einfügen */
    .header-widget .wp-block-search__button::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
    }
    .header-widget .wp-block-search__button:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    }

    /* --- POLYLANG (DROPDOWN FIX) --- */
    .header-widget .wp-block-polylang-language-switcher {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin-left: 10px !important;
        z-index: 50 !important;
    }

    .header-widget .wp-block-polylang-language-switcher ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .header-widget .wp-block-polylang-language-switcher li { display: none !important; margin: 0 !important; }
    .header-widget .wp-block-polylang-language-switcher li.current-lang { display: flex !important; align-items: center !important; }

    /* Link Style */
    .header-widget .wp-block-polylang-language-switcher a {
        color: #aaa !important;
        font-family: system-ui, sans-serif;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        padding: 10px 5px !important;
        display: block !important;
    }

    /* Chevron */
    .header-widget .wp-block-polylang-language-switcher li.current-lang a::after {
        content: '';
        border: solid #aaa;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        margin-left: 8px;
        transform: rotate(45deg);
        margin-bottom: 2px;
        transition: border-color 0.2s;
    }

    /* Hover -> Dropdown */
    .header-widget .wp-block-polylang-language-switcher:hover ul {
        position: absolute !important;
        top: 40px !important; /* Unter der Leiste */
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: #111 !important;
        border: 1px solid #333 !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
        padding: 5px 0 !important;
        min-width: 90px !important;
    }

    .header-widget .wp-block-polylang-language-switcher:hover li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .header-widget .wp-block-polylang-language-switcher:hover li.current-lang a::after { display: none !important; }

    .header-widget .wp-block-polylang-language-switcher:hover a:hover {
        background: var(--accent-color) !important;
        color: #fff !important;
    }

    /* Mobile Toggle aus auf Desktop */
    .menu-toggle { display: none !important; }
}

/* ============================= 2. MOBILE HEADER (BIS 1280px - FINAL FIX) ============================= */
@media(max-width: 1280px) {

    /* --- 1. DESKTOP HEADER WEG --- */
    .site-header { 
        display: none !important; 
    }

    /* --- 2. MOBILE HEADER CONTAINER (ÄUSSERE HÜLLE) --- */
    #mobile-header {
        display: block !important; /* Block damit der innere Container Platz hat */
        background: #1d1d1d !important;
        height: 80px !important;
        width: 100% !important;
        position: sticky;
        top: 0;
        z-index: 100000;
        border-bottom: 1px solid #333 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        padding: 0 !important;
    }

    /* --- 3. DER INNERE CONTAINER (HIER PASSIERT DIE MAGIE) --- */
    /* Zwingend nötig, damit Logo links und Button rechts bleiben */
    #mobile-header .inside-navigation {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Drückt alles auseinander */
        height: 100% !important;
        width: 100% !important;
        padding: 0 25px !important; 
        box-sizing: border-box !important;
    }

    /* --- 4. LOGO (LINKS) --- */
    #mobile-header .site-logo.mobile-header-logo {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important; /* Verhindert Stauchen */
    }
    #mobile-header .site-logo.mobile-header-logo img {
        height: 50px !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* --- 5. TOGGLE (RECHTS & WEISSER RAHMEN) --- */
    #mobile-header .menu-toggle {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;

        /* STYLE: Transparent, Eckig, Weißer Rahmen */
        background-color: transparent !important;
        border: 2px solid #ffffff !important;
        border-radius: 0 !important;
        
        width: auto !important;
        height: auto !important;
        padding: 10px 14px !important;
        line-height: 1 !important;
    }

    /* Das Icon (Striche) */
    #mobile-header .gp-icon svg {
        height: 24px !important;
        width: 24px !important;
        fill: #ffffff !important;
    }

    /* Hover Effekt */
    #mobile-header .menu-toggle:hover {
        border-color: var(--accent-color) !important;
    }
    #mobile-header .menu-toggle:hover .gp-icon svg {
        fill: var(--accent-color) !important;
    }

    /* --- 6. CLEAN UP --- */
    #mobile-header .mobile-menu, 
    #mobile-header .main-nav > ul { 
        display: none !important; 
    }

    /* --- 7. OFF-CANVAS MENÜ --- */
    #generate-slideout-menu.off-canvas-sidebar {
        background-color: #ffffff !important;
        width: 300px !important;
        padding-top: 20px !important;
    }
    .slideout-navigation button.slideout-exit {
        color: #000 !important;
        margin-bottom: 20px !important;
    }
    .slideout-navigation .main-nav ul li a {
        color: #000 !important;
        font-weight: 800 !important;
        font-size: 18px !important;
        text-transform: uppercase !important;
        padding: 12px 25px !important;
    }
	
	/* --- 7. OFF-CANVAS MENÜ (STYLE: CLEAN & BOLD) --- */
    
    /* A. Der Container (Hintergrund) */
    #generate-slideout-menu.off-canvas-sidebar {
        background-color: #ffffff !important; /* Strahlend weiß */
        width: 320px !important;              /* Gute Breite für Smartphones */
        padding: 20px 0 !important;           /* Platz oben/unten */
        box-shadow: 0 0 50px rgba(0,0,0,0.5); /* Starker Schatten für Tiefe */
    }

    /* B. Der Schließen-Button (Oben rechts im Menü) */
    .slideout-navigation button.slideout-exit {
        font-size: 20px !important;
        font-weight: bold !important;
        color: #1d1d1d !important;
        
        /* Wir stylen ihn ähnlich wie den Hamburger: Rahmen */
        border: 2px solid #1d1d1d !important;
        background: transparent !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        width: 44px !important;
        height: 44px !important;
        margin: 0 20px 20px auto !important; /* Rechtsbündig mit Abstand */
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* Hover beim Schließen-Button */
    .slideout-navigation button.slideout-exit:hover {
        border-color: var(--accent-color) !important;
        color: var(--accent-color) !important;
    }
    .slideout-navigation button.slideout-exit .gp-icon svg {
        fill: currentColor !important; /* Übernimmt Textfarbe */
        width: 18px !important;
        height: 18px !important;
    }

    /* C. Die Menü-Links (Das Wichtigste!) */
    .slideout-navigation .main-nav ul li a {
        font-family: system-ui, -apple-system, sans-serif;
        font-weight: 800 !important;       /* Sehr fett */
        font-size: 18px !important;        /* Schön groß */
        text-transform: uppercase !important; /* Alles GROSS */
        color: #1d1d1d !important;         /* Fast Schwarz */
        
        padding: 15px 30px !important;     /* Viel Platz zum Tippen */
        line-height: 1.2 !important;
        border-bottom: 1px solid #f0f0f0 !important; /* Ganz feine Trennlinie */
        
        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* Hover-Effekt (Der "Rutscher") */
    .slideout-navigation .main-nav ul li:hover > a,
    .slideout-navigation .main-nav ul li.current-menu-item > a {
        color: var(--accent-color) !important; /* Wird Blau */
        background-color: #f9fcfd !important;  /* Ganz leichtes Blau im Hintergrund */
        padding-left: 40px !important;         /* Rutscht 10px nach rechts */
        border-left: 4px solid var(--accent-color) !important; /* Blauer Balken links */
    }

    /* D. Untermenüs (Dropdowns) */
    /* Pfeil für Dropdown */
    .slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
        float: right;
        padding-right: 30px !important;
        color: #aaa !important;
    }
    .slideout-navigation .menu-item-has-children .dropdown-menu-toggle:hover {
        color: var(--accent-color) !important;
    }

    /* Style der Untermenü-Punkte */
    .slideout-navigation .sub-menu {
        background-color: #fafafa !important; /* Leicht grauer Hintergrund für Submenüs */
    }
    .slideout-navigation .sub-menu li a {
        font-size: 15px !important;        /* Etwas kleiner */
        font-weight: 600 !important;       /* Weniger fett */
        padding-left: 40px !important;     /* Eingerückt */
        border-bottom: none !important;
    }
    
    /* E. Widget-Bereich im Menü (falls du da Suche etc. hast) */
    .slideout-navigation .slideout-widget {
        padding: 20px 30px !important;
        border-top: 1px solid #eee;
        margin-top: 10px;
    }
    
} /* ENDE VON @media(max-width: 1280px) */
}

/* ============================= HERO SECTION ============================= */
.hero-section{margin-top:0;padding-top:0}
.hero-section .wp-block-column{flex-basis:auto}
.hero-featured,.hero-small{position:relative;overflow:visible;border:var(--border-width) solid transparent;transition:border-color var(--transition-base)}
.hero-featured{min-height:480px}
.hero-small{min-height:230px}
.hero-featured:hover,.hero-small:hover{border-color:var(--accent-color)}
.hero-featured .wp-block-cover__inner-container,.hero-small .wp-block-cover__inner-container{position:static}
.hero-featured .wp-block-post-title a,.hero-small .wp-block-post-title a{position:static}
.hero-featured .wp-block-post-title a::after,.hero-small .wp-block-post-title a::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:5}
.hero-cat,.hero-cat-small{position:absolute;top:0;left:0;z-index:100;background:var(--accent-color);color:#fff;padding:8px 18px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.hero-cat-small{padding:6px 14px}
.hero-cat a,.hero-cat-small a{color:#fff;text-decoration:none;position:relative;z-index:10}
.wp-block-post-terms__separator{display:none}
.hero-title a,.hero-title-small a{color:#fff;text-decoration:none;transition:color var(--transition-fast)}
.hero-title a:hover,.hero-title-small a:hover{color:var(--accent-color)}
.hero-date{color:rgba(255,255,255,.9);font-weight:500}

/* ============================= SECTION HEADINGS ============================= */
.section-heading{font-size:26px;font-weight:700;margin-bottom:36px}

/* ============================= NEWS CARDS ============================= */
.news-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap)}
.news-card{position:relative;overflow:visible;border:var(--border-width) solid transparent;transition:border-color var(--transition-base);min-height:280px}
.news-card:hover{border-color:var(--accent-color)}
.news-card .wp-block-cover__inner-container{position:static}
.news-card .wp-block-post-title a{position:static}
.news-card .wp-block-post-title a::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:5}
.news-card-cat{position:absolute;top:0;left:0;z-index:100;background:var(--accent-color);color:#fff;padding:6px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.news-card-cat a{color:#fff;text-decoration:none;position:relative;z-index:10}
.news-card-title a{color:#fff;text-decoration:none;transition:color var(--transition-fast);text-shadow:0 1px 3px rgba(0,0,0,.3)}
.news-card-title a:hover{color:var(--accent-color)}
.news-list-simple .wp-block-group{gap:20px;transition:padding var(--transition-fast)}
.news-list-simple .wp-block-group:hover{padding-left:20px}
.news-list-simple .wp-block-group:first-child{border-top:none}
.simple-date{color:var(--light-text);min-width:110px;flex-shrink:0}
.simple-title{flex-grow:1}
.simple-title a{color:var(--dark-bg);text-decoration:none;transition:color var(--transition-fast)}
.simple-title a:hover{color:var(--accent-color)}
.news-more .wp-block-button__link,.wp-block-button__link{background:var(--accent-color);color:#fff;border:none;border-radius:var(--border-radius);transition:all var(--transition-base);display:inline-block;padding:12px 28px;font-weight:600;text-decoration:none}
.news-more .wp-block-button__link:hover,.wp-block-button__link:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ============================= TRENDS ============================= */
.trends-modern{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.trends-modern a{display:flex;align-items:center;justify-content:space-between;background:var(--bg-light);color:var(--dark-bg);padding:14px 18px;font-size:var(--font-size-base);font-weight:500;text-decoration:none;border:2px solid transparent;border-radius:var(--border-radius);transition:all var(--transition-fast)}
.trends-modern a::after{content:'→';color:var(--accent-color);font-size:var(--font-size-md);font-weight:500;opacity:0;transform:translateX(-8px);transition:all var(--transition-fast)}
.trends-modern a:hover{background:#fff;border-color:var(--accent-color);color:var(--accent-color);transform:translateX(4px)}
.trends-modern a:hover::after{opacity:1;transform:translateX(0)}
.trends-modern a[style*="font-size"]{font-size:var(--font-size-base);font-weight:500}

/* ============================= TESTS ============================= */
.brand-filter-bar{margin-bottom:40px}
.filter-buttons{display:flex;flex-wrap:wrap;gap:12px}
.filter-btn{font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:10px 20px;background:#fff;color:var(--light-text);border:2px solid var(--border-color);cursor:pointer;transition:all var(--transition-fast);border-radius:var(--border-radius)}
.filter-btn:hover{border-color:var(--accent-color);color:var(--accent-color)}
.filter-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}
.tests-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap);animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.test-card{position:relative;overflow:visible;border:var(--border-width) solid transparent;transition:border-color var(--transition-base)}
.test-card:hover{border-color:var(--accent-color)}
.test-card__media{margin:0 0 12px 0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--border-radius)}
.test-card__img{width:100%;height:100%;object-fit:cover;display:block}
.test-card__placeholder{display:block;width:100%;height:100%;background:#eee}
.test-card__link::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:5}
.test-card .test-cat{position:absolute;top:0;left:0;z-index:10;background:var(--accent-color);color:#fff;padding:6px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.test-title{margin:0;font-size:17px;font-weight:600;line-height:1.3}
.test-card__link{text-decoration:none;display:block;color:inherit}
.test-title span{color:var(--dark-bg);transition:color var(--transition-fast)}
.test-card:hover .test-title span{color:var(--accent-color)}
.tests-empty{text-align:center;color:var(--light-text);padding:40px}
.tests-error{text-align:center;color:#d22;padding:40px}

/* ============================= KAUFEMPFEHLUNGEN ============================= */
.kaufempfehlungen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;animation:fadeIn .3s ease}
.kaufempfehlung-card{display:flex;gap:0;align-items:stretch;position:relative;overflow:hidden;border:var(--border-width) solid transparent;transition:all var(--transition-base);background:#fff}
.kaufempfehlung-card:hover{border-color:var(--accent-color);box-shadow:var(--shadow-lg)}
.kaufempfehlung-card__media{flex-shrink:0;width:200px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--border-radius);margin:0;position:relative}
.kaufempfehlung-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--transition-base)}
.kaufempfehlung-card:hover .kaufempfehlung-card__img{transform:scale(1.08)}
.kaufempfehlung-card__placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e5e7eb 0%,#d1d5db 100%)}
.kaufempfehlung-card__content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:20px}
.kaufempfehlung-card__link::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:5}
.kaufempfehlung-badge{position:absolute;top:0;left:0;z-index:10;background:var(--accent-color);color:#fff;padding:8px 14px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:var(--border-radius)}
.kaufempfehlung-title{margin:0 0 8px 0;font-size:var(--font-size-lg);font-weight:700;line-height:1.3}
.kaufempfehlung-card__link{text-decoration:none;color:inherit;display:flex;width:100%;height:100%}
.kaufempfehlung-title span{color:var(--dark-bg);transition:color var(--transition-fast)}
.kaufempfehlung-card:hover .kaufempfehlung-title span{color:var(--accent-color)}
.kaufempfehlung-excerpt{color:var(--light-text);font-size:var(--font-size-base);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kaufempfehlung-date{color:#999;font-size:12px;font-weight:600;margin-top:12px}
.kaufempfehlungen-empty{text-align:center;color:var(--light-text);padding:40px}
.kaufempfehlungen-error{text-align:center;color:#d22;padding:40px}
.kaufempfehlungen-more .wp-block-button__link{background:var(--accent-color);color:#fff;border:none;transition:all var(--transition-base)}
.kaufempfehlungen-more .wp-block-button__link:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ============================= FOOTER ============================= */
.bt-footer-clean{background:#0f0f0f;color:#a0a0a0;padding:60px 0 0 0;margin-top:var(--section-spacing);border-top:1px solid #1f1f1f}
.footer-content{display:grid;grid-template-columns:1.5fr 2fr;gap:80px;padding-bottom:50px;border-bottom:1px solid #1f1f1f}
.footer-brand{max-width:400px}
.footer-logo-img{max-width:200px;height:auto;margin-bottom:20px;display:block;opacity:.95;transition:opacity var(--transition-base)}
.footer-logo-img:hover{opacity:1}
.footer-desc{font-size:var(--font-size-base);line-height:1.7;color:#888;margin:0}
.footer-links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.footer-links-col{display:flex;flex-direction:column;gap:12px}
.footer-links-col h4{font-size:var(--font-size-sm);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;margin:0 0 8px 0}
.footer-links-col a{font-size:var(--font-size-base);color:#888;text-decoration:none;transition:color var(--transition-fast),padding-left var(--transition-fast);position:relative}
.footer-links-col a:hover{color:var(--accent-color);padding-left:8px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:30px 0}
.footer-copy{font-size:var(--font-size-base);color:#666}
.footer-socials-clean{display:flex;gap:16px}
.footer-socials-clean a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:#666;background:#1a1a1a;border-radius:6px;transition:all var(--transition-fast);text-decoration:none}
.footer-socials-clean a:hover{color:#fff;background:var(--accent-color);transform:translateY(-2px)}
.footer-socials-clean svg{width:18px;height:18px}

/* ============================= SINGLE POST ============================= */
.single-post.af-tech .inside-article{max-width:1200px;margin:0 auto;padding:0}
.af-head .af-breadcrumbs{margin:6px 0 10px;color:var(--light-text);font-size:var(--font-size-sm)}
.af-head .af-breadcrumbs a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}
.af-head .af-breadcrumbs a:hover{color:var(--accent-color)}
.af-kicker{margin-bottom:8px}
.af-kicker a{display:inline-block;background:var(--accent-color);color:#fff;padding:6px 12px;font-size:var(--font-size-xs);font-weight:800;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;transition:background var(--transition-fast)}
.af-kicker a:hover{background:var(--accent-hover)}
.af-head .entry-title{margin:10px 0 8px;line-height:1.15;font-weight:800}
.af-standfirst{max-width:760px;margin:8px auto 0;text-align:center;font-size:var(--font-size-lg);line-height:1.7;color:var(--light-text)}
.af-infobar{margin-top:14px;padding:14px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.af-author{display:flex;align-items:center;gap:12px}
.af-avatar{width:40px;height:40px;border-radius:50%;display:block}
.af-avatar-fallback{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#eee;color:#666;font-weight:800}
.af-author-name{font-weight:800;color:var(--global-color-2,#222);line-height:1.2;display:block}
.af-author-sub{color:var(--light-text);font-size:var(--font-size-sm)}
.af-share-native{display:none;align-items:center;gap:8px;background:var(--accent-color);color:#fff;border:0;border-radius:4px;padding:10px 14px;font-weight:700;cursor:pointer;transition:background var(--transition-fast)}
.af-share-native:hover{background:var(--accent-hover)}
.af-share-native svg{width:16px;height:16px;fill:currentColor}
.af-lead{margin:22px auto 8px}
.af-lead__img{width:100%;height:auto;display:block}
.af-lead__cap{text-align:center;color:var(--light-text);font-size:var(--font-size-sm);margin-top:8px}
.af-content-wrapper{display:grid;grid-template-columns:minmax(1em,1fr) minmax(0,720px) minmax(1em,1fr);grid-template-areas:"left main right";align-items:flex-start;column-gap:30px}
.af-content{grid-area:main;display:block;max-width:100%;overflow-x:hidden}
.af-content>:not(.alignwide):not(.alignfull){max-width:720px}
.af-content>#ez-toc-container{max-width:720px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.af-content>.alignwide{max-width:1200px;width:1200px;margin-left:50%;transform:translateX(-50%)}
.af-content>.alignfull{max-width:100vw;width:100vw;margin-left:50%;transform:translateX(-50%)}
.af-content h2{font-size:28px;line-height:1.25;margin:2em 0 .7em;padding-bottom:0;border-bottom:none}
.af-content h3{font-size:22px;margin:1.6em 0 .5em}
.af-content ul,.af-content ol{list-style-position:inside;padding-left:0}
.af-content ul li,.af-content ol li{margin-left:0;padding-left:0}

/* ============================= SHARE RAIL ============================= */
.af-share-rail{display:none}
@media(min-width:1281px){
.af-share-rail{display:flex;flex-direction:column;gap:12px;grid-area:left;margin-top:30px;position:sticky;top:110px;justify-self:end;width:48px;z-index:10}
}
.af-share-btn{width:48px;height:48px;border:2px solid var(--border-color);background:#fff;color:#353535;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:0;transition:all var(--transition-base);cursor:pointer;flex-shrink:0;position:relative}
.af-share-btn:hover{border-color:var(--accent-color);background:var(--bg-light)}
.af-share-btn.s-copy.copied{border-color:var(--accent-color);background:#fff}
.af-share-btn.s-copy.copied svg path{stroke:var(--accent-color)}
.af-share-btn svg{width:22px;height:22px;display:block;flex-shrink:0}
.af-share-btn.s-copy svg{width:20px;height:20px}
.af-share-btn svg path,.af-share-btn svg rect,.af-share-btn svg g{transition:fill var(--transition-fast),stroke var(--transition-fast)}
.af-share-btn svg *{vector-effect:non-scaling-stroke}
.af-share-btn.s-fb:hover svg path,.af-share-btn.s-wa:hover svg path,.af-share-btn.s-ln:hover svg path,.af-share-btn.s-tg:hover svg path,.af-share-btn.s-rd:hover svg path{fill:var(--accent-color)}
.af-share-btn.s-mail:hover svg path,.af-share-btn.s-mail:hover svg rect,.af-share-btn.s-copy:hover svg path{stroke:var(--accent-color)}
.af-share-btn.s-copy svg{stroke:#353535}
.copy-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%) translateX(10px);background:var(--accent-color);color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);transform-origin:left center;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:1000}
.copy-tooltip::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--accent-color)}
.copy-tooltip.show{opacity:1;visibility:visible;transform:translateY(-50%) translateX(15px)}
@media(max-width:1280px){
.copy-tooltip{left:50%;top:auto;bottom:100%;transform:translateX(-50%) translateY(-5px)}
.copy-tooltip::before{right:auto;left:50%;top:100%;transform:translateX(-50%);border-right-color:transparent;border-top-color:var(--accent-color)}
.copy-tooltip.show{transform:translateX(-50%) translateY(-10px)}
}

/* ============================= POST FOOTER ============================= */
footer.entry-meta{margin-top:50px;padding-bottom:30px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:15px;width:100%}
footer.entry-meta .gp-icon,footer.entry-meta .sep{display:none}
.cat-links,.tags-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:0;line-height:0}
.cat-links::before{content:"KATEGORIE";font-size:10px;line-height:1.5;font-weight:800;color:#aaa;margin-right:8px;min-width:70px}
.tags-links::before{content:"TAGS";font-size:10px;line-height:1.5;font-weight:800;color:#aaa;margin-right:8px;min-width:70px}
.cat-links a,.tags-links a{display:inline-block;background:#f7f7f7;color:#555;padding:6px 12px;font-size:11px;line-height:1.4;font-weight:700;text-transform:uppercase;text-decoration:none;border:1px solid #e5e7eb;transition:all .2s ease}
.cat-links a:hover,.tags-links a:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,.1)}
.bt-post-nav-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px;width:100%}
.bt-nav-link{display:flex;align-items:center;background:#fff;border:1px solid #e5e7eb;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.25,1);height:100%;min-height:110px;box-sizing:border-box;position:relative;overflow:hidden}
.bt-nav-link:hover{border-color:var(--accent-color);transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.08);z-index:1}
.bt-nav-img{width:120px;height:110px;flex-shrink:0;overflow:hidden;background:#f0f0f0;position:relative;border-right:1px solid #eee}
.bt-nav-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s ease}
.bt-nav-link:hover .bt-nav-img img{transform:scale(1.1)}
.bt-nav-text{flex-grow:1;padding:15px 24px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.bt-nav-link.next{text-align:right;flex-direction:row-reverse}
.bt-nav-link.next .bt-nav-img{border-right:none;border-left:1px solid #eee}
.bt-nav-label{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#aaa;margin-bottom:8px;transition:color .2s}
.bt-nav-title{display:block;font-size:15px;font-weight:700;line-height:1.35;color:var(--global-color-2,#222);transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bt-nav-link:hover .bt-nav-title,.bt-nav-link:hover .bt-nav-label{color:var(--accent-color)}
.bt-nav-img.no-img::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f9f9f9;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>');background-repeat:no-repeat;background-position:center}

/* ============================= COMMENTS ============================= */
.comments-area{margin-top:80px;padding-top:50px;border-top:1px solid #eee;max-width:100%}
.comments-title,.comment-reply-title{font-size:24px;font-weight:800;color:#111;margin-bottom:20px;display:block;letter-spacing:-.5px}
.logged-in-as,.comment-notes{font-size:14px;color:#666;margin-bottom:25px;line-height:1.6}
.logged-in-as a{color:var(--accent-color);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.logged-in-as a:hover{border-bottom-color:var(--accent-color)}
.comment-form-comment textarea,.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"]{width:100%;padding:18px;background:#f9f9f9;border:2px solid #eee;border-radius:0;font-size:15px;font-family:inherit;color:#333;transition:all .3s ease;box-sizing:border-box}
.comment-form-comment textarea:focus,.comment-form input:focus{background:#fff;border-color:var(--accent-color);outline:none;box-shadow:0 5px 15px rgba(var(--accent-color-rgb),.08)}
.comment-form textarea::placeholder{color:#aaa}
.comment-form-cookies-consent,.comment-form-subscription{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:14px;color:#555}
.comment-form input[type="checkbox"]{width:18px;height:18px;border:2px solid #ccc;border-radius:0;accent-color:var(--accent-color);cursor:pointer}
.form-submit{margin-top:30px}
.form-submit .submit{background:var(--accent-color);color:#fff;border:none;border-radius:0;padding:14px 32px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s ease;display:inline-block}
.form-submit .submit:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.comment-list{margin:0 0 60px 0;padding:0;list-style:none}
.comment-body{background:#fff;border:1px solid #eee;padding:30px;margin-bottom:20px;position:relative}
.comment-meta{display:flex;align-items:center;margin-bottom:15px;font-size:13px}
.comment-author cite{font-style:normal;font-weight:800;font-size:16px;color:#222;margin-right:10px}
.comment-metadata a{color:#999;text-decoration:none}
.comment-content p{margin-bottom:15px;line-height:1.6;color:#444}
.reply a{font-size:11px;font-weight:700;text-transform:uppercase;text-decoration:none;color:var(--accent-color);border:1px solid var(--accent-color);padding:4px 10px;display:inline-block;transition:all .2s}
.reply a:hover{background:var(--accent-color);color:#fff}
.comment-author .avatar{width:40px;height:40px;border-radius:50%;margin-right:15px;vertical-align:middle}

/* ============================= RELATED POSTS ============================= */
.bt-related-wrapper{margin-top:80px;padding-top:0;width:100%;box-sizing:border-box}
.bt-related-heading{font-size:24px;font-weight:800;color:#111;margin-bottom:24px;text-transform:none;display:flex;align-items:center}
.bt-related-heading::before{content:'';display:block;width:6px;height:24px;background:var(--accent-color);margin-right:12px}
.bt-related-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:6px}
.bt-related-card{position:relative;overflow:visible;border:var(--border-width) solid transparent;background:transparent;box-shadow:none;transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.bt-related-card:hover{border-color:var(--accent-color);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.bt-related-bg{display:none}
.bt-related-link{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;background-size:cover;background-position:center 30%;background-repeat:no-repeat;text-decoration:none;color:inherit}
.bt-related-link::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.9) 100%);z-index:1}
.bt-related-overlay{position:static;z-index:2;padding:16px;display:flex;flex-direction:column;gap:6px}
.bt-related-card .bt-related-cat{position:absolute;top:0;left:0;z-index:100;display:inline-block;box-sizing:border-box;max-width:100%;padding:8px 18px;background:var(--accent-color);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1.4;white-space:normal;margin:0}
.bt-related-title{margin:0;color:#fff;font-weight:800;font-size:18px;line-height:1.25;text-shadow:0 2px 10px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bt-related-card:nth-child(1){grid-column:1/3;grid-row:1/3}
.bt-related-card:nth-child(2){grid-column:3/4;grid-row:1/2}
.bt-related-card:nth-child(3){grid-column:4/5;grid-row:1/2}
.bt-related-card:nth-child(4){grid-column:3/5;grid-row:2/4}
.bt-related-card:nth-child(5){grid-column:1/3;grid-row:3/4}
.bt-related-card:nth-child(1) .bt-related-title{font-size:22px}
.bt-related-card:nth-child(2) .bt-related-title,.bt-related-card:nth-child(3) .bt-related-title{font-size:16px}

/* ============================= TABLES ============================= */
.entry-content table{width:100%;max-width:100%;margin:30px 0;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb;font-size:14px;line-height:1.6}
.entry-content table thead{background:#f7f7f7;border-bottom:2px solid var(--accent-color)}
.entry-content table thead th{padding:15px 20px;text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#555;border-right:1px solid #e5e7eb}
.entry-content table thead th:last-child{border-right:none}
.entry-content table tbody td{padding:15px 20px;border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0;color:#333}
.entry-content table tbody td:last-child{border-right:none}
.entry-content table tbody tr:nth-child(even){background:#fafafa}
.entry-content table tbody tr{transition:background .2s ease}
.entry-content table tbody tr:hover{background:#f5f9fc}
.entry-content table tbody tr:last-child td{border-bottom:none}
.entry-content table a{color:var(--accent-color);text-decoration:none;font-weight:600;transition:color .2s ease}
.entry-content table a:hover{color:#005177;text-decoration:underline}
.entry-content table tbody td:first-child{font-weight:600;color:#222}
.entry-content table .center,.entry-content table td[align="center"],.entry-content table th[align="center"]{text-align:center}
.entry-content table .right,.entry-content table td[align="right"],.entry-content table th[align="right"]{text-align:right}

/* ============================= SIDEBAR ============================= */
.sidebar .widget_nav_menu,.right-sidebar .widget_nav_menu{background:transparent;border:0;padding:0}
.sidebar .widget_nav_menu .widget-title,.right-sidebar .widget_nav_menu .widget-title{margin:0 0 10px;font-size:var(--font-size-xl);line-height:1.2;font-weight:800;color:var(--global-color-2,#222)}
.sidebar .widget_nav_menu .menu,.right-sidebar .widget_nav_menu .menu{list-style:none;margin:0;padding:0;counter-reset:pop;display:flex;flex-direction:column;gap:14px}
.sidebar .widget_nav_menu .menu>li,.right-sidebar .widget_nav_menu .menu>li{counter-increment:pop;display:grid;grid-template-columns:36px 1fr;align-items:start;column-gap:10px}
.sidebar .widget_nav_menu .menu>li::before,.right-sidebar .widget_nav_menu .menu>li::before{content:counter(pop);font-weight:600;font-size:28px;line-height:1;color:var(--accent-color);opacity:.75}
.sidebar .widget_nav_menu .menu>li>a,.right-sidebar .widget_nav_menu .menu>li>a{display:block;text-decoration:none;color:var(--global-color-2,#222);font-weight:700;line-height:1.35;transition:color var(--transition-fast),transform var(--transition-fast)}
.sidebar .widget_nav_menu .menu>li>a:hover,.right-sidebar .widget_nav_menu .menu>li>a:hover{color:var(--accent-color);transform:translateX(3px)}

/* ============================= TABLE OF CONTENTS ============================= */
#ez-toc-container{--af-accent:var(--accent-color);--af-dark:var(--global-color-2,#222);--af-muted:var(--light-text);background:#fff;border:2px solid var(--af-accent);border-radius:var(--border-radius);padding:0;box-shadow:none;max-width:720px;margin:18px auto;overflow:hidden}
#ez-toc-container .ez-toc-title-container{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:0;background:#fff;cursor:pointer;user-select:none;transition:background var(--transition-fast)}
#ez-toc-container .ez-toc-title-container:hover{background:var(--bg-light)}
#ez-toc-container .ez-toc-title{margin:0;font-size:var(--font-size-base);font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--af-dark)}
#ez-toc-container .af-toc-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 8px;font:700 12px/1 var(--body-font,system-ui);color:#fff;background:var(--af-accent);border-radius:999px}
#ez-toc-container .af-toc-chevron{width:18px;height:18px;position:relative;margin-left:6px}
#ez-toc-container .af-toc-chevron::before{content:"";position:absolute;inset:0;border-right:2px solid var(--af-dark);border-bottom:2px solid var(--af-dark);transform:rotate(45deg);transform-origin:50% 50%;transition:transform var(--transition-fast),border-color var(--transition-fast);opacity:.6}
#ez-toc-container:hover .af-toc-chevron::before{opacity:.9}
#ez-toc-container .ez-toc-list{margin:0;padding:10px 14px 14px;list-style:none;transition:max-height .28s ease}
#ez-toc-container .ez-toc-list li{margin:.14em 0}
#ez-toc-container .ez-toc-list a{color:var(--af-dark);text-decoration:none;line-height:1.5;display:inline-block;transition:color var(--transition-fast),transform var(--transition-fast)}
#ez-toc-container .ez-toc-list a:hover{color:var(--af-accent);transform:translateX(1px);text-decoration:underline}
#ez-toc-container .ez-toc-list-level-2{margin-left:16px}
#ez-toc-container .ez-toc-list-level-3{margin-left:28px}
#ez-toc-container.is-collapsed .ez-toc-list{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
#ez-toc-container.is-collapsed .af-toc-chevron::before{transform:rotate(-135deg)}
#ez-toc-container .ez-toc-list a.is-active{color:var(--accent-color);text-decoration:underline}

/* ============================= ARCHIVE ============================= */
body.archive #page.grid-container{max-width:100%;padding:0}
body.archive .site-content{display:block}
body.archive #primary{width:100%;margin:0}
body.archive #secondary{display:none}
body.archive .inside-article{padding:0;max-width:100%}
.mag-hero-band{background:linear-gradient(to bottom,var(--accent-color) 0,var(--accent-color) 280px,#fff 280px,#fff 100%);padding:0 0 20px}
.mag-hero-band-inner{max-width:1200px;margin:0 auto;padding:0 20px}
.mag-archive-title{color:#fff;font-size:28px;font-weight:800;margin:0;padding:14px 0 20px}
.mag-archive-desc{display:none}
.mag-hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
.mag-hero-main{position:relative;min-height:480px;border:3px solid #fff;transition:border-color .3s;background:#333;overflow:hidden}
.mag-hero-main:hover{border-color:var(--accent-color)}
.mag-hero-main-bg{position:absolute;inset:0;z-index:0}
.mag-hero-main-bg img{width:100%;height:100%;object-fit:cover}
.mag-hero-main::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.85));z-index:1;pointer-events:none}
.mag-hero-main>.mag-cat{position:absolute;top:0;left:0;z-index:10;background:var(--accent-color);color:#fff;padding:8px 18px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.mag-hero-main-link{position:absolute;inset:0;z-index:5;text-decoration:none}
.mag-hero-main-overlay{position:absolute;left:20px;right:20px;bottom:20px;z-index:6}
.mag-hero-main-title{color:#fff;font-size:26px;font-weight:700;margin:0 0 10px;display:block;line-height:1.25}
.mag-hero-main:hover .mag-hero-main-title{color:var(--accent-color)}
.mag-meta{color:rgba(255,255,255,.85);font-size:13px;font-weight:500}
.mag-hero-secondary{display:flex;flex-direction:column;gap:10px}
.mag-hero-small{position:relative;flex:1;min-height:235px;border:3px solid #fff;transition:border-color .3s;background:#333;overflow:hidden}
.mag-hero-small:hover{border-color:var(--accent-color)}
.mag-hero-small-bg{position:absolute;inset:0;z-index:0}
.mag-hero-small-bg img{width:100%;height:100%;object-fit:cover}
.mag-hero-small::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.85));z-index:1;pointer-events:none}
.mag-hero-small>.mag-cat{position:absolute;top:0;left:0;z-index:10;background:var(--accent-color);color:#fff;padding:6px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.mag-hero-small-link{position:absolute;inset:0;z-index:5;text-decoration:none}
.mag-hero-small-overlay{position:absolute;left:16px;right:16px;bottom:16px;z-index:6}
.mag-hero-small-title{color:#fff;font-size:16px;font-weight:700;margin:0;display:block;line-height:1.3}
.mag-hero-small:hover .mag-hero-small-title{color:var(--accent-color)}
.mag-content-wrap{background:#fff;padding:40px 0 60px}
.mag-content-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.mag-main-column{min-width:0}
.mag-stream{display:block}
.mag-stream-item{border-bottom:1px solid var(--border-color);padding:20px 0;transition:opacity .4s ease,transform .4s ease}
.mag-stream-item:first-child{padding-top:0}
.mag-stream-item:last-child{border-bottom:none}
.mag-stream-link{display:flex;gap:20px;text-decoration:none}
.mag-stream-thumb{width:160px;height:107px;flex-shrink:0;overflow:hidden;background:#eee}
.mag-stream-thumb img{width:100%;height:100%;object-fit:cover}
.mag-stream-content{flex:1;min-width:0}
.mag-stream-title{color:#1a1a1a;font-size:18px;font-weight:700;margin:0 0 8px}
.mag-stream-item:hover .mag-stream-title{color:var(--accent-color)}
.mag-stream-meta{color:#666;font-size:13px}
.mag-load-more-wrap{text-align:center;margin-top:40px;padding:30px 0;border-top:1px solid var(--border-color)}
.mag-load-more-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:200px;padding:16px 48px;border:2px solid var(--border-color);background:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dark-bg);cursor:pointer;transition:all var(--transition-base)}
.mag-load-more-btn:hover{background:var(--dark-bg);color:#fff;border-color:var(--dark-bg);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.mag-load-more-btn:active{transform:translateY(0)}
.mag-load-more-btn.loading{pointer-events:none;opacity:.7}
.mag-load-more-btn .btn-loading{display:flex;align-items:center;gap:8px}
.mag-sidebar{align-self:start}
.mag-sidebar .widget{margin-bottom:30px}
.mag-sidebar .widget:last-child{margin-bottom:0}
.mag-sidebar .widget-title{margin:0 0 20px;font-size:18px;font-weight:800;padding-bottom:12px;border-bottom:2px solid var(--accent-color)}

/* ============================= PREISVERGLEICH ============================= */
.bt-hauptprodukt-box *,.atkp-detailoffers-box.atkp-template-268065 *{box-sizing:border-box;float:none}
.bt-hauptprodukt-box{margin:32px 0;clear:both}
.bt-hauptprodukt-box .atkp-detailoffers-box,.atkp-detailoffers-box.atkp-template-268065{display:block;width:100%;margin:0;padding:0;background:#fff;border:1px solid #d1d5db;border-radius:0;box-shadow:none;overflow:hidden}
.bt-hauptprodukt-box .atkp-detailoffers-box::before,.atkp-detailoffers-box.atkp-template-268065::before{content:"Verfügbarkeit und Preise";display:block;padding:12px 20px;background:#1e293b;color:#fff;font-size:13px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;border:none}
.atkp-pricecompare-container{display:block;width:100%;padding:0;margin:0}
.atkp-pricecompare-row{display:grid;grid-template-columns:100px 1fr 100px 150px;align-items:center;gap:0;padding:0;margin:0;background:#fff;border:none;border-bottom:none;width:100%;min-height:70px}
.atkp-pricecompare-row+.atkp-pricecompare-row{border-top:1px solid #d1d5db}
.atkp-pricecompare-row:hover{background:#f8fafc}
.atkp-pricecompare-cell{display:flex;align-items:center;padding:16px;margin:0;border:none;background:transparent;height:100%;min-height:70px;float:none;width:auto;min-width:0;max-width:none;flex:none}
.atkp-pricecompare-cell.atkp-pricecompare-logo{justify-content:flex-start;padding-left:20px}
.atkp-pricecompare-logo picture,.atkp-pricecompare-logo img{display:block;visibility:visible;opacity:1;max-width:80px;max-height:32px;width:auto;height:auto;object-fit:contain}
.atkp-pricecompare-logo img.lazyload,.atkp-pricecompare-logo img.lazyloading,.atkp-pricecompare-logo img[data-lazy-src]{opacity:1;display:block}
.atkp-pricecompare-logo{font-size:14px;font-weight:600;color:#1e293b}
.atkp-pricecompare-cell.atkp-pricecompare-title{justify-content:flex-start}
.atkp-pricecompare-title a{display:block;color:#1e293b;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;word-wrap:break-word;overflow-wrap:break-word}
.atkp-pricecompare-title a:hover{color:var(--accent-color)}
.atkp-pricecompare-cell.atkp-pricecompare-price{flex-direction:column;align-items:flex-end;justify-content:center;text-align:right}
.atkp-pricecompare-price .atkp-price,.atkp-pricecompare-price>div:first-child,.atkp-pricecompare-price>span:first-child{font-size:18px;font-weight:700;color:#1e293b;line-height:1.2;white-space:nowrap}
.atkp-pricecompare-price .atkp-oldprice{font-size:12px;font-weight:400;color:#94a3b8;text-decoration:line-through}
.atkp-pricecompare-price .atkp-stock{font-size:11px;color:#16a34a;font-weight:500;white-space:nowrap}
.atkp-pricecompare-cell.atkp-pricecompare-button{justify-content:center;padding-right:20px}
.atkp-pricecompare-button a,.atkp-pricecompare-button .atkp-button{display:inline-block;padding:12px 20px;background:var(--accent-color);color:#fff;font-size:13px;font-weight:600;text-decoration:none;text-align:center;border:none;border-radius:0;cursor:pointer;transition:background 0.15s ease;white-space:nowrap}
.atkp-pricecompare-button a:hover,.atkp-pricecompare-button .atkp-button:hover{background:#155a94;color:#fff}
.atkp-pricecompare-button .atkp-shopname{display:none}
.atkp-detailoffers-box>a[href*="cashper"],.atkp-pricecompare-container~a,div.atkp-detailoffers-box>a,.bt-hauptprodukt-box a[href*="cashper"]{display:block;padding:14px 20px;background:#f1f5f9;color:#475569;font-size:13px;font-weight:500;text-align:center;text-decoration:none;border-top:1px solid #d1d5db;transition:background 0.15s ease,color 0.15s ease}
.atkp-detailoffers-box>a[href*="cashper"]:hover,.atkp-pricecompare-container~a:hover,div.atkp-detailoffers-box>a:hover{background:#e2e8f0;color:var(--accent-color)}
.atkp-disclaimer,.atkp-detailoffers-box .atkp-disclaimer{display:block;padding:10px 20px;font-size:11px;line-height:1.5;color:#94a3b8;background:#f8fafc;border-top:1px solid #d1d5db}
.atkp-pricecompare-mobile-title{display:none}

/* ============================= RESPONSIVE 1200px ============================= */
@media(max-width:1200px){
:root{--section-spacing:60px}
.grid-container{padding-left:30px;padding-right:30px}
.hero-section{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;box-sizing:border-box}
.hero-section.wp-block-columns{display:flex;flex-direction:column;gap:var(--card-gap)}
.hero-section.wp-block-columns>.wp-block-column{flex-basis:100%;width:100%;max-width:100%;flex-grow:0;flex-shrink:0}
.hero-section.wp-block-columns>.wp-block-column[style]{flex-basis:100%;width:100%}
.hero-section .wp-block-column:first-child{margin-bottom:0}
.hero-section .wp-block-column:first-child .wp-block-query{display:block}
.hero-section .wp-block-column:last-child .wp-block-post-template{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--card-gap)}
.hero-small{min-height:220px}
}

/* ============================= RESPONSIVE 900px ============================= */
@media(max-width:900px){
:root{--section-spacing:60px;--container-gap:32px;--card-gap:20px}
.grid-container{padding-left:30px;padding-right:30px}
.hero-featured{margin-bottom:0}
.news-cards{grid-template-columns:repeat(2,1fr);gap:var(--card-gap)}
.news-card{min-height:240px}
.tests-grid{grid-template-columns:repeat(2,1fr);gap:var(--card-gap)}
.kaufempfehlung-card__media{width:160px}
.kaufempfehlung-card__content{padding:16px}
.trends-modern{grid-template-columns:repeat(2,1fr);gap:10px}
.trends-modern a{padding:12px 16px;font-size:var(--font-size-sm)}
.footer-content{grid-template-columns:1fr;gap:50px}
.footer-links-grid{grid-template-columns:repeat(2,1fr);gap:30px}
.af-infobar{justify-content:center}
.af-share-rail{display:none}
.af-head .entry-title{text-align:center}
.af-standfirst{font-size:17px}
.sidebar .widget_nav_menu .menu{gap:12px}
.sidebar .widget_nav_menu .menu>li{grid-template-columns:32px 1fr}
.sidebar .widget_nav_menu .menu>li::before{font-size:24px}
.bt-related-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;gap:10px}
.bt-related-card:nth-child(1){grid-column:1/3;grid-row:1/3}
.bt-related-card:nth-child(2){grid-column:1/2;grid-row:3/4}
.bt-related-card:nth-child(3){grid-column:2/3;grid-row:3/4}
.bt-related-card:nth-child(4){grid-column:1/3;grid-row:4/5}
.bt-related-card:nth-child(5){grid-column:1/3;grid-row:5/6}
.mag-hero-band{background:linear-gradient(to bottom,var(--accent-color) 0,var(--accent-color) 200px,#fff 200px,#fff 100%)}
.mag-hero-grid{grid-template-columns:1fr}
.mag-hero-main{min-height:320px}
.mag-hero-secondary{flex-direction:row}
.mag-hero-small{min-height:160px}
.mag-content-inner{grid-template-columns:1fr}
.mag-sidebar{margin-top:40px;padding-top:40px;border-top:1px solid var(--border-color)}
.atkp-pricecompare-row{grid-template-columns:80px 1fr 90px 130px}
.atkp-pricecompare-cell{padding:14px 12px}
.atkp-pricecompare-cell.atkp-pricecompare-logo{padding-left:16px}
.atkp-pricecompare-cell.atkp-pricecompare-button{padding-right:16px}
.atkp-pricecompare-logo img{max-width:65px}
.atkp-pricecompare-title a{font-size:13px}
.atkp-pricecompare-price .atkp-price,.atkp-pricecompare-price>div:first-child{font-size:16px}
.atkp-pricecompare-button a{padding:10px 16px;font-size:12px}
}

/* ============================= RESPONSIVE 768px ============================= */
@media(max-width:768px){
.hero-section{padding-left:0;padding-right:0}
:root{--header-h-desktop:60px;--nav-h-desktop:48px;--section-spacing:40px;--card-gap:20px}
.grid-container{padding-left:20px;padding-right:20px}
.mag-hero-band-inner{padding:0 16px}
.mag-content-inner{padding:0 16px}
.wp-block-columns{grid-template-columns:1fr;gap:32px}
.hero-featured{margin-bottom:20px;min-height:340px}
.hero-small{min-height:200px}
.hero-title{font-size:24px}
.hero-title-small{font-size:15px}
.section-heading{font-size:var(--font-size-xl);margin-bottom:24px}
.news-cards{grid-template-columns:1fr;gap:var(--card-gap)}
.news-card{min-height:220px}
.news-list-simple .wp-block-group{flex-direction:column;align-items:flex-start;gap:8px;padding-left:0}
.simple-date{min-width:auto;font-size:var(--font-size-sm)}
.simple-title{font-size:var(--font-size-md)}
.trends-modern{grid-template-columns:repeat(2,1fr);gap:8px}
.trends-modern a{padding:8px 12px;font-size:var(--font-size-xs)}
.trends-modern a::after{display:none}
.tests-grid{grid-template-columns:1fr;gap:var(--card-gap)}
.filter-buttons{justify-content:center;gap:8px}
.filter-btn{font-size:12px;padding:8px 16px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.kaufempfehlungen-grid{grid-template-columns:1fr;gap:var(--card-gap)}
.kaufempfehlung-card{flex-direction:row}
.kaufempfehlung-card__media{width:140px;aspect-ratio:1/1}
.kaufempfehlung-card__content{padding:16px}
.kaufempfehlung-title{font-size:var(--font-size-md)}
.kaufempfehlung-excerpt{-webkit-line-clamp:3}
.wp-block-button__link{font-size:var(--font-size-sm);padding:14px 20px}
.bt-footer-clean{padding:40px 0 0 0}
.footer-content{gap:40px}
.footer-logo-img{max-width:160px}
.footer-links-grid{grid-template-columns:1fr;gap:32px}
.footer-bottom{flex-direction:column;gap:20px;text-align:center}
.footer-socials-clean{justify-content:center}
#ez-toc-container{margin:16px auto}
#ez-toc-container .ez-toc-title{font-size:var(--font-size-sm)}
.af-content-wrapper{display:block;padding-left:20px;padding-right:20px}
.af-content{display:block}
.af-content img,.af-content figure,.af-content .wp-block-image,.af-content .wp-block-gallery{max-width:100%;height:auto;margin-left:auto;margin-right:auto}
.af-content .alignwide,.af-content .alignfull{width:100%;max-width:100%;margin-left:auto;margin-right:auto;transform:none}
footer.entry-meta{margin-top:40px;padding-bottom:25px;gap:14px}
.cat-links,.tags-links{display:grid;grid-template-columns:70px 1fr;align-items:start;gap:0 8px;font-size:initial}
.cat-links::before,.tags-links::before{font-size:10px;min-width:auto;margin-right:0;padding-top:6px}
.cat-links a,.tags-links a{padding:8px 14px;font-size:11px;margin-right:8px;margin-bottom:8px}
.bt-post-nav-wrapper{grid-template-columns:1fr;gap:20px;margin-top:40px}
.bt-nav-link{min-height:130px}
.bt-nav-img{width:130px;height:130px;background:#e5e7eb;overflow:hidden;flex-shrink:0}
.bt-nav-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bt-nav-link:hover .bt-nav-img img{transform:scale(1.1)}
.bt-nav-text{padding:18px 20px}
.bt-nav-label{font-size:10px;letter-spacing:1.3px;margin-bottom:8px}
.bt-nav-title{font-size:15px;line-height:1.45;font-weight:700;-webkit-line-clamp:3}
.bt-nav-link.next{flex-direction:row;text-align:left}
.bt-nav-link.next .bt-nav-img{border-right:1px solid #eee;border-left:none}
.bt-nav-link:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.06)}
.entry-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:25px 0;font-size:13px}
.entry-content table thead th,.entry-content table tbody td{padding:12px 15px;white-space:nowrap}
.entry-content table thead th{font-size:10px}
.bt-related-grid{grid-template-columns:1fr;grid-auto-rows:220px;gap:10px}
.bt-related-card{grid-column:auto;grid-row:auto}
.bt-related-overlay{padding:14px}
.bt-related-title{font-size:17px}
.bt-hauptprodukt-box .atkp-detailoffers-box::before,.atkp-detailoffers-box.atkp-template-268065::before{font-size:12px;padding:10px 16px}
.atkp-pricecompare-row{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px;padding:16px;min-height:auto}
.atkp-pricecompare-cell{padding:0;min-height:auto}
.atkp-pricecompare-cell.atkp-pricecompare-logo{grid-column:1;grid-row:1;justify-content:flex-start;padding-left:0}
.atkp-pricecompare-cell.atkp-pricecompare-price{grid-column:2;grid-row:1;align-items:flex-end}
.atkp-pricecompare-cell.atkp-pricecompare-title{display:none}
.atkp-pricecompare-cell.atkp-pricecompare-button{grid-column:1/-1;grid-row:2;justify-content:stretch;padding-right:0}
.atkp-pricecompare-button a{width:100%;padding:14px 20px;text-align:center}
}

/* ============================= RESPONSIVE 600px ============================= */
@media(max-width:600px){
.mag-hero-band{background:linear-gradient(to bottom,var(--accent-color) 0,var(--accent-color) 150px,#fff 150px,#fff 100%)}
.mag-hero-secondary{flex-direction:column}
.mag-stream-link{flex-direction:column}
.mag-stream-thumb{width:100%;height:180px}
}

/* ============================= RESPONSIVE 480px ============================= */
@media(max-width:480px){
:root{--section-spacing:30px}
.grid-container{padding-left:16px;padding-right:16px}
.af-content-wrapper{padding-left:16px;padding-right:16px}
.hero-featured{min-height:300px;padding:30px 20px}
.hero-small{min-height:180px;padding:16px}
.hero-title{font-size:var(--font-size-xl)}
.hero-cat,.hero-cat-small{padding:6px 12px;font-size:9px}
.section-heading{font-size:var(--font-size-lg);margin-bottom:20px}
.news-card{min-height:200px;padding:20px}
.news-card-title{font-size:15px}
.test-card__media{margin-bottom:10px}
.test-title{font-size:var(--font-size-md)}
.filter-btn{font-size:var(--font-size-xs);padding:8px 14px}
.kaufempfehlung-card__media{width:120px}
.kaufempfehlung-card__content{padding:14px}
.kaufempfehlung-title{font-size:15px;margin-bottom:6px}
.kaufempfehlung-excerpt{font-size:12px;line-height:1.4}
.kaufempfehlung-date{font-size:var(--font-size-xs);margin-top:8px}
.footer-desc{font-size:var(--font-size-sm);line-height:1.6}
.footer-links-col a{font-size:var(--font-size-sm)}
.footer-socials-clean a{width:40px;height:40px}
.footer-socials-clean svg{width:16px;height:16px}
.footer-copy{font-size:12px}
.footer-links-grid{grid-template-columns:repeat(2,1fr);gap:24px}
.bt-nav-img{width:110px;height:110px}
.bt-nav-text{padding:15px 16px}
.bt-nav-title{font-size:14px}
.bt-related-wrapper{margin-top:60px}
.bt-related-heading{font-size:20px;margin-bottom:18px}
.bt-related-title{font-size:16px}
}

/* ============================= TRENDS (CLEAN TAG CLOUD STYLE) ============================= */

/* 1. Container: Flexbox für den natürlichen Fluss */
.trends-modern {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px; /* Enger Abstand wie im Screenshot */
    margin-bottom: var(--section-spacing);
}

/* 2. Die einzelnen Tags */
.trends-modern a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* STYLE wie im Beispielbild (grafik.png) */
    background: #fff;
    border: 1px solid #ccc; /* Etwas dunkleres Grau für den Rahmen */
    color: #555; /* Dunkelgrauer Text */
    
    /* GRÖSSE: Hier erzwingen wir Einheitlichkeit! */
    font-size: 11px !important; /* !important verhindert, dass WordPress die Schriftgröße ändert */
    line-height: 1;
    padding: 6px 10px; /* Kompaktes Padding */
    height: 28px; /* Fixe Höhe für alle Tags */
    
    /* TEXT */
    font-weight: 600;
    text-transform: uppercase; /* Alles GROSSSCHREIBEN */
    text-decoration: none;
    letter-spacing: 0.5px;
    
    /* FORMEN */
    border-radius: 0; /* Eckig */
    transition: all 0.2s ease;
    
    /* Reset von vorherigen Styles */
    width: auto; 
    flex-basis: auto;
}

/* Den Pfeil (->) entfernen wir komplett, der ist im Tag-Style nicht üblich */
.trends-modern a::after {
    display: none;
}

/* Hover Effekt */
.trends-modern a:hover {
    border-color: var(--accent-color); /* Blau bei Hover */
    color: var(--accent-color);
    background: #fff;
    transform: translateY(-1px); /* Minimales Anheben */
}

/* ============================= VIDEO GRID (INLINE PLAY) ============================= */

.bt-youtube-grid.bt-clean-tech {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: var(--section-spacing, 60px);
}

.bt-yt-card {
    background: #fff;
    border: var(--border-width, 3px) solid transparent;
    transition: all 0.3s ease;
    border-radius: var(--border-radius, 0px);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.bt-yt-card:hover {
    border-color: var(--accent-color, #1f75bf);
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

/* --- Player Bereich --- */
.bt-yt-player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
    cursor: pointer; /* Zeigt Klickbarkeit an */
}

.bt-yt-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.9;
}

/* Bild Zoom bei Hover über den Player */
.bt-yt-player-wrapper:hover .bt-yt-thumb-img {
    transform: scale(1.08);
    opacity: 1;
}

/* Play Button */
.bt-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 54px; /* Etwas größer für bessere Klickbarkeit */
    height: 54px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.8);
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
    z-index: 2;
    pointer-events: none; /* Klick geht durch auf den Wrapper */
}

/* Play Button Hover Effekt */
.bt-yt-player-wrapper:hover .bt-play-icon {
    background: var(--accent-color, #1f75bf);
    border-color: var(--accent-color, #1f75bf);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(31, 117, 191, 0.5);
}

/* --- Inhalt / Text --- */
.bt-yt-content {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bt-yt-title {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.bt-yt-title a {
    color: var(--global-color-2, #222);
    text-decoration: none;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bt-yt-title a:hover {
    color: var(--accent-color, #1f75bf);
}

/* Der neue "Auf YouTube ansehen" Link */
.bt-yt-watch-link {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
    margin-top: auto;
}

.bt-yt-watch-link:hover {
    color: var(--accent-color, #1f75bf);
}

/* Responsive */
@media (max-width: 480px) {
    .bt-youtube-grid.bt-clean-tech {
        grid-template-columns: 1fr;
    }
}
/* ============================= OFF-CANVAS OVERLAY ============================= */
#generate-slideout-menu.do-overlay { background: rgba(10,10,10,.97) !important; }
#generate-slideout-menu.do-overlay button.slideout-exit { position: fixed !important; top: 30px !important; right: 30px !important; left: auto !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 2px solid #333 !important; border-radius: 0 !important; color: #666 !important; display: grid !important; place-items: center !important; z-index: 100001 !important; }
#generate-slideout-menu.do-overlay button.slideout-exit:hover { border-color: var(--accent-color) !important; color: #fff !important; }
#generate-slideout-menu.do-overlay button.slideout-exit .gp-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: translateY(-2px) !important; }
#generate-slideout-menu.do-overlay button.slideout-exit svg { fill: currentColor !important; width: 16px !important; height: 16px !important; }
.slideout-navigation.do-overlay .inside-navigation { max-width: 320px !important; margin: 0 0 0 8% !important; padding: 100px 0 30px 0 !important; text-align: left !important; background: transparent !important; }
#generate-slideout-menu.do-overlay .main-nav { width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
#generate-slideout-menu.do-overlay .slideout-menu, #generate-slideout-menu.do-overlay .main-nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
#generate-slideout-menu.do-overlay .slideout-menu > li, #generate-slideout-menu.do-overlay .main-nav > ul > li { float: none !important; width: 100% !important; clear: both !important; text-align: left !important; border-bottom: 1px solid #1a1a1a !important; position: relative !important; background: transparent !important; margin: 0 !important; padding: 0 !important; }
#generate-slideout-menu.do-overlay .slideout-menu > li:hover, #generate-slideout-menu.do-overlay .slideout-menu > li:focus, #generate-slideout-menu.do-overlay .slideout-menu > li.sfHover, #generate-slideout-menu.do-overlay .slideout-menu > li.toggled, #generate-slideout-menu.do-overlay .slideout-menu > li[class*="current"] { background: transparent !important; }
#generate-slideout-menu.do-overlay .slideout-menu li a, #generate-slideout-menu.do-overlay .main-nav ul li a { display: block !important; font-family: system-ui, -apple-system, sans-serif !important; font-weight: 700 !important; font-size: 15px !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-decoration: none !important; text-align: left !important; color: #888 !important; background: transparent !important; padding: 16px 50px 16px 0 !important; border: none !important; transition: color .2s !important; }
#generate-slideout-menu.do-overlay .slideout-menu li a:hover, #generate-slideout-menu.do-overlay .slideout-menu li a:focus, #generate-slideout-menu.do-overlay .slideout-menu li.current-menu-item > a { color: #fff !important; background: transparent !important; }
#generate-slideout-menu.do-overlay .dropdown-menu-toggle { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 34px !important; height: 34px !important; padding: 0 !important; margin: 0 !important; background: #151515 !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; color: #555 !important; display: grid !important; place-items: center !important; cursor: pointer !important; }
#generate-slideout-menu.do-overlay .dropdown-menu-toggle:hover { background: var(--accent-color) !important; border-color: var(--accent-color) !important; color: #fff !important; }
#generate-slideout-menu.do-overlay .dropdown-menu-toggle .gp-icon, #generate-slideout-menu.do-overlay .dropdown-menu-toggle svg { display: none !important; }
#generate-slideout-menu.do-overlay .dropdown-menu-toggle::before { content: '' !important; position: absolute !important; background: currentColor !important; width: 12px !important; height: 2px !important; transition: all .2s !important; }
#generate-slideout-menu.do-overlay .dropdown-menu-toggle::after { content: '' !important; position: absolute !important; background: currentColor !important; width: 2px !important; transition: all .2s !important; }
#generate-slideout-menu.do-overlay .dropdown-menu-toggle[aria-expanded="true"]::after { height: 12px !important; }
#generate-slideout-menu.do-overlay .dropdown-menu-toggle[aria-expanded="false"]::after { height: 0 !important; }
#generate-slideout-menu.do-overlay .sub-menu { background: transparent !important; padding: 0 0 0 15px !important; margin: 0 !important; border: none !important; border-top: 1px solid #1a1a1a !important; }
#generate-slideout-menu.do-overlay .sub-menu li { border-bottom: 1px solid #141414 !important; background: transparent !important; }
#generate-slideout-menu.do-overlay .sub-menu li:last-child { border-bottom: none !important; }
#generate-slideout-menu.do-overlay .sub-menu li a { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .5px !important; padding: 12px 50px 12px 0 !important; color: #666 !important; }
#generate-slideout-menu.do-overlay .sub-menu li a:hover, #generate-slideout-menu.do-overlay .sub-menu li.current-menu-item > a { color: var(--accent-color) !important; }
/* === FOOTER === */
.bt-oc-footer { padding: 40px 0 !important; background: transparent !important; max-width: 320px !important; margin-left: 8% !important; }
.bt-oc-search { margin-bottom: 40px !important; }
.bt-oc-search .bt-search-inner { display: flex !important; background: rgba(0,0,0,.4) !important; border: 2px solid var(--accent-color) !important; border-radius: 25px !important; overflow: hidden !important; }
.bt-oc-search input[type="search"] { flex: 1 !important; background: transparent !important; border: none !important; padding: 12px 18px !important; color: #fff !important; font-size: 14px !important; outline: none !important; }
.bt-oc-search input::placeholder { color: #555 !important; }
.bt-oc-search button { background: transparent !important; border: none !important; padding: 12px 16px !important; color: #555 !important; cursor: pointer !important; }
.bt-oc-search button:hover { color: var(--accent-color) !important; }
.bt-oc-links-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 25px 20px !important; margin-bottom: 35px !important; padding-bottom: 35px !important; border-bottom: 1px solid #1a1a1a !important; }
.bt-oc-col h4 { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; color: var(--accent-color) !important; margin: 0 0 12px 0 !important; }
.bt-oc-col a { display: block !important; font-size: 14px !important; font-weight: 500 !important; color: #666 !important; text-decoration: none !important; padding: 6px 0 !important; transition: color .2s !important; }
.bt-oc-col a:hover { color: #fff !important; }
.bt-oc-bottom { margin-top: 10px !important; }
.bt-oc-socials { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 20px !important; }
.bt-oc-socials a { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; background: rgba(255,255,255,.03) !important; color: #555 !important; border: 1px solid #222 !important; border-radius: 0 !important; transition: all .2s !important; }
.bt-oc-socials a:hover { background: var(--accent-color) !important; border-color: var(--accent-color) !important; color: #fff !important; }
.bt-oc-socials svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }
.bt-oc-copyright { font-size: 11px !important; color: #444 !important; }
/* === DESKTOP: OVERLAY VERSTECKEN === */
@media (min-width: 1281px) { #generate-slideout-menu.do-overlay, .slideout-overlay { display: none !important; visibility: hidden !important; } body.slide-opened { overflow: auto !important; } }