/* ==========================================================================
   db_slg – SLG Bühl-Kappelwindeck e.V.
   Loaded after bootstrap_package's compiled theme CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography: all <h2> (and anything only carrying Bootstrap's ".h2" utility
   class, e.g. bootstrap_package's header_layout can render a heading as
   div.h2 without an actual <h2> tag) styled like bootstrap_package's own
   .icongroup-item-text-header (font-size/margin from _icongroup.scss,
   weight/uppercase/letter-spacing from our own Icon Group styling above) —
   for site-wide consistency, not just inside Icon Group elements.
   Anything carrying ".h2" also gets a short gold underline running out to
   the left (e.g. section headings like "AKTUELLES" in the mockup).
   -------------------------------------------------------------------------- */
h2,
.h2 {
    font-size: 1.25em;
    margin-bottom: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin-top: 0.5rem;
    background-color: var(--bs-primary, #B39338);
}

/* --------------------------------------------------------------------------
   Navigation: dark background (page.theme.navigation.style = 'inverse' in
   settings.yaml already gives us bg-dark + navbar-dark/white text) — this
   just adds the gold hover/active state, the gold divider line under the
   nav, a white burger icon, and the enlarged mobile logo.
   -------------------------------------------------------------------------- */
.navbar-mainnavigation {
    border-bottom: 3px solid var(--bs-primary, #B39338);
}

/* .navbar-inverse (navbar-dark) sets --bs-navbar-color / --bs-nav-link-color
   to a semi-transparent white (rgba(255,255,255,.55)) by default — override
   both custom properties so the base .nav-link color is solid #fff. */
.navbar-inverse {
    --bs-navbar-color: #fff;
    --bs-nav-link-color: #fff;
}

.navbar-inverse .nav-link:hover,
.navbar-inverse .nav-link:focus,
.navbar-inverse .nav-link.active,
.navbar-inverse .nav-item.active > .nav-link {
    color: var(--bs-primary, #B39338);
}

.navbar-inverse .navbar-toggler-icon,
.navbar-inverse .navbar-toggler-icon:before,
.navbar-inverse .navbar-toggler-icon:after {
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   Header navigation: social media icons next to/below the main nav, instead
   of bootstrap_package's default footer placement. Rendered via the
   overridden Partials/Page/DropIn/Navigation/MainAfter.html, which sits
   inside <nav id="mainnavigation" class="collapse navbar-collapse"> — the
   same element the burger toggler shows/hides on mobile. That gives us, for
   free:
     - mobile (<992px, burger closed): hidden along with the rest of the menu
     - mobile (burger open): visible below the nav links (divider added below)
     - desktop (>=992px): bootstrap_package's own navbar/_responsive.scss
       turns .navbar-collapse into a permanent flex row — margin-left: auto
       below pushes the icons to the far right, next to the nav links.
   Icon-only in both cases (label hidden, kept only for the <a title="...">
   accessible name); bootstrap_package's own .sociallinks-item defaults to
   width:100% (stacked footer list), overridden here to sit inline instead.
   Gold by default (not just on hover) to match the icon's visual weight
   against the nav-link text; margin-left is a fixed value rather than
   "auto" — this menu already has its own spacer-based right-alignment
   (BK2K's "spacer" page/nav-item type, flex-grow:1 inside .navbar-nav
   itself), which already consumes the row's free space, leaving auto
   with nothing left to push against.
   -------------------------------------------------------------------------- */
.navbar-sociallinks .sociallinks-list {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-sociallinks .sociallinks-item {
    width: auto;
    display: flex;
    align-items: center;
}

.navbar-sociallinks .sociallinks-link {
    color: var(--bs-primary, #B39338);
}

.navbar-sociallinks .sociallinks-link:hover,
.navbar-sociallinks .sociallinks-link:focus {
    color: #fff;
}

.navbar-sociallinks .sociallinks-link-icon {
    font-size: 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    opacity: 1;
}

.navbar-sociallinks .sociallinks-link-label {
    display: none;
}

@media (max-width: 991.98px) {
    .navbar-sociallinks {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
}

@media (min-width: 992px) {
    .navbar-sociallinks {
        display: flex;
        align-items: center;
        align-self: center;
        margin-left: 2rem;
    }
}

/* Header logo: bootstrap_package's default nav logo (page.logo.file) stays
   visible on mobile "in its normal spot" next to the nav toggle, enlarged
   via the taller --mainnavigation-nav-height below (bootstrap_package caps
   the logo at nav-height - 30px). On desktop the "Logo / Text / CTA"
   content element shows the big version instead, so the small nav logo is
   hidden there. */
@media (max-width: 991.98px) {
    .navbar-mainnavigation {
        --mainnavigation-nav-height: 118px;
    }
}

@media (min-width: 992px) {
    .navbar-brand {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Content element: Logo / Text / CTA (CType db_slg_headerhero)
   -------------------------------------------------------------------------- */
.db-slg-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 320px;
    padding: 2.5rem 0;
    color: #fff;
    background-color: var(--bs-dark, #1E211D);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.db-slg-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(30, 33, 29, 0.92) 0%,
        rgba(30, 33, 29, 0.75) 45%,
        rgba(30, 33, 29, 0.35) 100%
    );
}

.db-slg-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.db-slg-hero__logo {
    flex-shrink: 0;
    display: none;
}

.db-slg-hero__logo img {
    display: block;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.db-slg-hero__content {
    max-width: 640px;
}

.db-slg-hero__site-title {
    display: none;
    margin: 0 0 0.5rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
}

.db-slg-hero__tagline {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--bs-primary, #B39338);
}

.db-slg-hero__extra-text {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
}

.db-slg-hero__extra-text p:last-child {
    margin-bottom: 0;
}

.db-slg-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    color: var(--bs-dark, #1E211D);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.db-slg-hero__cta:hover,
.db-slg-hero__cta:focus {
    background-color: var(--bs-primary, #B39338);
    color: #fff;
}

@media (min-width: 992px) {
    .db-slg-hero {
        min-height: 420px;
        padding: 4rem 0;
    }

    .db-slg-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }

    .db-slg-hero__logo {
        display: block;
    }

    .db-slg-hero__site-title {
        display: block;
    }

    .db-slg-hero__tagline {
        font-size: 1.25rem;
    }

    .db-slg-hero__extra-text {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Footer: 4 columns (colPos 10–13, see the overridden
   Partials/Page/Structure/FooterContent.html + PageTsConfig/BackendLayouts.tsconfig).
   Scoped to .db-slg-footer-row so bootstrap_package's own .section-row/
   .section-column flex-grid (used elsewhere, e.g. page content layouts) is
   left untouched.
   -------------------------------------------------------------------------- */
.db-slg-footer-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.db-slg-footer-row > .section-column {
    width: auto;
}

@media (min-width: 768px) {
    .db-slg-footer-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .db-slg-footer-row {
        /* Column 1 (text) wider, column 2 (short nav list) narrower —
           equal 1fr columns left a lot of unused space to the right of the
           navigation list. Columns 3+4 stay at their previous relative width. */
        grid-template-columns: 1.5fr 0.8fr 1fr 1fr;
        gap: 2.5rem;
    }
}

/* Footer body copy (paragraphs, address, nav list, links — not headlines). */
.footer-section-content {
    font-size: 0.85rem;
}

/* Footer column headlines (currently H5 content-element headers) — smaller,
   uppercase, letter-spaced small-caps look matching the mockup instead of
   a plain default H5. */
.footer-section-content h5,
.footer-section-content .h5 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 1rem;
}

/* All footer links plain white, no gold link-color highlight. */
.footer-section-content a,
.footer-section-meta a {
    color: #fff !important;
    text-decoration: none;
}

.footer-section-content a:hover,
.footer-section-content a:focus,
.footer-section-meta a:hover,
.footer-section-meta a:focus {
    color: #fff !important;
    text-decoration: underline;
}

/* Column 4 ("Mitglied bei"): logos side by side, capped at reasonable sizes.
   The Gallery content element already lays its items out horizontally on
   its own (.gallery-row/.gallery-item-size-2) — no flex needed on the
   column itself. (Previously this column had "display: flex;
   align-items: center;", which vertically centered its single child — the
   whole frame block, heading included — within the grid row's stretched
   height, since all 4 columns share the same row height. That's what
   pushed "MITGLIED IN" down out of alignment with the other 3 headings.) */
.footer-section-content-column-4 .gallery-item-size-2:first-of-type img {
    width: 180px;
    height: auto;
}

.footer-section-content-column-4 .gallery-item-size-2:nth-of-type(2) img {
    max-width: 80px;
    width: auto;
    height: auto;
}

/* Column 2 ("Navigation"): stacked plain list, no bullets/indent. */
.footer-section-content-column-2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section-content-column-2 li + li {
    margin-top: 0.4rem;
}

/* Column 1: give the social links row (added as its own content element
   below the text) a bit of breathing room. */
.footer-section-content-column-1 .sociallinks-list {
    margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Bottom meta bar: copyright + footer navigation (Impressum/Datenschutz) in
   one row instead of stacked, plus a subtle silver divider above it.
   ".footer-menu-section" (footer-navigation/Impressum/Datenschutz) and
   ".footer-info-section" (footer-copyright, footer-meta — footer-sociallinks
   removed, see Partials/Page/Structure/FooterMeta.html override; the icons
   now live in the header nav, see .navbar-sociallinks above) are siblings
   inside ".frame-inner" — turning that into a flex row puts
   them side by side; "order" swaps their visual position to match the
   mockup (copyright left, nav links right) without touching the DOM order.
   -------------------------------------------------------------------------- */
.footer-section-meta {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-section-meta .frame-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

.footer-section-meta .footer-menu-section {
    order: 2;
    margin: 0 !important;
}

.footer-section-meta .footer-info-section {
    order: 1;
    margin: 0 !important;
    text-align: left;
}

/* Copyright keeps the normal (gold) link color; the footer navigation
   (Impressum/Datenschutz) stays plain white like the rest of the footer. */
.footer-section-meta .footer-copyright a {
    color: var(--bs-primary, #B39338) !important;
}

/* --------------------------------------------------------------------------
   Content element: Icon Group (CType icon_group) — "Sportschießen /
   Gemeinschaft / Termine" 3-column feature block below the header.
   Own template (Templates/ContentElements/IconGroup.html) adds the CTA link
   at the bottom (reusing the item's "subheader" field as its label); this
   just handles the visual styling.
   -------------------------------------------------------------------------- */
.db-slg-icongroup .icongroup-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 14px;
    border-radius: 50%;
    background-color: var(--bs-primary, #B39338);
}

.db-slg-icongroup .icongroup-item-icon svg,
.db-slg-icongroup .icongroup-item-icon img {
    width: 100%;
    height: 100%;
    color: #fff;
    fill: #fff;
}

.db-slg-icongroup .icongroup-item-text-header {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.db-slg-icongroup-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--bs-primary, #B39338);
    border-radius: 0.25rem;
    color: var(--bs-primary, #B39338);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.db-slg-icongroup-link:hover,
.db-slg-icongroup-link:focus {
    background-color: var(--bs-primary, #B39338);
    color: #fff;
    text-decoration: none;
}

/* Vertical divider between columns (desktop only, matches icongroup-columns-3's
   own 768px breakpoint — below that the items are stacked, so a left border
   would just sit awkwardly under each item). */
@media (min-width: 768px) {
    .db-slg-icongroup .icongroup-item:not(:first-child) {
        border-left: 1px solid var(--bs-border-color, #dee2e6);
        padding-left: 2rem;
    }
}

/* bootstrap_package stacks icon-above-text (icon_position "above"/"below")
   the same way on every viewport; on mobile that repeats a large centered
   icon 3 times in a row, which reads as very tall/empty. Below the
   icongroup-columns-3 breakpoint (768px) we render it as a compact icon-left
   / text-right row instead, and only switch to the centered stacked
   treatment (matching the desktop mockup) at 768px and up. */
@media (max-width: 767.98px) {
    .db-slg-icongroup.icongroup-iconposition-above .icongroup-item,
    .db-slg-icongroup.icongroup-iconposition-below .icongroup-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .db-slg-icongroup.icongroup-iconposition-above .icongroup-item-text,
    .db-slg-icongroup.icongroup-iconposition-below .icongroup-item-text {
        text-align: left;
    }

    .db-slg-icongroup.icongroup-iconposition-above .icongroup-item-icon,
    .db-slg-icongroup.icongroup-iconposition-below .icongroup-item-icon {
        order: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .db-slg-icongroup .icongroup-item + .icongroup-item {
        padding-top: 1.5rem;
        margin-top: 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* --------------------------------------------------------------------------
   Content element: Kontakt-CTA / Banner (CType db_slg_contactcta) —
   "Interesse am Sportschießen?" gold band. No f:layout in the template
   (same reasoning as HeaderHero) so it renders edge-to-edge without
   bootstrap_package's default .container frame wrapper.
   -------------------------------------------------------------------------- */
.db-slg-contactcta {
    background-color: var(--bs-primary, #B39338);
    padding: 1.5rem 0;
}

.db-slg-contactcta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.db-slg-contactcta__text {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
}

.db-slg-contactcta__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #fff;
}

.db-slg-contactcta__icon svg,
.db-slg-contactcta__icon img {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.db-slg-contactcta__header {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.db-slg-contactcta__subheader {
    margin: 0;
    font-size: 0.9rem;
}

.db-slg-contactcta__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.5rem;
    background-color: var(--bs-dark, #1E211D);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
}

.db-slg-contactcta__cta:hover,
.db-slg-contactcta__cta:focus {
    background-color: #000;
    color: #fff;
}

@media (max-width: 575.98px) {
    .db-slg-contactcta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .db-slg-contactcta__cta {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   EXT:news list template "Kachel" (Resources/Private/Templates/News/List.html
   + Partials/News/List/Kachel.html) — 3-column news grid, matching the
   "Aktuelles" section of the mockup. Flat cards (no shadow/border), landscape
   thumbnail, date above the title, gold "Weiterlesen ›" text link at the end.
   -------------------------------------------------------------------------- */
.db-slg-news-list {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .db-slg-news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .db-slg-news-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.db-slg-news-item {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0.25rem;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.db-slg-news-item:hover,
.db-slg-news-item:focus-within {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.db-slg-news-item__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--bs-light, #eee);
}

.db-slg-news-item__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.db-slg-news-item:hover .db-slg-news-item__media img {
    transform: scale(1.04);
}

.db-slg-news-item__badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: inline-flex;
    padding: 0.3rem 0.75rem;
    background-color: var(--bs-primary, #B39338);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.db-slg-news-item__content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    padding: 1rem 1.25rem 1.25rem;
}

.db-slg-news-item__date {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
}

.db-slg-news-item__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.db-slg-news-item__title a {
    color: inherit !important;
    text-decoration: none;
}

.db-slg-news-item__title a:hover,
.db-slg-news-item__title a:focus {
    text-decoration: underline;
}

.db-slg-news-item__teaser {
    margin: 0;
    color: #000;
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.5 * 0.95rem * 2);
}

.db-slg-news-item__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.4rem;
    color: var(--bs-primary, #B39338);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.db-slg-news-item__more:hover,
.db-slg-news-item__more:focus {
    color: var(--bs-dark, #1E211D);
    text-decoration: underline;
}

.news-related-files {
    margin-top: 20px;
    border-top: 1px solid var(--bs-primary, #B39338);
}

/* News/Detail.html: headline/date/meta (col-md-8) and the media gallery
   (col-md-4) sit side by side from md up. Bootstrap's row/col flex stretches
   both columns to equal height by default, so letting the gallery fill that
   height (instead of the image's own intrinsic size) shows it at maximum
   size within col-md-4, cropped via object-fit so it isn't distorted. */
@media (min-width: 768px) {
    .news-detail-header-row .news-img-wrap,
    .news-detail-header-row .outer,
    .news-detail-header-row .mediaelement-image {
        height: 100%;
    }

    .news-detail-header-row .mediaelement-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}