/*
 * WatchGuide Synchronsprecher-Seiten (Hero + Content-Komponenten)
 * Migriert 2026-06-26 aus GP-Element 32180 (hookfrei, server-gerendert in #main).
 * Geladen via mu-plugin wg-synchronsprecher.php nur auf den 10 Sync-Seiten.
 */
/* ============================================
   WG SYNCHRONSPRECHER UNIVERSAL CONTENT v2.0.1
   CSS Variables + Body-Class Targeting
   Hero + Breadcrumb + All Content Styles
   ============================================ */

/* CSS Variables */
:root {
    --wg-content-primary: #ff6b00;
    --wg-content-secondary: #ffd700;
    --wg-content-success: #00c896;
    --wg-content-info: #8080ff;
    --wg-content-warning: #ff8080;
    --wg-content-bg: #0d0d0d;
    --wg-content-card: #1a1a1a;
    --wg-content-border: #2d2d2d;
    --wg-content-text: #e0e0e0;
    --wg-content-muted: #a0a0a0;
}

/* =============================================================================
   WORDPRESS/GP DEFAULTS VERSTECKEN - KRITISCH für nahtlosen Header-Übergang!
   ============================================================================= */

body.wg-sync-content-active .site-content,
body.wg-sync-content-active .content-area,
body.wg-sync-content-active #primary,
body.wg-sync-content-active .site-main,
body.wg-sync-content-active .inside-article,
body.wg-sync-content-active article {
    background: transparent !important;
    background-color: transparent !important;
}

body.wg-sync-content-active .site-main,
body.wg-sync-content-active .inside-article {
    padding: 0 !important;
    margin: 0 !important;
}

body.wg-sync-content-active .content-area {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.wg-sync-content-active {
    background: var(--wg-content-bg) !important;
}

/* Reset */
.wg-content-page *, .entry-content * { box-sizing: border-box; }

/* Main Container - Full Width */
.wg-content-page {
    background: var(--wg-content-bg);
    color: var(--wg-content-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    margin-left: calc(-50vw + 50%);
    width: 100vw;
}

/* ===== HERO SECTION - Compact ===== */
.wg-content-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #0d0d0d 100%);
    padding: 20px 20px 30px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 107, 0, 0.2);
}

.wg-content-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.wg-content-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.3);
    color: var(--wg-content-primary);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wg-content-hero h1 {
    font-size: 2rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
}

.wg-content-hero-subtitle {
    font-size: 1rem;
    color: var(--wg-content-muted);
    max-width: 650px;
    margin: 0;
    line-height: 1.5;
}

.wg-content-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    background: var(--wg-content-card);
    padding: 18px 30px;
    border-radius: 12px;
    max-width: 650px;
    margin-top: 8px;
}

.wg-content-stat { text-align: center; }
.wg-content-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--wg-content-primary); display: block; line-height: 1.2; }
.wg-content-stat-label { font-size: 0.65rem; color: #888888; text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== BREADCRUMB ===== */
.wg-content-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-size: 0.85rem;
    color: #888888;
}
.wg-content-breadcrumb a { color: #888888; text-decoration: none; }
.wg-content-breadcrumb a:hover { color: var(--wg-content-primary); }

/* ===== ENTRY CONTENT BASE ===== */
body.wg-sync-content-active .entry-content {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 50px 30px 80px !important;
    background: var(--wg-content-bg) !important;
    color: var(--wg-content-text) !important;
}

body.wg-sync-content-active .entry-content h2 {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin: 60px 0 25px !important;
    padding-top: 40px !important;
    border-top: 1px solid var(--wg-content-border) !important;
}
body.wg-sync-content-active .entry-content h2:first-of-type { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }

body.wg-sync-content-active .entry-content h3 {
    color: var(--wg-content-primary) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 35px 0 20px !important;
}

body.wg-sync-content-active .entry-content p { color: var(--wg-content-muted) !important; line-height: 1.8 !important; margin-bottom: 20px !important; }
body.wg-sync-content-active .entry-content p strong { color: var(--wg-content-text) !important; }

/* ===== INTRO BOX ===== */
.wg-intro-box {
    background: linear-gradient(135deg, #1a1a2e 0%, #1a1a1a 100%);
    border-left: 4px solid var(--wg-content-primary);
    padding: 25px 30px;
    margin: 0 0 40px 0;
    border-radius: 0 16px 16px 0;
    font-size: 1.1rem;
    color: #c0c0c0;
    line-height: 1.8;
}

/* ===== QUICK ANSWER ===== */
.wg-quick-answer {
    background: var(--wg-content-card);
    border-radius: 20px;
    overflow: hidden;
    margin: 30px auto 50px;
    border: 1px solid var(--wg-content-border);
    max-width: 800px;
}
.wg-quick-answer-header {
    background: linear-gradient(90deg, var(--wg-content-primary), #ff8533);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #ffffff;
    font-size: 1.1rem;
}
.wg-quick-answer-icon { font-size: 1.3rem; }
.wg-quick-answer-content { padding: 25px 30px; }
.wg-quick-answer-content p { margin: 0 0 15px 0 !important; color: var(--wg-content-muted) !important; line-height: 1.7 !important; }
.wg-quick-answer-content p:last-child { margin-bottom: 0 !important; }
.wg-quick-answer-content strong { color: #ffffff !important; }

/* ===== DATA GRID ===== */
.wg-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin: 25px 0;
}
.wg-data-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wg-data-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.wg-data-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.wg-data-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

.wg-data-card {
    background: var(--wg-content-card);
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    border: 1px solid var(--wg-content-border);
    transition: all 0.3s ease;
}
.wg-data-card:hover { border-color: var(--wg-content-primary); transform: translateY(-3px); }
.wg-data-card-highlight {
    background: linear-gradient(135deg, #2a1a0a 0%, #1a1a1a 100%);
    border-color: rgba(255, 107, 0, 0.3);
}
.wg-data-icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.wg-data-value { font-size: 1.6rem; font-weight: 800; color: var(--wg-content-primary); display: block; margin-bottom: 8px; }
.wg-data-label { font-size: 0.85rem; font-weight: 600; color: #ffffff; margin-bottom: 5px; display: block; }
.wg-data-desc { font-size: 0.75rem; color: #666666; display: block; }
.wg-data-note { font-size: 0.75rem; color: #666666; }

/* ===== INFO / TIP / WARNING BOXES ===== */
.wg-info-box {
    background: #1a1a2e;
    border: 1px solid #2a2a4e;
    border-radius: 12px;
    padding: 20px 25px;
    margin: 25px 0;
    color: #a0a0c0;
}
.wg-info-box strong { color: var(--wg-content-info) !important; }

.wg-tip-box {
    background: #1a2a1a;
    border: 1px solid #2a4a2a;
    border-radius: 12px;
    padding: 20px 25px;
    margin: 25px 0;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.wg-tip-icon { font-size: 1.5rem; flex-shrink: 0; }
.wg-tip-box strong { color: #80ff80 !important; }

.wg-warning-box {
    background: #2a1a1a;
    border: 1px solid #4a2a2a;
    border-radius: 12px;
    padding: 20px 25px;
    margin: 25px 0;
    color: #c0a0a0;
}
.wg-warning-box strong { color: var(--wg-content-warning) !important; }

/* ===== CALC BOX ===== */
.wg-calc-box {
    background: var(--wg-content-card);
    border-radius: 16px;
    padding: 25px;
    margin: 25px 0;
    border: 1px solid var(--wg-content-border);
}
.wg-calc-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--wg-content-border);
    color: var(--wg-content-muted);
}
.wg-calc-row:last-child { border-bottom: none; }
.wg-calc-total {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid var(--wg-content-primary);
    border-bottom: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
}
.wg-calc-total span:last-child { color: var(--wg-content-primary); }

/* ===== SALARY RANGE ===== */
.wg-salary-range {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}
.wg-salary-item {
    background: var(--wg-content-card);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid var(--wg-content-border);
}
.wg-salary-low { border-bottom: 3px solid #666666; }
.wg-salary-mid { border-bottom: 3px solid var(--wg-content-primary); background: linear-gradient(135deg, #2a1a0a 0%, #1a1a1a 100%); }
.wg-salary-high { border-bottom: 3px solid var(--wg-content-success); }
.wg-salary-amount { font-size: 1.8rem; font-weight: 800; color: #ffffff; margin-bottom: 8px; }
.wg-salary-mid .wg-salary-amount { color: var(--wg-content-primary); }
.wg-salary-high .wg-salary-amount { color: var(--wg-content-success); }
.wg-salary-label { font-size: 0.85rem; font-weight: 600; color: #888888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.wg-salary-detail { font-size: 0.8rem; color: #666666; }

/* ===== FACT BOX ===== */
.wg-fact-box {
    background: var(--wg-content-card);
    border-radius: 12px;
    padding: 20px 25px;
    margin: 25px 0;
    display: flex;
    gap: 15px;
    align-items: center;
    border-left: 4px solid var(--wg-content-primary);
}
.wg-fact-icon { font-size: 1.5rem; flex-shrink: 0; }
.wg-fact-box strong { color: var(--wg-content-primary) !important; }

/* ===== LOCATION GRID ===== */
.wg-location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 25px 0;
}
.wg-location-card {
    background: var(--wg-content-card);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--wg-content-border);
}
.wg-location-top {
    background: linear-gradient(135deg, #2a1a0a 0%, #1a1a1a 100%);
    border-color: rgba(255, 107, 0, 0.3);
}
.wg-location-city { font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.wg-location-salary { font-size: 1.3rem; font-weight: 800; color: var(--wg-content-primary); }
.wg-location-note { font-size: 0.75rem; color: #666666; margin-top: 8px; }

/* ===== PRICE LIST ===== */
.wg-price-list {
    background: var(--wg-content-card);
    border-radius: 16px;
    overflow: hidden;
    margin: 25px 0;
    border: 1px solid var(--wg-content-border);
}
.wg-price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    border-bottom: 1px solid var(--wg-content-border);
}
.wg-price-item:last-child { border-bottom: none; }
.wg-price-highlight { background: linear-gradient(90deg, rgba(255, 107, 0, 0.1) 0%, transparent 100%); }
.wg-price-name { color: #c0c0c0; }
.wg-price-value { font-weight: 700; color: var(--wg-content-primary); }
.wg-price-highlight .wg-price-value { font-size: 1.1rem; }

/* ===== HIGHLIGHT BOX ===== */
.wg-highlight-box {
    background: linear-gradient(135deg, #2a1a0a 0%, #1a1a1a 100%);
    border: 1px solid rgba(255, 107, 0, 0.3);
    border-radius: 20px;
    padding: 35px;
    margin: 40px 0;
}
.wg-highlight-box h4 { color: #ffffff; font-size: 1.3rem; margin: 0 0 15px 0; }
.wg-highlight-box p { color: var(--wg-content-muted) !important; line-height: 1.7 !important; margin: 0 0 15px 0 !important; }
.wg-highlight-box strong { color: var(--wg-content-primary) !important; }
.wg-highlight-small { font-size: 0.85rem; color: #666666 !important; margin-bottom: 0 !important; }

/* ===== STRATEGY GRID ===== */
.wg-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.wg-strategy-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wg-strategy-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.wg-strategy-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

.wg-strategy-card {
    background: var(--wg-content-card);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--wg-content-border);
    transition: all 0.3s ease;
}
.wg-strategy-card:hover { border-color: var(--wg-content-primary); transform: translateY(-3px); }
.wg-strategy-icon { font-size: 2rem; margin-bottom: 15px; }
.wg-strategy-title { color: #ffffff; font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.wg-strategy-card h4 { color: #ffffff; font-size: 1.05rem; margin: 0 0 10px 0; }
.wg-strategy-card p, .wg-strategy-desc { color: #888888 !important; font-size: 0.9rem !important; margin: 0 !important; line-height: 1.5 !important; }

/* ===== FAQ SECTION ===== */
.wg-faq-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #0d0d0d 100%);
    margin: 60px -20px -80px -20px;
    padding: 50px 40px 60px;
    border-radius: 30px 30px 0 0;
}
.wg-faq-section h2 {
    color: #ffffff !important;
    text-align: center;
    margin-bottom: 40px !important;
    border: none !important;
    padding: 0 !important;
}
.wg-faq-item {
    background: var(--wg-content-card);
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 15px;
    border: 1px solid var(--wg-content-border);
}
.wg-faq-item h3 { color: #ffffff !important; font-size: 1.1rem !important; margin: 0 0 12px 0 !important; }
.wg-faq-item p { color: var(--wg-content-muted) !important; margin: 0 !important; line-height: 1.7 !important; }
.wg-faq-item strong { color: var(--wg-content-primary) !important; }

/* ===== TIMELINE (für Portraits) ===== */
.wg-timeline { margin: 30px 0; }
.wg-timeline-item {
    background: var(--wg-content-card);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 15px;
    border-left: 4px solid var(--wg-content-primary);
}
.wg-timeline-year { font-size: 0.8rem; color: var(--wg-content-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.wg-timeline-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-bottom: 8px; }
.wg-timeline-desc { color: var(--wg-content-muted); font-size: 0.95rem; line-height: 1.6; }

/* ===== FILMOGRAPHY LIST ===== */
.wg-filmography {
    background: var(--wg-content-card);
    border-radius: 16px;
    overflow: hidden;
    margin: 25px 0;
    border: 1px solid var(--wg-content-border);
}
.wg-film-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--wg-content-border);
}
.wg-film-item:last-child { border-bottom: none; }
.wg-film-title { color: #ffffff; font-weight: 600; }
.wg-film-year { color: var(--wg-content-primary); font-weight: 700; }
.wg-film-note { font-size: 0.85rem; color: #666666; margin-left: auto; margin-right: 15px; }

/* ===== QUOTE BOX ===== */
.wg-quote-box {
    background: linear-gradient(135deg, #2a1a0a 0%, #1a1a1a 100%);
    border-radius: 20px;
    padding: 35px;
    margin: 40px 0;
    text-align: center;
    border: 1px solid rgba(255, 107, 0, 0.2);
}
.wg-quote-text {
    font-size: 1.4rem;
    font-style: italic;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.5;
}
.wg-quote-source { color: var(--wg-content-primary); font-weight: 600; }

/* ===== COMMENTS GAP-FIX ===== */
.wg-content-page + .comments-area,
body.wg-sync-content-active .comments-area {
    margin-top: -80px !important;
    padding-top: 30px !important;
    background: var(--wg-content-bg) !important;
}

/* ===== WORDPRESS/GP ELEMENTS HIDDEN ===== */
body.wg-sync-content-active .entry-header,
body.wg-sync-content-active .page-header,
body.wg-sync-content-active .entry-meta,
body.wg-sync-content-active .post-image,
body.wg-sync-content-active .featured-image,
body.wg-sync-content-active .entry-content > p:first-child:empty {
    display: none !important;
}

/* CATCH-ALL: Hide everything except our content page and comments */
body.wg-sync-content-active .site-main > *:not(.wg-content-page):not(.comments-area):not(article) {
    display: none !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    body.wg-sync-content-active .entry-content { max-width: 100% !important; padding: 40px 20px 60px !important; }
    .wg-strategy-grid { grid-template-columns: repeat(3, 1fr); }
    .wg-strategy-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
    .wg-data-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .wg-content-hero { padding: 20px 15px 25px; }
    .wg-content-hero h1 { font-size: 1.5rem; }
    .wg-content-hero-subtitle { font-size: 0.9rem; }
    .wg-content-stats { gap: 20px; padding: 15px 15px; }
    .wg-content-stat-value { font-size: 1.2rem; }
    .wg-content-stat-label { font-size: 0.6rem; }
    .wg-salary-range, .wg-location-grid { grid-template-columns: 1fr; }
    .wg-data-grid { grid-template-columns: repeat(2, 1fr); }
    .wg-data-grid.cols-3, .wg-data-grid.cols-4, .wg-data-grid.cols-5, .wg-data-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
    .wg-strategy-grid, .wg-strategy-grid.cols-3, .wg-strategy-grid.cols-4, .wg-strategy-grid.cols-5 { grid-template-columns: 1fr; }
    .wg-faq-section { margin: 60px -15px -80px -15px; padding: 40px 20px 50px; }
}

@media (max-width: 480px) {
    .wg-data-grid, .wg-data-grid.cols-3, .wg-data-grid.cols-4 { grid-template-columns: 1fr; }
}


/* ===== IN MEMORIAM Variante (Memorial-Seiten, z. B. Juergen Kluckert) ===== */
body.wg-sync-memorial .wg-content-hero{background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);}
body.wg-sync-memorial .wg-content-badge{background:rgba(136,136,136,0.15);border-color:rgba(136,136,136,0.3);color:#888888;}