﻿:root {
    --seo-ink: #0f172a;
    --seo-text: #1f2937;
    --seo-muted: #475569;
    --seo-line: rgba(15,23,42,.10);
    --seo-line-2: rgba(15,23,42,.14);
    --seo-surface: #ffffff;
    --seo-surface-2: #fbfbfd;
    --seo-wash: #f3f4f6;
    --seo-accent: #005bac;
    --seo-warm: #ff5c1c;
    --seo-danger: #e60023;
    --seo-radius-lg: 28px;
    --seo-radius-md: 20px;
    --seo-radius-sm: 14px;
    --seo-shadow-1: 0 10px 30px rgba(2,6,23,.08);
    --seo-shadow-2: 0 22px 60px rgba(2,6,23,.12);
    --seo-shadow-3: 0 30px 80px rgba(2,6,23,.16);
}

.seo .intro-blok {
    background: transparent !important;
    color: var(--seo-text) !important;
    padding: clamp(2.25rem, 4.5vw, 4.5rem) 0 !important;
    overflow: visible !important;
    isolation: auto !important;
}

    .seo .intro-blok::before {
        content: none !important;
    }

    .seo .intro-blok .container {
        position: relative;
    }

    .seo .intro-blok .row {
        gap: 0 !important;
    }

    .seo .intro-blok .col-md-7,
    .seo .intro-blok .col-md-10,
    .seo .intro-blok .col-lg-8 {
        padding-inline: 0 !important;
        max-width: none !important;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }

        .seo .intro-blok .col-md-7::before {
            content: none !important;
        }

    .seo .intro-blok h2,
    .seo .intro-blok h2::after,
    .seo .intro-blok .lead {
        all: unset;
    }

.seo .seo-content-box {
    position: relative;
    background: linear-gradient(180deg, var(--seo-surface) 0%, var(--seo-surface-2) 100%) !important;
    border-radius: var(--seo-radius-lg) !important;
    border: 1px solid var(--seo-line) !important;
    box-shadow: var(--seo-shadow-2) !important;
    color: var(--seo-text) !important;
    padding: clamp(1.5rem, 3vw, 2.6rem) !important;
    overflow: hidden;
    transform: translateZ(0);
}

    .seo .seo-content-box::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: radial-gradient(900px 520px at 0% 0%, rgba(0,91,172,.10), transparent 60%), radial-gradient(900px 520px at 100% 0%, rgba(255,92,28,.10), transparent 60%);
        pointer-events: none;
        opacity: .9;
    }

    .seo .seo-content-box::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
        pointer-events: none;
        opacity: .55;
    }

    .seo .seo-content-box > * {
        position: relative;
        z-index: 1;
    }

.seo .seo-pagina-titel {
    margin: 0 0 1.25rem 0 !important;
    font-weight: 900 !important;
    font-size: clamp(1.65rem, 1.1rem + 1.2vw, 2.6rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
    color: var(--seo-ink) !important;
}

    .seo .seo-pagina-titel::after {
        content: "";
        display: block;
        height: 3px;
        width: 78px;
        margin-top: .9rem;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--seo-warm), rgba(255,92,28,0));
        opacity: .95;
    }

.seo .seo-content-box p {
    color: var(--seo-text) !important;
    line-height: 1.9 !important;
    font-size: clamp(1rem, .2vw + .98rem, 1.08rem) !important;
    margin-bottom: 1rem !important;
    text-wrap: pretty;
}

    .seo .seo-content-box p:last-child {
        margin-bottom: 0 !important;
    }

.seo .seo-content-box a {
    color: color-mix(in oklab, var(--seo-accent) 85%, black 15%);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

    .seo .seo-content-box a:hover {
        color: var(--seo-accent);
    }

.seo .seo-content-box ul {
    margin: 1.15rem 0 1.35rem 1.15rem !important;
    padding-left: .85rem !important;
}

.seo .seo-content-box li {
    margin: .45rem 0 !important;
    color: var(--seo-text) !important;
}

    .seo .seo-content-box li::marker {
        color: color-mix(in oklab, var(--seo-warm) 70%, var(--seo-danger) 30%);
    }

.seo .snippet-blok {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%) !important;
    border-radius: var(--seo-radius-md) !important;
    border: 1px solid rgba(2,6,23,.06) !important;
    box-shadow: var(--seo-shadow-1) !important;
    padding: clamp(1.25rem, 2.3vw, 2rem) !important;
    color: var(--seo-text) !important;
    overflow: hidden;
}

    .seo .snippet-blok::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(180deg, var(--seo-danger), color-mix(in oklab, var(--seo-danger) 30%, white 70%));
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
    }

    .seo .snippet-blok::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(600px 240px at 18% 0%, rgba(255,92,28,.14), transparent 60%), radial-gradient(600px 240px at 90% 20%, rgba(0,91,172,.10), transparent 55%);
        pointer-events: none;
        opacity: .65;
    }

    .seo .snippet-blok > * {
        position: relative;
        z-index: 1;
    }

    .seo .snippet-blok h2 {
        margin: 0 0 .75rem 0 !important;
        font-weight: 900 !important;
        font-size: clamp(1.15rem, .6vw + 1.1rem, 1.55rem) !important;
        letter-spacing: -0.02em !important;
        color: color-mix(in oklab, var(--seo-warm) 78%, var(--seo-ink) 22%) !important;
        display: flex;
        align-items: center;
        gap: .55rem;
    }

        .seo .snippet-blok h2::after {
            content: "";
            display: inline-block;
            height: 2px;
            flex: 1 1 auto;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(255,92,28,.55), rgba(255,92,28,0));
            margin-left: .35rem;
        }

    .seo .snippet-blok p {
        margin: 0 !important;
        color: var(--seo-muted) !important;
        line-height: 1.85 !important;
        font-size: clamp(.98rem, .15vw + .97rem, 1.06rem) !important;
    }

.seo .faq-section {
    padding: 0 !important;
    background: transparent !important;
}

    .seo .faq-section h2 {
        margin: 0 0 1.1rem 0 !important;
        font-weight: 900 !important;
        font-size: clamp(1.25rem, 1rem + .95vw, 2.1rem) !important;
        letter-spacing: -0.02em !important;
        color: var(--seo-ink) !important;
    }

.seo .accordion {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.seo .accordion-item {
    border: 1px solid var(--seo-line-2) !important;
    border-radius: var(--seo-radius-md) !important;
    overflow: hidden !important;
    background: var(--seo-surface) !important;
    box-shadow: var(--seo-shadow-1) !important;
    transform: translateZ(0);
}

.seo .accordion-button {
    font-weight: 800 !important;
    padding: 1.05rem 1.15rem !important;
    background: radial-gradient(900px 260px at 10% 0%, rgba(0,91,172,.10), transparent 55%), linear-gradient(180deg, #ffffff, #fbfbfd) !important;
    color: var(--seo-ink) !important;
    border: 0 !important;
    box-shadow: none !important;
}

    .seo .accordion-button::after {
        filter: saturate(1.1);
        opacity: .9;
    }

    .seo .accordion-button:hover {
        background: radial-gradient(900px 260px at 10% 0%, rgba(0,91,172,.14), transparent 55%), linear-gradient(180deg, #ffffff, #fafafa) !important;
    }

    .seo .accordion-button:focus {
        box-shadow: 0 0 0 4px rgba(0,91,172,.18) !important;
    }

    .seo .accordion-button:not(.collapsed) {
        color: var(--seo-ink) !important;
        background: radial-gradient(900px 260px at 10% 0%, rgba(255,92,28,.12), transparent 55%), linear-gradient(180deg, #ffffff, #fbfbfd) !important;
    }

.seo .accordion-collapse {
    border-top: 1px solid rgba(15,23,42,.08) !important;
}

.seo .accordion-body {
    background: #ffffff !important;
    color: var(--seo-muted) !important;
    line-height: 1.9 !important;
    font-size: clamp(.98rem, .15vw + .97rem, 1.06rem) !important;
    padding: 1.05rem 1.15rem 1.2rem !important;
}

    .seo .accordion-body p {
        margin: 0 0 .85rem 0 !important;
    }

        .seo .accordion-body p:last-child {
            margin-bottom: 0 !important;
        }

    .seo .accordion-body a {
        color: var(--seo-accent);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 2px;
    }

        .seo .accordion-body a:hover {
            color: color-mix(in oklab, var(--seo-accent) 78%, black 22%);
        }

@media (max-width: 991px) {
    .seo .seo-content-box {
        border-radius: 24px !important;
        padding: 1.35rem !important;
        box-shadow: 0 16px 44px rgba(2,6,23,.10) !important;
    }

    .seo .snippet-blok {
        border-radius: 18px !important;
    }

    .seo .accordion-item {
        border-radius: 18px !important;
    }

    .seo .accordion-button {
        padding: 1rem 1rem !important;
    }

    .seo .accordion-body {
        padding: 1rem 1rem 1.1rem !important;
    }
}

@media (max-width: 575px) {
    .seo .seo-pagina-titel::after {
        width: 62px;
    }

    .seo .snippet-blok h2 {
        flex-direction: column;
        align-items: flex-start;
    }

        .seo .snippet-blok h2::after {
            width: 120px;
            margin-left: 0;
            margin-top: .35rem;
        }
}

@media (prefers-reduced-motion: reduce) {
    .seo .seo-content-box,
    .seo .snippet-blok,
    .seo .accordion-item,
    .seo .accordion-button {
        transition: none !important;
        animation: none !important;
    }
}
/* interne link blok – css-only oplossing */
.seo .seo-content-box p + ul {
    list-style: none;
    padding: 0;
    margin: .6rem 0 0 0;
}

    .seo .seo-content-box p + ul li {
        margin: 0;
    }

        .seo .seo-content-box p + ul li a {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .55rem .95rem;
            border-radius: 999px;
            font-weight: 800;
            font-size: .95rem;
            color: var(--seo-accent);
            background: rgba(0,91,172,.08);
            text-decoration: none;
            border: 1px solid rgba(0,91,172,.18);
            transition: background .2s ease, transform .18s ease, box-shadow .18s ease;
        }

            .seo .seo-content-box p + ul li a:hover {
                background: rgba(0,91,172,.14);
                transform: translateY(-1px);
                box-shadow: 0 8px 20px rgba(0,91,172,.18);
            }
.interne-links {
    margin-top: 22px;
}

    .interne-links h3 {
        margin: 0 0 10px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #111827;
    }

    .interne-links ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .interne-links li {
        margin: 0;
    }

    .interne-links a,
    .interne-links a:visited {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        min-height: 0 !important;
        display: inline-flex !important;
        align-items: baseline;
        gap: 8px;
        font-weight: 600;
        color: #0f172a;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease, transform .15s ease;
        transform: translateZ(0);
        will-change: transform;
    }

        .interne-links a::after {
            content: "→";
            font-weight: 600;
            opacity: .45;
            transform: translateX(0);
            transition: opacity .15s ease, transform .15s ease;
        }

@media (hover: hover) and (pointer: fine) {
    .interne-links a:hover {
        color: var(--ms-primary-700);
        transform: translateY(-1px);
    }

        .interne-links a:hover::after {
            opacity: .85;
            transform: translateX(2px);
        }
}

.interne-links a:focus-visible {
    outline: 3px solid rgba(37, 100, 207, .18);
    outline-offset: 4px;
    border-radius: 10px;
    color: var(--ms-primary-700);
}

@media (prefers-reduced-motion: reduce) {
    .interne-links a,
    .interne-links a::after {
        transition: none;
    }
}

@media (max-width: 640px) {
    .interne-links ul {
        gap: 12px;
    }

    .interne-links a,
    .interne-links a:visited {
        font-size: 1rem;
    }
}
