/*
 * Theme Name: Minimal - Google Material Master
 * Author: Myloon
 * Version: 55.7.15
 * Date: 24.05.2026
 * 
 * ROLE: Absolute Design-Zentrale (BASIEREND AUF STABILER VORLAGE 55.7.7).
 * UPDATE: V55.7.15 - MOBILE HEADER REPAIR: Flexbox-Umbruchsteuerung für Mobilgeräte (< 768px) integriert. Das Logo und die Navigation-Buttons erhalten volle Breite in Zeile 1, während das Suchfeld sauber zentriert in Zeile 2 rutscht, um Quetschen zu verhindern.
 * UPDATE: V55.7.14 - BEITRAGS-FINALE: Playlist-Design exakt auf das Aggregator-Layout der Beiträge angepasst.
 * VOLLSTÄNDIGKEITS-GARANTIE: Keine Kürzungen, keine Platzhalter, vollständiger Code.
 */

/* --- 0. RESET & GDPR LOCAL FONTS --- */
*, *::before, *::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/roboto-v51-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/roboto-v51-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/roboto/roboto-v51-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- 1. MASTER COLORS (GOOGLE MATERIAL 3) --- */
:root {
    --bg-color: #ffffff;
    --surface-color: #f8f9fa;
    --header-bg: #ffffff;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --border-color: #dadce0;
    --accent-color: #1a73e8;
    --link-color: #1e8e3e; /* Google-Grün für Links */
    --google-red: #ea4335;
    --google-green: #1e8e3e;
    --search-bg: #f1f3f4;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --header-height: 65px;
    --overlay-bg: rgba(255, 255, 255, 0.98);
}

html.dark-mode {
    --bg-color: #121212;
    --surface-color: #1f1f1f;
    --header-bg: #1f1f1f;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --border-color: #3c4043;
    --accent-color: #8ab4f8;
    --link-color: #34a853; /* Hell-Grün für Darkmode */
    --google-red: #f28b82; 
    --google-green: #34a853;
    --search-bg: #303134;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(18, 18, 18, 0.98);
}

.no-transition, .no-transition * { transition: none !important; }

/* --- 2. BASE APPLICATION --- */
html, body {
    margin: 0; padding: 0;
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Roboto', sans-serif;
    font-weight: 300 !important; 
    line-height: 1.8;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, .entry-title-main, .kloner-item-title a, .logo-text, .nav-brand {
    font-weight: 300; color: var(--accent-color); text-align: left;
}

/* --- STARKES GRÜN FÜR VERLINKUNGEN --- */
a { color: var(--link-color); text-decoration: none; transition: opacity 0.2s; }

#primary-content p a, #primary-content li a, #primary-content blockquote a {
    color: var(--google-green) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px !important;
    font-weight: 500 !important; /* STARK */
}

a:hover { opacity: 0.8; }

#wpadminbar a, #wpadminbar a * { color: inherit !important; font-weight: 400 !important; }

body { padding-top: var(--header-height) !important; }
body.admin-bar #masthead-fixed { top: 32px !important; }
@media screen and (max-width: 782px) { body.admin-bar #masthead-fixed { top: 46px !important; } }

/* --- 3. BLOCKQUOTES & KURSIVTEXT (GOOGLE-ROT) --- */
em, i, blockquote, blockquote p, blockquote span {
    color: var(--google-red) !important;
    font-style: italic !important;
}

blockquote {
    margin: 45px 0 !important;
    padding: 35px 40px !important;
    background-color: rgba(234, 67, 53, 0.04) !important;
    border-left: 8px solid var(--google-red) !important;
    border-radius: 0 16px 16px 0;
    position: relative;
    box-shadow: 4px 8px 25px var(--shadow-color);
}

blockquote::before {
    content: "“";
    position: absolute;
    top: -10px; left: 12px;
    font-size: 70px; color: var(--google-red);
    opacity: 0.25; font-family: serif;
}

/* --- 4. HEADER (RESTAURIERT) --- */
#masthead-fixed {
    position: fixed !important; top: 0; left: 0; width: 100%; height: var(--header-height);
    background: var(--header-bg); border-bottom: 1px solid var(--border-color);
    z-index: 9999; display: flex; align-items: center;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.header-limit { 
    width: 100%; max-width: 1250px; margin: 0 auto; padding: 0 20px; 
    display: flex; justify-content: space-between; align-items: center; gap: 20px; 
}
.minimal-svg-logo { display: flex; align-items: center; gap: 12px; }
.logo-text { font-size: 20px; color: var(--text-primary) !important; }
#theme-icon { width: 20px; height: 20px; fill: currentColor; display: block; }

.header-center-search { flex: 1; max-width: 400px; margin: 0 10px; }
.search-form-google { background: var(--search-bg); border-radius: 24px; padding: 0 15px; display: flex; align-items: center; height: 38px; width: 100%; transition: background-color var(--transition-speed); }
.search-input { background: transparent; border: none; color: var(--text-primary); width: 100%; padding: 5px; outline: none; font-size: 15px; font-weight: 300; }
.mobile-only-close { display: none !important; }

.nav-container-right { display: flex; align-items: center; gap: 10px; }
.control-btn { background: transparent; border: none; color: var(--text-primary); cursor: pointer; padding: 8px; border-radius: 50%; transition: background var(--transition-speed); display: flex; align-items: center; justify-content: center; }
.control-btn:hover { background: var(--border-color); }

.mobile-menu-btn { display: flex; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; background: transparent; border: none; z-index: 10002; border-radius: 50%; }
.mobile-menu-btn .bar { width: 22px; height: 1.5px; background: var(--text-primary); transition: 0.3s; }
.mobile-menu-btn.active .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-btn.active .bar:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- 5. MOBILE NAV OVERLAY --- */
.nav-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 10000; }
.nav-backdrop.active { opacity: 1; visibility: visible; }
.mobile-nav-overlay { position: fixed; top: 0; right: -100%; width: 320px; height: 100vh; background: var(--overlay-bg); z-index: 10001; transition: 0.4s; box-shadow: -5px 0 25px var(--shadow-color); padding: 30px; display: flex; flex-direction: column; }
.mobile-nav-overlay.active { right: 0; }
.nav-overlay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.nav-brand { font-size: 22px !important; color: var(--text-primary); }

/* --- 6. MAIN LAYOUT GRID --- */
.site-main-flex-container { max-width: 1250px; margin: 40px auto; padding: 0 20px; display: flex; gap: 50px; align-items: flex-start; }
#primary-content { flex: 1; min-width: 0; overflow: visible; background-color: transparent; }
#secondary-sidebar { flex: 0 0 300px; width: 300px; }

/* --- 7. AGGREGATOR LIST --- */
.kloner-aggregator-item { display: flex; gap: 35px; margin-bottom: 60px; align-items: flex-start !important; }
.kloner-item-image { flex: 0 0 40%; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px var(--shadow-color); line-height: 0; margin-top: 0 !important; }
.aggregator-thumb { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }
.kloner-item-content { flex: 1; padding-top: 0; }
.kloner-item-title { font-size: 23px !important; margin: 0 0 12px 0 !important; line-height: 1.4 !important; }

/* --- 8. SIDEBAR CARDS (GLOW) --- */
.kloner-minimal-card { position: relative; margin-bottom: 35px; padding: 1.2px; border-radius: 12px; overflow: hidden; background: var(--border-color); }
.kloner-minimal-card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, #4285f4, #9b72cb, #d96570, #f4af5f, transparent 35%); animation: minimal-glow-rotate 5s linear infinite; }
@keyframes minimal-glow-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.kloner-minimal-inner { position: relative; z-index: 1; background: var(--bg-color); border-radius: 11px; padding: 18px; box-shadow: inset 0 0 10px var(--shadow-color); }

/* --- 9. FOOTER (STABIL) --- */
.site-footer-structure { padding: 60px 0; background: var(--bg-color); border-top: 1px solid var(--border-color); margin-top: 40px; width: 100%; transition: background-color var(--transition-speed); }
.footer-inner-limit { max-width: 1250px; margin: 0 auto; padding: 0 20px; }
ul.footer-menu-list { list-style: none !important; padding: 0 !important; margin: 0 0 15px 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 25px; }
ul.footer-menu-list li a { color: var(--text-secondary) !important; font-size: 0.9em !important; transition: color 0.2s; }
.footer-credit { font-size: 0.85em; color: var(--text-secondary); opacity: 0.7; border-top: 1px solid var(--border-color); padding-top: 15px; margin-top: 10px; width: 100%; display: block; }

/* --- 10. GOOGLE TREADMILL AD-SYSTEM --- */
.wpsc-bf-wrapper { 
    position: relative; 
    width: 100%; 
    margin: 30px 0 5px 0; 
    isolation: isolate; 
    overflow: visible; 
    border-radius: 16px; 
    display: block;
}

.wpsc-bf-wrapper.alignleft { float: left; width: 320px !important; margin-right: 25px; clear: none; }
.wpsc-bf-wrapper.alignright { float: right; width: 320px !important; margin-left: 25px; clear: none; }
.wpsc-bf-wrapper.aligncenter { margin: 30px auto 5px auto; clear: both; }

.wpsc-bf-frame { position: relative; padding: 2.5px; border-radius: 16px; overflow: hidden; background: #000; }
.wpsc-bf-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 1; background: conic-gradient(#4285F4,#34A853,#FBBC05,#EA4335,#4285F4)!important; animation: wpsc_google_rotate 4s linear infinite!important; transform-origin: center center; }

.wpsc-bf-mask { 
    position: relative; 
    z-index: 2; 
    border-radius: 14px; 
    height: 100%; 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
html.dark-mode .wpsc-bf-mask { background: #000000 !important; }
html:not(.dark-mode) .wpsc-bf-mask { background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 100%) !important; }

/* Banner-Inhalt Lesbarkeit (FIX V55.7.7) */
.wpsc-bf-body, .wpsc-bf-body > h3, .wpsc-bf-body > p, .wpsc-bf-body > span:not(.wpsc-ad-label), .wpsc-bf-body > a { 
    position: relative; 
    color: #3c4043 !important;
    text-shadow: none !important;
}

/* Im Dunkelmodus alles weiß MACHEN, ABER... */
html.dark-mode .wpsc-bf-body, 
html.dark-mode .wpsc-bf-body > h3, 
html.dark-mode .wpsc-bf-body > p, 
html.dark-mode .wpsc-bf-body > span:not(.wpsc-ad-label), 
html.dark-mode .wpsc-bf-body > a {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* ... Google Testanzeigen explizit ROT/DUNKEL lassen (da sie eigenen weißen Hintergrund haben) */
html.dark-mode .wpsc-bf-body ins,
html.dark-mode .wpsc-bf-body ins * {
    color: #ea4335 !important;
    text-shadow: none !important;
}

.wpsc-ad-label, .wpsc-bf-wrapper::before {
    content: "AD";
    position: absolute;
    top: -12px;
    left: 15px;
    background: #000;
    color: #fff;
    font-size: 10px;
    padding: 2px 10px;
    border-radius: 4px;
    z-index: 99;
    font-weight: 500;
    letter-spacing: 1px;
}
.wpsc-bf-wrapper[data-source="amazon"]::before, .amazon-label-box {
    content: "AMAZON" !important;
}

/* --- 11. REPARATUR: AD-DISCLAIMER (FIX V55.7.7) --- */
.wpsc-ad-disclaimer {
    display: block !important;
    font-size: 8px !important; 
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400 !important; 
    padding: 5px 12px !important;
    margin: 5px 0 35px 0 !important; 
    text-align: left !important; /* ZWINGEND LINKSBÜNDIG */
    visibility: visible !important;
    opacity: 1 !important;
}

.wpsc-bf-wrapper.alignleft + .wpsc-ad-disclaimer {
    float: left !important; width: 320px !important; clear: left !important; text-align: left !important;
}

.wpsc-bf-wrapper.alignright + .wpsc-ad-disclaimer {
    float: right !important; width: 320px !important; clear: right !important; text-align: left !important;
}

.wpsc-bf-wrapper.aligncenter + .wpsc-ad-disclaimer {
    clear: both !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important;
}

html.dark-mode .wpsc-ad-disclaimer { color: #b0b5b9 !important; }
html:not(.dark-mode) .wpsc-ad-disclaimer { color: #5f6368 !important; }

/* --- 12. AVATAR & HERO STABILITY --- */
.single-post .entry-hero-image-wrap { 
    width: 100% !important; 
    margin-bottom: 30px !important; 
    border-radius: 12px; 
    overflow: hidden; 
    height: auto !important; 
    background: var(--surface-color); 
    display: block;
}

.single-post .entry-hero-image-wrap img {
    width: 100% !important; height: auto !important; display: block; object-fit: contain; 
}

img.avatar:not(#wpadminbar *) { max-width: 120px !important; height: auto !important; border-radius: 50% !important; object-fit: cover; margin: 0 auto 15px auto !important; display: block !important; box-shadow: 0 4px 10px var(--shadow-color); }

/* --- 13. TIMELINE & LOOP OPTIMIZATION --- */
.minimal-post-card { margin-bottom: 50px; border-bottom: 1px solid var(--border-color); padding-bottom: 30px; }
.minimal-post-thumbnail img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 16px; margin-bottom: 20px; display: block; }

/* --- 14. AUTHOR PROFILE & ARCHIVE --- */
.author-profile-header { padding-bottom: 40px; border-bottom: 1px solid var(--border-color); margin-bottom: 50px; }
.author-identity-name { font-size: 24px; font-weight: 300 !important; color: var(--text-primary); }

/* --- 15. CATEGORY ARCHIVE & AGGREGATOR CARDS --- */
.archive-item-card { 
    display: flex; gap: 30px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 16px; 
    overflow: visible; transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    position: relative; z-index: 1; margin-bottom: 40px; padding: 30px; 
    align-items: flex-start !important; 
}
.archive-item-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px var(--shadow-color); background-color: var(--bg-color); }
.archive-item-image { flex: 0 0 35%; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-top: 0 !important; }
.archive-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

/* --- 16. TEAM HITBOX (ELEGANT POST-MERGE EDITION) --- */
/* Neutralisiert die grüne Unterstreichung des Themes exakt in der Playlist */
#primary-content .team-hitbox-glass-wrapper a,
#primary-content .team-hitbox-glass-wrapper .kloner-aggregator-item a,
.team-hitbox-glass-wrapper a,
.team-hitbox-glass-wrapper .kloner-aggregator-item a {
    color: var(--text-primary) !important; 
    text-decoration: none !important; 
    font-weight: 500 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Song-/Tipptitel im Hitbox-Loop explizit in BLAU (ohne Unterstreichung) */
#primary-content .team-hitbox-glass-wrapper .kloner-item-title a,
.team-hitbox-glass-wrapper .kloner-item-title a {
    color: var(--accent-color) !important; 
    font-weight: 300 !important;
    text-decoration: none !important;
}

/* Autorenname im Tipp-Zitat */
#primary-content .team-hitbox-glass-wrapper .hitbox-comment strong,
.team-hitbox-glass-wrapper .hitbox-comment strong {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

/* Der Teilen-Link: Unauffälliges Grau statt auffälligem Grün */
#primary-content .team-hitbox-glass-wrapper a[href*="youtu"],
.team-hitbox-glass-wrapper a[href*="youtu"] {
    color: var(--text-secondary) !important;
    font-size: 0.85rem;
    text-decoration: none !important;
}

/* Hover-Effekt: Dezent blau leuchten, absolut keine Unterstreichung */
#primary-content .team-hitbox-glass-wrapper a:hover,
.team-hitbox-glass-wrapper a:hover {
    text-decoration: none !important;
    color: var(--accent-color) !important;
}

/* --- 17. LIGHTBOX MODAL (REPARIERT) --- */
.hitbox-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(5px); }
/* SANIERT: max-width blockierende Begrenzung gelöscht, damit das Video das 800px-Glow-Frame lückenlos ausfüllen kann */
.hitbox-modal-content { background: var(--bg-color); border: 1px solid var(--border-color); width: 100%; border-radius: 12px; overflow: hidden; position: relative; animation: hitbox-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes hitbox-fade-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- 18. AUTHOR VIDEO TIP CARD --- */
.kloner-author-video-tip { margin: 35px auto; padding: 12px 16px !important; border: 1px solid var(--border-color); border-left: 5px solid var(--accent-color); background: var(--surface-color); border-radius: 8px; max-width: 100%; box-sizing: border-box; transition: background-color var(--transition-speed), border-color var(--transition-speed); }
.kloner-author-video-tip .tip-hitbox-link { display: inline-block; background: var(--accent-color); color: #ffffff !important; font-size: 0.8rem; padding: 6px 12px; border-radius: 4px; text-decoration: none !important; margin-top: 10px !important; }

/* --- 19. RESPONSIVE REFINEMENTS --- */
@media (max-width: 900px) {
    .site-main-flex-container { flex-direction: column; }
    #secondary-sidebar { width: 100%; flex: none; }
    .kloner-aggregator-item { flex-direction: column; gap: 20px; }
    .wpsc-bf-wrapper.alignleft, .wpsc-bf-wrapper.alignright { float: none !important; width: 100% !important; margin: 25px 0 !important; }
    .wpsc-ad-disclaimer { width: 100% !important; float: none !important; text-align: left !important; clear: both !important; }
}

/* NEU: Zwei-Zeilen-Header für Handys zur Erhaltung des schönen Logos */
@media (max-width: 768px) {
    :root {
        --header-height: 115px; /* Erhöhter Header für zwei Zeilen auf Mobilgeräten */
    }
    #masthead-fixed {
        height: var(--header-height);
    }
    .header-limit {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 15px;
        gap: 8px 0;
    }
    .minimal-svg-logo {
        order: 1;
        flex: 0 0 auto;
    }
    .nav-container-right {
        order: 2;
        flex: 0 0 auto;
    }
    .header-center-search {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0;
    }
    .search-form-google {
        height: 36px;
    }
}

@media (max-width: 480px) {
    .team-hitbox-glass { padding: 15px; }
    .hitbox-li { gap: 12px; flex-direction: column; align-items: flex-start; }
    .hitbox-thumb-container { flex: 0 0 85px !important; width: 85px !important; }
}

/* --- 20. SCHRIFTSTÄRKEN-KORREKTUR FÜR ROTEN HUB- & BLAUEN KATEGORIE-TEXT (FIX V55.7.8) --- */
/* Hebt das inline "font-weight: bold" der inneren Spans auf und erzwingt das geladene Roboto-Medium [2] */
.kloner-item-meta span,
.hub-label,
.category-label {
    font-weight: 500 !important;
}