/* ============================================================
   Brunnenspatz e.V. – Förderverein der Gudrun-Pausewang-Schule
   CI übernommen von Beitrittserklärung & Flyer
   - Leuchtendes Cyan-Blau
   - Schräge / diagonale Design-Elemente
   - Kräftige Display-Typografie in Versalien
   ============================================================ */

:root {
    /* Primär: das markante Cyan-Blau aus Flyer & Beitrittserklärung */
    --bs-primary:        #29b7e8;
    --bs-primary-dark:   #0d86b5;
    --bs-primary-darker: #07638a;
    --bs-primary-light:  #7fd4f0;
    --bs-primary-soft:   #d9eff9;
    --bs-primary-bg:     #ebf7fc;

    /* Akzent-Orange (aus dem Gundi – Schnabel & Füße) */
    --bs-orange:         #e8732e;
    --bs-orange-dark:    #c85c1c;
    --bs-orange-soft:    #fde9dc;

    /* Akzent-Grün (aus dem Ranzen des Gundi) */
    --bs-green:          #9ccf3a;
    --bs-green-dark:     #7aa82a;
    --bs-green-soft:     #eef7d8;

    /* Sonnengelb */
    --bs-yellow:         #ffc532;
    --bs-yellow-soft:    #fff3d0;

    /* Gundi-Rostrot */
    --bs-rust:           #a84a24;

    /* Text */
    --bs-ink:            #162934;
    --bs-ink-2:          #3a4a55;
    --bs-ink-3:          #6a7882;
    --bs-ink-muted:      #9aa5ad;

    /* Flächen */
    --bs-bg:             #ffffff;
    --bs-bg-soft:        #f4f8fb;
    --bs-line:           #d8e2e8;
    --bs-line-soft:      #eaf0f4;

    /* System */
    --bs-radius:         12px;
    --bs-radius-sm:      8px;
    --bs-radius-lg:      20px;
    --bs-shadow:         0 6px 20px rgba(13, 134, 181, 0.12);
    --bs-shadow-lg:      0 18px 50px rgba(13, 134, 181, 0.18);
    --bs-shadow-primary: 0 10px 30px rgba(41, 183, 232, 0.35);
    --bs-maxw:           1180px;

    --bs-font:           'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bs-font-display:   'Barlow Condensed', 'Oswald', 'Inter Tight', system-ui, sans-serif;

    /* Schräg-Winkel für das CI (wie im Flyer/Beitrittserklärung) */
    --bs-skew:           -7deg;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--bs-font);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--bs-ink);
    background: var(--bs-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bs-primary-dark); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bs-primary-darker); }

h1, h2, h3, h4 {
    font-family: var(--bs-font-display);
    color: var(--bs-ink);
    line-height: 1.02;
    letter-spacing: 0.005em;
    margin: 0 0 .5em;
    font-weight: 600;
    text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.35rem; letter-spacing: 0.01em; }
h4 {
    font-family: var(--bs-font);
    font-size: 1.05rem; font-weight: 800;
    text-transform: none; letter-spacing: -0.005em;
    line-height: 1.3;
}
p  { margin: 0 0 1em; }

.bs-container {
    max-width: var(--bs-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Header / Navigation ───────────────────────────────────── */
.bs-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--bs-line-soft);
}
.bs-header-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: 86px; position: relative;
}
.bs-brand {
    display: inline-flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--bs-ink);
}
.bs-brand:hover { color: var(--bs-ink); }
.bs-brand-logo {
    width: 56px; height: 56px;
    object-fit: contain;
}
.bs-brand-text {
    display: flex; flex-direction: column; line-height: 1;
}
.bs-brand-name {
    font-family: var(--bs-font-display);
    font-weight: 700; font-size: 24px;
    letter-spacing: 0.01em;
    color: var(--bs-primary-dark);
    text-transform: uppercase;
}
.bs-brand-sub {
    font-family: var(--bs-font);
    font-size: 11.5px; color: var(--bs-ink-3); margin-top: 3px;
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
}

.bs-nav { display: flex; gap: 26px; align-items: center; }
.bs-nav a:not(.bs-nav-cta) {
    color: var(--bs-ink-2); font-weight: 700; font-size: 14px;
    padding: 6px 0; position: relative;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.bs-nav a:not(.bs-nav-cta).is-active,
.bs-nav a:not(.bs-nav-cta):hover { color: var(--bs-primary-dark); }
.bs-nav a:not(.bs-nav-cta).is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
    height: 3px; background: var(--bs-primary); border-radius: 0;
    transform: skewX(var(--bs-skew));
}
/* Header-CTA: Kompakte Variante des .bs-btn-primary.
   Dieselbe Proportion wie die Hero-Buttons, nur etwas kleiner –
   deshalb padding 15px 30px (Hero: 16px 32px) und font-size 13px. */
.bs-nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    background: var(--bs-primary); color: #fff !important;
    font-family: var(--bs-font);
    font-weight: 800; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.06em;
    text-decoration: none; cursor: pointer;
    white-space: nowrap;
    transition: transform .14s ease, background .15s ease, box-shadow .15s ease;
    transform: skewX(var(--bs-skew));
    border: 0; line-height: 1;
    margin-left: 8px;
    flex-shrink: 0;
    position: relative;
}
.bs-nav-cta > * {
    transform: skewX(calc(-1 * var(--bs-skew)));
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
}
.bs-nav-cta:hover {
    background: var(--bs-primary-dark); color: #fff !important;
    transform: skewX(var(--bs-skew)) translateY(-2px);
    box-shadow: var(--bs-shadow-primary);
}
.bs-nav-cta::after { display: none !important; }

.bs-menu-toggle {
    display: none; background: transparent; border: 0; cursor: pointer;
    padding: 8px; border-radius: var(--bs-radius-sm); color: var(--bs-primary-dark);
}
.bs-menu-toggle:hover { background: var(--bs-bg-soft); }

@media (max-width: 960px) {
    .bs-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; padding: 14px;
        background: var(--bs-bg); border-bottom: 1px solid var(--bs-line);
        box-shadow: var(--bs-shadow);
    }
    .bs-nav.is-open { display: flex; }
    .bs-nav a:not(.bs-nav-cta) { padding: 12px 16px; width: 100%; border-radius: var(--bs-radius-sm); }
    .bs-nav a:not(.bs-nav-cta):hover { background: var(--bs-primary-soft); }
    .bs-nav a:not(.bs-nav-cta).is-active::after { display: none; }
    .bs-nav a:not(.bs-nav-cta).is-active { background: var(--bs-primary-soft); color: var(--bs-primary-dark); }
    .bs-nav-cta {
        justify-content: center; margin-top: 8px; margin-left: 0;
        transform: none; padding: 16px 28px; font-size: 14px;
    }
    .bs-nav-cta > * { transform: none; }
    .bs-nav-cta:hover { transform: translateY(-1px); }
    .bs-menu-toggle { display: inline-flex; }
    .bs-brand-name { font-size: 20px; }
    .bs-brand-logo { width: 48px; height: 48px; }
}

/* ── Buttons (mit CI-Schräge) ──────────────────────────────── */
.bs-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; padding: 16px 32px;
    font-family: var(--bs-font); font-weight: 800; font-size: 14px;
    text-decoration: none; cursor: pointer; border: 0;
    transition: transform .14s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
    line-height: 1; position: relative;
    text-transform: uppercase; letter-spacing: 0.06em;
    transform: skewX(var(--bs-skew));
}
.bs-btn > * { transform: skewX(calc(-1 * var(--bs-skew))); display: inline-flex; align-items: center; gap: 8px; }
.bs-btn-primary {
    background: var(--bs-primary); color: #fff;
}
.bs-btn-primary:hover {
    background: var(--bs-primary-dark); color: #fff;
    transform: skewX(var(--bs-skew)) translateY(-2px);
    box-shadow: var(--bs-shadow-primary);
}
.bs-btn-outline {
    background: transparent; color: var(--bs-primary-dark);
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}
.bs-btn-outline:hover {
    background: var(--bs-primary); color: #fff;
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}
.bs-btn-orange {
    background: var(--bs-orange); color: #fff;
}
.bs-btn-orange:hover {
    background: var(--bs-orange-dark); color: #fff;
    transform: skewX(var(--bs-skew)) translateY(-2px);
    box-shadow: 0 10px 30px rgba(232,115,46,0.35);
}
.bs-btn-white {
    background: #fff; color: var(--bs-primary-dark);
}
.bs-btn-white:hover {
    background: var(--bs-yellow); color: var(--bs-ink);
    transform: skewX(var(--bs-skew)) translateY(-2px);
}
.bs-btn-lg { padding: 20px 38px; font-size: 15px; }

/* Button mit Icon, der nicht geskewed werden soll */
.bs-btn svg { flex-shrink: 0; }

/* ── Hero mit Schrägen-Design (wie Beitrittserklärung) ─────── */
.bs-hero {
    background: var(--bs-bg);
    position: relative; overflow: hidden;
    padding: 0;
}
.bs-hero-inner {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch; gap: 0;
    min-height: 560px;
}
/* Linke Seite: Foto / Gundi auf Blau */
.bs-hero-left {
    position: relative;
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-light) 100%);
    padding: 70px 48px 70px 48px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.bs-hero-left::after {
    /* Diagonaler Cut zum rechten Teil – das markante Design-Element */
    content: '';
    position: absolute; top: 0; bottom: 0; right: -120px;
    width: 240px;
    background: var(--bs-bg);
    transform: skewX(var(--bs-skew));
    z-index: 2;
}
.bs-hero-schule {
    position: absolute; inset: 0;
    background-image: url('/assets/img/schule.jpg');
    background-size: cover; background-position: center;
    opacity: 0.18;
    mix-blend-mode: multiply;
}
.bs-hero-gundi {
    position: relative; z-index: 1;
    width: 78%; max-width: 340px;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.25));
    animation: bs-gundi-bounce 3s ease-in-out infinite;
}
@keyframes bs-gundi-bounce {
    0%,100% { transform: translateY(0) rotate(-2deg); }
    50%     { transform: translateY(-8px) rotate(1deg); }
}

/* Rechte Seite: Headline + CTAs */
.bs-hero-right {
    padding: 80px 40px 70px 100px;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--bs-bg);
}
.bs-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--bs-primary-soft);
    color: var(--bs-primary-darker);
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 24px;
    transform: skewX(var(--bs-skew));
    align-self: flex-start;
}
.bs-hero-eyebrow > * { transform: skewX(calc(-1 * var(--bs-skew))); display: inline-block; }
.bs-hero h1 {
    margin-bottom: 20px;
    color: var(--bs-primary-dark);
}
.bs-hero h1 .lb { display: block; color: var(--bs-ink); font-size: 0.5em; font-weight: 600; margin-top: 10px; letter-spacing: 0.02em; }
.bs-hero-lead {
    font-size: 1.15rem; color: var(--bs-ink-2);
    margin-bottom: 32px; max-width: 540px;
}
.bs-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 960px) {
    .bs-hero-inner { grid-template-columns: 1fr; min-height: auto; }
    .bs-hero-left { padding: 50px 40px; min-height: 320px; }
    .bs-hero-left::after {
        top: auto; left: 0; right: 0; height: 80px;
        width: auto; bottom: -40px;
        transform: skewY(calc(var(--bs-skew) * 0.5));
    }
    .bs-hero-right { padding: 60px 24px 70px; }
    .bs-hero-gundi { max-width: 220px; }
}

/* ── Section-Grundgerüst ───────────────────────────────────── */
.bs-section { padding: 90px 0; position: relative; }
.bs-section-soft { background: var(--bs-bg-soft); }
.bs-section-primary { background: var(--bs-primary); color: #fff; }
.bs-section-primary h2, .bs-section-primary h3 { color: #fff; }
.bs-section-primary-soft { background: var(--bs-primary-soft); }

.bs-section-header { text-align: center; margin-bottom: 64px; position: relative; z-index: 1; }
.bs-section-eyebrow {
    text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 12.5px; font-weight: 800; color: var(--bs-primary-dark);
    margin-bottom: 14px;
    display: inline-flex; align-items: center; gap: 10px;
}
.bs-section-eyebrow::before,
.bs-section-eyebrow::after {
    content: ''; width: 28px; height: 3px; background: var(--bs-primary);
    transform: skewX(var(--bs-skew));
}
.bs-section-primary .bs-section-eyebrow { color: #fff; }
.bs-section-primary .bs-section-eyebrow::before,
.bs-section-primary .bs-section-eyebrow::after { background: #fff; }
.bs-section-lead {
    font-size: 1.12rem; color: var(--bs-ink-2);
    max-width: 680px; margin: 0 auto;
}
.bs-section-primary .bs-section-lead { color: rgba(255,255,255,0.94); }

@media (max-width: 768px) {
    .bs-section { padding: 64px 0; }
    .bs-section-header { margin-bottom: 44px; }
}

/* Schräger Trenner (oben/unten einer Section) */
.bs-section-angle-top::before,
.bs-section-angle-bottom::after {
    content: ''; position: absolute; left: 0; right: 0; height: 60px;
    background: inherit;
}
.bs-section-angle-top::before    { top: -30px;    transform: skewY(calc(var(--bs-skew) * 0.4)); }
.bs-section-angle-bottom::after  { bottom: -30px; transform: skewY(calc(-1 * var(--bs-skew) * 0.4)); }

/* ── Cards & Grids ─────────────────────────────────────────── */
.bs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
@media (max-width: 900px) {
    .bs-grid-3, .bs-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bs-grid-3, .bs-grid-4, .bs-grid-2 { grid-template-columns: 1fr; }
}

.bs-card {
    background: var(--bs-bg);
    border: 1px solid var(--bs-line-soft);
    border-radius: var(--bs-radius);
    padding: 34px 30px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative; overflow: hidden;
}
.bs-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bs-shadow-lg);
    border-color: transparent;
}
/* Schräger Farbstreifen am oberen Rand */
.bs-card::before {
    content: ''; position: absolute; top: 0; left: -10px; right: -10px;
    height: 6px; background: var(--bs-primary);
    transform: skewX(var(--bs-skew)); transform-origin: top left;
    opacity: 0; transition: opacity .2s ease;
}
.bs-card:hover::before { opacity: 1; }

.bs-card-icon {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 20px; color: #fff;
    transform: skewX(var(--bs-skew));
    background: var(--bs-primary);
}
.bs-card-icon svg { transform: skewX(calc(-1 * var(--bs-skew))); }
.bs-card-icon--blue   { background: var(--bs-primary); }
.bs-card-icon--green  { background: var(--bs-green); }
.bs-card-icon--orange { background: var(--bs-orange); }
.bs-card-icon--yellow { background: var(--bs-yellow); color: var(--bs-ink); }
.bs-card-icon--rust   { background: var(--bs-rust); }

.bs-card h3 { margin-bottom: 10px; color: var(--bs-primary-dark); }
.bs-card p { color: var(--bs-ink-2); margin: 0; font-size: 15px; }
.bs-card--lg { padding: 44px 36px; }
@media (max-width: 768px) { .bs-card--lg { padding: 32px 26px; } }
@media (max-width: 600px) { .bs-card--lg { padding: 26px 22px; } }

/* ── Vorstand / Team Cards ─────────────────────────────────── */
.bs-team-card {
    background: var(--bs-bg);
    border: 1px solid var(--bs-line-soft);
    border-radius: var(--bs-radius);
    padding: 34px 24px 28px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative; overflow: hidden;
}
.bs-team-card::before {
    content: ''; position: absolute; top: -40px; left: -20px; right: -20px;
    height: 100px; background: var(--bs-primary-soft);
    transform: skewY(calc(var(--bs-skew) * 0.6));
}
.bs-team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bs-shadow-lg);
}
.bs-team-avatar {
    width: 112px; height: 112px;
    margin: 0 auto 18px; position: relative;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-light) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--bs-font-display);
    font-size: 38px; font-weight: 700;
    color: #fff;
    border: 5px solid #fff;
    box-shadow: 0 6px 20px rgba(41,183,232,0.25);
}
.bs-team-name {
    font-family: var(--bs-font-display);
    font-size: 20px; font-weight: 700; color: var(--bs-ink);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.01em;
    position: relative;
}
.bs-team-role {
    font-size: 12.5px; font-weight: 800;
    color: var(--bs-primary-dark);
    letter-spacing: 0.08em; text-transform: uppercase;
    position: relative;
}

/* ── Info-Boxen ────────────────────────────────────────────── */
.bs-info-box {
    background: var(--bs-bg);
    border: 1px solid var(--bs-line-soft);
    border-left: 5px solid var(--bs-primary);
    border-radius: var(--bs-radius-sm);
    padding: 22px 26px;
    margin: 20px 0;
}
.bs-info-box--green  { border-left-color: var(--bs-green); }
.bs-info-box--orange { border-left-color: var(--bs-orange); }
.bs-info-box--yellow { border-left-color: var(--bs-yellow); }
.bs-info-box h4 { margin-bottom: 6px; color: var(--bs-primary-dark); }
.bs-info-box--green h4  { color: var(--bs-green-dark); }
.bs-info-box--orange h4 { color: var(--bs-orange-dark); }
.bs-info-box p:last-child { margin-bottom: 0; }

/* ── CTA-Banner mit Schräge ────────────────────────────────── */
.bs-cta-banner {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-dark) 100%);
    color: #fff;
    padding: 70px 60px;
    text-align: center;
    position: relative; overflow: hidden;
    border-radius: 0;
}
.bs-cta-banner::before {
    content: ''; position: absolute;
    top: -60%; right: -10%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 65%);
    border-radius: 50%;
}
.bs-cta-banner::after {
    /* Gundi-Silhouette als dezentes Wasserzeichen */
    content: ''; position: absolute; bottom: -30px; left: -30px;
    width: 200px; height: 200px;
    background-image: url('/assets/img/gundi.png');
    background-size: contain; background-repeat: no-repeat; background-position: bottom left;
    opacity: 0.12;
}
.bs-cta-banner h2 { color: #fff; margin-bottom: 12px; position: relative; z-index: 1; }
.bs-cta-banner p { color: rgba(255,255,255,0.92); font-size: 1.15rem; margin-bottom: 28px; position: relative; z-index: 1; }
.bs-cta-banner .bs-btn { position: relative; z-index: 1; }

/* Schräger Banner-Container */
.bs-cta-wrap {
    position: relative;
    transform: skewY(calc(var(--bs-skew) * 0.2));
    transform-origin: center;
}
.bs-cta-wrap > .bs-cta-banner {
    transform: skewY(calc(-1 * var(--bs-skew) * 0.2));
}

/* ── Facts / Zahlen ────────────────────────────────────────── */
.bs-fact { text-align: center; padding: 24px; }
.bs-fact-number {
    font-family: var(--bs-font-display);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 700;
    color: var(--bs-primary-dark);
    line-height: 1; margin-bottom: 10px;
    letter-spacing: 0;
}
.bs-fact-label {
    font-size: 13px; font-weight: 800; color: var(--bs-ink-2);
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── Listen ────────────────────────────────────────────────── */
.bs-list { list-style: none; padding: 0; margin: 0; }
.bs-list li {
    position: relative; padding: 11px 0 11px 38px;
    color: var(--bs-ink-2); border-bottom: 1px solid var(--bs-line-soft);
}
.bs-list li:last-child { border-bottom: 0; }
.bs-list li::before {
    content: ''; position: absolute; left: 0; top: 15px;
    width: 22px; height: 22px;
    background: var(--bs-primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
    transform: skewX(var(--bs-skew));
}

/* ── Kontakt / Bank-Blöcke ─────────────────────────────────── */
.bs-kv { margin: 0; }
.bs-kv dt {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--bs-ink-3); font-weight: 800; margin-top: 16px;
}
.bs-kv dt:first-child { margin-top: 0; }
.bs-kv dd {
    margin: 3px 0 0; font-size: 15.5px; color: var(--bs-ink); font-weight: 500;
}

/* ── Schritte ──────────────────────────────────────────────── */
.bs-steps { counter-reset: step; margin: 32px 0; }
.bs-step {
    display: flex; gap: 22px; padding: 22px 0;
    border-bottom: 1px dashed var(--bs-line);
    align-items: flex-start;
}
.bs-step:last-child { border-bottom: 0; }
.bs-step::before {
    counter-increment: step; content: counter(step);
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: var(--bs-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--bs-font-display);
    font-size: 22px; font-weight: 700;
    transform: skewX(var(--bs-skew));
}
.bs-step h4 { margin: 8px 0 4px; color: var(--bs-primary-dark); }
.bs-step p { color: var(--bs-ink-2); margin: 0; }

/* ── Footer ────────────────────────────────────────────────── */
.bs-footer {
    background: var(--bs-ink);
    color: #b8c3ca;
    padding: 70px 0 30px;
    margin-top: 0;
    position: relative;
}
.bs-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-primary-light) 50%, var(--bs-primary) 100%);
    transform: skewY(calc(var(--bs-skew) * 0.15)); transform-origin: left;
}
.bs-footer h4 {
    color: #fff; font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.12em; margin-bottom: 18px; font-weight: 800;
}
.bs-footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px; margin-bottom: 40px;
}
.bs-footer a { color: #b8c3ca; display: block; padding: 5px 0; font-size: 14.5px; font-weight: 500; }
.bs-footer a:hover { color: var(--bs-primary-light); }
.bs-footer-brand {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.bs-footer-brand img { width: 52px; height: 52px; object-fit: contain; }
.bs-footer-brand-name {
    font-family: var(--bs-font-display);
    font-size: 26px; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: 0.01em;
}
.bs-footer-copy {
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-size: 13px; color: #7d8890;
}
.bs-footer-copy a { display: inline-block; margin-left: 16px; color: #7d8890; padding: 0; }
@media (max-width: 768px) {
    .bs-footer { padding: 50px 0 24px; }
    .bs-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ── Page-Header (innere Seiten, auch schräg) ──────────────── */
.bs-page-header {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-light) 100%);
    color: #fff;
    padding: 80px 0 70px;
    text-align: center;
    position: relative; overflow: hidden;
}
.bs-page-header::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('/assets/img/schule.jpg');
    background-size: cover; background-position: center;
    opacity: 0.12; mix-blend-mode: multiply;
}
.bs-page-header::after {
    content: ''; position: absolute; bottom: -30px; left: 0; right: 0; height: 60px;
    background: var(--bs-bg); transform: skewY(calc(var(--bs-skew) * 0.25));
}
.bs-page-header .bs-container { position: relative; z-index: 1; }
.bs-page-header h1 { color: #fff; margin-bottom: 14px; }
.bs-page-header p {
    font-size: 1.15rem; color: rgba(255,255,255,0.95);
    max-width: 680px; margin: 0 auto;
}

/* ── Prose-Inhalt ──────────────────────────────────────────── */
.bs-prose {
    max-width: 760px; margin: 0 auto;
    font-size: 16px; line-height: 1.75;
    color: var(--bs-ink-2);
}
.bs-prose h2 { margin-top: 2em; color: var(--bs-primary-dark); font-size: 1.6rem; }
.bs-prose h3 { margin-top: 1.6em; color: var(--bs-ink); }
.bs-prose ul, .bs-prose ol { padding-left: 22px; }
.bs-prose li { margin-bottom: 6px; }

/* ── Zitat ─────────────────────────────────────────────────── */
.bs-quote {
    font-family: var(--bs-font-display);
    font-size: 1.6rem; font-weight: 600;
    color: var(--bs-ink);
    padding: 32px 40px;
    position: relative;
    text-transform: uppercase; letter-spacing: 0.01em;
    line-height: 1.2;
    max-width: 820px; margin: 0 auto; text-align: center;
}
.bs-quote::before,
.bs-quote::after {
    content: ''; display: block;
    width: 60px; height: 4px; background: var(--bs-primary);
    margin: 0 auto 24px; transform: skewX(var(--bs-skew));
}
.bs-quote::after { margin: 24px auto 0; }
.bs-quote cite {
    display: block; margin-top: 16px;
    font-family: var(--bs-font); font-style: normal; font-size: 13px;
    color: var(--bs-ink-3); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
}

/* ── Wirkungs-Preisliste (Spenden) ─────────────────────────── */
.bs-impact-list { list-style: none; padding: 0; margin: 0; }
.bs-impact-list li {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 0; border-bottom: 1px solid var(--bs-line-soft);
    color: var(--bs-ink-2);
}
.bs-impact-list li:last-child { border-bottom: 0; }
.bs-impact-amount {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 96px; padding: 8px 14px;
    background: var(--bs-primary); color: #fff;
    font-family: var(--bs-font-display); font-weight: 700; font-size: 19px;
    text-align: center;
    transform: skewX(var(--bs-skew));
}
.bs-impact-amount > * {
    transform: skewX(calc(-1 * var(--bs-skew)));
    display: inline-block;
}

/* ── Small helpers ─────────────────────────────────────────── */
.bs-text-center { text-align: center; }
.bs-mt-0 { margin-top: 0; }
.bs-mb-0 { margin-bottom: 0; }
.bs-mt-lg { margin-top: 48px; }
.bs-mono { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.95em; }

/* ── Forms (Mitgliedsantrag) ─────────────────────────────────── */
.bs-form { position: relative; }
.bs-fieldset {
    border: 0; padding: 0; margin: 0 0 32px;
    position: relative;
}
.bs-fieldset legend {
    font-family: var(--bs-font-display);
    font-size: 20px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--bs-primary-dark);
    padding: 0 0 0 14px;
    margin-bottom: 18px;
    width: 100%;
    position: relative;
}
.bs-fieldset legend::before {
    content: ''; display: block;
    position: absolute;
    left: 0; top: 50%;
    width: 4px; height: 1.05em;
    transform: translateY(-50%) skewX(var(--bs-skew));
    background: var(--bs-primary);
    border-radius: 1px;
}

.bs-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px; margin-bottom: 4px;
}
.bs-form-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.bs-form-field label {
    font-size: 13px; font-weight: 700;
    color: var(--bs-ink); margin-bottom: 6px;
    letter-spacing: 0.005em;
}
.bs-form-field--narrow { max-width: 140px; }
.bs-form-hint {
    font-weight: 500; font-size: 12.5px;
    color: var(--bs-ink-3); letter-spacing: 0;
    text-transform: none;
}
.bs-form-hint a { color: var(--bs-primary-dark); text-decoration: underline; }

.bs-form input[type="text"],
.bs-form input[type="email"],
.bs-form input[type="tel"],
.bs-form input[type="number"],
.bs-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid var(--bs-line);
    border-radius: 0;
    font-family: var(--bs-font);
    /* 16px verhindert Auto-Zoom auf iOS Safari beim Fokussieren */
    font-size: 16px;
    color: var(--bs-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.bs-form textarea {
    resize: vertical; min-height: 72px;
    line-height: 1.5;
}
.bs-form input:focus,
.bs-form textarea:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(41, 183, 232, 0.18);
}

.bs-form-error {
    display: block; margin-top: 6px;
    color: #c5221f; font-size: 13px; font-weight: 600;
}

/* Radio-Cards für Beitragswahl */
.bs-radio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.bs-radio-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 12px 14px;
    background: #fff;
    border: 2px solid var(--bs-line);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
    text-align: center;
    min-height: 96px;
    justify-content: center;
}
.bs-radio-card:hover { border-color: var(--bs-primary-light); background: #f6fbfe; }
.bs-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.bs-radio-card:has(input:checked) {
    border-color: var(--bs-primary);
    background: var(--bs-primary-soft);
}
.bs-radio-card:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(41, 183, 232, 0.25);
}
.bs-radio-card-big {
    font-family: var(--bs-font-display);
    font-size: 26px; font-weight: 700;
    color: var(--bs-primary-dark);
    line-height: 1; letter-spacing: 0.01em;
}
.bs-radio-card:has(input:checked) .bs-radio-card-big { color: var(--bs-primary-darker); }
.bs-radio-card-sub {
    margin-top: 6px;
    font-size: 12px; font-weight: 700;
    color: var(--bs-ink-3); text-transform: uppercase;
    letter-spacing: 0.05em; line-height: 1.2;
}

/* Radio-Rows (Zahlungsart) */
.bs-radio-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 2px solid var(--bs-line);
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.bs-radio-row:hover { border-color: var(--bs-primary-light); background: #f6fbfe; }
.bs-radio-row:has(input:checked) {
    border-color: var(--bs-primary);
    background: var(--bs-primary-soft);
}
.bs-radio-row input { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--bs-primary); cursor: pointer; }
.bs-radio-row span { flex: 1; }
.bs-radio-row strong {
    display: block; font-size: 15px; color: var(--bs-ink);
    margin-bottom: 4px; font-weight: 800;
}
.bs-radio-row small {
    display: block; font-size: 13px; color: var(--bs-ink-2);
    line-height: 1.45;
}

/* Checkbox-Row (DSGVO) */
.bs-checkbox-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px;
    background: var(--bs-primary-soft);
    cursor: pointer;
}
.bs-checkbox-row input {
    margin-top: 2px; width: 20px; height: 20px;
    accent-color: var(--bs-primary); cursor: pointer;
    flex-shrink: 0;
}
.bs-checkbox-row span {
    flex: 1; font-size: 14px; color: var(--bs-ink-2);
    line-height: 1.5;
}
.bs-checkbox-row a { color: var(--bs-primary-dark); text-decoration: underline; font-weight: 700; }

/* Info-Box in Form */
.bs-form .bs-info-box { padding: 14px 18px; margin: 0; }
.bs-form .bs-info-box h4 { font-size: 14px; margin-bottom: 4px; }
.bs-form .bs-info-box p { font-size: 13.5px; margin: 0; line-height: 1.5; }

@media (max-width: 720px) {
    .bs-form-row { grid-template-columns: 1fr; gap: 0; }
    .bs-radio-grid { grid-template-columns: repeat(2, 1fr); }
    .bs-fieldset legend { font-size: 17px; }
    .bs-radio-row { padding: 12px 14px; }
}

/* ── Social-Media-Liste (Kontaktseite) ───────────────────────── */
.bs-social-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bs-social-list li { display: flex; align-items: center; gap: 14px; }
.bs-social-list svg {
    width: 22px; height: 22px; flex-shrink: 0;
    color: var(--bs-primary-dark);
}
.bs-social-list span {
    display: flex; flex-direction: column; line-height: 1.3;
}
.bs-social-list strong {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--bs-ink-3);
    margin-bottom: 2px;
}
.bs-social-list a {
    color: var(--bs-primary-dark); font-weight: 700;
    font-size: 15px; text-decoration: none;
    transition: color .15s ease;
}
.bs-social-list a:hover { color: var(--bs-primary-darker); text-decoration: underline; }

/* ── Footer: Social-Icons ─────────────────────── */
.bs-footer-social {
    display: flex; gap: 10px;
}
.bs-footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background .15s ease, transform .12s ease;
}
.bs-footer-social a:hover {
    background: var(--bs-primary);
    transform: translateY(-2px);
}

/* ── Details / Mandats-Vorschau im Formular ─────────────────── */
.bs-details {
    margin-top: 4px;
    border: 1.5px solid var(--bs-line);
    background: #fff;
}
.bs-details summary {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13.5px; font-weight: 700;
    color: var(--bs-primary-dark);
    user-select: none;
    list-style: none;
    position: relative;
    padding-left: 36px;
}
.bs-details summary::-webkit-details-marker { display: none; }
.bs-details summary::before {
    content: '+';
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--bs-primary);
    font-size: 16px;
    transition: transform .15s ease;
}
.bs-details[open] summary::before { content: '−'; }
.bs-details summary:hover { background: var(--bs-primary-soft); }
.bs-mandate-preview {
    padding: 14px 18px;
    border-top: 1px solid var(--bs-line);
    background: #fafbfc;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bs-ink-2);
    white-space: pre-wrap;
}

/* ── Digital-Registrierung ──────────────────────────────────── */
.bs-digital-intro {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    padding: 32px;
    margin-bottom: 40px;
    background: linear-gradient(135deg, var(--bs-primary-soft) 0%, #fff 60%);
    border-left: 5px solid var(--bs-primary);
    align-items: center;
}
.bs-digital-intro-text h2 {
    font-size: 1.6rem;
    color: var(--bs-primary-darker);
    margin-bottom: 12px;
    line-height: 1.2;
}
.bs-digital-intro-text p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--bs-ink-2);
    margin-bottom: 14px;
}
.bs-digital-bullets {
    list-style: none;
    padding: 0; margin: 0;
}
.bs-digital-bullets li {
    padding: 6px 0 6px 32px;
    position: relative;
    color: var(--bs-ink);
    font-size: 15px;
    line-height: 1.4;
}
.bs-digital-bullets li::before {
    content: '✓';
    position: absolute; left: 0; top: 4px;
    width: 22px; height: 22px;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    line-height: 1;
}
.bs-digital-intro-image {
    display: flex; justify-content: center; align-items: center;
}
.bs-digital-intro-image img {
    width: 100%; max-width: 220px;
    height: auto;
    animation: bs-float 3.5s ease-in-out infinite alternate;
}
@keyframes bs-float {
    0%   { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-6px) rotate(2deg); }
}
@media (max-width: 680px) {
    .bs-digital-intro {
        grid-template-columns: 1fr;
        padding: 24px;
        text-align: center;
    }
    .bs-digital-intro-image { order: -1; margin-bottom: 8px; }
    .bs-digital-intro-image img { max-width: 140px; }
    .bs-digital-bullets li { text-align: left; }
}

/* ── Mitglied-werden: Hinweisbanner für Bestandsmitglieder ─────────── */
.bs-notice-banner {
    display: flex; align-items: center;
    gap: 20px; flex-wrap: wrap;
}
.bs-notice-banner-icon {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    background: var(--bs-primary); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.bs-notice-banner-text { flex: 1; min-width: 240px; }
.bs-notice-banner-text strong {
    color: var(--bs-primary-darker);
    font-size: 15.5px;
    display: block;
    margin-bottom: 2px;
}
.bs-notice-banner-text span {
    color: var(--bs-ink-2);
    font-size: 14.5px; line-height: 1.5;
}
.bs-notice-banner .bs-btn { flex: 0 0 auto; }
@media (max-width: 600px) {
    .bs-notice-banner { gap: 14px; }
    .bs-notice-banner-icon { width: 40px; height: 40px; }
    .bs-notice-banner-icon svg { width: 20px; height: 20px; }
    .bs-notice-banner-text { min-width: 0; }
    .bs-notice-banner .bs-btn {
        width: 100%; justify-content: center;
    }
}

/* ── Spenden: PayPal-Block ─────────────────────────────────────────── */
.bs-paypal-block {
    display: flex; gap: 20px;
    align-items: center; margin-top: 8px;
    flex-wrap: wrap;
}
.bs-paypal-qr {
    flex-shrink: 0; display: block;
    width: 120px; padding: 8px;
    background: #fff;
    border: 2px solid var(--bs-primary-soft);
    line-height: 0;
}
.bs-paypal-qr img { width: 100%; height: auto; display: block; }
.bs-paypal-text { flex: 1; min-width: 200px; }
.bs-paypal-text p { margin-bottom: 8px; }
.bs-paypal-text p:last-child { margin: 0; font-size: 14px; }
@media (max-width: 480px) {
    .bs-paypal-block { gap: 14px; justify-content: center; }
    .bs-paypal-qr { width: 140px; margin: 0 auto; }
    .bs-paypal-text { min-width: 0; text-align: center; }
}

/* ============================================================
   ===== MOBILE OPTIMIERUNG (vollständig) =====================
   Ziel: saubere Darstellung & Touch-tauglichkeit
   auf 320 / 375 / 390 / 414 / 768 / 1024 px.
   ============================================================ */

/* Tablet: 1024 → 768 */
/* Zwischenstufe: 2-Spalter-Hero ist noch aktiv, aber linkes Padding kompakter. */
@media (min-width: 961px) and (max-width: 1024px) {
    .bs-hero-right { padding: 70px 32px 60px 80px; }
}

/* Großes Phone / kleines Tablet: 768 px */
@media (max-width: 768px) {
    body { font-size: 16px; line-height: 1.6; }

    /* Container mit etwas weniger Luft an den Rändern */
    .bs-container { padding: 0 20px; }

    /* Page-Header schmaler */
    .bs-page-header { padding: 56px 0 50px; }
    .bs-page-header p { font-size: 1.02rem; }

    /* CTA-Banner deutlich kompakter, Wasserzeichen-Gundi runter */
    .bs-cta-banner { padding: 56px 24px; }
    .bs-cta-banner::before {
        top: -40%; right: -20%;
        width: 360px; height: 360px;
    }
    .bs-cta-banner::after {
        width: 130px; height: 130px;
        opacity: 0.08;
    }
    .bs-cta-banner h2 { font-size: clamp(1.6rem, 5vw, 2.1rem); }
    .bs-cta-banner p { font-size: 1.02rem; }

    /* Quote leiser */
    .bs-quote { font-size: 1.25rem; padding: 24px 16px; }
    .bs-quote::before, .bs-quote::after { width: 48px; }

    /* Cards & Sections etwas kompakter */
    .bs-card { padding: 28px 24px; }
    .bs-card h3 { font-size: 1.2rem; }

    /* Hero-Right: Padding-Korrektur, sodass Single-Column-Hero
       links/rechts gleich aussieht (Skew-Container braucht keinen
       100px Linker Versatz mehr). */
    .bs-hero-right { padding: 48px 20px 60px; }
    .bs-hero h1 .lb { font-size: 0.55em; }
    .bs-hero-lead { font-size: 1.02rem; margin-bottom: 24px; }
    .bs-hero-actions .bs-btn { flex: 1 1 auto; min-width: 200px; }

    /* Vorstand-Avatare etwas kleiner */
    .bs-team-avatar { width: 96px; height: 96px; font-size: 32px; border-width: 4px; }
    .bs-team-card { padding: 28px 20px 24px; }

    /* Steps */
    .bs-step { gap: 16px; padding: 18px 0; }
    .bs-step::before { width: 40px; height: 40px; font-size: 18px; }

    /* Impact-Liste */
    .bs-impact-list li { gap: 14px; padding: 12px 0; }
    .bs-impact-amount { min-width: 80px; padding: 7px 10px; font-size: 16px; }

    /* Forms */
    .bs-fieldset { margin-bottom: 26px; }
    .bs-fieldset legend { font-size: 17px; margin-bottom: 14px; }

    /* Touch-Target: Hamburger groß genug */
    .bs-menu-toggle { padding: 10px; }

    /* Footer-Social größere Touch-Targets */
    .bs-footer-social a { width: 44px; height: 44px; }

    /* Footer-Brand kompakter */
    .bs-footer-brand img { width: 44px; height: 44px; }
    .bs-footer-brand-name { font-size: 22px; }
}

/* Phone: 600 px – mehr Luft sparen, 1-Spalter durchziehen */
@media (max-width: 600px) {
    /* Wirklich 1 Spalte (greift zusätzlich zu @900 max-width Block) */
    .bs-grid-3, .bs-grid-4, .bs-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .bs-section { padding: 56px 0; }
    .bs-section-header { margin-bottom: 36px; }

    /* Facts: Einzeiler statt 2x2 sieht ruhiger aus */
    .bs-fact { padding: 14px; }
    .bs-fact-number { font-size: clamp(2.2rem, 8vw, 2.8rem); }
    .bs-fact-label { font-size: 12px; }

    /* CTA-Banner sehr kompakt */
    .bs-cta-banner { padding: 44px 18px; }
    .bs-cta-banner h2 { font-size: 1.6rem; line-height: 1.1; }
    .bs-cta-banner p { font-size: 0.98rem; margin-bottom: 22px; }
    .bs-cta-banner .bs-btn { width: 100%; max-width: 320px; }

    /* CTA-Container darf das innere Padding wieder annehmen */
    .bs-cta-banner > .bs-container { padding: 0; }

    /* Hero-Buttons stacken + voll breit für Touch */
    .bs-hero-actions { gap: 12px; }
    .bs-hero-actions .bs-btn {
        width: 100%; min-width: 0;
    }

    /* Brand: lange „Förderverein · Gudrun-Pausewang-Schule" zähmen */
    .bs-header-row { gap: 12px; min-height: 76px; }
    .bs-brand { gap: 10px; }
    .bs-brand-logo { width: 42px; height: 42px; }
    .bs-brand-name { font-size: 18px; }
    .bs-brand-sub { font-size: 10.5px; letter-spacing: 0.03em; }

    /* Cards / Steps weiter straffen */
    .bs-card { padding: 24px 20px; }
    .bs-card-icon { width: 48px; height: 48px; margin-bottom: 16px; }
    .bs-card-icon svg { width: 24px; height: 24px; }

    .bs-team-avatar { width: 88px; height: 88px; font-size: 30px; }
    .bs-team-name { font-size: 18px; }
    .bs-team-role { font-size: 11.5px; }

    .bs-step { gap: 14px; padding: 16px 0; }
    .bs-step::before { width: 36px; height: 36px; font-size: 16px; }
    .bs-step h4 { margin-top: 4px; }

    /* Quote noch leiser */
    .bs-quote { font-size: 1.15rem; padding: 20px 8px; }

    /* Info-Boxen: weniger Innenabstand */
    .bs-info-box { padding: 18px 20px; }

    /* Buttons: bequemer Touch-Bereich */
    .bs-btn { padding: 14px 24px; font-size: 13.5px; }
    .bs-btn-lg { padding: 16px 28px; font-size: 14px; }

    /* Footer: alles untereinander, mehr Luft */
    .bs-footer { padding: 48px 0 24px; }
    .bs-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
    .bs-footer h4 { margin-bottom: 12px; }
    .bs-footer a { padding: 8px 0; font-size: 15px; }
    .bs-footer-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .bs-footer-copy a { margin: 0 16px 0 0; padding: 6px 0; }

    /* Prose schmaler */
    .bs-prose { font-size: 15.5px; line-height: 1.7; }

    /* Forms: jedes Feld einzeln */
    .bs-form-row { grid-template-columns: 1fr !important; gap: 0; }
    .bs-form-field--narrow { max-width: none; }

    /* Radio-Cards */
    .bs-radio-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .bs-radio-card { min-height: 88px; padding: 14px 8px 12px; }
    .bs-radio-card-big { font-size: 22px; }
    .bs-radio-card-sub { font-size: 11px; }

    /* Impact: Amount-Pille kompakter */
    .bs-impact-amount { min-width: 74px; padding: 6px 8px; font-size: 15px; }

    /* Section-Eyebrow: keine wandernden Linien außerhalb */
    .bs-section-eyebrow::before,
    .bs-section-eyebrow::after { width: 20px; }

    /* Page-Header */
    .bs-page-header { padding: 44px 0 40px; }
    .bs-page-header p { font-size: 0.98rem; }
}

/* Sehr kleines Phone: 380 px (iPhone SE alte Generation, 320–380) */
@media (max-width: 380px) {
    .bs-container { padding: 0 16px; }
    .bs-header-row { gap: 8px; min-height: 70px; }
    .bs-brand-logo { width: 38px; height: 38px; }
    .bs-brand-name { font-size: 16px; }
    .bs-brand-sub {
        /* Lange Schullinie ggf. ausblenden, damit Logo+Hamburger Platz haben */
        display: none;
    }

    h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    h2 { font-size: clamp(1.6rem, 7vw, 2rem); }

    .bs-hero-eyebrow {
        font-size: 11px; padding: 5px 10px; margin-bottom: 18px;
    }
    .bs-hero-left { padding: 40px 24px; min-height: 280px; }
    .bs-hero-gundi { max-width: 180px; }

    .bs-card { padding: 22px 18px; }
    .bs-info-box { padding: 16px 18px; }
    .bs-cta-banner { padding: 36px 14px; }
    .bs-cta-banner h2 { font-size: 1.4rem; }

    .bs-impact-list li {
        flex-wrap: wrap;
        gap: 10px;
    }
    .bs-impact-amount { font-size: 14px; min-width: 64px; }

    /* Notice-Banner Icon ggf. weglassen */
    .bs-notice-banner-icon { display: none; }

    /* Radio-Card Texte weniger Tracking */
    .bs-radio-card-sub { letter-spacing: 0.02em; }
}

/* ───────────────────────────────────────────────────────────────
   Universelle Touch-Target-Größe für interaktive Elemente.
   `min-height: 44px` ist die Apple HIG / WCAG 2.5.5 Empfehlung.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bs-btn,
    .bs-nav-cta,
    .bs-menu-toggle {
        min-height: 44px;
    }
    /* Ziel-Größe für Footer-Links (kleine Tap-Targets sind dort
       sonst sehr knapp; padding 8px sorgt für ~ 38–44 px) */
    .bs-footer a { min-height: 36px; line-height: 1.4; }
    /* Inline-Links in Prose nicht aufblähen */
    .bs-prose a, .bs-info-box a { min-height: 0; }
}

/* Bilder & Medien sicher im Layout halten */
img, svg, video, iframe { max-width: 100%; }

/* Lange Wörter sauber umbrechen (z.B. E-Mails / URLs) */
.bs-info-box, .bs-prose, .bs-footer { overflow-wrap: anywhere; }

/* ============================================================
   HIGHLIGHT-SEKTION (z. B. Martinsfest-Storytelling)
   Vollflächiges Hintergrundbild + dunkles Overlay + heller Text.
   ============================================================ */
.bs-highlight {
    position: relative;
    color: #fff;
    background-color: #1a0f08;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 110px 0;
    overflow: hidden;
    isolation: isolate;
}
.bs-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(7, 99, 138, 0.78) 0%, rgba(168, 74, 36, 0.55) 55%, rgba(0,0,0,0.65) 100%);
    z-index: -1;
}
.bs-highlight > .bs-container { position: relative; }
.bs-highlight .bs-section-eyebrow {
    color: #ffd986;
    justify-content: flex-start;
}
.bs-highlight .bs-section-eyebrow::before,
.bs-highlight .bs-section-eyebrow::after { background: #ffd986; }
.bs-highlight h2 {
    color: #fff;
    margin: 8px 0 18px;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.bs-highlight-lead {
    font-size: 1.18rem;
    line-height: 1.6;
    max-width: 720px;
    color: rgba(255,255,255,0.94);
    margin: 0 0 20px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.25);
}
.bs-highlight-body {
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 720px;
    color: rgba(255,255,255,0.88);
    margin: 0 0 22px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.bs-highlight-body strong { color: #ffd986; font-weight: 600; }
.bs-highlight-tagline {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 18px;
    background: rgba(255, 197, 50, 0.92);
    color: var(--bs-ink);
    font-family: var(--bs-font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: skewX(var(--bs-skew));
    font-size: 0.95rem;
}
.bs-highlight-tagline > span { display: inline-block; transform: skewX(calc(-1 * var(--bs-skew))); }
@media (max-width: 768px) {
    .bs-highlight { padding: 80px 0; }
}

/* ============================================================
   BILDER-KARUSSELL „Eindrücke"
   Vanilla CSS + JS, eine Kachel pro Viewport, Pfeile + Dots.
   Ohne JS bleibt der erste Slide sichtbar (Fallback).
   ============================================================ */
.bs-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--bs-radius-lg);
    background: var(--bs-ink);
    box-shadow: var(--bs-shadow-lg);
}
.bs-carousel-viewport {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.bs-carousel-track {
    display: flex;
    height: 100%;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.bs-carousel-slide {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
}
/* Weichgezeichneter Hintergrund mit dem gleichen Bild — wirkt wie eine
   farbige „Letterbox" um das eigentliche Foto und schneidet niemanden ab. */
.bs-carousel-slide::before {
    content: '';
    position: absolute;
    inset: -8%;
    background-image: var(--slide-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(0.55) saturate(1.05);
    transform: scale(1.1);
    z-index: 0;
    will-change: transform;
}
.bs-carousel-slide img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

/* Ken-Burns-Effekt: nur der aktive Slide panned & zoomed sanft.
   Odd/Even alternieren die Bewegungsrichtung für etwas Abwechslung. */
@keyframes bsKenBurnsImgA {
    from { transform: scale(1.00) translate3d(0, 0, 0); }
    to   { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
}
@keyframes bsKenBurnsImgB {
    from { transform: scale(1.00) translate3d(0, 0, 0); }
    to   { transform: scale(1.08) translate3d(1.2%, -0.6%, 0); }
}
@keyframes bsKenBurnsBgA {
    from { transform: scale(1.10) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(1.2%, 0.8%, 0); }
}
@keyframes bsKenBurnsBgB {
    from { transform: scale(1.10) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-1.2%, 0.6%, 0); }
}
.bs-carousel-slide[aria-hidden="false"]:nth-child(odd) img {
    animation: bsKenBurnsImgA 8s ease-out both;
}
.bs-carousel-slide[aria-hidden="false"]:nth-child(even) img {
    animation: bsKenBurnsImgB 8s ease-out both;
}
.bs-carousel-slide[aria-hidden="false"]:nth-child(odd)::before {
    animation: bsKenBurnsBgA 8s ease-out both;
}
.bs-carousel-slide[aria-hidden="false"]:nth-child(even)::before {
    animation: bsKenBurnsBgB 8s ease-out both;
}
.bs-carousel-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 70px 28px 28px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.0) 100%);
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 2;
}
.bs-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.92);
    color: var(--bs-primary-darker);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, color .2s ease;
    z-index: 2;
}
.bs-carousel-btn:hover {
    background: var(--bs-primary);
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}
.bs-carousel-btn:focus-visible {
    outline: 3px solid var(--bs-yellow);
    outline-offset: 2px;
}
.bs-carousel-btn--prev { left: 16px; }
.bs-carousel-btn--next { right: 16px; }
.bs-carousel-btn svg { width: 22px; height: 22px; }
.bs-carousel-dots {
    position: absolute;
    left: 0; right: 0; bottom: 14px;
    display: flex; justify-content: center; gap: 8px;
    z-index: 2;
}
.bs-carousel-dot {
    width: 10px; height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, transform .15s ease, width .2s ease;
}
.bs-carousel-dot:hover { background: rgba(255,255,255,0.85); }
.bs-carousel-dot[aria-current="true"] {
    background: #fff;
    width: 28px;
    border-radius: 6px;
}
.bs-carousel-dot:focus-visible {
    outline: 2px solid var(--bs-yellow);
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .bs-carousel-btn { width: 40px; height: 40px; }
    .bs-carousel-btn--prev { left: 10px; }
    .bs-carousel-btn--next { right: 10px; }
    .bs-carousel-caption { font-size: 0.95rem; padding: 50px 18px 18px; }
    .bs-carousel-dots { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .bs-carousel-track { transition: none; }
    .bs-carousel-slide[aria-hidden="false"] img,
    .bs-carousel-slide[aria-hidden="false"]::before {
        animation: none;
    }
}

/* ───────────────────────────────────────────────────────────────
   Mitgliedsantrag · Multi-Step-Wizard
   ─────────────────────────────────────────────────────────────── */

/* Fortschrittsleiste & Schritt-Nummern: ohne JS unsichtbar,
   damit das Formular weiterhin als klassisches Long-Form funktioniert. */
.bs-wizard-steps,
.bs-wizard-progress,
.bs-wizard-nav { display: none; }

.bs-wizard.is-on .bs-wizard-steps,
.bs-wizard.is-on .bs-wizard-progress,
.bs-wizard.is-on .bs-wizard-nav { display: flex; }

/* Im Wizard-Modus nur den aktiven Step zeigen */
.bs-wizard.is-on .bs-wizard-step { display: none; }
.bs-wizard.is-on .bs-wizard-step.is-active { display: block; }

/* ── Schritt-Indikatoren oben ─────────────────────────────── */
.bs-wizard-steps {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    gap: 4px;
    align-items: center;
    counter-reset: step;
}
.bs-wizard-steps-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bs-ink-3);
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.01em;
    min-width: 0;
}
.bs-wizard-steps-num {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--bs-line-soft);
    color: var(--bs-ink-3);
    font-family: var(--bs-font-display);
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.bs-wizard-steps-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-wizard-steps-item.is-active {
    color: var(--bs-primary-darker);
}
.bs-wizard-steps-item.is-active .bs-wizard-steps-num {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.bs-wizard-steps-item.is-done {
    color: var(--bs-ink-2);
    cursor: pointer;
}
.bs-wizard-steps-item.is-done .bs-wizard-steps-num {
    background: var(--bs-primary-soft);
    border-color: var(--bs-primary-light);
    color: var(--bs-primary-darker);
}

/* ── Echte Fortschrittsleiste (ersetzt den falschen „Ladebalken") ── */
.bs-wizard-progress {
    height: 6px;
    background: var(--bs-line-soft);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 28px;
    display: none;
}
.bs-wizard-progress > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary-light), var(--bs-primary));
    border-radius: 999px;
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
    width: 0;
}

/* ── Step-Container leicht eingerahmt ─────────────────────── */
.bs-wizard-step {
    animation: bsWizardFade .3s ease both;
}
@keyframes bsWizardFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Navigation: Zurück / Weiter ──────────────────────────── */
.bs-wizard-nav {
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-line-soft);
}
.bs-wizard-nav > * { flex: 0 0 auto; }
.bs-wizard-nav .bs-btn span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bs-wizard-steps { gap: 2px; }
    .bs-wizard-steps-item { gap: 6px; font-size: 11.5px; }
    .bs-wizard-steps-num { width: 24px; height: 24px; font-size: 12px; }
    /* Auf engen Screens nur das aktive Label zeigen, Rest nur als Nummer */
    .bs-wizard-steps-item:not(.is-active) .bs-wizard-steps-label { display: none; }
    .bs-wizard-nav { gap: 10px; }
    .bs-wizard-nav .bs-btn { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-wizard-step { animation: none; }
    .bs-wizard-progress > i { transition: none; }
}

/* ───────────────────────────────────────────────────────────────
   Consent-Banner · Webanalyse Opt-In (Matomo)
   ─────────────────────────────────────────────────────────────── */
.bs-cookie-banner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    max-width: 620px;
    margin-inline: auto;
    box-sizing: border-box;
    z-index: 999;
    background: #fff;
    border: 1px solid var(--bs-line-soft);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(13, 134, 181, 0.14), 0 4px 12px rgba(22, 41, 52, 0.06);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.bs-cookie-banner.is-in  { transform: translateY(0); opacity: 1; }
.bs-cookie-banner.is-out { transform: translateY(calc(100% + 24px)); opacity: 0; }

.bs-cookie-banner-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--bs-primary-soft);
    color: var(--bs-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bs-cookie-banner-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
    font-size: 13.5px; line-height: 1.45;
    color: var(--bs-ink-2);
    overflow-wrap: anywhere;
}
.bs-cookie-banner-text strong {
    font-family: var(--bs-font-display);
    font-size: 14px;
    color: var(--bs-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.bs-cookie-banner-text a {
    color: var(--bs-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.bs-cookie-banner-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bs-cookie-banner .bs-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 13.5px;
}
.bs-cookie-banner-decline {
    background: transparent;
    color: var(--bs-ink-2);
    box-shadow: inset 0 0 0 1.5px var(--bs-line-soft);
}
.bs-cookie-banner-decline:hover {
    background: var(--bs-line-soft);
    color: var(--bs-ink);
    box-shadow: inset 0 0 0 1.5px var(--bs-line-soft);
}

@media (max-width: 640px) {
    .bs-cookie-banner {
        left: 10px; right: 10px; bottom: 10px;
        max-width: none;
        margin-inline: 0;
        flex-wrap: wrap;
        padding: 12px 14px;
        gap: 10px 12px;
    }
    .bs-cookie-banner-text {
        flex-basis: calc(100% - 54px);
        font-size: 13px;
    }
    .bs-cookie-banner-actions {
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 8px;
    }
    .bs-cookie-banner .bs-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 11px 12px;
        font-size: 13px;
        letter-spacing: 0.04em;
    }
}
@media (max-width: 380px) {
    .bs-cookie-banner-actions { flex-direction: column; }
    .bs-cookie-banner .bs-btn { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-cookie-banner { transition: opacity .15s ease; transform: none; }
    .bs-cookie-banner.is-out { opacity: 0; }
}

/* ───────────────────────────────────────────────────────────────
   Leitbild der Schule · drei prägnante Statement-Karten
   ─────────────────────────────────────────────────────────────── */
.bs-motto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.bs-motto-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--bs-line-soft);
    border-radius: var(--bs-radius-lg);
    padding: 40px 24px 32px;
    text-align: center;
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bs-motto-card::before {
    content: '';
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 4px;
    background: var(--bs-primary);
    transform: skewX(var(--bs-skew, -8deg));
    border-radius: 0 0 4px 4px;
}
.bs-motto-card::after {
    content: '„';
    position: absolute;
    top: 4px; left: 16px;
    font-family: var(--bs-font-display);
    font-size: 80px;
    line-height: 1;
    color: var(--bs-primary-soft);
    pointer-events: none;
}
.bs-motto-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-shadow-md);
    border-color: var(--bs-primary-soft);
}
.bs-motto-text {
    display: block;
    font-family: var(--bs-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--bs-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

@media (max-width: 820px) {
    .bs-motto-grid { grid-template-columns: 1fr; gap: 14px; }
    .bs-motto-card { padding: 32px 20px 26px; }
    .bs-motto-text { font-size: 1.2rem; }
}

/* ───────────────────────────────────────────────────────────────
   Partner & Förderer · Logo-Grid
   ─────────────────────────────────────────────────────────────── */
.bs-partner-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 32px;
    align-items: stretch;
}

.bs-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--bs-line-soft);
    border-radius: var(--bs-radius-md);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bs-partner:hover,
.bs-partner:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--bs-shadow-md);
    border-color: var(--bs-primary-soft);
    outline: none;
}
.bs-partner img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(25%);
    opacity: 0.92;
    transition: filter .25s ease, opacity .25s ease;
}
.bs-partner:hover img,
.bs-partner:focus-visible img {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 900px) {
    .bs-partner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .bs-partner-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bs-partner { min-height: 90px; padding: 14px; }
    .bs-partner img { max-height: 56px; }
}

/* ───────────────────────────────────────────────────────────────
   Projekt-Banner (z. B. „Ich bin groß, ich geh alleine")
   ─────────────────────────────────────────────────────────────── */
.bs-project-banner {
    margin-top: 32px;
    border-radius: var(--bs-radius-lg);
    overflow: hidden;
    box-shadow: var(--bs-shadow-md);
    background: var(--bs-primary-soft);
}
.bs-project-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ───────────────────────────────────────────────────────────────
   Klickbare Karten-Variante (a.bs-card--link)
   – nutzt das normale Karten-Layout, fügt einen CTA-Pfeil ein
   ─────────────────────────────────────────────────────────────── */
a.bs-card,
a.bs-card--link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
a.bs-card:hover,
a.bs-card--link:hover {
    color: inherit;
}
a.bs-card--link:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 3px;
}
.bs-card--link p { flex-grow: 1; }

.bs-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-primary);
    letter-spacing: 0.02em;
    transition: gap .2s ease, color .2s ease;
}
.bs-card--link:hover .bs-card-cta {
    gap: 10px;
    color: var(--bs-primary-dark);
}

/* CTA-Footer am Ende einer Sektion (kleiner Fließtext + Button) */
.bs-section-cta {
    margin-top: 36px;
    padding: 22px 26px;
    background: var(--bs-primary-soft);
    border-radius: var(--bs-radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.bs-section-cta p {
    margin: 0;
    color: var(--bs-ink-2);
    font-size: 0.96rem;
    flex: 1 1 280px;
}
.bs-section-cta .bs-btn { flex-shrink: 0; }

/* ───────────────────────────────────────────────────────────────
   Teaser-Layout (Bild links, Text + Buttons rechts)
   – schlanker Ersatz für ausführliche bs-grid-2-Blöcke
   ─────────────────────────────────────────────────────────────── */
.bs-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 36px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--bs-line-soft);
    border-radius: var(--bs-radius-lg);
    overflow: hidden;
    box-shadow: var(--bs-shadow-md);
}
.bs-teaser-media {
    height: 100%;
    overflow: hidden;
    background: var(--bs-primary-soft);
}
.bs-teaser-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}
.bs-teaser-body {
    padding: 36px 40px 36px 0;
}
.bs-teaser-body h2 { margin-bottom: 14px; }
.bs-teaser-body p { color: var(--bs-ink-2); margin-bottom: 18px; }
.bs-teaser-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
@media (max-width: 820px) {
    .bs-teaser {
        grid-template-columns: 1fr;
    }
    .bs-teaser-body {
        padding: 26px 28px 30px;
    }
    .bs-teaser-media img {
        min-height: 180px;
        max-height: 280px;
    }
}

/* ───────────────────────────────────────────────────────────────
   Sekundäre Meta-Links (Hero, Highlight)
   ─────────────────────────────────────────────────────────────── */
.bs-hero-meta {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--bs-ink-3);
}
.bs-hero-meta a {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.bs-hero-meta a:hover { border-bottom-color: var(--bs-primary); }

.bs-highlight-meta {
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
}
.bs-highlight-meta a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 2px;
    transition: border-color .2s ease;
}
.bs-highlight-meta a:hover { border-bottom-color: #fff; }

/* ───────────────────────────────────────────────────────────────
   Anker-Targets: Sticky-Header-Offset, damit Fragment-Links
   nicht hinter dem Header verschwinden.
   ─────────────────────────────────────────────────────────────── */
:target {
    scroll-margin-top: 100px;
}
.bs-card[id] {
    scroll-margin-top: 100px;
}