@charset "UTF-8";
/*
Theme Name:  eStar child
Theme URI:   https://gretathemes.com/wordpress-themes/estar/
Version:     1.4.1
Description: Child theme for eStar that can be used as a starting point for custom development.
Author:      GretaThemes
Author URI:  https://gretathemes.com
template:    estar
*/

/* ==========================================================================
   POLLGRAPHICS OVERRIDES - Full Width Layout + Brand Colors
   Version: 1.4.1 (18. Februar 2026)
   
   Diese Styles überschreiben eStar Theme-Container für pollgraphics-Seiten
   + Safari 15.4+ Kompatibilitäts-Fixes
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL: eStar CSS-Variablen überschreiben
   --color-accent: pollgraphics-Primary statt eStar-Blau (betrifft Links,
                   Buttons, Highlights global)
   --container:    100% statt 1134px (Full Width für alle Seiten)
   -------------------------------------------------------------------------- */
:root {
    --color-accent: #667eea;
    --container: 100%;
}

/* --------------------------------------------------------------------------
   PRICING & BUNDLE PAGES - CRITICAL OVERRIDES
   -------------------------------------------------------------------------- */

/* KRITISCH: Alle eStar-Container auf volle Breite für pollgraphics-Seiten */
body .entry-content {
    max-width: 100% !important;
}

/* Header-Logo bündig links: eStar .container hat 12px padding */
.header .container {
    padding-left: 0;
}

/* Content-Container: Seitliches Padding behalten, kein vertikales Padding */
.content {
    padding-top: 0;
    padding-bottom: 0;
}

/* Blog/Archivseiten: Content-Bereich lesbar halten */
.blog .container,
.archive .container,
.single .container {
    max-width: 1200px;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY: Source Serif 4 für alle Überschriften global
   Die @font-face Deklarationen kommen aus dem Plugin CSS (pollgraphics-maps.css).
   Hier setzen wir die Font-Family auf alle h1-h6 im gesamten Theme.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title,
.widget-title {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* Body-Text: Source Sans 3 für alle nicht-Überschriften global */
body,
p,
li,
td,
th,
label,
input,
textarea,
select,
button,
.entry-content,
.site-description,
.comment-body,
.widget {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   BUTTONS: Newsletter + Suche — pollgraphics Gradient
   -------------------------------------------------------------------------- */

/* Newsletter "Jetzt anmelden" Button */
.pg-nl-button,
.pg-btn-success {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pg-nl-button:hover,
.pg-btn-success:hover {
    background: linear-gradient(135deg, #7b8ff0 0%, #8a5fad 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

/* Newsletter Datenschutz-Link */
.pg-nl-privacy a {
    color: #667eea;
}

.pg-nl-privacy a:hover {
    color: #764ba2;
}

/* WordPress Suche-Button (Blog-Sidebar) */
.search-form .search-submit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 6px 6px 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.search-form .search-submit:hover {
    background: linear-gradient(135deg, #7b8ff0 0%, #8a5fad 100%) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

/* Spezifisch für Pricing-Seiten: ALLE Container erweitern */
body:has(.pg-pricing-page) .entry-content,
body:has(.pg-pricing-page) .site-content,
body:has(.pg-pricing-page) #primary,
body:has(.pg-pricing-page) .content-area,
body:has(.pg-pricing-page) main,
body:has(.pg-pricing-page) article,
body.page:has(.pg-pricing-page) .entry-content,
.page:has(.pg-pricing-page) .site-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Nur für Seiten mit pollgraphics-Pricing */
.pg-pricing-page,
body.page .pg-pricing-page,
.entry-content > .pg-pricing-page {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Entry-Content für pollgraphics-Seiten */
body.page .entry-content:has(.pg-pricing-page),
body.single .entry-content:has(.pg-pricing-page),
.entry-content:has(.pg-bundle-grid) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Fallback: Direktes Targeting aller möglichen Container */
body .pg-pricing-page .entry-content,
body .pg-pricing-page .site-content,
body .pg-pricing-page #primary,
body .entry-content .pg-pricing-page,
article .entry-content .pg-pricing-page {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   AREA OVERVIEW: Full Width Layout (v1.4.1)
   Gleicher Ansatz wie Pricing-Seiten — #primary / .content-area etc.
   auf volle Breite erweitern damit das 6-Spalten-Grid greift.
   body.pg-area-overview-page wird per PHP-Hook injiziert (v2.28.58).
   -------------------------------------------------------------------------- */

body:has(.pg-area-overview) .entry-content,
body:has(.pg-area-overview) .site-content,
body:has(.pg-area-overview) #primary,
body:has(.pg-area-overview) .content-area,
body:has(.pg-area-overview) main,
body:has(.pg-area-overview) article,
body.pg-area-overview-page #primary,
body.pg-area-overview-page .content-area,
body.pg-area-overview-page main,
body.pg-area-overview-page article {
    max-width: 100% !important;
    width: 100% !important;
}

/* Area-Grid: Grid-Layout erzwingen (höchste Priorität) */
.pg-area-grid,
body .pg-area-grid,
.site-content .pg-area-grid,
.entry-content .pg-area-grid,
article .pg-area-grid,
main .pg-area-grid,
.content-area .pg-area-grid,
#primary .pg-area-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1200px) {
    .pg-area-grid,
    body .pg-area-grid,
    .site-content .pg-area-grid,
    .entry-content .pg-area-grid,
    article .pg-area-grid,
    main .pg-area-grid,
    .content-area .pg-area-grid,
    #primary .pg-area-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .pg-area-grid,
    body .pg-area-grid,
    .site-content .pg-area-grid,
    .entry-content .pg-area-grid,
    article .pg-area-grid,
    main .pg-area-grid,
    .content-area .pg-area-grid,
    #primary .pg-area-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .pg-area-grid,
    body .pg-area-grid,
    .site-content .pg-area-grid,
    .entry-content .pg-area-grid,
    article .pg-area-grid,
    main .pg-area-grid,
    .content-area .pg-area-grid,
    #primary .pg-area-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Area-Card: Span-Override verhindern */
.pg-area-grid .pg-area-card,
.pg-area-card {
    grid-column: span 1 !important;
}

/* Tab-Content-Inner: Volle Breite Container */
.pg-tab-content-inner,
body .pg-tab-content-inner,
.pg-pricing-page .pg-tab-content-inner {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
}

/* Bundle-Grid: Grid-Layout erzwingen (höchste Priorität) */
.pg-bundle-grid,
body .pg-bundle-grid,
.site-content .pg-bundle-grid,
.entry-content .pg-bundle-grid,
article .pg-bundle-grid,
main .pg-bundle-grid,
.content-area .pg-bundle-grid,
#primary .pg-bundle-grid,
.pg-pricing-page .pg-bundle-grid,
.pg-tab-content .pg-bundle-grid,
.pg-tab-content-inner .pg-bundle-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Auf mittleren Screens: Auto-Fit für Flexibilität */
@media (max-width: 1199px) {
    .pg-bundle-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

/* Bundle-Card: Maximale Breite aufheben */
.pg-bundle-card,
body .pg-bundle-card,
.pg-bundle-grid .pg-bundle-card {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Pricing-Seite: Volle Breite Container */
.pg-pricing-page,
body .pg-pricing-page,
.entry-content .pg-pricing-page {
    max-width: 100% !important;
    width: 100% !important;
}

.pg-tab-content-inner,
body .pg-tab-content-inner {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 60px 40px !important;
}

/* Pricing-Tiers: 3-Spalten-Layout */
.pg-tiers-container,
body .pg-tiers-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   MAP CONTAINER - FULL WIDTH
   (Obsolet seit v2.28.24 — Map-CSS vollständig in pollgraphics-maps.css migriert.
    Regeln hier entfernt, um !important-Konflikte mit Plugin-CSS zu vermeiden.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .pg-tiers-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .pg-bundle-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .pg-tiers-container,
    .pg-bundle-grid {
        grid-template-columns: 1fr !important;
    }
    
    .pg-tab-content-inner {
        padding: 30px 16px !important;
    }
}

/* --------------------------------------------------------------------------
   DEBUG: Falls Grid nicht funktioniert
   -------------------------------------------------------------------------- */

/* Falls CSS Grid nicht unterstützt wird: Flexbox-Fallback */
@supports not (display: grid) {
    .pg-bundle-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    
    .pg-bundle-card {
        flex: 1 1 calc(33.333% - 24px) !important;
        min-width: 300px !important;
        max-width: 450px !important;
    }
}

/* ==========================================================================
   POLYLANG LANGUAGE SWITCHER — Child-Theme Override
   
   eStar's "Highlight Last Item" feature applies:
   .header-highlight-last-item .nav .menu > li:last-child > a { background: var(--color-accent) }
   This makes the Polylang switcher (= last menu item) a flat-color button.
   
   We override with the SAME selector + gradient background.
   Child-theme loads AFTER parent → wins the cascade at equal specificity.
   ========================================================================== */

/* --- Last menu item (Polylang switcher): gradient pill --- */
.header-highlight-last-item .nav .menu > li:last-child > a {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 6px 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    letter-spacing: 0.02em;
}

.header-highlight-last-item .nav .menu > li:last-child:hover > a {
    background: linear-gradient(135deg, #7b8ff0 0%, #8a5fad 100%) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.header-highlight-last-item .nav .menu > li:last-child:active > a {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    transform: translateY(0px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}

/* DISABLED: Dark Mode (v2.28.71) — siehe FEATURE_ROADMAP.md
@media (prefers-color-scheme: dark) {
    .header-highlight-last-item .nav .menu > li:last-child > a {
        background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%) !important;
    }

    .header-highlight-last-item .nav .menu > li:last-child:hover > a {
        background: linear-gradient(135deg, #9ba3fa 0%, #baa3f5 100%) !important;
        box-shadow: 0 4px 12px rgba(129, 140, 248, 0.35);
    }

    .header-highlight-last-item .nav .menu > li:last-child:active > a {
        background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%) !important;
        box-shadow: 0 2px 6px rgba(129, 140, 248, 0.25);
    }
}
*/

/* ==========================================================================
   MAP CSS: MIGRATED TO PLUGIN (Task 3.2.3)
   
   All map-related CSS rules (layout, grid, SVG, polls, controls, Safari
   fallbacks) have been moved to the pollgraphics-maps.css plugin file.
   See: wordpress-plugin/pollgraphics-access/assets/css/pollgraphics-maps.css
   
   Migration date: v2.28.24
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCREENSHOT-BILDER: Homepage + Karteseiten (Paywall-Platzhalter)
   
   1) Homepage DE (Page-ID 58) + EN (Page-ID 126): nacktes <img> direkt in .entry-content
   2) Karteseiten (Paywall): <img> in .pg-paywall-view (für ausgeloggte User)
   
   Shortcode-Bilder (.map-thumbnail, .pg-bundle-card etc.) sind NICHT
   betroffen — sie haben eigenes Plugin-Styling.
   -------------------------------------------------------------------------- */
body.page-id-58 .entry-content > img,
body.page-id-126 .entry-content > img,
body.page-id-126 .entry-content > span > img,
.pg-paywall-view > img {
    max-width: min(100%, 1200px);
    margin: 32px auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

/* DISABLED: Screenshot Dark Mode (v2.28.71)
@media (prefers-color-scheme: dark) {
    body.page-id-58 .entry-content > img,
    body.page-id-126 .entry-content > img,
    body.page-id-126 .entry-content > span > img,
    .pg-paywall-view > img {
        border-color: #374151;
    }
}
*/