/*
 * WohnKompass – vollständiger Liquiditätsbedarf v53
 */

.wk-holding-v53 {
    display: grid;
    gap: 12px;

    min-width: 0;
}


/* Gesamtwert */

.wk-holding-total-v53 {
    padding: 18px;

    border: 1px solid rgba(78, 119, 108, 0.40);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #edf5f1,
            #f8faf9
        );
}

.wk-holding-total-v53 > span {
    display: block;
    margin-bottom: 9px;

    color: #607276;

    font-size: 11px;
    font-weight: 750;
}

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

    max-width: 100%;

    color: #172b31;

    font-size: clamp(31px, 3.5vw, 43px);
    line-height: 1;
    overflow-wrap: anywhere;
}

.wk-holding-total-v53 strong small {
    color: #617276;

    font-size: 11px;
}

.wk-holding-total-v53 > p {
    margin: 8px 0 0;

    color: #31584f;

    font-size: 13px;
    font-weight: 800;
}


/* Eingaben */

.wk-cost-inputs-v53 {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wk-cost-input-v53 {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(150px, 0.55fr);
    gap: 12px;
    align-items: center;

    min-width: 0;
    padding: 13px 14px;

    border: 1px solid #dce4e1;
    border-radius: 11px;

    background: #ffffff;
}

.wk-cost-input-v53 > span {
    color: #2b4247;

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

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

    color: #768386;

    font-size: 9px;
    font-weight: 500;
}

.wk-cost-input-v53 > div {
    position: relative;
    min-width: 0;
}

.wk-cost-input-v53 input {
    width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 0 78px 0 11px;

    box-sizing: border-box;

    border: 1px solid #d5dfdb;
    border-radius: 9px;

    background: #ffffff;
    color: #172a30;

    font: inherit;
    font-size: 14px;
    font-weight: 750;

    appearance: textfield;
    -moz-appearance: textfield;
}

/*
 * Entfernt Spinner in Chromium/WebKit, falls der Browser
 * ein Feld dennoch als numerisch interpretiert.
 */
.wk-cost-input-v53 input::-webkit-inner-spin-button,
.wk-cost-input-v53 input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.wk-cost-input-v53 b {
    position: absolute;
    right: 10px;
    top: 50%;

    color: #69787b;

    font-size: 9px;
    white-space: nowrap;

    transform: translateY(-50%);
}

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


/* Tabelle */

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

    border: 1px solid #dce4e1;
    border-radius: 13px;

    background: #ffffff;
}

.wk-cost-head-v53,
.wk-cost-row-v53 {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(100px, 0.48fr)
        minmax(100px, 0.48fr);
    gap: 12px;
    align-items: center;
}

.wk-cost-head-v53 {
    padding: 10px 14px;

    background: #17272f;
    color: #ffffff;

    font-size: 10px;
    font-weight: 750;
}

.wk-cost-head-v53 span:not(:first-child) {
    text-align: right;
}

.wk-cost-row-v53 {
    padding: 12px 14px;

    border-bottom: 1px solid #e3e9e6;
}

.wk-cost-row-v53:last-child {
    border-bottom: 0;
}

.wk-cost-row-v53 > div strong {
    display: block;

    color: #344b50;

    font-size: 11px;
}

.wk-cost-row-v53 > div small {
    display: block;
    margin-top: 3px;

    color: #788588;

    font-size: 8px;
}

.wk-cost-row-v53 > span {
    min-width: 0;

    color: #21373c;

    font-size: 13px;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.wk-cost-row-v53 > span small {
    display: block;
    margin-top: 2px;

    color: #788588;

    font-size: 8px;
    font-weight: 600;
}

.wk-cost-sum-v53 {
    background: #edf4f1;
}

.wk-cost-sum-v53 strong,
.wk-cost-sum-v53 > span {
    color: #172a30 !important;
    font-weight: 850 !important;
}


/* Erläuterungen */

.wk-cost-note-v53 {
    padding: 13px 15px;

    border-left: 4px solid #66877e;
    border-radius: 9px;

    background: #f3f6f4;
}

.wk-cost-note-v53 strong {
    display: block;
    margin-bottom: 4px;

    color: #304b45;

    font-size: 11px;
}

.wk-cost-note-v53 p,
.wk-cost-details-v53 p {
    margin: 0;

    color: #657478;

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

.wk-cost-details-v53 {
    padding: 11px 14px;

    border: 1px solid #e0e5d5;
    border-radius: 10px;

    background: #f8f7ec;
}

.wk-cost-details-v53 summary {
    cursor: pointer;

    color: #625d31;

    font-size: 11px;
    font-weight: 750;
}

.wk-cost-details-v53 p {
    margin-top: 9px;
}


/* Responsive */

@media (max-width: 1000px) {
    .wk-cost-inputs-v53 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .wk-cost-input-v53 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wk-cost-head-v53,
    .wk-cost-row-v53 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(78px, auto)
            minmax(78px, auto);
        gap: 7px;

        padding-left: 10px;
        padding-right: 10px;
    }
}


/* WohnKompass V54 – reduzierte Kosteneingaben */

.wk-primary-cost-input-v54
    .wk-cost-input-v53 {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(190px, 0.55fr);
}

.wk-additional-costs-v54 {
    padding: 12px 14px;

    border: 1px solid #dce4e1;
    border-radius: 11px;

    background: #f7f9f8;
}

.wk-additional-costs-v54 > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    cursor: pointer;

    color: #344e49;

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

.wk-additional-costs-v54 > summary small {
    padding: 4px 7px;

    border-radius: 999px;

    background: #e7efeb;
    color: #597069;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wk-additional-costs-v54 > p {
    margin: 10px 0 12px;

    color: #68777a;

    font-size: 10px;
    line-height: 1.5;
}

.wk-additional-costs-v54
    .wk-cost-inputs-v53 {
    grid-template-columns: 1fr;
}

.wk-cost-input-v53 input {
    /*
     * Das Feld bleibt ein Texteingabefeld mit numerischer
     * Bildschirmtastatur. Dadurch entstehen keine Spinner.
     */
    appearance: none !important;
    -moz-appearance: textfield !important;
}

@media (max-width: 700px) {
    .wk-primary-cost-input-v54
        .wk-cost-input-v53 {
        grid-template-columns: 1fr;
    }
}


/* WohnKompass V55 – konsistente Summe und Einordnung */

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

    background:
        linear-gradient(
            90deg,
            #eef3f1,
            #f5f7f6
        ) !important;
}

.wk-cost-sum-v53 > div strong {
    font-size: 11px !important;
}

.wk-cost-sum-v53 > span {
    font-size: 14px !important;
}

.wk-cost-note-final-v55 {
    padding: 14px 15px !important;

    border-left: 4px solid #66877e !important;
    border-radius: 9px !important;

    background: #f3f6f4 !important;
}

.wk-cost-note-final-v55 strong {
    display: block;
    margin-bottom: 5px;

    color: #304b45;

    font-size: 11px !important;
}

.wk-cost-note-final-v55 p {
    max-width: 78ch;
    margin: 0;

    color: #657478;

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

/*
 * Alte, aufklappbare Hinweise werden nicht mehr benötigt.
 */
.wk-cost-details-v53 {
    display: none !important;
}


/* WohnKompass V57 – zusammengefasste optionale Kosten */

.wk-additional-cost-v57 {
    padding: 13px 14px;

    border: 1px solid #dce4e1;
    border-radius: 11px;

    background: #f7f9f8;
}

.wk-additional-cost-v57
    .wk-cost-input-v53 {
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.wk-additional-cost-v57 > p {
    margin: 9px 0 0;

    color: #6c7a7e;

    font-size: 9px;
    line-height: 1.5;
}

/*
 * Der frühere aufklappbare Einzelbereich wird
 * nicht mehr benötigt.
 */
.wk-additional-costs-v54 {
    display: none !important;
}

@media (max-width: 700px) {
    .wk-additional-cost-v57
        .wk-cost-input-v53 {
        grid-template-columns: 1fr;
    }
}