/* =========================================
   BASIS & DESKTOP (Bilder untereinander)
   ========================================= */
   
.bilder-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Abstand zwischen den Bildern untereinander */
    width: 100%;
    box-sizing: border-box;
}

.bild-element {
    /* Lässt das Element nur so breit werden wie das enthaltene Bild */
    width: fit-content;
    max-width: 100%;
    /* Falls die Bildunterschrift länger als das Bild ist, bricht sie um, statt das Element breiter als das Bild zu ziehen */
    display: table; 
}

.bild-wrapper {
    width: 100%;
}

.bild-wrapper a {
    display: block; /* Wenn <img> in einem <a>-Tag für die Lightbox steckt, sollte der Link als Block-Element dargestellt werden, damit unter dem Bild kein minimaler Zeilenabstand (durch die Standard-Inline-Darstellung von Links) entsteht: */
}

.bild-wrapper img {
    display: block;
    width: auto;       /* Nimmt Originalbreite als Basis */
    max-width: 100%;   /* Skaliert runter, wenn Container schmaler ist, aber nie über 100% Originalgröße */
    height: auto;      /* Seitenverhältnis beibehalten */
}

.bildunterschrift {
	/* ergänzt Angaben aus dem main.css */
    /* table-caption sorgt zusammen mit display: table am Eltern-Element dafür, 
       dass der Text die Breite des Bildes niemals übersteigt */
    display: table-caption;
    caption-side: bottom;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

/* Optional: Leere Bildunterschriften ausblenden, damit kein unnötiger Abstand entsteht */
.bildunterschrift:empty {
    display: none;
}


/* =========================================
   LIGHTBOX-LUPEN-ICON (Rechts unten im Bild)
   ========================================= */
.bild-wrapper a[data-lightbox] {
    display: block;
    position: relative; /* Wichtig als Bezugspunkt für das Icon */
}

.bild-wrapper a[data-lightbox]::after {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 2rem;  /* entspricht 32px */
    height: 2rem;
    
    /* Dezenter, halbtransparenter dunkler Kreis */
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    
    /* Weißes Lupen-Icon als direkt eingebettetes SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Verhindert, dass das Icon selbst den Klick abfängt */
    pointer-events: none;
    
    /* Sanfter Übergang für den Hover-Effekt am Desktop */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Dezente Reaktion beim Überfahren mit der Maus am Desktop */
.bild-wrapper a[data-lightbox]:hover::after {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.08);
}


/* ######### Anpassungen Responsive Layout ############## */

/* Tabletmodus: Änderungen unter 1024px Fensterbreite */
@media screen and (max-width: 1024px)
{
	
}


/* Handymodos: Änderungen unter 767px Fensterbreite */
@media screen and (max-width: 767px)
{
	
	.bilder-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem; /* Abstand zum nächsten (angeschnittenen) Bild */
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* Aktiviert das Einrasten beim Wischen */
        -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen unter iOS */
        padding-bottom: 0.5rem; /* Platz für eventuelle Scrollbar */
        
        /* Optional: Scrollbar optisch dezent halten */
        scrollbar-width: thin;
    }

    .bild-element {
        flex: 0 0 auto;
        /* Maximal 90% des Containers, damit rechts 10% (abzüglich Gap) 
           vom nächsten Bild sichtbar bleiben */
        max-width: 90%; 
        scroll-snap-align: start;
    }

    /* Optional: Wenn es insgesamt nur 1 Foto gibt, darf es trotzdem 100% breit sein */
    .bild-element:only-child {
        max-width: 100%;
    }
	
	
	
	

}