@charset "UTF-8";

/*
=========================================================
IT-SACHVERSTÄNDIGER ELLMANN
Wissensbereich – Pilot
Stand: 17.09.2026
=========================================================
*/

.wissen-hero {
    min-height: clamp(300px, 40vh, 430px);

    background:
        linear-gradient(
            145deg,
            var(--brand-darker),
            var(--brand-dark)
        );
}

.wissen-breadcrumb {
    margin:
        0
        0
        2rem;

    font-size: 0.9rem;
}

.wissen-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;

    gap: 0.45rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wissen-breadcrumb li {
    display: flex;
    align-items: center;

    color: var(--muted);
}

.wissen-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.45rem;

    color: var(--border-strong);
}

.wissen-breadcrumb a {
    text-decoration: none;
}

.wissen-breadcrumb a:hover,
.wissen-breadcrumb a:focus-visible {
    text-decoration: underline;
}

.wissen-kicker {
    margin:
        0
        0
        0.55rem !important;

    color:
        var(--brand) !important;

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.wissen-lead {
    margin-bottom: 2rem !important;

    color: var(--text-dark) !important;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.17rem
        );

    line-height: 1.72 !important;
}

.wissen-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 280px),
                1fr
            )
        );

    gap: 1.25rem;

    margin:
        2rem
        0
        3rem;
}

.wissen-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        1.45rem;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-top:
        4px solid
        var(--brand);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-xs);
}

.wissen-card h2,
.wissen-card h3 {
    margin:
        0
        0
        0.65rem !important;

    color:
        var(--heading) !important;

    font-size:
        1.18rem !important;
}

.wissen-card p {
    flex-grow: 1;

    margin-bottom:
        1rem !important;

    color:
        var(--muted) !important;

    font-size:
        0.94rem;
}

.wissen-card a {
    align-self: flex-start;
}

.wissen-status {
    display: inline-block;

    align-self: flex-start;

    padding:
        0.28rem
        0.55rem;

    color:
        var(--muted);

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    font-size:
        0.76rem;
    font-weight: 700;
}

.wissen-quick-answer,
.wissen-boundary,
.wissen-source-box,
.wissen-example {
    margin:
        2rem
        0;

    padding:
        1.35rem
        1.45rem;

    border-radius:
        var(--radius-md);
}

.wissen-quick-answer {
    background:
        var(--brand-soft);

    border:
        1px solid
        #cfdfed;

    border-left:
        4px solid
        var(--brand);
}

.wissen-boundary {
    background:
        #fff8e8;

    border:
        1px solid
        #ecd9a8;

    border-left:
        4px solid
        #a86c00;
}

.wissen-source-box {
    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-top:
        4px solid
        var(--accent);

    box-shadow:
        var(--shadow-xs);
}

.wissen-example {
    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);
}

.wissen-quick-answer h2,
.wissen-boundary h2,
.wissen-source-box h2,
.wissen-example h2 {
    margin-top:
        0 !important;
}

.wissen-checklist {
    margin:
        1rem
        0
        2rem;

    padding-left:
        1.35rem;
}

.wissen-checklist li {
    margin-bottom:
        0.75rem;

    line-height:
        1.67;
}

.wissen-meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        0.55rem
        1.2rem;

    margin:
        0
        0
        2rem;

    padding:
        0.85rem
        1rem;

    color:
        var(--muted);

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-sm);

    font-size:
        0.86rem;
}

.wissen-source-list {
    margin:
        1rem
        0
        0;

    padding-left:
        1.2rem;
}

.wissen-source-list li {
    margin-bottom:
        0.75rem;
}

.wissen-service-cta {
    margin:
        3.5rem
        0
        1rem;

    padding:
        clamp(
            1.5rem,
            4vw,
            2rem
        );

    color:
        var(--text);

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-top:
        4px solid
        var(--brand);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);
}

.wissen-service-cta-content {
    display: grid;

    grid-template-columns:
        120px
        1fr;

    align-items: center;

    gap:
        1.4rem;
}

.wissen-service-cta img {
    width:
        120px;
    height:
        120px;

    object-fit:
        cover;

    border-radius:
        50%;

    box-shadow:
        var(--shadow-sm);
}

.wissen-service-cta h2 {
    margin-top:
        0 !important;

    font-size:
        clamp(
            1.35rem,
            3vw,
            1.75rem
        ) !important;
}

.wissen-service-cta p {
    margin-bottom:
        1rem !important;
}

.wissen-source-label {
    display: block;

    margin-bottom:
        0.15rem;

    color:
        var(--heading);

    font-weight:
        800;
}

.wissen-method-chain {
    display: grid;

    gap:
        0.7rem;

    margin:
        1.5rem
        0
        2rem;
}

.wissen-method-chain > div {
    padding:
        0.9rem
        1rem;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-left:
        4px solid
        var(--brand);

    border-radius:
        var(--radius-sm);
}

@media (max-width: 650px) {

    .wissen-service-cta-content {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }

    .wissen-service-cta img {
        margin-inline:
            auto;
    }

    .wissen-service-cta .service-button {
        margin-inline:
            auto;
    }
}