/* WohnKompass V20 – stabile Premium-Vorschau */

#landing-premium-v15 {
    display: none !important;
}

/*
 * Szenarien:
 * kostenlos nur die erste Zeile,
 * jeweils nur ein Plus- und Minuspunkt.
 */

.scenario-grid-v20 {
    position: relative;
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        !important;
}

.wk-premium-locked
.scenario-grid-v20
.sc:nth-child(n + 4) {
    display: none !important;
}

.wk-premium-locked
.scenario-grid-v20
.sc-c {
    grid-template-columns: 1fr !important;
}

.wk-premium-locked
.scenario-grid-v20
.sc-c li:nth-child(n + 2) {
    display: none !important;
}

.wk-premium-locked
.scenario-grid-v20
.sc-tl {
    display: none;
}

.wk-premium-locked
.scenario-grid-v20::after {
    grid-column: 1 / -1;
    border: 1px dashed #cdbb91;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #f5efe1
        );
    padding: 16px 18px;
    color: #6d6046;
    content:
        "Premium zeigt alle sechs Handlungswege "
        "mit vollständigen Chancen, Risiken "
        "und Zeitrahmen.";
    font-size: 14px;
    font-weight: 750;
    text-align: center;
}

/*
 * Weitere Premiumbereiche bleiben als
 * abgeschnittene Vorschau sichtbar.
 */

.premium-section-v20 {
    position: relative;
}

.wk-premium-locked
.premium-section-v20 {
    min-height: 140px;
    max-height: 185px;
    overflow: hidden;
    pointer-events: none;
}

.wk-premium-locked
.premium-section-v20::after {
    position: absolute;
    inset: 52px 0 0;
    z-index: 8;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            to bottom,
            rgba(251, 250, 247, 0.16),
            rgba(251, 250, 247, 0.98) 62%
        );
    padding: 18px;
    color: #6d6046;
    content:
        "Vollständiger Inhalt mit WohnWeitblick Premium";
    font-size: 14px;
    font-weight: 850;
    text-align: center;
}

.wk-premium-active
.premium-section-v20 {
    display: block !important;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
}

.wk-premium-active
.premium-section-v20::before {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 9;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            #a9822f,
            #d6b86c
        );
    padding: 4px 9px;
    color: #ffffff;
    content: "Premium";
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wk-premium-locked
.premium-control-v20 {
    display: none !important;
}

.wk-premium-active
.premium-control-v20 {
    display: inline-flex !important;
}

/*
 * Der Premiumteaser bleibt direkt nach
 * den Szenarien sichtbar.
 */

.premium-offer-v19 {
    margin-top: 18px;
}

/*
 * Responsive Vorschau:
 * Desktop drei, Tablet zwei,
 * Smartphone eine Szenariokachel.
 */

@media (max-width: 1040px) {
    .scenario-grid-v20 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
    }

    .wk-premium-locked
    .scenario-grid-v20
    .sc:nth-child(n + 3) {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .scenario-grid-v20 {
        grid-template-columns:
            1fr
            !important;
    }

    .wk-premium-locked
    .scenario-grid-v20
    .sc:nth-child(n + 2) {
        display: none !important;
    }

    .wk-premium-locked
    .premium-section-v20 {
        max-height: 155px;
    }
}