/*
#################################################################
IGH Style
root, body, footer style
#################################################################
*/
:root {
    --main-bg-color: #f0f0f0; /* light grey for background */
    --main-text-color: #333;
    --primary-color: #fff; /* main color: white */
    --secondary-color: #000; /* secondary color: black */
    --igh-cd-primary-color: #e6007e; /* Accent color pink matching the IGH trikot color */
    --igh-cd-secondary-color: #ff69b4; /* Accent color secondary pink matching the IGH trikot color */
    --igh-cd-gradient-color: linear-gradient(to bottom, #e6007e 0%, #2a2a72 100%);
}

html {
    scroll-behavior: smooth;
}

#mtb-trails,
#hiking-trails,
#gravel-tours,
#parking-spaces,
#community-rides,
#youngsters,
#racing-team,
#sponsors,
#section-name-and-location-purpose-club-activities,
#section-membership,
#section-executive-board,
#section-general-meeting,
#section-others {
    scroll-margin-top: 80px; /* Adjust this value to match the height of your sticky footer */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    line-height: 1.6;
    scroll-behavior: smooth;
    background-image: url('../images/footer-background/heidenberg-horizont.png');
    background-size: contain;
    background-position: center bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/*
#################################################################
Navbar Settings
Scroll and image flip
#################################################################
*/
.igh-navbar-brand {
    padding-left: 50px;
}

.igh-navbar-brand > img.igh-logo-default {
    height: auto;
    max-height: 80px;
    margin: -20px;
}

.igh-navbar-brand > img.igh-logo-scrolled {
    height: auto;
    max-height: 80px;
    margin: -20px;
}

@media (min-width: 768px) {
    .igh-navbar-brand > img.igh-logo-default {
        height: auto;
        max-height: 120px;
    }

    .igh-navbar-brand > img.igh-logo-scrolled {
        height: auto;
        max-height: 80px;
    }
}

.igh-navbar-brand.scrolled {
    height: auto;
    max-height: 80px;
    align-items: center;
}

.igh-hidden {
    display: none !important;
}

.igh-navbar-brand.scrolled .igh-logo-default {
    display: none;
}

.igh-navbar-brand.scrolled .igh-logo-scrolled {
    display: block !important;
}

.igh-padding-top-navbar {
    padding-top: clamp(8rem, 10vh, 10rem);
}

@media (max-width: 768px) {
    .igh-padding-top-navbar {
        padding-top: clamp(5rem, 10vh, 7.5rem);
    }
}

/*
#################################################################
custom components style
#################################################################
*/

.igh-heading {
    color: var(--secondary-color);
}

.igh-text-decoration-underline {
    text-decoration: none; /* Disable the default underline */
    border-bottom: 3px solid var(--igh-cd-primary-color);
    padding-bottom: 2px; /* Controls the distance to the line */
    display: inline;
    line-height: 2; /* Increases line spacing to make room for the line */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.igh-heading-underline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    position: relative;
    padding-bottom: 10px;
}

.igh-heading-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: clamp(6px, 0.6em, 10px);
    width: 100%;
    height: 3px;
    background-color: var(--igh-cd-primary-color);
}

.igh-cd-text-color {
    color: var(--igh-cd-primary-color);
}

.igh-bg-cd-gradient {
    background: var(--igh-cd-gradient-color);
}

.igh-rounded-pill-cd-color,
.igh-border-color {
    border-color: var(--igh-cd-primary-color) !important;
}

.igh-link {
    color: #f8f9fa;
    transition: color .15s ease-in-out;
}

.igh-link:hover {
    color: var(--igh-cd-secondary-color);
}

.igh-footer-pt {
    padding-top: 20rem;
}

.grayscale img {
    filter: grayscale(100%);
}
.grayscale:hover img {
    filter: grayscale(0%);
}

.igh-list-group-borderless .list-group-item {
    border: none;
    background: transparent;
    padding-top: 2px;
    padding-bottom: 0;
}

.igh-list-alpha {
    list-style-type: lower-alpha;
    padding-left: 2.5rem;
}

.igh-list-alpha .list-group-item {
    display: list-item;
    padding-left: 0.5rem;
}

.igh-image-trail-closed-overlay {
    background-color: rgba(0, 0, 0, 0.75);
}

/*
#################################################################
data privacy site
#################################################################
*/

#data-privacy .accordion-button:not(.collapsed) {
    background-color: rgba(230, 0, 126, 0.05);
    color: #e6007e;
    box-shadow: none;
}

#data-privacy .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(230, 0, 126, 0.1);
}

#data-privacy .accordion-item {
    border-bottom: 1px solid #eee;
}

/*
#################################################################
Picture Gallery Settings
#################################################################
*/
.lightbox-overlay,
.prev-btn,
.next-btn {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    display: block;
    margin: auto;
    user-select: none;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.prev-btn {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.next-btn {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev-btn:hover, .next-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.filter-buttons {
    margin-bottom: 20px;
    text-align: left;
}

.filter-buttons > .igh-cd-button:hover {
    background-color: var(--igh-cd-secondary-color);
    color: white;
}

.filter-buttons > .igh-cd-button.active {
    background-color: var(--igh-cd-secondary-color);
    color: white;
}

.igh-cd-button,
.igh-bg-cd {
    background-color: var(--igh-cd-primary-color);
    color: var(--primary-color);
}
.igh-cd-button:hover {
    background-color: var(--igh-cd-secondary-color);
    color: white;
}
.igh-gallery-pointer {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* ==========================================================================
   IG HEIDENBERG - PINTEREST MASONRY (FILTER FIXED)
   ========================================================================== */

#heidenberg-trails-gallery .row.row-cols-1 {
    display: block !important;       /* Deaktiviert Flexbox für Spaltenfluss */
    column-count: 3;                 /* Desktop: 3 Spalten */
    column-gap: 15px;
    width: 100%;
    min-height: 600px; /* Verhindert, dass der Footer beim Filtern nach oben springt */
}

/* Wichtig: Wir zielen auf das Element ab, das die Filter-Klasse bekommt */
#heidenberg-trails-gallery .js-gallery-item {
    display: inline-block !important; /* Standardanzeige innerhalb der Spalten */
    width: 100% !important;
    margin-bottom: 15px;
    break-inside: avoid;              /* Verhindert Bildumbruch */
    padding: 0 !important;
}

/* EXPLIZITER FIX FÜR DEN FILTER: 
   Wenn das Element ausgeblendet werden soll, MUSS display: none erzwungen werden */
#heidenberg-trails-gallery .js-gallery-item.hidden,
#heidenberg-trails-gallery .js-gallery-item.d-none {
    display: none !important;
}

/* Responsive Anpassungen */
@media (max-width: 991px) {
    #heidenberg-trails-gallery .row.row-cols-1 { column-count: 2 !important; }
}
@media (max-width: 575px) {
    #heidenberg-trails-gallery .row.row-cols-1 { column-count: 1 !important; }
    .js-gallery-item img {
        margin: 0 auto; /* Zentriert das Bild, falls die Spalte breiter als das Bild ist */
    }
}

/*
#################################################################
Volunteer Work
#################################################################
*/
.volunteer-pride .card {
    border-radius: 20px;
}

/*
#################################################################
Rule Cards
#################################################################
*/
.igh-card-rules {
    transition: transform 0.2s ease-in-out;
}

.igh-card-rules:hover {
    transform: translateY(-5px);
}

/*
#################################################################
statute
#################################################################
*/
.sidebar-sticky-offset{
    top: 80px;
}

.igh-link-statue {
    color: rgba(33, 37, 41, 0.75);
    transition: color .15s ease-in-out;
}

.igh-link-statue:hover {
    color: var(--igh-cd-secondary-color);
}

/*
#################################################################
Donations
#################################################################
*/
.bank-details {
    font-family: 'Courier New', Courier, monospace;
    border: 1px dashed #ccc;
    position: relative;
}

.bank-details strong {
    color: #333;
}

/*
#################################################################
Generic Style
Override Bootstrap Styles
#################################################################
*/
.card-text.sponsor > a > img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

a.youtube-link {
    color: red;
}

/*
#################################################################
Difficulty Badges
#################################################################
*/
.badge-blue {
    color: #fff;
    background-color: blue;
}

.badge-blue-red {
    color: #fff;
    background-image: linear-gradient(
            125deg,
            blue 50%,
            red 50%
    );
}

.badge-red {
    color: #fff;
    background-color: red;
}

.badge-red-black {
    color: #fff;
    background-image: linear-gradient(
            125deg,
            red 50%,
            black 50%
    );
}

.badge-black {
    color: #fff;
    background-color: black;
}
/*
#################################################################
Navbar menu item colors
TWBS will be override
#################################################################
*/
li.nav-item a:hover{
    color: var(--igh-cd-secondary-color);
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link,
.dropdown-item.active {
    color: #e6007e !important;
    border-bottom: 3px solid #e6007e;
}

.dropdown-menu .dropdown-item.active {
    border-bottom: none;
    background-color: #f8f9fa;
}

/*
#################################################################
Horizont Image
#################################################################
*/
.igh-horizont-image {
    background-size: cover;
    background-position: center;
    height: 100svh;
    margin-top: 50px;
}

.igh-horizont-image.season-winter {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/key-pictures/winter.jpg');
}

.igh-horizont-image.season-spring {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/key-pictures/spring.jpg');
}

.igh-horizont-image-h1 {
    color: var(--primary-color);
    text-shadow: 4px 4px 8px black;
}
/*
#################################################################
Sponsors
#################################################################
*/
.sponsor-partner-box {
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 15px;
    background-color: #fdfdfd;
    transition: all 0.3s ease;
    height: 100%;
}

.sponsor-partner-box:hover {
    border-color: #e6007e;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.sponsor-partner-box img {
    max-height: 70px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.sponsor-item img {
    max-height: 45px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.sponsor-item:hover img {
    opacity: 1;
}

/*
#################################################################
About Us site
#################################################################
*/
.timeline.timeline-modern{
    --tl-accent: #e6007e;
    --tl-line: color-mix(in srgb, #6c757d 35%, transparent);
    --tl-card-bg: #fff;
    --tl-card-border: #dee2e6;
    --tl-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);

    position: relative;
    display: grid;
    gap: 0.45rem;
    padding: 0.15rem 0;
}
.timeline.timeline-modern::before{
    content: "";
    position: absolute;
    top: 0.15rem;
    bottom: 0.15rem;
    left: 0.75rem;
    width: 4px;
    background: linear-gradient(to bottom, transparent, #e6007e, transparent);
}

.timeline.timeline-modern .timeline-item{
    position: relative;
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    align-items: start;
}

.timeline.timeline-modern .timeline-marker{
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: var(--tl-card-bg);
    border: 0 solid var(--tl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 14%, transparent);
}

.timeline.timeline-modern .timeline-marker::after{
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: var(--tl-accent);
}

.timeline.timeline-modern .timeline-content{
    background: var(--tl-card-bg);
    border: 1px solid color-mix(in srgb, var(--tl-card-border) 70%, transparent);
    border-radius: 0.9rem;
    box-shadow: var(--tl-shadow);
    padding: 0.75rem 0.9rem;
}

.timeline.timeline-modern .timeline-time{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.5rem;
    margin-bottom: 0.35rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--tl-accent) 85%, #000);
    background: color-mix(in srgb, var(--tl-accent) 14%, transparent);
}

@media (min-width: 768px){
    .timeline.timeline-modern{
        gap: 0.85rem;
    }

    .timeline.timeline-modern::before{
        left: 50%;
        transform: translateX(-2px);
    }

    .timeline.timeline-modern .timeline-item{
        grid-template-columns: 1fr 2.4rem 1fr;
    }

    .timeline.timeline-modern .timeline-marker{
        grid-column: 2;
        justify-self: center;
    }

    .timeline.timeline-modern .timeline-content{
        grid-column: 1;
        justify-self: end;
        width: min(100%, 30rem);
    }

    .timeline.timeline-modern .timeline-item:nth-child(even) .timeline-content{
        grid-column: 3;
        justify-self: start;
    }
}

/*
#################################################################
Backend
#################################################################
*/
#admin-interface {
    display: none;
}

/*
#################################################################
Verhaltenskodex
#################################################################
*/

.signature-line {
    border-bottom: 1px solid #000;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 5px;
}

.ehrenkodex p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto; 
}

@media print {
    @page { size: A4; margin: 20mm; }

    body { background: white !important; padding: 0 !important; margin: 0 !important; }

    header, .navbar, .fixed-top { 
        display: none !important; 
        position: static !important;
    }

    .igh-padding-top-navbar {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .ehrenkodex .card { border: none !important; box-shadow: none !important; }
    .ehrenkodex .card-body { padding: 0 !important; }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .igh-logo-print { 
        filter: invert(100%) grayscale(100%) !important; 
        -webkit-filter: invert(100%) grayscale(100%) !important;
        max-width: 120px !important; 
        display: block !important;
    }

    .print-text-dark { color: #000 !important; }
}