/* css/custom.css */

html {
    overflow-y: scroll !important; /* Erzwingt immer einen Scrollbalken */
}

/* Globale Schriftart und Basisfarben für Links (Hell-Modus Standard) */
:root,
[data-bs-theme="light"] {
    --bs-body-font-family: 'Montserrat', sans-serif;
    --bs-body-color: #212529;
    --bs-body-bg: #ffffff;
    --custom-link-color: #333333;
    --custom-link-hover-color: #000000;
    --custom-link-decoration: none;

    /* Variable für die Abstandseinheit der Galerie-Reihen */
    --gallery-row-spacing-unit: 36px; /* DEIN WERT - Du hattest 36px erwähnt */
}

/* Farben für Links im Dunkel-Modus */
[data-bs-theme="dark"] {
    --bs-body-color: #dee2e6;
    --bs-body-bg: #212529;
    --custom-link-color: #bbbbbb;
    --custom-link-hover-color: #ffffff;
    --custom-link-decoration: none;
}

/* BODY */
body {
    font-family: var(--bs-body-font-family);
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Links global stylen */
a {
    color: var(--custom-link-color);
    text-decoration: var(--custom-link-decoration);
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: var(--custom-link-hover-color);
}

/* NAVBAR */
.navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.0;
}

.navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#themeToggleBtn i {
    font-size: 1.1rem;
    vertical-align: middle;
}

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

[data-bs-theme="dark"] .navbar {
    background-color: rgba(33, 37, 41, 0.85) !important;
}

[data-bs-theme="light"] .navbar {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

.navbar .ms-auto.d-flex {
    gap: 0.3rem;
}

#themeToggleBtn,
#menuToggle {
    border: none;
    border-radius: var(--bs-border-radius);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

#themeToggleBtn:focus,
#menuToggle:focus {
    box-shadow: none;
}

#themeToggleBtn i,
#menuToggle i {
    font-size: 1.2rem;
    vertical-align: middle;
}

[data-bs-theme="light"] #themeToggleBtn,
[data-bs-theme="light"] #menuToggle {
    background-color: #e9ecef;
    color: #495057;
}
[data-bs-theme="light"] #themeToggleBtn:hover,
[data-bs-theme="light"] #menuToggle:hover {
    background-color: #ced4da;
}

[data-bs-theme="dark"] #themeToggleBtn,
[data-bs-theme="dark"] #menuToggle {
    background-color: #495057;
    color: #f8f9fa;
}
[data-bs-theme="dark"] #themeToggleBtn:hover,
[data-bs-theme="dark"] #menuToggle:hover {
    background-color: #5a6268;
}

.custom-side-menu {
    min-width: 100px;
    max-width: 150px;
    border-radius: var(--bs-border-radius);
    margin-top: 1.75rem !important;
    padding-top: 0.01rem !important;
    padding-bottom: 0.01rem !important;
    border: none !important;
    box-shadow: none !important;
}

.custom-side-menu .dropdown-item.nav-link {
    font-family: 'Roboto', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.125rem 0.5rem;
    font-size: 1rem;
    color: var(--bs-emphasis-color);
    display: block;
}

[data-bs-theme="light"] .custom-side-menu .dropdown-item.nav-link:hover,
[data-bs-theme="light"] .custom-side-menu .dropdown-item.nav-link:focus {
    background-color: #d8dde2;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .custom-side-menu .dropdown-item.nav-link:hover,
[data-bs-theme="dark"] .custom-side-menu .dropdown-item.nav-link:focus {
    background-color: #5a6268;
    color: #ffffff;
}

.custom-side-menu .custom-divider {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    margin-left: 0.125rem;
    margin-right: 0.125rem;
    border-top-style: solid;
    border-top-width: 1px;
}
[data-bs-theme="light"] .custom-side-menu .custom-divider {
    border-top-color: #adb5bd;
}
[data-bs-theme="dark"] .custom-side-menu .custom-divider {
    border-top-color: #495057;
}

/* Styling für Trennlinie und Breadcrumbs */
.header-divider {
    margin-top: 0;
    margin-bottom: 0.25rem;
    border: none;
    height: 2px;
    background-color: var(--bs-emphasis-color);
    opacity: 1;
}

.page-breadcrumb .breadcrumb {
    background-color: transparent;
    padding: 0.25rem 0;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.page-breadcrumb .breadcrumb-item a {
    text-decoration: none;
    color: var(--bs-secondary-color);
}
.page-breadcrumb .breadcrumb-item a:hover {
    color: var(--bs-emphasis-color);
}

.page-breadcrumb .breadcrumb-item.active {
    color: var(--bs-emphasis-color);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
}

/* Styling für Hauptüberschriften */
.page-title {
    font-size: 2rem;
    font-weight: 400;
}

/* FOOTER Styling */
.page-footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875em;
    background-color: var(--bs-body-tertiary);
    color: var(--bs-secondary-color);
}

.page-footer a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.page-footer a:hover {
    color: var(--bs-emphasis-color);
}

.footer-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.footer-meta-links {
    order: 1;
    margin-bottom: 0.5rem;
    margin-left: auto;
    min-width: 100px;
    max-width: 150px;
}

.footer-meta-links a {
    display: block;
    padding: 0.125rem 0.5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-emphasis-color);
    text-align: left;
}
.footer-meta-links a:hover {
    color: var(--custom-link-hover-color);
    background-color: var(--bs-tertiary-bg);
}

.footer-meta-links a + a {
    margin-top: calc(0.125rem + 0.125rem);
}

.footer-divider {
    order: 2;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0.75rem;
    border: none;
    height: 2px;
    background-color: var(--bs-emphasis-color);
    opacity: 1;
}

.footer-copyright {
    order: 3;
    text-align: left;
    color: var(--bs-secondary-color);
}
.footer-copyright p {
    color: inherit;
}

/* Biografie Seiten-Styling */
.biografie-intro { /* z.B. font-style: italic; */ }
.exhibition-list dt {
    margin-top: 1.5rem;
    font-size: 1.0em;
}
.exhibition-list dt:first-of-type { margin-top: 0; }
.exhibition-list dd {
    margin-left: 0;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}
.exhibition-list dd p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.exhibition-list dd p:last-child { margin-bottom: 0; }
.exhibition-type {
    font-size: 0.85em;
    color: var(--bs-secondary-color);
    margin-left: 0.25rem;
}
.exhibition-list a i.bi-eye-fill {
    font-size: 1.1em;
    vertical-align: -0.1em;
}

/* Kontakt Seiten-Styling */
.contact-icon-wrapper {
    min-width: 30px;
    text-align: center;
}
.contact-options .h5 {
    font-weight: 500;
    color: var(--bs-emphasis-color);
}
/* Icon Farben für Kontaktseite */
[data-bs-theme="light"] #contact-options .contact-icon-wrapper i {
  color: var(--bs-gray-700); /* Dunkler für Light Mode */
}
[data-bs-theme="dark"] #contact-options .contact-icon-wrapper i {
  color: #ffffff; /* Weiß für Dark Mode */
}


/* --- CSS Grid Galerie (für 2001-2003 Seite und ähnliche) --- */


/* IN custom.css */




.gallery-css-grid-wrapper {
    /* Aktiviert, um die Galeriebreite zu begrenzen und Navbar-Konsistenz zu sichern */
    max-width: 1200px; /* Beispiel: Anpassen nach Bedarf */
    margin-left: auto;
    margin-right: auto;
    /* padding-right: 180px; */ /* Alternative, falls ein fester rechter Rand gewünscht ist */
}

.gallery-css-grid {
    display: grid;
    /*
       Spaltendefinition mit minmax:
       Format: minmax(Mindestbreite, Maximale/Flexible Breite)
       Die Mindestbreiten basieren auf den typischen Original-Bildbreiten in diesen Spalten.
       Die fr-Einheiten erhalten die gewünschten Proportionen für den darüber hinausgehenden Platz.
    */
 grid-template-columns: minmax(145px, 4.25fr) minmax(170px, 6.25fr) minmax(200px, 10fr);
    column-gap: 15px; 
    row-gap: 0;      
    width: 100%; 
}


.gallery-grid-item {
    /* Basis-Styling für Grid-Items */
}

.gallery-grid-item img {
    max-width: 100%; 
    height: auto;   
    display: block;  
   /*border-radius: var(--bs-border-radius-sm);*/
}

/* Ausrichtungsklassen für Grid-Items */
.gallery-grid-item.item-align-left   { justify-self: start; }
.gallery-grid-item.item-align-center { justify-self: center; }
.gallery-grid-item.item-align-right  { justify-self: end; }

/* Klassen für variable Reihenabstände (margin-bottom auf gallery-grid-item) */
.gallery-grid-item.mb-gap-0 { margin-bottom: 0 !important; }
.gallery-grid-item.mb-gap-1 { margin-bottom: calc(1 * var(--gallery-row-spacing-unit)); }
.gallery-grid-item.mb-gap-2 { margin-bottom: calc(2 * var(--gallery-row-spacing-unit)); }
.gallery-grid-item.mb-gap-3 { margin-bottom: calc(3 * var(--gallery-row-spacing-unit)); }
.gallery-grid-item.mb-gap-4 { margin-bottom: calc(4 * var(--gallery-row-spacing-unit)); }
.gallery-grid-item.mb-gap-5 { margin-bottom: calc(5 * var(--gallery-row-spacing-unit)); }


/* --- Responsive Anpassungen für die CSS Grid Galerie --- */

/* Tablet-Ansicht: z.B. Bildschirme schmaler als 992px */
@media (max-width: 991.98px) { 
    .gallery-css-grid-wrapper {
        /* Falls der Wrapper auf Tablets anders sein soll (z.B. keine max-width mehr oder kein padding-right) */
        /* max-width: none; */
        /* padding-right: 0; */
    }
    .gallery-css-grid {
        grid-template-columns: 4fr 6fr; /* 2 Spalten im Verhältnis 4:6 */
        column-gap: 10px; 
        row-gap: 6px;     /* Fester Reihenabstand für Tablets */
    }

    /* Spezifische Margins von Desktop für Tablet zurücksetzen, da row-gap jetzt steuert */
    .gallery-grid-item.mb-gap-0,
    .gallery-grid-item.mb-gap-1,
    .gallery-grid-item.mb-gap-2,
    .gallery-grid-item.mb-gap-3,
    .gallery-grid-item.mb-gap-4,
    .gallery-grid-item.mb-gap-5 {
        margin-bottom: 0 !important; 
    }
    /* Die item-align Klassen behalten ihre Gültigkeit für die Ausrichtung innerhalb der Zelle. */
}

/* Smartphone-Ansicht: z.B. Bildschirme schmaler als 767.98px */
@media (max-width: 767.98px) {
    .gallery-css-grid {
        grid-template-columns: 1fr; /* 1 Spalte für Smartphones */
        column-gap: 0;
        row-gap: calc(2 * var(--gallery-row-spacing-unit)); /* Einheitlicher Reihenabstand, z.B. 2 Einheiten */
                                                            /* oder ein fester Wert wie 10px */
    }

    /* Die Ausrichtungsklassen sind weiterhin relevant, wenn Bilder schmaler als die eine Spalte sind */
    /* .gallery-grid-item.item-align-left   { justify-self: start; } */
    /* .gallery-grid-item.item-align-center { justify-self: center; } */
    /* .gallery-grid-item.item-align-right  { justify-self: end; } */
    /* Optional: Wenn auf Smartphones alles zentriert sein soll oder die volle Breite einnehmen soll: */
    /* .gallery-grid-item { justify-self: stretch; } */
    /* .gallery-grid-item img { width: 100%; } */


    /* Variable mb-gap-X Klassen sind durch row-gap abgedeckt */
    .gallery-grid-item.mb-gap-0,
    .gallery-grid-item.mb-gap-1,
    .gallery-grid-item.mb-gap-2,
    .gallery-grid-item.mb-gap-3,
    .gallery-grid-item.mb-gap-4,
    .gallery-grid-item.mb-gap-5 {
        margin-bottom: 0 !important; 
    }
}


/* --- Alte Jahresgalerie Seiten-Styling (Bootstrap Grid basierend - ggf. anpassen/entfernen) --- */
/* IDs sind sehr spezifisch, vielleicht Klassen verwenden, wenn das Layout wiederverwendbar sein soll */
#image-gallery-period .col a { /* Selektor ggf. anpassen, falls diese Struktur noch verwendet wird */
    display: block;
    text-decoration: none;
    position: relative;
}

/* Diese ID ist problematisch, IDs müssen einzigartig sein. Besser Klasse verwenden. */
/* Z.B. .gallery-image-preview-item */
#gallery-image-item { 
    width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius-sm);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

#gallery-image-item:hover { /* Selektor anpassen, falls ID geändert wird */
    transform: scale(1.03);
    box-shadow: var(--bs-box-shadow);
}

/* --- Startseite - Ausstellungs-Ankündigung --- */
#current-exhibition-announcement .display-5 { /* ... */ }
#current-exhibition-announcement img {
    max-height: 500px;
    object-fit: cover;
}

/* --- Detailseite Ausstellung --- */
#gallery-content h2.display-6 { /* ... */ }


/* --- Packery Galerie Styling (beibehalten, falls noch woanders genutzt) --- */
.gallery-packery-grid { /* ... */ }
.gallery-item {
    margin-bottom: 10px;
}
.gallery-item img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius-sm);
}
.gallery-item.item-width-1 { width: 25%; }
.gallery-item.item-width-1-5 { width: 37.5%; }
.gallery-item.item-width-2 { width: 50%; }
.gallery-item.item-width-2-5 { width: 62.5%; }
.gallery-item.item-width-3 { width: 75%; }

@media (max-width: 992px) {
    .gallery-item.item-width-1,
    .gallery-item.item-width-1-5 { width: 33.333%; }
    .gallery-item.item-width-2,
    .gallery-item.item-width-2-5 { width: 66.666%; }
    .gallery-item.item-width-3 { width: 100%; }
}
@media (max-width: 768px) {
    .gallery-item.item-width-1,
    .gallery-item.item-width-1-5,
    .gallery-item.item-width-2 { width: 50%; }
    .gallery-item.item-width-2-5,
    .gallery-item.item-width-3 { width: 100%; }
}
@media (max-width: 576px) {
    .gallery-item { width: 100% !important; }
}