.kredit-hub-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 87% 20%, rgba(158, 183, 28, .2) 0 3px, transparent 4px) 0 0 / 34px 34px,
        radial-gradient(circle at 86% 22%, rgba(2, 81, 112, .09), transparent 34%),
        linear-gradient(145deg, #f9fbfb 0%, #e9f1f3 100%);
}

.kredit-hub-hero::after {
    position: absolute;
    right: -110px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border: 52px solid rgba(2, 81, 112, .05);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.kredit-hub-hero .container {
    position: relative;
    z-index: 1;
}

.kredit-hub-hero__card {
    padding: clamp(24px, 3vw, 34px);
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--campaign-line, #d9e2e6);
    border-radius: 20px;
    box-shadow: var(--campaign-shadow, 0 22px 55px rgba(0, 59, 82, .14));
}

.kredit-hub-hero__card h2 {
    margin: 5px 0 17px;
    font-size: clamp(24px, 3vw, 31px);
}

.kredit-hub-hero__card > p:last-of-type {
    margin: 18px 0 15px;
    color: var(--campaign-muted, #58707d);
    font-size: 14px;
}

.kredit-hub-hero__card > a {
    color: var(--campaign-petrol, #025170);
    font-weight: 800;
    text-decoration: none;
}

.kredit-hub-hero__formula {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.kredit-hub-hero__formula span,
.kredit-hub-hero__formula b {
    padding: 12px 10px;
    background: #f2f6f7;
    border: 1px solid #dce6e9;
    border-radius: 9px;
    color: var(--campaign-ink, #092f43);
    font-size: 13px;
    text-align: center;
}

.kredit-hub-hero__formula i {
    color: var(--campaign-green, #667800);
    font-style: normal;
    font-weight: 900;
}

.kredit-hub-hero__formula b {
    grid-column: 1 / -1;
    color: #fff;
    background: var(--campaign-petrol, #025170);
    border-color: var(--campaign-petrol, #025170);
}

.kredit-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.kredit-principle-grid article,
.kredit-budget-grid article {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--campaign-line, #d9e2e6);
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0, 59, 82, .07);
}

.kredit-principle-grid article > span,
.kredit-budget-grid article > span {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--campaign-petrol, #025170);
    font-size: 12px;
    font-weight: 900;
}

.kredit-principle-grid h3,
.kredit-budget-grid h3 {
    margin: 0 0 9px;
    font-size: 19px;
}

.kredit-principle-grid p,
.kredit-budget-grid p {
    margin: 0;
    color: var(--campaign-muted, #58707d);
    font-size: 14px;
}

.kredit-stage-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 30px 0 0;
    overflow: hidden;
    border: 1px solid #cbdde2;
    border-radius: 14px;
}

.kredit-stage-strip span {
    position: relative;
    display: grid;
    min-height: 68px;
    padding: 12px 15px;
    place-items: center;
    color: var(--campaign-ink, #092f43);
    background: #edf5f7;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.kredit-stage-strip span:nth-child(even) {
    background: #f7f9ef;
}

.kredit-stage-strip span:not(:last-child)::after {
    position: absolute;
    z-index: 1;
    right: -6px;
    color: var(--campaign-petrol, #025170);
    content: ">";
    font-size: 18px;
    font-weight: 900;
}

.kredit-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin: 28px 0 22px;
}

.kredit-type-card {
    --card-accent: #025170;
    position: relative;
    min-height: 218px;
    padding: 23px 21px 48px;
    overflow: hidden;
    color: var(--campaign-ink, #092f43);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-accent) 25%, #d9e2e6);
    border-top: 5px solid var(--card-accent);
    border-radius: 15px;
    box-shadow: 0 13px 30px rgba(0, 59, 82, .07);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.kredit-type-card::before {
    position: absolute;
    top: -45px;
    right: -42px;
    width: 120px;
    height: 120px;
    background: color-mix(in srgb, var(--card-accent) 10%, transparent);
    border-radius: 50%;
    content: "";
}

.kredit-type-card:hover,
.kredit-type-card:focus-visible {
    color: var(--campaign-ink, #092f43);
    box-shadow: 0 18px 38px rgba(0, 59, 82, .13);
    transform: translateY(-3px);
}

.kredit-type-card > span {
    display: block;
    margin-bottom: 11px;
    color: var(--card-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kredit-type-card > strong {
    display: block;
    margin-bottom: 9px;
    font-family: Quicksand, sans-serif;
    font-size: 20px;
}

.kredit-type-card p {
    margin: 0;
    color: var(--campaign-muted, #58707d);
    font-size: 13px;
    line-height: 1.55;
}

.kredit-type-card > b {
    position: absolute;
    right: 20px;
    bottom: 17px;
    color: var(--card-accent);
    font-size: 22px;
}

.kredit-type-card--blue { --card-accent: #176f91; }
.kredit-type-card--green { --card-accent: #667800; }
.kredit-type-card--sand { --card-accent: #8b6c32; }
.kredit-type-card--olive { --card-accent: #7c8e13; }
.kredit-type-card--sky { --card-accent: #287c9e; }
.kredit-type-card--mint { --card-accent: #37796d; }
.kredit-type-card--grey { --card-accent: #5c6d77; }

.kredit-budget-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0;
}

.kredit-budget-grid article:nth-child(even) > span {
    background: var(--campaign-green, #667800);
}

.kredit-budget-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 26px 28px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 255, 255, .14) 0 4px, transparent 5px) 0 0 / 28px 28px,
        linear-gradient(135deg, #025170, #003b52);
    border-radius: 16px;
}

.kredit-budget-action h3,
.kredit-budget-action p {
    color: #fff;
}

.kredit-budget-action h3 { margin: 0 0 7px; }
.kredit-budget-action p { margin: 0; font-size: 14px; opacity: .88; }
.kredit-budget-action .btn { white-space: nowrap; }

.kredit-cost-compass {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    margin: 28px 0;
    overflow: hidden;
    background: #cadbe0;
    border: 1px solid #cadbe0;
    border-radius: 16px;
}

.kredit-cost-compass article {
    padding: 23px 19px;
    background: #fff;
}

.kredit-cost-compass article:nth-child(even) {
    background: #f3f7e8;
}

.kredit-cost-compass span {
    display: block;
    min-height: 43px;
    color: var(--campaign-ink, #092f43);
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.kredit-cost-compass p {
    margin: 8px 0 0;
    color: var(--campaign-muted, #58707d);
    font-size: 12px;
    line-height: 1.55;
}

.kredit-process {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 28px 0 24px;
    padding: 0;
    list-style: none;
}

.kredit-process li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 17px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--campaign-line, #d9e2e6);
    border-radius: 14px;
}

.kredit-process li > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: var(--campaign-petrol, #025170);
    border-radius: 13px;
    font-weight: 900;
}

.kredit-process li:nth-child(3n + 2) > span { background: var(--campaign-green, #667800); }
.kredit-process li:nth-child(3n) > span { color: var(--campaign-ink, #092f43); background: #dbeaa2; }
.kredit-process h3 { margin: 2px 0 6px; font-size: 18px; }
.kredit-process p { margin: 0; color: var(--campaign-muted, #58707d); font-size: 13px; }

.kredit-contract-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 26px 0 20px;
}

.kredit-contract-grid ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--campaign-line, #d9e2e6);
    border-radius: 14px;
    list-style: none;
}

.kredit-contract-grid li {
    position: relative;
    padding-left: 27px;
}

.kredit-contract-grid li::before {
    position: absolute;
    left: 0;
    width: 19px;
    height: 19px;
    border: 2px solid var(--campaign-green, #667800);
    border-radius: 5px;
    content: "";
}

.kredit-contract-grid li::after {
    position: absolute;
    top: 1px;
    left: 5px;
    color: var(--campaign-green, #667800);
    content: "✓";
    font-size: 12px;
    font-weight: 900;
}

.kredit-contract-note {
    padding: 23px 25px;
    background: #edf5f7;
    border-left: 5px solid var(--campaign-petrol, #025170);
    border-radius: 0 13px 13px 0;
}

.kredit-contract-note strong { font-family: Quicksand, sans-serif; font-size: 18px; }
.kredit-contract-note p { margin: 7px 0 9px; }
.kredit-contract-note a { color: var(--campaign-petrol, #025170); font-weight: 800; text-decoration: none; }

.kredit-faq-list {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.kredit-faq-list details {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--campaign-line, #d9e2e6);
    border-radius: 13px;
}

.kredit-faq-list summary {
    position: relative;
    padding: 19px 55px 19px 21px;
    color: var(--campaign-ink, #092f43);
    cursor: pointer;
    font-family: Quicksand, sans-serif;
    font-weight: 700;
    list-style: none;
}

.kredit-faq-list summary::-webkit-details-marker { display: none; }
.kredit-faq-list summary::after {
    position: absolute;
    top: 14px;
    right: 17px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    background: var(--campaign-petrol, #025170);
    border-radius: 50%;
    content: "+";
}
.kredit-faq-list details[open] summary::after { content: "−"; }
.kredit-faq-list details p { margin: 0; padding: 0 21px 20px; color: var(--campaign-muted, #58707d); }

@media (max-width: 1080px) {
    .kredit-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kredit-budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kredit-cost-compass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kredit-cost-compass article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .kredit-hub-hero {
        background:
            radial-gradient(circle at 90% 12%, rgba(158, 183, 28, .18) 0 2px, transparent 3px) 0 0 / 24px 24px,
            linear-gradient(145deg, #f9fbfb 0%, #e9f1f3 100%);
    }
    .kredit-hub-hero::after { display: none; }
    .kredit-hub-hero__card { padding: 21px; border-radius: 14px; }
    .kredit-principle-grid,
    .kredit-process,
    .kredit-contract-grid { grid-template-columns: 1fr; }
    .kredit-stage-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kredit-stage-strip span:not(:last-child)::after { display: none; }
    .kredit-type-card { min-height: 196px; }
    .kredit-budget-action { grid-template-columns: 1fr; gap: 18px; }
    .kredit-budget-action .btn { width: 100%; }
}

@media (max-width: 520px) {
    .kredit-hub-hero__formula span { padding-inline: 5px; font-size: 11px; }
    .kredit-type-grid,
    .kredit-budget-grid,
    .kredit-cost-compass { grid-template-columns: 1fr; }
    .kredit-cost-compass article:last-child { grid-column: auto; }
    .kredit-process li { grid-template-columns: 45px minmax(0, 1fr); padding: 18px; }
    .kredit-process li > span { width: 45px; height: 45px; }
}

@media (prefers-reduced-motion: reduce) {
    .kredit-type-card { transition: none; }
}