/**
 * PPS SEO-Seiten-Komponenten – Shortcode-Styles (v3.0.0)
 *
 * Styles für:
 *   .pps-seo-berater-block  – [pps_berater_block]
 *   .pps-seo-faq-block      – [pps_faq_block]
 *   .pps-seo-anti-fehlkauf  – [pps_anti_fehlkauf]
 *   .pps-seo-entscheidung   – [pps_entscheidung]
 *   .pps-seo-preisklassen   – [pps_preisklassen]
 *   .pps-affiliate-hinweis  – Affiliate-Transparenz-Block
 *
 * Design-System: Sternenhimmel-Premium
 *   Hintergrund: rgba(10, 18, 34, 0.92)
 *   Akzent:      #5FD3FF
 *   Fehler:      #FF6B6B
 *   Border:      rgba(95, 211, 255, 0.22)
 *   Backdrop:    blur(8px)
 */

/* ── Gemeinsame Variablen ──────────────────────────────────────────────────── */
:root {
    --pps-seo-bg:         rgba(10, 18, 34, 0.92);
    --pps-seo-border:     rgba(95, 211, 255, 0.22);
    --pps-seo-accent:     #5FD3FF;
    --pps-seo-warn:       #FF6B6B;
    --pps-seo-green:      #4CAF50;
    --pps-seo-text:       rgba(255, 255, 255, 0.92);
    --pps-seo-text-dim:   rgba(255, 255, 255, 0.65);
    --pps-seo-radius:     14px;
    --pps-seo-radius-sm:  8px;
    --pps-seo-shadow:     0 4px 24px rgba(0, 0, 0, 0.32);
}

/* ── CTA-Button (global für alle Shortcodes) ──────────────────────────────── */
.pps-seo-cta-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    padding:          12px 24px;
    background:       linear-gradient(135deg, #5FD3FF 0%, #3AB8E6 100%);
    color:            #0a1222;
    font-weight:      700;
    font-size:        0.95rem;
    border:           none;
    border-radius:    var(--pps-seo-radius-sm);
    cursor:           pointer;
    transition:       transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration:  none;
}
.pps-seo-cta-btn:hover {
    transform:    translateY(-2px);
    box-shadow:   0 6px 20px rgba(95, 211, 255, 0.45);
}
.pps-seo-cta-secondary {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           var(--pps-seo-accent);
    text-decoration: none;
    font-size:       0.95rem;
    border-bottom:   1px solid rgba(95, 211, 255, 0.3);
    padding-bottom:  2px;
    transition:      border-color 0.18s;
}
.pps-seo-cta-secondary:hover {
    border-color: var(--pps-seo-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 1. BERATER-BLOCK                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-seo-berater-block {
    background:    var(--pps-seo-bg);
    border:        1px solid var(--pps-seo-border);
    border-radius: var(--pps-seo-radius);
    padding:       24px;
    margin:        32px 0;
    box-shadow:    var(--pps-seo-shadow);
    backdrop-filter: blur(8px);
    position:      relative;
    overflow:      hidden;
}

/* Leichter Glow links (Akzent-Linie) */
.pps-seo-berater-block::before {
    content:          '';
    position:         absolute;
    left:             0; top: 0; bottom: 0;
    width:            3px;
    background:       linear-gradient(180deg, #5FD3FF 0%, transparent 100%);
    border-radius:    var(--pps-seo-radius) 0 0 var(--pps-seo-radius);
}

.pps-seo-berater-inner {
    display:     flex;
    align-items: flex-start;
    gap:         20px;
}

.pps-seo-berater-avatar {
    flex-shrink: 0;
}

.pps-seo-advisor-img {
    width:         64px;
    height:        64px;
    border-radius: 50%;
    border:        2px solid rgba(95, 211, 255, 0.5);
    box-shadow:    0 0 12px rgba(95, 211, 255, 0.25);
    object-fit:    cover;
}

.pps-seo-advisor-emoji {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         64px;
    height:        64px;
    font-size:     32px;
    background:    rgba(95, 211, 255, 0.12);
    border-radius: 50%;
    border:        2px solid rgba(95, 211, 255, 0.3);
}

.pps-seo-berater-content {
    flex: 1;
}

.pps-seo-berater-titel {
    margin:       0 0 8px;
    font-size:    1.15rem;
    font-weight:  700;
    color:        var(--pps-seo-accent);
    line-height:  1.3;
}

.pps-seo-berater-text {
    margin:       0 0 12px;
    color:        var(--pps-seo-text-dim);
    font-size:    0.9rem;
    line-height:  1.5;
}

.pps-seo-fragen-label {
    font-size:   0.8rem;
    color:       var(--pps-seo-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.pps-seo-fragen {
    list-style:   none;
    padding:      0;
    margin:       0 0 16px;
    display:      flex;
    flex-wrap:    wrap;
    gap:          6px;
}

.pps-seo-fragen li {
    background:    rgba(95, 211, 255, 0.1);
    border:        1px solid rgba(95, 211, 255, 0.2);
    border-radius: 20px;
    padding:       4px 12px;
    font-size:     0.82rem;
    color:         var(--pps-seo-text);
}

/* Farb-Varianten je Advisor */
.pps-advisor--maxbone::before  { background: linear-gradient(180deg, #FFA500 0%, transparent 100%); }
.pps-advisor--maxbone .pps-seo-berater-titel { color: #FFA500; }
.pps-advisor--maxbone .pps-seo-advisor-img   { border-color: rgba(255, 165, 0, 0.5); box-shadow: 0 0 12px rgba(255,165,0,.2); }

@media (max-width: 600px) {
    .pps-seo-berater-inner { flex-direction: column; align-items: center; text-align: center; }
    .pps-seo-fragen        { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 2. FAQ-BLOCK                                                                */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-seo-faq-block {
    margin: 32px 0;
}

.pps-seo-faq-titel {
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--pps-seo-text);
    margin:      0 0 16px;
}

.pps-seo-faq-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.pps-seo-faq-item {
    background:    var(--pps-seo-bg);
    border:        1px solid var(--pps-seo-border);
    border-radius: var(--pps-seo-radius-sm);
    overflow:      hidden;
    transition:    border-color 0.18s;
}
.pps-seo-faq-item[open],
.pps-seo-faq-item:hover {
    border-color: rgba(95, 211, 255, 0.45);
}

.pps-seo-faq-q {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        14px 18px;
    cursor:         pointer;
    font-weight:    600;
    font-size:      0.95rem;
    color:          var(--pps-seo-text);
    list-style:     none;
    user-select:    none;
}
.pps-seo-faq-q::-webkit-details-marker { display: none; }
.pps-seo-faq-q::marker                 { display: none; }

.pps-faq-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    background:      rgba(95, 211, 255, 0.15);
    border-radius:   50%;
    font-size:       1rem;
    font-weight:     700;
    color:           var(--pps-seo-accent);
    flex-shrink:     0;
    transition:      transform 0.2s;
}
.pps-seo-faq-item[open] .pps-faq-icon {
    transform: rotate(45deg);
}

.pps-seo-faq-a {
    padding:     4px 18px 16px 50px;
    font-size:   0.9rem;
    color:       var(--pps-seo-text-dim);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 3. ANTI-FEHLKAUF-BLOCK                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-seo-anti-fehlkauf {
    background:    rgba(255, 107, 107, 0.06);
    border:        1px solid rgba(255, 107, 107, 0.28);
    border-radius: var(--pps-seo-radius);
    padding:       22px 24px;
    margin:        32px 0;
}

.pps-seo-af-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 14px;
}

.pps-seo-af-icon { font-size: 1.3rem; }

.pps-seo-af-titel {
    margin:      0;
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--pps-seo-warn);
}

.pps-seo-af-list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.pps-seo-af-item {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px;
    font-size:   0.9rem;
    line-height: 1.5;
}

.pps-seo-af-problem {
    color:        var(--pps-seo-warn);
    font-weight:  600;
}

.pps-seo-af-tip {
    color: var(--pps-seo-text-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 4. ENTSCHEIDUNGSBLOCK (A vs B)                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-seo-entscheidung {
    display:   grid;
    grid-template-columns: 1fr auto 1fr;
    gap:       16px;
    margin:    32px 0;
    align-items: start;
}

@media (max-width: 680px) {
    .pps-seo-entscheidung {
        grid-template-columns: 1fr;
    }
    .pps-seo-vs-divider { text-align: center; }
}

.pps-seo-option {
    background:    var(--pps-seo-bg);
    border:        1px solid var(--pps-seo-border);
    border-radius: var(--pps-seo-radius);
    padding:       20px;
    box-shadow:    var(--pps-seo-shadow);
}

.pps-seo-option--b {
    border-color: rgba(95, 211, 255, 0.35);
    background:   rgba(10, 18, 34, 0.96);
}

.pps-seo-option-titel {
    margin:      0 0 6px;
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--pps-seo-text);
}

.pps-seo-option--b .pps-seo-option-titel {
    color: var(--pps-seo-accent);
}

.pps-seo-option-beschr {
    font-size:   0.85rem;
    color:       var(--pps-seo-text-dim);
    margin:      0 0 12px;
}

.pps-seo-option-list {
    list-style: none;
    padding:    0;
    margin:     8px 0 0;
    display:    flex;
    flex-direction: column;
    gap:        5px;
    font-size:  0.88rem;
}

.pps-seo-option-list li {
    display:     flex;
    align-items: flex-start;
    gap:         7px;
    color:       var(--pps-seo-text-dim);
    line-height: 1.4;
}

.pps-list-icon {
    font-size:   0.85rem;
    flex-shrink: 0;
    margin-top:  1px;
}
.pps-list-icon--pro    { color: var(--pps-seo-green); }
.pps-list-icon--contra { color: var(--pps-seo-warn); }

.pps-seo-vs-divider {
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0 8px;
    font-size:   0.8rem;
    font-weight: 800;
    color:       rgba(255, 255, 255, 0.3);
    letter-spacing: 0.1em;
    align-self:  center;
}

.pps-seo-empfehlung {
    background:    rgba(95, 211, 255, 0.06);
    border:        1px solid rgba(95, 211, 255, 0.2);
    border-radius: var(--pps-seo-radius);
    padding:       18px 22px;
    margin-top:    16px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           16px;
    flex-wrap:     wrap;
}

.pps-seo-empfehlung-text {
    margin:    0;
    font-size: 0.9rem;
    color:     var(--pps-seo-text-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 5. PREISKLASSEN                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-seo-preisklassen {
    display:   grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:       12px;
    margin:    32px 0;
}

.pps-seo-tier {
    background:    var(--pps-seo-bg);
    border:        1px solid var(--pps-seo-border);
    border-radius: var(--pps-seo-radius);
    padding:       18px 16px;
    transition:    transform 0.18s, border-color 0.18s;
}
.pps-seo-tier:hover {
    transform:    translateY(-2px);
    border-color: rgba(95, 211, 255, 0.4);
}

.pps-tier-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 10px;
}

.pps-tier-icon { font-size: 1.2rem; }

.pps-tier-titel {
    font-weight: 700;
    font-size:   0.95rem;
    color:       var(--pps-seo-text);
    flex:        1;
}

.pps-tier-range {
    font-size:    0.78rem;
    color:        var(--pps-seo-accent);
    font-weight:  600;
    white-space:  nowrap;
}

.pps-tier-text {
    font-size:   0.85rem;
    color:       var(--pps-seo-text-dim);
    margin:      0 0 10px;
    line-height: 1.5;
}

.pps-tier-link {
    display:        inline-block;
    font-size:      0.82rem;
    color:          var(--pps-seo-accent);
    text-decoration: none;
    border-bottom:  1px solid rgba(95, 211, 255, 0.3);
    padding-bottom: 1px;
    transition:     border-color 0.18s;
}
.pps-tier-link:hover { border-color: var(--pps-seo-accent); }

/* Tier-spezifische Akzente */
.pps-tier--budget   .pps-tier-range { color: #4CAF50; }
.pps-tier--standard .pps-tier-range { color: var(--pps-seo-accent); }
.pps-tier--premium  .pps-tier-range { color: #B39DDB; }
.pps-tier--luxus    .pps-tier-range { color: #FFD700; }

.pps-tier--luxus {
    border-color:  rgba(255, 215, 0, 0.25);
    background:    linear-gradient(135deg, rgba(10,18,34,0.95) 0%, rgba(20,15,10,0.95) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 6. AFFILIATE-HINWEIS                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-affiliate-hinweis {
    background:    rgba(255, 255, 255, 0.03);
    border:        1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--pps-seo-radius-sm);
    padding:       14px 18px;
    margin:        32px 0 16px;
    font-size:     0.82rem;
    color:         var(--pps-seo-text-dim);
    line-height:   1.5;
}

.pps-affiliate-hinweis strong { color: var(--pps-seo-text); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 7. HERO-BEREICH (für SEO-Seiteneinleitung)                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-seo-hero {
    padding:    32px 0 24px;
}

.pps-seo-hero-sub {
    color:       var(--pps-seo-text-dim);
    font-size:   0.95rem;
    margin:      8px 0 20px;
    display:     flex;
    gap:         12px;
    flex-wrap:   wrap;
}

.pps-seo-hero-sub span::before {
    content: '·';
    margin-right: 12px;
    opacity: 0.4;
}
.pps-seo-hero-sub span:first-child::before { display: none; }

.pps-seo-hero-ctas {
    display:  flex;
    gap:      12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 8. INTERNE LINKS BLOCK                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pps-seo-interne-links {
    margin: 40px 0 24px;
}

.pps-seo-interne-links h2 {
    font-size:    1.1rem;
    font-weight:  700;
    color:        var(--pps-seo-text);
    margin:       0 0 12px;
}

.pps-seo-interne-links ul {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
}

.pps-seo-interne-links li a {
    display:       inline-block;
    background:    rgba(95, 211, 255, 0.08);
    border:        1px solid rgba(95, 211, 255, 0.2);
    border-radius: 20px;
    padding:       6px 14px;
    font-size:     0.88rem;
    color:         var(--pps-seo-accent);
    text-decoration: none;
    transition:    background 0.18s, border-color 0.18s;
}
.pps-seo-interne-links li a:hover {
    background:   rgba(95, 211, 255, 0.16);
    border-color: rgba(95, 211, 255, 0.45);
}