/*
 * WohnWeitblick Finance UI V195
 */


/* Beide Karten nicht künstlich auf dieselbe Höhe ziehen. */

.row-2:has(#ck-econ):has(#ck-net) {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
}

.row-2:has(#ck-econ):has(#ck-net) > .card {
    display: block !important;
    align-self: start !important;

    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 24px !important;

    overflow: visible !important;

    border: 1px solid #dbe5e2 !important;
    border-radius: 18px !important;

    background: #ffffff !important;

    box-shadow:
        0 10px 30px rgba(25, 47, 52, 0.055) !important;
}


/* Überschriften und Grundtypografie */

.card:has(#wk-holding-final-v47) > h2,
.card:has(#wk-holding-final-v47) > h3,
.card:has(#wk-sale-final-v47) > h2,
.card:has(#wk-sale-final-v47) > h3 {
    max-width: 28ch !important;
    margin: 0 0 20px !important;

    color: #142b32 !important;

    font-size: clamp(21px, 2vw, 27px) !important;
    font-weight: 820 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance;
}

.wk-holding-v53,
.wk-sale-summary-v47 {
    display: grid !important;
    gap: 16px !important;

    min-width: 0 !important;
}

.wk-holding-v53 p,
.wk-sale-summary-v47 p {
    color: #5f7075 !important;

    font-size: 12px !important;
    line-height: 1.62 !important;
}


/* Hauptwert Liquiditätsbedarf */

.wk-holding-total-v53 {
    padding: 22px !important;

    border: 1px solid rgba(77, 119, 107, 0.34) !important;
    border-radius: 15px !important;

    background:
        linear-gradient(
            145deg,
            #edf5f1,
            #f8fbf9
        ) !important;
}

.wk-holding-total-v53 > span {
    margin-bottom: 10px !important;

    color: #526d68 !important;

    font-size: 12px !important;
    font-weight: 780 !important;
}

.wk-holding-total-v53 > strong {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    color: #142d34 !important;

    font-size: clamp(36px, 4vw, 50px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
}

.wk-holding-total-v53 > strong small {
    color: #566e72 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.wk-holding-total-v53 > p {
    margin-top: 10px !important;

    color: #315d53 !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}


/* Darlehensrate sichtbar und bedienbar */

.wk-primary-cost-input-v54 {
    display: block !important;
    visibility: visible !important;

    padding: 4px !important;

    border: 1px solid rgba(174, 145, 21, 0.31) !important;
    border-radius: 15px !important;

    background:
        linear-gradient(
            135deg,
            #faf8ed,
            #fffdf7
        ) !important;
}

.wk-primary-cost-input-v54 .wk-cost-input-v53 {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(190px, 0.62fr) !important;
    gap: 18px !important;
    align-items: center !important;

    padding: 15px 16px !important;

    border: 0 !important;
    background: transparent !important;
}

.wk-primary-cost-input-v54
    .wk-cost-input-v53 > span {
    color: #263f45 !important;

    font-size: 13px !important;
    font-weight: 820 !important;
}



.wk-cost-input-v53 > span small {
    display: block !important;
    margin-top: 5px !important;

    color: #687a7e !important;

    font-size: 11px !important;
    font-weight: 550 !important;
    line-height: 1.45 !important;
}

.wk-cost-input-v53 input {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;

    width: 100% !important;
    min-height: 48px !important;
    padding: 0 88px 0 13px !important;

    box-sizing: border-box !important;

    border: 1px solid #cbd8d4 !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #152e35 !important;

    font-size: 16px !important;
    font-weight: 800 !important;
}

.wk-cost-input-v53 input:focus {
    border-color: #52796e !important;
    outline: 4px solid rgba(82, 121, 110, 0.14) !important;
}

.wk-cost-input-v53 b {
    right: 12px !important;

    color: #526a6f !important;

    font-size: 10px !important;
    font-weight: 760 !important;
}


/* Weitere Kosten */

.wk-additional-cost-v57 {
    padding: 15px 16px !important;

    border: 1px solid #dce5e2 !important;
    border-radius: 13px !important;

    background: #f8faf9 !important;
}

.wk-additional-cost-v57 > p {
    margin-top: 10px !important;

    color: #68797d !important;

    font-size: 10px !important;
}


/* Kostenübersicht */

.wk-cost-table-v53 {
    overflow: hidden !important;

    border: 1px solid #d8e2df !important;
    border-radius: 14px !important;

    background: #ffffff !important;
}

.wk-cost-head-v53,
.wk-cost-row-v53 {
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(100px, 0.5fr)
        minmax(100px, 0.5fr) !important;
    gap: 14px !important;
}

.wk-cost-head-v53 {
    padding: 12px 15px !important;

    background: #20373d !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.wk-cost-row-v53 {
    padding: 14px 15px !important;

    border-bottom: 1px solid #e4ebe8 !important;
}

.wk-cost-row-v53 > div strong {
    color: #294147 !important;

    font-size: 12px !important;
}

.wk-cost-row-v53 > div small {
    margin-top: 4px !important;

    color: #748286 !important;

    font-size: 10px !important;
    line-height: 1.4 !important;
}

.wk-cost-row-v53 > span {
    color: #1e373d !important;

    font-size: 14px !important;
    font-weight: 820 !important;
}

.wk-cost-row-v53 > span small {
    color: #78868a !important;

    font-size: 9px !important;
}

.wk-cost-sum-v53 {
    border-top: 2px solid #8ea79f !important;

    background:
        linear-gradient(
            90deg,
            #eaf2ef,
            #f5f8f7
        ) !important;
}


/* Erläuterungen */

.wk-cost-note-final-v55,
.wk-finance-note-v47 {
    margin-top: 0 !important;
    padding: 15px 17px !important;

    border-left: 4px solid #5f847a !important;
    border-radius: 10px !important;

    background: #f2f6f4 !important;
}

.wk-cost-note-final-v55 strong,
.wk-finance-note-v47 strong {
    margin-bottom: 6px !important;

    color: #294b43 !important;

    font-size: 12px !important;
    font-weight: 820 !important;
}

.wk-cost-note-final-v55 p,
.wk-finance-note-v47 p {
    max-width: none !important;

    color: #5f7075 !important;

    font-size: 11px !important;
    line-height: 1.65 !important;
}


/* Verkaufseingaben */

.wk-sale-controls-v47 {
    display: grid !important;
    grid-template-columns:
        minmax(145px, 1.08fr)
        minmax(125px, 1fr)
        minmax(125px, 1fr) !important;
    gap: 12px !important;
}

.wk-sale-controls-v47 label > span {
    min-height: 0 !important;
    margin-bottom: 7px !important;

    color: #2d464b !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}

.wk-sale-controls-v47 select,
.wk-sale-controls-v47 input {
    min-height: 48px !important;
    padding: 0 12px !important;

    border: 1px solid #cfdad7 !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #173038 !important;

    font-size: 13px !important;
    font-weight: 740 !important;
}

.wk-sale-controls-v47 select:focus,
.wk-sale-controls-v47 input:focus {
    border-color: #52796e !important;
    outline: 4px solid rgba(82, 121, 110, 0.13) !important;
}

.wk-sale-assumption-v195 {
    margin: -3px 0 0 !important;
    padding: 10px 12px !important;

    border-radius: 9px !important;

    background: #f4f7f5 !important;
    color: #65767a !important;

    font-size: 10px !important;
    line-height: 1.55 !important;
}


/* Verkaufshauptwert */

.wk-sale-main-v47 {
    padding: 22px !important;

    border-radius: 15px !important;

    background:
        linear-gradient(
            145deg,
            #172c33,
            #244248
        ) !important;
}

.wk-sale-main-v47 > span {
    margin-bottom: 10px !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 11px !important;
    font-weight: 760 !important;
}

.wk-sale-main-v47 > strong {
    color: #ffffff !important;

    font-size: clamp(35px, 4vw, 49px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
}

.wk-sale-main-v47 > small {
    margin: 8px 0 18px !important;

    color: rgba(255, 255, 255, 0.67) !important;

    font-size: 10px !important;
    line-height: 1.45 !important;
}

.wk-sale-main-v47 dl {
    gap: 0 !important;
}

.wk-sale-main-v47 dl > div {
    padding: 10px 0 !important;

    border-top:
        1px solid rgba(255, 255, 255, 0.14) !important;
}

.wk-sale-main-v47 dt,
.wk-sale-main-v47 dd {
    font-size: 11px !important;
    line-height: 1.45 !important;
}

.wk-sale-main-v47 dd {
    color: rgba(255, 255, 255, 0.97) !important;

    font-weight: 820 !important;
}


/* Verkaufskosten und Planungskorridor */

.wk-sale-cost-explanation-v52,
.wk-sale-range-v47 {
    padding: 17px !important;

    border: 1px solid #d9e3e0 !important;
    border-radius: 13px !important;
}

.wk-sale-cost-explanation-v52 {
    background:
        linear-gradient(
            135deg,
            #f5f8f6,
            #fbfaf1
        ) !important;
}

.wk-sale-range-v47 {
    background: #f2f6f4 !important;
}

.wk-sale-cost-explanation-v52 > header strong {
    color: #263f44 !important;

    font-size: 13px !important;
    font-weight: 820 !important;
}

.wk-sale-cost-items-v52 > span {
    padding: 10px 11px !important;

    color: #4c6065 !important;

    font-size: 10px !important;
    line-height: 1.45 !important;
}

.wk-sale-range-v47 > span {
    color: #536b70 !important;

    font-size: 11px !important;
    font-weight: 780 !important;
}

.wk-sale-range-v47 > strong {
    margin-top: 3px !important;

    color: #1c383f !important;

    font-size: clamp(22px, 2.4vw, 30px) !important;
    font-weight: 840 !important;
    line-height: 1.18 !important;
}


/* Bei mittleren Breiten untereinander statt zu schmal. */

@media (max-width: 1250px) {
    .row-2:has(#ck-econ):has(#ck-net) {
        grid-template-columns: 1fr !important;
    }

    .card:has(#wk-holding-final-v47) > h2,
    .card:has(#wk-holding-final-v47) > h3,
    .card:has(#wk-sale-final-v47) > h2,
    .card:has(#wk-sale-final-v47) > h3 {
        max-width: none !important;
    }
}

@media (max-width: 720px) {
    .row-2:has(#ck-econ):has(#ck-net) > .card {
        padding: 18px !important;
    }

    .wk-primary-cost-input-v54
        .wk-cost-input-v53,
    .wk-sale-controls-v47 {
        grid-template-columns: 1fr !important;
    }

    .wk-cost-head-v53 {
        display: none !important;
    }

    .wk-cost-row-v53 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(85px, auto) !important;
    }

    .wk-cost-row-v53 > span:nth-of-type(2) {
        display: none !important;
    }

    .wk-sale-main-v47 > strong {
        font-size: 35px !important;
    }

    .wk-sale-cost-items-v52 {
        grid-template-columns: 1fr !important;
    }
}


/* WK_SALE_DEBT_SOURCE_V205 */

.wk-sale-field-note-v205 {
    display: block;
    margin-top: 6px;

    color: #6b7b7f;

    font-size: 9px;
    font-weight: 550;
    line-height: 1.45;
}

.wk-sale-controls-v47 label:has(
    #wk-sale-debt-v47
) {
    display: flex;
    flex-direction: column;
}

.wk-sale-controls-v47 label:has(
    #wk-sale-debt-v47
) .wk-money-v47 {
    width: 100%;
}