/* =====================================================================
 * BSH Barrierefreiheitserklärung Widget – Styles
 *
 * Autor: Luca Petersen | Com&Sons  |  https://comandsons.com
 * ===================================================================== */

.bsh-a11y {
    --bsh-a11y-bg:     #0c2344;
    --bsh-a11y-accent: #4283c4;
    --bsh-a11y-shape:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20282%20120.14%27%3E%3Cpath%20fill%3D%27%234283c4%27%20d%3D%27M113.39%2C0h168.61v6.76c0%2C62.58-50.81%2C113.39-113.39%2C113.39H0v-6.76C0%2C50.81%2C50.81%2C0%2C113.39%2C0Z%27%20transform%3D%27translate(282%20120.14)%20rotate(-180)%27/%3E%3C/svg%3E");

    max-width: 1600px;
    margin: 0 auto;
    padding: 48px 32px;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

.bsh-a11y *,
.bsh-a11y *::before,
.bsh-a11y *::after { box-sizing: border-box; }

/* ── Header ──────────────────────────────────────────── */

.bsh-a11y__badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bsh-a11y-accent);
    margin-bottom: 12px;
}

.bsh-a11y__title {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 750;
    line-height: 1.06;
    color: #0c2344;
    margin: 0 0 40px;
    letter-spacing: -0.03em;
}

/* ── Content ─────────────────────────────────────────── */

.bsh-a11y__content h2 {
    font-size: 20px;
    font-weight: 700;
    color: #0c2344;
    margin: 0 0 14px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.bsh-a11y__content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0c2344;
    margin: 0 0 10px;
    line-height: 1.3;
}

.bsh-a11y__content p {
    margin: 0 0 16px;
}

.bsh-a11y__content ul {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}

.bsh-a11y__content li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.bsh-a11y__content li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--bsh-a11y-accent);
    font-weight: 700;
}

.bsh-a11y__content a {
    color: var(--bsh-a11y-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.bsh-a11y__content a:hover {
    color: #0c2344;
}

/* ── Sections ────────────────────────────────────────── */

.bsh-a11y__section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(15, 27, 45, .06);
}

.bsh-a11y__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ── Contact card – footer style (blue bg + organic shape) ── */

.bsh-a11y__contact-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(600px 300px at 15% 0%,  rgba(66,131,196,.20), transparent 55%),
        radial-gradient(500px 250px at 100% 20%, rgba(66,131,196,.18), transparent 60%),
        var(--bsh-a11y-bg);
    border-radius: 0;
    margin-top: 20px;
    color: rgba(255, 255, 255, .86);
}

.bsh-a11y__contact-card::before {
    content: "";
    position: absolute;
    top: -16px; left: -14px;
    width: 200px; height: 86px;
    background-image: var(--bsh-a11y-shape);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .22;
    pointer-events: none;
}

.bsh-a11y__contact-card::after {
    content: "";
    position: absolute;
    right: -16px; bottom: -20px;
    width: 240px; height: 103px;
    background-image: var(--bsh-a11y-shape);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .14;
    pointer-events: none;
    transform: rotate(180deg);
}

.bsh-a11y__contact-card-inner {
    position: relative;
    z-index: 1;
    padding: 28px 32px;
    font-style: normal;
    line-height: 1.8;
}

.bsh-a11y__contact-card-inner strong {
    color: #fff;
    font-size: 17px;
}

.bsh-a11y__contact-card a {
    color: rgba(255, 255, 255, .9) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.bsh-a11y__contact-card a:hover {
    color: #fff !important;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 600px) {
    .bsh-a11y {
        padding: 32px 18px;
    }

    .bsh-a11y__title {
        font-size: 28px;
    }

    .bsh-a11y__contact-card-inner {
        padding: 22px 20px;
    }

    .bsh-a11y__section {
        margin-bottom: 28px;
        padding-bottom: 28px;
    }
}