/* WohnKompass 25 – gebündeltes Premium-Angebot */

.legacy-premium-offer-v25,
#premium-example-v23 {
    display: none !important;
}

/*
 * Kostenlose Nutzer sehen nur das kompakte
 * Ranking. Die echten Szenariokarten sind Premium.
 */

.wk-free-result-v25
.premium-scenarios-v25 {
    display: none !important;
}

.wk-premium-active
.premium-scenarios-v25 {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        !important;
}

.free-scenario-ranking-v25 {
    margin-top: 12px;
    border: 1px solid #d8e0de;
    border-radius: 16px;
    background: #ffffff;
    padding: 19px;
}

.free-ranking-heading-v25 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.free-ranking-heading-v25 span {
    color: #4b7167;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.free-ranking-heading-v25 h3 {
    margin: 4px 0 0;
    font-size: 20px;
}

.free-ranking-heading-v25 small {
    max-width: 230px;
    color: #697779;
    text-align: right;
}

.free-ranking-list-v25 {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.free-ranking-list-v25 article {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #e0e6e4;
    padding: 9px;
}

.free-ranking-list-v25 article > span {
    color: #b46c4f;
    font-size: 11px;
    font-weight: 850;
}

.free-ranking-list-v25 article > strong {
    font-size: 14px;
}

.free-ranking-list-v25 article > b {
    color: #4b7167;
    font-size: 14px;
}

/*
 * Echte Premiumbereiche sind für kostenlose
 * Nutzer vollständig verborgen.
 */

.wk-free-result-v25
.premium-only-v25 {
    display: none !important;
}

.wk-free-result-v25
.premium-only-control-v25 {
    display: none !important;
}

.wk-premium-active
.premium-only-v25 {
    display: block !important;
    position: relative;
}

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

.wk-premium-active
.premium-only-v25::before,
.wk-premium-active
.premium-scenarios-v25::before {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 8;
    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;
}

/*
 * Gebündelte Premium-Kachel.
 */

.premium-bundle-v25 {
    position: relative;
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid #cdbb91;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 9% 0,
            rgba(190, 157, 85, 0.12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #fffdf8,
            #f6f0e3
        );
    padding: 29px;
    box-shadow:
        0 18px 55px
        rgba(17, 36, 43, 0.08);
}

.premium-bundle-header-v25 {
    display: flex;
    justify-content: space-between;
    gap: 28px;
}

.premium-bundle-header-v25 > div:first-child {
    max-width: 760px;
}

.premium-badge-v25 {
    display: inline-flex;
    border-radius: 30px;
    background:
        linear-gradient(
            135deg,
            #a9822f,
            #d3b66c
        );
    padding: 6px 11px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.premium-bundle-header-v25 h2 {
    margin: 12px 0 0;
    font-size: clamp(
        28px,
        3.4vw,
        41px
    );
}

.premium-bundle-header-v25 p {
    margin: 12px 0 0;
    color: #59696e;
}

.premium-price-v25 {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
}

.premium-price-v25 strong {
    font-size: 34px;
}

.premium-price-v25 span {
    color: #766a4e;
    font-size: 12px;
}

.premium-example-v25 {
    position: relative;
    margin-top: 23px;
    overflow: hidden;
    border: 1px solid
        rgba(169, 130, 47, 0.22);
    border-radius: 17px;
    background:
        rgba(255, 255, 255, 0.72);
    padding: 19px;
}

.premium-example-heading-v25 {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.premium-example-heading-v25 span {
    color: #a9822f;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.premium-example-heading-v25 h3 {
    max-width: 680px;
    margin: 5px 0 0;
    font-size: 21px;
}

.premium-example-heading-v25 small {
    color: #786b4d;
    white-space: nowrap;
}

.premium-example-grid-v25 {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 17px;
}

.premium-example-grid-v25 article {
    border: 1px solid #dfe5e3;
    border-radius: 13px;
    background: #ffffff;
    padding: 14px;
}

.premium-example-grid-v25 header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.premium-example-grid-v25 header span {
    color: #4b7167;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.premium-example-grid-v25 header b {
    color: #9a8352;
    font-size: 10px;
    text-transform: uppercase;
}

.premium-example-grid-v25 h4 {
    margin: 11px 0;
    font-size: 16px;
}

.example-plus-v25,
.example-minus-v25 {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    margin-top: 8px;
    color: #46595f;
    font-size: 12px;
}

.example-plus-v25 i,
.example-minus-v25 i {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 5px;
    color: #ffffff;
    font-style: normal;
    font-weight: 900;
}

.example-plus-v25 i {
    background: #1f6b45;
}

.example-minus-v25 i {
    background: #9c3a2c;
}

.premium-example-grid-v25 em {
    display: block;
    margin-top: 11px;
    border-top: 1px solid #e1e6e4;
    padding-top: 9px;
    color: #7b6e50;
    font-size: 11px;
    font-style: normal;
    font-weight: 650;
}

.example-value-v25 {
    display: block;
    margin-top: 14px;
    font-size: 20px;
}

.premium-example-grid-v25 ul,
.premium-example-grid-v25 ol {
    display: grid;
    gap: 7px;
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
}

.premium-example-grid-v25 ul li {
    display: flex;
    justify-content: space-between;
    gap: 9px;
    border-bottom: 1px solid #e1e6e4;
    padding-bottom: 6px;
    color: #59696e;
    font-size: 11px;
}

.premium-example-grid-v25 ol li {
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: center;
    gap: 8px;
    color: #46595f;
    font-size: 12px;
}

.premium-example-grid-v25 ol span {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 7px;
    background: #11242b;
    color: #ffffff;
    font-size: 9px;
    font-weight: 850;
}

.premium-watermark-v25 {
    position: absolute;
    left: 50%;
    top: 55%;
    z-index: 3;
    transform:
        translate(-50%, -50%)
        rotate(-12deg);
    color:
        rgba(126, 95, 29, 0.11);
    font-size: clamp(
        25px,
        4vw,
        50px
    );
    font-weight: 900;
    letter-spacing: 0.06em;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

.premium-benefits-v25 {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.premium-benefits-v25 span {
    border-radius: 10px;
    background:
        rgba(255, 255, 255, 0.76);
    padding: 10px;
    color: #45575c;
    font-size: 12px;
}

.premium-benefits-v25 span::before {
    margin-right: 6px;
    color: #4b7167;
    content: "✓";
    font-weight: 900;
}

.premium-action-row-v25 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 18px;
    border-top: 1px solid
        rgba(169, 130, 47, 0.24);
    padding-top: 17px;
}

.premium-action-row-v25 > div {
    display: grid;
    gap: 3px;
}

.premium-action-row-v25 span {
    color: #766a4e;
    font-size: 12px;
}

#premium-action-v25 {
    min-height: 48px;
    flex: 0 0 auto;
    border: 1px solid #4b7167;
    border-radius: 11px;
    background: #4b7167;
    padding: 9px 16px;
    color: #ffffff;
    font-weight: 760;
    cursor: pointer;
}

#premium-action-v25:hover {
    background: #385950;
}

@media (max-width: 1040px) {
    .wk-premium-active
    .premium-scenarios-v25 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
    }

    .premium-example-grid-v25 {
        grid-template-columns: 1fr;
    }

    .premium-benefits-v25 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .wk-premium-active
    .premium-scenarios-v25 {
        grid-template-columns:
            1fr
            !important;
    }

    .free-ranking-heading-v25,
    .premium-bundle-header-v25,
    .premium-example-heading-v25,
    .premium-action-row-v25 {
        align-items: stretch;
        flex-direction: column;
    }

    .free-ranking-list-v25,
    .premium-benefits-v25 {
        grid-template-columns: 1fr;
    }

    .premium-bundle-v25 {
        padding: 21px;
    }

    .premium-price-v25 {
        justify-items: start;
    }

    .premium-watermark-v25 {
        font-size: 26px;
        white-space: normal;
    }

    #premium-action-v25 {
        width: 100%;
    }
}