/* === Shopware Barrierefreiheit – Section-Design (Namespace .bf-) === */
.barrierefreiheit main.content.bf-page { max-width: none !important; padding: 0 !important; flex-grow: 1 !important; }
.bf-container { max-width: 1100px; padding: 0 0 0 80px; margin: 0; box-sizing: border-box; }
@media (max-width: 768px) { .bf-container { padding: 0 20px; } }
.bf-body { padding-top: 36px; }
.bf-page, .bf-page h1, .bf-page h2, .bf-page h3 { color: #1a2b3c; }

.risk-critical { color: #d9534f; font-weight: bold; }
.risk-high     { color: #f0ad4e; font-weight: bold; }
.risk-medium   { color: #5bc0de; font-weight: bold; }
.risk-low      { color: #5cb85c; font-weight: bold; }

/* Hero */
.bf-hero { background: linear-gradient(135deg, #e9f2fb 0%, #f7fbff 55%, #eef5fb 100%); border-bottom: 1px solid #d4e4f4; padding: 56px 0 50px; }
.bf-hero-grid { display: grid; grid-template-columns: 1fr 280px; gap: 44px; align-items: center; }
.bf-hero-visual { text-align: center; }
.bf-hero-visual img { width: 100%; max-width: 250px; height: auto; }
.bf-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d4e4f4; border-radius: 30px; padding: 6px 16px; font-size: 0.85rem; font-weight: 600; color: #0d5a93; box-shadow: 0 2px 8px rgba(13,90,147,0.06); margin-bottom: 18px; }
.bf-hero h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 14px; color: #0d2137; }
.bf-hero h1 span { color: #0d5a93; }
.bf-hero-sub { font-size: 1.12rem; line-height: 1.65; color: #475569; max-width: 640px; margin: 0 0 26px; }
.bf-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.bf-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; padding: 13px 26px; border-radius: 8px; text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s; }
.bf-btn svg { width: 16px; height: 16px; }
.bf-btn-primary { background: #0d5a93; color: #fff; box-shadow: 0 4px 14px rgba(13,90,147,0.25); }
.bf-btn-primary:hover { background: #094a7a; color: #fff; transform: translateY(-2px); text-decoration: none; }
.bf-btn-ghost { background: #fff; color: #0d5a93; border: 1px solid #c7ddf0; }
.bf-btn-ghost:hover { background: #eef5fb; color: #0d5a93; transform: translateY(-2px); text-decoration: none; }

/* TOC */
.bf-page .inpage-nav { background: #f7fafd; border: 1px solid #e6eef4; border-radius: 14px; padding: 18px 22px; margin: 28px 0 8px; }
.bf-page .inpage-nav a { color: #0d5a93; }

/* Teil-Trenner */
.bf-part { margin: 50px 0 6px; padding: 0 0 12px; border-bottom: 2px solid #e6eef4; display: flex; align-items: center; gap: 14px; }
.bf-part-num { flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: #0d5a93; color: #fff; border-radius: 12px; font-weight: 800; font-size: 1.1rem; }
.bf-part h2 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }

/* Sektions-Headings mit Akzent */
.bf-page h2.text-primary { color: #0d2137 !important; font-weight: 700; margin-top: 38px; padding-left: 14px; border-left: 4px solid #0d5a93; }

/* Drei-Ebenen-Karten */
.bf-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 8px; }
.bf-level { background: #fff; border: 1px solid #e6eef4; border-radius: 14px; padding: 22px 20px; box-shadow: 0 2px 10px rgba(13,33,55,0.05); }
.bf-level-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #eef5fb; color: #0d5a93; border-radius: 10px; font-weight: 800; margin-bottom: 12px; }
.bf-level h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.bf-level p { color: #64748b; font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* Closing CTA */
.bf-cta-band { background: linear-gradient(135deg, #0d5a93 0%, #0a4a7a 100%); color: #fff; border-radius: 18px; padding: 38px 34px; margin: 50px 0 40px; text-align: center; }
.bf-cta-band h2 { color: #fff !important; font-size: 1.55rem; font-weight: 800; margin: 0 0 10px; border: none !important; padding: 0 !important; }
.bf-cta-band p { color: #d6e6f3; margin: 0 auto 22px; max-width: 640px; line-height: 1.6; }
.bf-cta-band .bf-hero-cta { justify-content: center; }
.bf-cta-band .bf-btn-primary { background: #fff; color: #0d5a93; }
.bf-cta-band .bf-btn-primary:hover { background: #eef5fb; color: #0d5a93; }

@media (max-width: 768px) {
  .bf-hero { padding: 40px 0 36px; }
  .bf-hero h1 { font-size: 1.75rem; }
  .bf-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .bf-hero-visual { display: none; }
  .bf-levels { grid-template-columns: 1fr; }
  .bf-part h2 { font-size: 1.3rem; }
}

    .bf-faq details { border: 1px solid #e6eef4; border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; }
    .bf-faq summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: #1a2b3c; list-style: none; position: relative; padding-right: 42px; }
    .bf-faq summary::-webkit-details-marker { display: none; }
    .bf-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #0d5a93; line-height: 1; }
    .bf-faq details[open] summary::after { content: "\2212"; }
    .bf-faq details[open] summary { border-bottom: 1px solid #eef2f6; }
    .bf-faq .bf-faq-a { padding: 8px 18px 16px; color: #475569; line-height: 1.6; }
    .bf-faq .bf-faq-a p:last-child { margin-bottom: 0; }