/* ==========================================================================
   Boßelverein St. Peter-Ording — Sitepackage stylesheet
   ========================================================================== */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: oklch(0.99 0.004 250);
    color: oklch(0.22 0.02 255);
    overflow-x: hidden;
}

a {
    color: oklch(45% 0.14 255);
    text-decoration: none;
}

a:hover {
    color: oklch(35% 0.15 255);
}

img {
    max-width: 100%;
}

.bvspo-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.bvspo-btn--primary {
    background: oklch(0.45 0.14 255);
    color: #fff;
}

.bvspo-btn--primary:hover {
    color: #fff;
    opacity: 0.92;
}

.bvspo-btn--outline {
    background: #fff;
    color: oklch(0.3 0.14 255);
    border: 1px solid oklch(0.85 0.02 255);
}

.bvspo-btn--outline:hover {
    color: oklch(0.3 0.14 255);
    background: oklch(0.97 0.01 255);
}

.bvspo-btn--light {
    background: #fff;
    color: oklch(0.2 0.03 255);
    margin-top: 32px;
}

.bvspo-btn--light:hover {
    color: oklch(0.2 0.03 255);
    opacity: 0.9;
}

.bvspo-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: oklch(0.45 0.14 255);
    margin-bottom: 12px;
}

.bvspo-eyebrow--light {
    color: oklch(0.75 0.08 240);
}

.bvspo-h2 {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    margin: 0;
    color: oklch(0.25 0.03 255);
}

.bvspo-h2--light {
    color: #fff;
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------
   Sticky header
   -------------------------------------------------------------------- */
.bvspo-header-stack {
    position: sticky;
    top: 0;
    z-index: 50;
}

.bvspo-header {
    background: oklch(0.99 0.004 250 / 0.9);
    backdrop-filter: blur(8px);
}

.bvspo-header__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
}

.bvspo-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bvspo-brand__logo {
    height: 36px;
    width: 36px;
    object-fit: contain;
}

.bvspo-brand__name {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: oklch(0.3 0.14 255);
}

.bvspo-nav {
    display: flex;
    flex: 1;
    justify-content: center;
}

.bvspo-nav__list {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
}

.bvspo-nav__item {
    position: relative;
}

.bvspo-nav__item>a {
    color: oklch(0.22 0.02 255);
}

.bvspo-nav__item>a[href="/verein"] {
    cursor: default;
}

.bvspo-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 8px 0 0;
    padding: 8px;
    list-style: none;
    background: oklch(0.99 0.004 250);
    border: 1px solid oklch(0.9 0.02 255);
    border-radius: 10px;
    box-shadow: 0 12px 28px oklch(0 0 0 / 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.bvspo-nav__item:hover>.bvspo-nav__submenu,
.bvspo-nav__item:focus-within>.bvspo-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bvspo-nav__subitem a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: oklch(0.22 0.02 255);
    white-space: nowrap;
}

.bvspo-nav__subitem a:hover {
    background: oklch(0.95 0.02 250);
}

.bvspo-header__cta {
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 14px;
}

.bvspo-burger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: oklch(0.3 0.14 255);
    padding: 4px 8px;
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.bvspo-mitteilungen {
    background: #fff;
    padding: 10px 24px;
    border-top: 1px solid oklch(0.9 0.02 255);
    border-bottom: 1px solid oklch(0.9 0.02 255);
}

.bvspo-mitteilungen__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}

.bvspo-mitteilung {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: oklch(0.22 0.02 255);
}

.bvspo-mitteilung__icon {
    flex: none;
    width: 16px;
    height: 15px;
    align-self: center;
}

.bvspo-mitteilung__title {
    font-weight: 700;
}

.bvspo-mitteilung__text {
    color: oklch(0.4 0.02 255);
}

.bvspo-hero {
    position: relative;
    padding: 96px 24px 88px;
    text-align: center;
    background: linear-gradient(oklch(0.95 0.03 240) 0%, oklch(0.99 0.004 250) 70%);
    overflow: hidden;
}

.bvspo-hero__inner {
    max-width: 780px;
    margin: 0 auto;
    animation: fadeUp 0.7s ease both;
}

.bvspo-hero__title {
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.08;
    font-weight: 800;
    margin: 0 0 20px;
    color: oklch(0.25 0.03 255);
}

.bvspo-hero__text {
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.6;
    color: oklch(0.38 0.02 255);
    margin: 0 0 34px;
    max-width: 560px;
    margin-inline: auto;
}

.bvspo-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --------------------------------------------------------------------
   Generic section shell (used by "Angebot" / "Kontakt" content elements)
   -------------------------------------------------------------------- */
.bvspo-section {
    padding: 88px 24px;
}

.bvspo-section__inner {
    max-width: 1140px;
    margin: 0 auto;
}

.bvspo-section__eyebrow-wrap {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

/* --------------------------------------------------------------------
   Über uns (core textmedia content element)
   -------------------------------------------------------------------- */
.bvspo-about {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 56px;
    max-width: 1140px;
    margin: 0 auto;
}

.bvspo-about__media {
    flex: 1 1 420px;
    order: 2;
}

.bvspo-about--media-left .bvspo-about__media {
    order: 1;
}

.bvspo-about--media-left .bvspo-about__text {
    order: 2;
}

.bvspo-about__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
}

.bvspo-about__text {
    flex: 1 1 420px;
}

.bvspo-about__text .bvspo-h2 {
    margin-bottom: 20px;
}

.bvspo-about__text p {
    margin: 0 0 16px;
    line-height: 1.6;
    color: oklch(0.38 0.02 255);
}

.bvspo-about__text p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------
   Generic content page (Standard template: Termine, Verein, ...)
   -------------------------------------------------------------------- */
.bvspo-page {
    padding: 64px 24px 96px;
}

.bvspo-page__inner {
    max-width: 860px;
    margin: 0 auto;
}

/* Berichte needs more room for its sidebar + card grid than a plain
   text page — scoped to only this page via :has() so every other
   Standard-template page keeps the narrower 860px reading width. */
.bvspo-page:has(.bvspo-section--berichte) .bvspo-page__inner {
    max-width: 1140px;
}

.bvspo-page__content {
    font-size: 17px;
    line-height: 1.7;
    color: oklch(0.3 0.02 255);
}

.bvspo-page__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
}

.bvspo-page__content>.frame {
    grid-column: 1 / -1;
    margin: 0 0 40px;
}

.bvspo-page__content>.frame:last-child {
    margin-bottom: 0;
}

/* Section-style elements (Mitglieder/Termine/Seitentitel) bring their own
   88px top/bottom padding, meant for the homepage where they sit with
   nothing else around them. Nested here inside .bvspo-page, that stacks
   on top of the page's own 64px/40px/96px rhythm — doubling to 152px at
   the page top, and up to 216px between two such elements in a row. The
   page wrapper already owns vertical spacing in this context, so drop
   the section's own top/bottom padding here specifically. */
.bvspo-page__content .bvspo-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* "Halbe Breite" frame option: two in a row share the two-column grid track */
.bvspo-page__content>.frame.frame-bvspo-half {
    grid-column: auto;
}

/* Keep both halves' tables top-aligned: the second half repeats the same
   header (for equal height) but hides its text, since one heading is enough. */
.bvspo-page__content .frame-bvspo-half+.frame-bvspo-half header :is(h2, h3) {
    visibility: hidden;
}

/* "Abschnitt" frame options: full-bleed alternating section bands
   (e.g. Das Boßeln), matching the light-blue tone from the cards section. */
.bvspo-page__content>.frame.frame-bvspo-band-light,
.bvspo-page__content>.frame.frame-bvspo-band-tint {
    grid-column: 1 / -1;
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 0;
    padding: 56px max(24px, calc((100vw - 860px) / 2));
    box-sizing: border-box;
}

.bvspo-page__content>.frame.frame-bvspo-band-tint {
    background: oklch(0.96 0.015 245);
}

.bvspo-page__content>.frame.frame-bvspo-band-light+.frame.frame-bvspo-band-tint,
.bvspo-page__content>.frame.frame-bvspo-band-tint+.frame.frame-bvspo-band-light {
    margin-top: 0;
}

.bvspo-page__content>.frame.frame-bvspo-band-light .ce-bodytext,
.bvspo-page__content>.frame.frame-bvspo-band-tint .ce-bodytext {
    max-width: 780px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .bvspo-page__content>.frame.frame-bvspo-half {
        grid-column: 1 / -1;
    }
}

.bvspo-page__content p {
    margin: 0 0 16px;
}

.bvspo-page__content h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 16px;
    color: oklch(0.25 0.03 255);
}

.bvspo-page__content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    color: oklch(0.3 0.02 255);
}

.bvspo-page__img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border-radius: 12px;
}

/* Core "table" content element (editable datasets: Vereinsmeister, Erfolge, ...) */
.ce-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.ce-table th,
.ce-table td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid oklch(0.9 0.02 255);
}

.ce-table thead th {
    font-weight: 700;
    color: oklch(0.3 0.14 255);
    border-bottom: 2px solid oklch(0.3 0.14 255);
}

.ce-table tbody tr:nth-child(even) {
    background: oklch(0.97 0.01 250);
}

/* --------------------------------------------------------------------
   Über uns (core textmedia CType)
   -------------------------------------------------------------------- */
.bvspo-section--about {
    padding: 88px 24px;
    max-width: 1140px;
    margin: 0 auto;
}

#ueber-uns .ce-textpic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 56px;
    align-items: center;
}

#ueber-uns .ce-bodytext {
    order: 1;
}

#ueber-uns .ce-gallery {
    order: 2;
}

#ueber-uns .ce-bodytext h1,
#ueber-uns .ce-bodytext h2 {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    margin: 0 0 20px;
    color: oklch(0.25 0.03 255);
}

#ueber-uns .ce-bodytext p {
    font-size: 16px;
    line-height: 1.75;
    color: oklch(0.38 0.02 255);
    margin: 0 0 16px;
}

#ueber-uns .ce-bodytext p:last-child {
    margin-bottom: 0;
}

#ueber-uns .ce-gallery .image {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: oklch(0.3 0.1 255 / 0.3) 0 20px 40px -20px;
    margin: 0;
}

#ueber-uns .ce-gallery .image-embed-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------
   Angebot: 4-card grid ("cards" content element)
   -------------------------------------------------------------------- */
.bvspo-section--cards {
    background: oklch(0.96 0.015 245);
}

.bvspo-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.bvspo-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 28px;
    border: 1px solid oklch(0.9 0.015 245);
    transition: transform 0.2s, box-shadow 0.2s;
}

.bvspo-card:hover {
    transform: translateY(-4px);
    box-shadow: oklch(0.3 0.1 255 / 0.15) 0 16px 32px -18px;
}

.bvspo-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
}

.bvspo-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: oklch(0.25 0.03 255);
}

.bvspo-card__text {
    font-size: 15px;
    line-height: 1.6;
    color: oklch(0.42 0.02 255);
    margin: 0;
}

/* --------------------------------------------------------------------
   Galerie: 3-column square grid (core image/gallery CType)
   -------------------------------------------------------------------- */
.bvspo-section--gallery {
    max-width: 1140px;
    margin: 0 auto;
    padding: 88px 24px;
}

#galerie .ce-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

#galerie .ce-image,
#galerie .ce-outer,
#galerie .ce-inner,
#galerie .ce-row,
#galerie .ce-column {
    display: contents;
}

#galerie .image {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: oklch(0.3 0.1 255 / 0.25) 0 10px 24px -16px;
    margin: 0;
}

#galerie .image-embed-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform 0.4s;
}

#galerie .image:hover .image-embed-item {
    transform: scale(1.05);
}

@media (max-width: 720px) {
    #galerie .ce-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Lightbox (click-to-enlarge for the Galerie grid) */
.bvspo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: oklch(0.1 0.02 255 / 0.85);
    cursor: zoom-out;
}

.bvspo-lightbox.is-open {
    display: flex;
}

.bvspo-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.bvspo-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: oklch(0.99 0.004 250 / 0.15);
    color: white;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.bvspo-lightbox-close:hover {
    background: oklch(0.99 0.004 250 / 0.28);
}

/* --------------------------------------------------------------------
   Mitglieder-Übersicht ("mitglieder" content element)
   -------------------------------------------------------------------- */
.bvspo-section--mitglieder {}

.bvspo-member-group {
    margin-bottom: 56px;
}

.bvspo-member-group:last-child {
    margin-bottom: 0;
}

.bvspo-member-group__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px;
    color: oklch(0.3 0.14 255);
    text-align: center;
}

.bvspo-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.bvspo-members-empty {
    text-align: center;
    color: oklch(0.5 0.02 255);
}

.bvspo-member {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    border: 1px solid oklch(0.9 0.015 245);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.bvspo-member__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: oklch(0.9 0.02 255);
    color: oklch(0.35 0.02 255);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
}

.bvspo-member:focus-visible {
    outline: 2px solid oklch(0.45 0.14 255);
    outline-offset: 2px;
}

.bvspo-member__portrait {
    width: 120px;
    height: 150px;
    margin: 0 auto 16px;
    border-radius: 16px;
    overflow: hidden;
    background: oklch(0.92 0.03 240);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bvspo-member__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bvspo-member__placeholder {
    font-size: 26px;
    font-weight: 700;
    color: oklch(0.45 0.14 255);
}

.bvspo-member__name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
    color: oklch(0.25 0.03 255);
}

.bvspo-member__role {
    font-size: 13px;
    color: oklch(0.5 0.02 255);
    margin: 0;
}

/* Interactive hover affordance — only on devices with a real hover input,
   so touch devices don't get a "stuck" hover state. */
@media (hover: hover) {
    .bvspo-member:hover {
        transform: translateY(-4px);
        box-shadow: oklch(0.3 0.1 255 / 0.15) 0 16px 32px -18px;
        border-color: oklch(0.8 0.03 250);
    }
}

/* Member modal — overlay/dialog styling mirrors .bvspo-lightbox */
.bvspo-member-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: oklch(0.1 0.02 255 / 0.85);
}

.bvspo-member-modal.is-open {
    display: flex;
}

.bvspo-member-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 40px 32px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.bvspo-member-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: oklch(0.95 0.01 250);
    color: oklch(0.3 0.02 255);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.bvspo-member-modal__close:hover {
    background: oklch(0.9 0.02 250);
}

.bvspo-member-modal__portrait {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 0 20px;
}

.bvspo-member-modal__name {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: oklch(0.25 0.03 255);
}

.bvspo-member-modal__role {
    font-size: 14px;
    font-weight: 600;
    color: oklch(0.45 0.14 255);
    margin: 0 0 16px;
}

.bvspo-member-modal__birthday {
    font-size: 14px;
    color: oklch(0.5 0.02 255);
    margin: 0 0 16px;
}

.bvspo-member-modal__weitester-wurf,
.bvspo-member-modal__weiteste-serie {
    font-size: 14px;
    color: oklch(0.5 0.02 255);
    margin: 0 0 16px;
}

.bvspo-member-modal__bio {
    font-size: 15px;
    line-height: 1.6;
    color: oklch(0.35 0.02 255);
    margin: 0 0 16px;
}

.bvspo-member-modal__details {
    display: grid;
    grid-template-columns: 1fr;
    font-size: 14px;
    margin: 0;
}

.bvspo-member-modal__details dt {
    font-weight: 700;
    color: oklch(0.3 0.14 255);
    margin-top: 12px;
}

.bvspo-member-modal__details dt:first-child {
    margin-top: 0;
}

.bvspo-member-modal__details dd {
    margin: 2px 0 0;
    color: oklch(0.35 0.02 255);
}

/* Member hover preview — small, anchored near the cursor, no backdrop.
   Reuses the .bvspo-member-modal__* content classes at a smaller size
   so renderMemberInto() doesn't need two separate markup templates. */
.bvspo-member-popover {
    position: fixed;
    z-index: 1000;
    display: none;
    left: 0;
    top: 0;
    width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid oklch(0.9 0.015 245);
    box-shadow: 0 12px 32px -8px oklch(0.2 0.05 255 / 0.35);
    padding: 16px 18px;
    pointer-events: none;
}

.bvspo-member-popover.is-open {
    display: block;
    pointer-events: auto;
}

.bvspo-member-popover .bvspo-member-modal__name {
    font-size: 16px;
    margin-bottom: 2px;
}

.bvspo-member-popover .bvspo-member-modal__role {
    font-size: 12px;
    margin-bottom: 10px;
}

.bvspo-member-popover .bvspo-member-modal__birthday,
.bvspo-member-popover .bvspo-member-modal__weitester-wurf,
.bvspo-member-popover .bvspo-member-modal__weiteste-serie {
    font-size: 12px;
    margin-bottom: 8px;
}

.bvspo-member-popover .bvspo-member-modal__bio {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.bvspo-member-popover .bvspo-member-modal__details {
    font-size: 12px;
}

/* --------------------------------------------------------------------
   Kontakt (dark section)
   -------------------------------------------------------------------- */
.bvspo-kontakt {
    padding: 88px 24px;
    background: oklch(0.2 0.03 255);
    color: #fff;
}

.bvspo-kontakt__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 56px;
}

.bvspo-kontakt__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 16px;
    line-height: 1.6;
}

.bvspo-kontakt__row {
    display: flex;
    gap: 14px;
}

.bvspo-kontakt__row a {
    color: #fff;
}

.bvspo-kontakt__label {
    opacity: 0.6;
    min-width: 80px;
}

.bvspo-kontakt__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 16px;
}

.bvspo-kontakt__logo img {
    width: 100%;
    max-width: 280px;
    height: auto;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.bvspo-footer {
    padding: 32px 24px;
    background: oklch(0.16 0.03 255);
    color: oklch(0.7 0.02 250);
}

.bvspo-footer__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}

.bvspo-footer__links {
    display: flex;
    gap: 20px;
}

.bvspo-footer__links a {
    color: oklch(0.7 0.02 250);
}

/* --------------------------------------------------------------------
   Termine-Übersicht ("termine" content element)
   -------------------------------------------------------------------- */
.bvspo-section--termine {}

.bvspo-termine {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bvspo-termine-empty {
    text-align: center;
    color: oklch(0.5 0.02 255);
}

.bvspo-termine-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0;
    color: oklch(0.55 0.02 255);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bvspo-termine-divider::before,
.bvspo-termine-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: oklch(0.88 0.015 245);
}

.bvspo-termin {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    border: 1px solid oklch(0.9 0.015 245);
}

.bvspo-termin__date {
    flex: 0 0 auto;
    min-width: 168px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    color: oklch(0.35 0.14 255);
    font-weight: 700;
}

.bvspo-termin__date-text {
    font-size: 15px;
}

.bvspo-termin__time {
    font-size: 13px;
    font-weight: 500;
    color: oklch(0.5 0.02 255);
}

.bvspo-termin__body {
    flex: 1 1 auto;
}

.bvspo-termin__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
}

.bvspo-termin__tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    background: oklch(0.9 0.02 255);
    color: oklch(0.35 0.02 255);
}

.bvspo-termin__tag--herren {
    background: oklch(0.88 0.06 255);
    color: oklch(0.3 0.1 255);
}

.bvspo-termin__tag--jugend {
    background: oklch(0.9 0.08 140);
    color: oklch(0.32 0.1 140);
}

.bvspo-termin__tag--alle {
    background: oklch(0.9 0.02 255);
    color: oklch(0.35 0.02 255);
}

.bvspo-termin__info {
    margin: 0;
    color: oklch(0.4 0.02 255);
    font-size: 14px;
    line-height: 1.5;
}

.bvspo-termine-loadmore {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.bvspo-termine-loadmore__button {
    font: inherit;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1px solid oklch(0.9 0.015 245);
    background: #fff;
    color: oklch(0.35 0.14 255);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.bvspo-termine-loadmore__button:hover {
    background: oklch(0.96 0.015 245);
}

.bvspo-termine-loadmore__button:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 640px) {
    .bvspo-termin {
        flex-direction: column;
        gap: 6px;
    }

    .bvspo-termin__date {
        flex-direction: row;
        gap: 8px;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------
   Mobile navigation (< 720px)
   -------------------------------------------------------------------- */
@media (max-width: 720px) {
    .bvspo-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: oklch(0.99 0.004 250);
        border-bottom: 1px solid oklch(0.9 0.02 255);
        max-height: 0;
        overflow: hidden auto;
        transition: max-height 0.25s ease;
    }

    .bvspo-nav.is-open {
        max-height: 70vh;
    }

    .bvspo-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .bvspo-nav__item>a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 0;
    }

    .bvspo-nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: oklch(0.97 0.01 250);
        margin: 0;
        padding: 0;
    }

    .bvspo-nav__subitem a {
        text-align: center;
        padding: 10px 0;
    }

    .bvspo-header__cta {
        display: none;
    }

    .bvspo-burger {
        display: block;
    }

    .bvspo-header__inner {
        position: relative;
    }
}

/* --------------------------------------------------------------------
   Berichte-Übersicht ("berichte" content element)
   -------------------------------------------------------------------- */
.bvspo-section--berichte {}

.bvspo-berichte {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 24px;
}

.bvspo-berichte-empty {
    text-align: center;
    color: oklch(0.5 0.02 255);
}

.bvspo-berichte-loading {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: oklch(0.5 0.02 255);
    margin: 0 0 24px;
}

.bvspo-berichte-sentinel {
    height: 1px;
}

/*
 * Full-bleed band per card, same technique as the "Abschnitt" bands on Das
 * Boßeln (position:relative + width:100vw), but this card's actual static
 * position is NOT centered on the viewport like that page's content column
 * is — it sits to the right of the 240px sidebar + 48px gap inside the
 * centered 1140px section. The plain left:50%/margin:-50vw trick silently
 * assumes a centered ancestor and would bleed off-center here, so the
 * sidebar offset is folded into the margin/padding math via a custom
 * property instead (zeroed out once the sidebar stacks above the content
 * at the narrow breakpoint below, where the offset no longer applies).
 */
.bvspo-berichte-layout {
    /* Distance from .bvspo-section__inner's edge to the viewport edge:
       the centering gap around the 1140px column, plus the 24px page
       padding and 24px section padding it sits inside of (both fixed,
       so they still apply once the centering gap itself bottoms out). */
    --bvspo-berichte-inset: max(48px, calc((100vw - 1140px) / 2 + 24px));
    --bvspo-berichte-sidebar-offset: 288px;
}

.bvspo-bericht-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100vw;
    margin-left: calc(-1 * (var(--bvspo-berichte-inset) + var(--bvspo-berichte-sidebar-offset)));
    padding: 0 var(--bvspo-berichte-inset) 0 calc(var(--bvspo-berichte-inset) + var(--bvspo-berichte-sidebar-offset));
    box-sizing: border-box;
}

/* Same light/tint alternation as those full-bleed bands, applied per card. */
.bvspo-bericht-card:nth-child(odd) {
    background: oklch(0.99 0.004 250);
}

.bvspo-bericht-card:nth-child(even) {
    background: oklch(0.96 0.015 245);
}

.bvspo-bericht-card__thumb {
    aspect-ratio: 16 / 9;
    background: oklch(0.92 0.03 240);
    overflow: hidden;
}

.bvspo-bericht-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bvspo-bericht-card__body {
    padding: 24px 0;
    flex: 1 1 auto;
}

.bvspo-bericht-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bvspo-bericht-card__date {
    font-size: 13px;
    font-weight: 600;
    color: oklch(0.5 0.02 255);
}

.bvspo-bericht-card__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
}

.bvspo-bericht-card__title a {
    color: oklch(0.25 0.03 255);
    text-decoration: none;
}

.bvspo-bericht-card__title a:hover,
.bvspo-bericht-card__title a:focus-visible {
    text-decoration: underline;
}

.bvspo-bericht-card__typen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.bvspo-bericht-card__content {
    font-size: 15px;
    line-height: 1.7;
    color: oklch(0.3 0.02 255);
}

.bvspo-bericht-card__content p {
    margin: 0 0 1.2em;
}

.bvspo-bericht-card__content p:last-child {
    margin-bottom: 0;
}

.bvspo-bericht-card__content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 1em auto;
}

.bvspo-bericht-card__content figure {
    margin: 1.5em 0;
}

.bvspo-bericht-card__content figcaption {
    font-size: 13px;
    color: oklch(0.45 0.02 255);
    text-align: center;
    margin-top: 8px;
}

.bvspo-bericht-card__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.bvspo-bericht-card__content th,
.bvspo-bericht-card__content td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid oklch(0.9 0.02 255);
}

.bvspo-bericht-card__content thead th {
    font-weight: 700;
    color: oklch(0.3 0.14 255);
    border-bottom: 2px solid oklch(0.3 0.14 255);
}

.bvspo-bericht-card__content tbody tr:nth-child(even) {
    background: oklch(0.97 0.01 250);
}

.bvspo-bericht-typ {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    background: oklch(0.9 0.02 255);
    color: oklch(0.35 0.02 255);
}

.bvspo-bericht-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
    background: oklch(0.9 0.02 255);
    color: oklch(0.35 0.02 255);
}

.bvspo-bericht-tag--herren {
    background: oklch(0.88 0.06 255);
    color: oklch(0.3 0.1 255);
}

.bvspo-bericht-tag--jugend {
    background: oklch(0.9 0.08 140);
    color: oklch(0.32 0.1 140);
}

.bvspo-bericht-tag--alle {
    background: oklch(0.9 0.02 255);
    color: oklch(0.35 0.02 255);
}

.bvspo-berichte-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-areas: "sidebar content";
    align-items: start;
    gap: 48px;
}

.bvspo-berichte-layout__content {
    grid-area: content;
    min-width: 0;
}

.bvspo-berichte-layout__sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bvspo-berichte-sidebar__group {
    padding: 16px;
    border: 1px solid oklch(0.9 0.015 245);
    border-radius: 14px;
    /* Sits on top of the now-full-bleed, alternating card bands (see
       .bvspo-bericht-card) as they scroll past underneath it — an opaque
       background keeps it legible instead of tinting along with them. */
    background: oklch(0.99 0.004 250);
}

.bvspo-bericht-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.bvspo-bericht-filter--vertical {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.bvspo-bericht-filter--vertical .bvspo-bericht-filter__item {
    text-align: left;
}

.bvspo-bericht-filter__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 6px;
    border-radius: 8px;
    color: oklch(0.35 0.14 255);
    background: transparent;
    transition: background 0.2s, color 0.2s;
}

.bvspo-bericht-filter__item::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("../Icons/bossel-kugel.svg") no-repeat center / contain;
    opacity: 0;
    transition: opacity 0.2s;
}

.bvspo-bericht-filter__item:hover {
    background: oklch(0.96 0.015 245);
}

.bvspo-bericht-filter__item:hover::before,
.bvspo-bericht-filter__item--active::before {
    opacity: 1;
}

.bvspo-bericht-filter__year-select {
    width: 100%;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: oklch(0.35 0.14 255);
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.bvspo-bericht-filter__year-select:hover {
    background: oklch(0.96 0.015 245);
}

.bvspo-bericht-search__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: oklch(0.5 0.02 255);
    margin-bottom: 8px;
}

.bvspo-bericht-search__field {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.bvspo-bericht-search__input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    padding: 8px 12px;
    border: 1px solid oklch(0.9 0.015 245);
    border-radius: 8px;
    color: oklch(0.35 0.02 255);
    background: #fff;
}

.bvspo-bericht-search__input:focus-visible {
    outline: 2px solid oklch(0.45 0.14 255);
    outline-offset: 1px;
}

.bvspo-bericht-search__submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    font-size: 14px;
    border: 1px solid oklch(0.9 0.015 245);
    border-radius: 8px;
    background: #fff;
    color: oklch(0.35 0.14 255);
    cursor: pointer;
    transition: background 0.2s;
}

.bvspo-bericht-search__submit:hover {
    background: oklch(0.96 0.015 245);
}

@media (max-width: 780px) {
    .bvspo-berichte-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "sidebar" "content";
        /* Sidebar stacks above content now instead of sitting beside it,
           so the card's full-bleed math no longer needs to offset for it. */
        --bvspo-berichte-sidebar-offset: 0px;
    }

    .bvspo-berichte-layout__sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }

    .bvspo-berichte-sidebar__group {
        flex: 1 1 200px;
    }

    .bvspo-bericht-filter--vertical {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bvspo-bericht-filter--vertical .bvspo-bericht-filter__item {
        text-align: center;
    }
}

.bvspo-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    border: none;
    border-radius: 999px;
    background: oklch(0.45 0.14 255);
    color: #fff;
    cursor: pointer;
    box-shadow: oklch(0.3 0.1 255 / 0.25) 0 8px 20px -6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 40;
}

.bvspo-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bvspo-scroll-top:hover {
    background: oklch(0.4 0.14 255);
}

.bvspo-bericht-detail {
    max-width: 760px;
    margin: 0 auto;
}

.bvspo-bericht-detail__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bvspo-bericht-detail__date {
    font-size: 14px;
    font-weight: 600;
    color: oklch(0.5 0.02 255);
}

.bvspo-bericht-detail__title {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    margin: 0 0 16px;
    color: oklch(0.25 0.03 255);
}

.bvspo-bericht-detail__typen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.bvspo-bericht-detail__body {
    font-size: 16px;
    line-height: 1.7;
    color: oklch(0.3 0.02 255);
    margin-bottom: 32px;
}

.bvspo-bericht-detail__body p {
    margin: 0 0 1.2em;
}

.bvspo-bericht-detail__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 1em auto;
}

.bvspo-bericht-detail__body figure {
    margin: 1.5em 0;
}

.bvspo-bericht-detail__body figcaption {
    font-size: 14px;
    color: oklch(0.45 0.02 255);
    text-align: center;
    margin-top: 8px;
}

.bvspo-bericht-detail__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.bvspo-bericht-detail__body th,
.bvspo-bericht-detail__body td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid oklch(0.9 0.02 255);
}

.bvspo-bericht-detail__body thead th {
    font-weight: 700;
    color: oklch(0.3 0.14 255);
    border-bottom: 2px solid oklch(0.3 0.14 255);
}

.bvspo-bericht-detail__body tbody tr:nth-child(even) {
    background: oklch(0.97 0.01 250);
}

.bvspo-bericht-detail__back {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    color: oklch(0.35 0.14 255);
}

.bvspo-bericht-detail__back:hover {
    text-decoration: underline;
}