/* Shared corrections for the compact credit-guide template. */
.credit-check-hero h1 {
    font-size: clamp(2.65rem, 4vw, 3.4rem);
    overflow-wrap: normal;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.credit-check-source-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.credit-check-source-list > a {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    grid-template-areas:
        "number type"
        "number title";
    gap: 0.2rem 0.75rem;
    align-content: start;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--campaign-line);
    border-top: 4px solid var(--campaign-green);
    border-radius: 14px;
    background: var(--campaign-white);
    color: var(--campaign-ink);
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 59, 82, 0.07);
}

.credit-check-source-list > a > span {
    grid-area: number;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--campaign-petrol);
    color: var(--campaign-white);
    font-weight: 800;
    place-items: center;
}

.credit-check-source-list > a > small {
    grid-area: type;
    color: var(--campaign-green-dark);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.credit-check-source-list > a > strong {
    grid-area: title;
    min-width: 0;
    color: var(--campaign-petrol-dark);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.credit-check-source-list > a:hover,
.credit-check-source-list > a:focus-visible {
    border-color: var(--campaign-green);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 59, 82, 0.12);
}

@media (max-width: 991.98px) {
    .credit-check-source-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .credit-check-source-list {
        grid-template-columns: 1fr;
    }
}

/* Comparison sections: two clearly differentiated decision surfaces. */
.credit-check-page .credit-check-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.credit-check-page .credit-check-compare > article {
    position: relative;
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid var(--campaign-line);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--campaign-white), #edf4f6);
    box-shadow: 0 14px 30px rgba(0, 59, 82, 0.08);
    overflow: hidden;
}

.credit-check-page .credit-check-compare > article::after {
    position: absolute;
    right: -2.2rem;
    bottom: -2.8rem;
    width: 8rem;
    height: 8rem;
    border: 1.2rem solid rgba(2, 81, 112, 0.06);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.credit-check-page .credit-check-compare > article:nth-child(2) {
    border-color: #dce5bb;
    background: linear-gradient(145deg, var(--campaign-white), var(--campaign-green-pale));
}

.credit-check-page .credit-check-compare > article:nth-child(2)::after {
    border-color: rgba(102, 120, 0, 0.08);
}

.credit-check-page .credit-check-compare article > p:first-child {
    display: inline-flex;
    margin-bottom: 0.65rem;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    background: var(--campaign-petrol);
    color: var(--campaign-white);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.credit-check-page .credit-check-compare article:nth-child(2) > p:first-child {
    background: var(--campaign-green);
}

.credit-check-page .credit-check-compare h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 0.85rem;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.credit-check-page .credit-check-compare ul {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.credit-check-page .credit-check-compare li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
}

.credit-check-page .credit-check-compare li::before {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.08rem;
    border-radius: 50%;
    background: var(--campaign-petrol);
    color: var(--campaign-white);
    content: "›";
    font-weight: 900;
    line-height: 1;
    place-items: center;
}

.credit-check-page .credit-check-compare article:nth-child(2) li::before {
    background: var(--campaign-green);
}

/* Outcome cards distinguish correction rights from honest limitations. */
.credit-check-page .credit-check-outcomes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.credit-check-page .credit-check-outcomes > article {
    min-width: 0;
    padding: 1.2rem;
    border: 1px solid #dce5bb;
    border-top: 4px solid var(--campaign-green);
    border-radius: 15px;
    background: linear-gradient(145deg, var(--campaign-white), var(--campaign-green-pale));
}

.credit-check-page .credit-check-outcomes > article:nth-child(n + 3) {
    border-color: var(--campaign-line);
    border-top-color: var(--campaign-petrol);
    background: linear-gradient(145deg, var(--campaign-white), #edf4f6);
}

.credit-check-page .credit-check-outcomes article > span {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    background: var(--campaign-green);
    color: var(--campaign-white);
    font-size: 1.15rem;
    font-weight: 900;
    place-items: center;
}

.credit-check-page .credit-check-outcomes article:nth-child(n + 3) > span {
    background: var(--campaign-petrol);
}

.credit-check-page .credit-check-outcomes h3 {
    font-size: 1.05rem;
}

.credit-check-page .credit-check-outcomes p {
    margin: 0;
}

/* Related reading is a real two-card component, not a boxed link row. */
.credit-check-page .credit-check-related {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.15rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.credit-check-page .credit-check-related > a {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 1.1rem 3.2rem 1.1rem 1.15rem;
    border: 1px solid var(--campaign-line);
    border-radius: 14px;
    background: var(--campaign-white);
    color: var(--campaign-ink);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 59, 82, 0.07);
}

.credit-check-page .credit-check-related > a::after {
    position: absolute;
    top: 50%;
    right: 1.05rem;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--campaign-green);
    color: var(--campaign-white);
    content: "›";
    font-weight: 900;
    transform: translateY(-50%);
    place-items: center;
}

.credit-check-page .credit-check-related > a:hover,
.credit-check-page .credit-check-related > a:focus-visible {
    border-color: var(--campaign-green);
    transform: translateY(-1px);
}

.credit-check-page .credit-check-related span {
    color: var(--campaign-green-dark);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.credit-check-page .credit-check-related strong {
    color: var(--campaign-petrol-dark);
    overflow-wrap: anywhere;
}

/* The selected process sections become compact visual timelines. */
#auskunft .credit-check-process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#puffer .credit-check-process,
#entscheidung .credit-check-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#auskunft .credit-check-process > li,
#puffer .credit-check-process > li,
#entscheidung .credit-check-process > li {
    display: block;
    min-width: 0;
    padding: 1.15rem;
    border-top: 4px solid var(--campaign-petrol);
    background: linear-gradient(145deg, var(--campaign-white), #edf4f6);
}

#auskunft .credit-check-process li > span,
#puffer .credit-check-process li > span,
#entscheidung .credit-check-process li > span {
    margin-bottom: 0.85rem;
    box-shadow: 0 0 0 5px rgba(102, 120, 0, 0.1);
}

/* Calculators: stronger hierarchy, clearer controls and results. */
#rechner .loan-planner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
    gap: 1.1rem;
    align-items: stretch;
    background:
        radial-gradient(circle at 92% 10%, rgba(102, 120, 0, 0.1), transparent 28%),
        linear-gradient(145deg, var(--campaign-white), #edf4f6);
}

#rechner .loan-planner__controls {
    grid-template-columns: 1fr;
    margin: 0;
}

#rechner .loan-planner__controls > label,
#vergleich .loan-planner__controls > label {
    padding: 1rem;
    border: 1px solid var(--campaign-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
}

#rechner .loan-planner__result {
    display: grid;
    align-content: center;
    border: 0;
    background: linear-gradient(145deg, var(--campaign-ink), var(--campaign-petrol));
    color: var(--campaign-white);
}

#rechner .loan-planner__result h3,
#rechner .loan-planner__result strong {
    color: var(--campaign-white);
}

#rechner .loan-planner__result .loan-planner__status {
    justify-self: center;
}

#rechner .loan-planner__note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 0.25rem;
    text-align: center;
}

#vergleich .loan-planner__table > article {
    position: relative;
    border-top: 5px solid var(--campaign-petrol);
    box-shadow: 0 12px 28px rgba(0, 59, 82, 0.08);
    overflow: hidden;
}

#vergleich .loan-planner__table > article:nth-child(2) {
    border-top-color: var(--campaign-green);
    background: linear-gradient(145deg, var(--campaign-white), var(--campaign-green-pale));
}

#vergleich .loan-planner__table > article:nth-child(3) {
    border-top-color: var(--campaign-ink-soft);
}

.loan-planner input[type="range"] {
    height: 0.45rem;
    border-radius: 999px;
    background: #d9e2e6;
}

@media (max-width: 991.98px) {
    #auskunft .credit-check-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #puffer .credit-check-process,
    #entscheidung .credit-check-process,
    .credit-check-page .credit-check-outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #rechner .loan-planner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .credit-check-page .credit-check-compare,
    .credit-check-page .credit-check-outcomes,
    .credit-check-page .credit-check-related,
    #auskunft .credit-check-process,
    #puffer .credit-check-process,
    #entscheidung .credit-check-process {
        grid-template-columns: 1fr;
    }

    .credit-check-page .credit-check-compare > article,
    .credit-check-page .credit-check-outcomes > article,
    #auskunft .credit-check-process > li,
    #puffer .credit-check-process > li,
    #entscheidung .credit-check-process > li {
        border-radius: 14px;
    }
}