*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    box-sizing: content-box; /* ODER AUF content-box ÄNDERN */
}
.container{
    max-width: 1080px;
    margin: auto;
    padding-top: 8rem;
    text-wrap: balance;
    opacity: 1;
    background-color: #fff;
   /* overflow-y: scroll; */
   /* -ms-overflow-style: none; */ /* IE and Edge */
   /* scrollbar-width: none; */ /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
/*.container::-webkit-scrollbar {
    display: none;
}*/
.container.is-loading-page {
    opacity: 0;
    /* Optional: Füge eine Transition hinzu, damit es weich eingeblendet wird */
    transition: opacity 0.5s ease-in-out; 
}
li{
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}
a{
    color: #12121266;
    text-underline-offset: 0.2rem;
    font-size: 1rem;
    text-decoration: none;
}
.logo{
    color: #121212;
    font-size: 1rem;
}
.logo:hover{
    color: #12121299;
}
a:hover{
    color: #121212;
}
.light{
    font-size: 14px;
    color: #12121299;
    line-height: 160%;
}
.link{
    color: #121212;
    font-weight: bold;
}
.link:hover{
    text-decoration-color: #121212;
}
.light-child{
    font-size: 14px;
    color: #12121299;
    line-height: 160%;
    margin-bottom: 1.2rem;
}
/* ********** flex-container ******** */
.flex-container {
  display: flex;
  justify-content: space-between;
  width: 100%;

}
.left-aligned {
  width: 40%;
  text-align: left;
}
.right-aligned {
  width: 60%;
  text-align: right;
}
.flex-container-imprint {
  display: flex;
  justify-content: space-between;
  width: 100%;

}
.left-aligned-imprint {
  width: 80%;
  text-align: left;
}
.right-aligned-imprint {
  width: 20%;
  text-align: right;
}
/* ********** intro ******** */
.intro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2rem;
    color: #12121299;
}

.intro>p{
    line-height: 1.5rem;
    font-size: 16px;
}
.intro>ul{
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.black {
    color: #121212;
    font-size: 1rem;
    font-weight: 500;
}
/* ********** header ******** */
.header{
    margin-top: 6rem;
}
.header>p{
    font-weight: 400;
    color: #121212;
    line-height: 1.6rem;
}
.header>img{
    width: 100%;
    margin-top: 0rem;
}
/* ********** headline ******** */
.headline{
    margin-top: 6rem;
}
.headline>p{
    font-weight: 400;
    color: #121212;
    line-height: 1.6rem;
}
.headline>img{
    width: 100%;
    margin-top: 0rem;
}   
/* ********** footer ******** */

#imprint-details, 
#privacy-details, 
#disclaimer-details {
    display: block; 
    /* margin-top und margin-bottom entfernt, da das UL-Gap den Abstand steuert */
    margin-top: 0; 
    margin-bottom: 0;
    color: #12121266;
    line-height: 160%;
    width: 100%; /* Optional: Sorgt dafür, dass das Details-Element die volle Breite des LI einnimmt */
}

#imprint-details summary,
#privacy-details summary,
#disclaimer-details summary {
    cursor: pointer;
    font-weight: 400;
    color: #12121266;
    padding: 0; 
    list-style: none; 
}

#imprint-details summary::-webkit-details-marker,
#privacy-details summary::-webkit-details-marker,
#disclaimer-details summary::-webkit-details-marker {
    display: none;
}

#imprint-details summary::after,
#privacy-details summary::after,
#disclaimer-details summary::after {
    content: ' +'; 
    font-size: 0.8em;
    margin-left: 0.5em;
    display: inline-block;
    transition: transform 0.2s;
}

#imprint-details[open] summary::after,
#privacy-details[open] summary::after,
#disclaimer-details[open] summary::after {
  content: ' -'; 
}

/* Stil für den Inhalt, wenn er geöffnet wird */
#imprint-details > div,
#privacy-details > div,
#disclaimer-details > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.2rem; /* Abstand zwischen der Summary-Zeile und dem Inhalt */
}

#imprint-details p,
#privacy-details p,
#disclaimer-details p {
    color: #12121266;
    line-height: 160%;
    margin: 0;
}

#imprint-details>div>:first-child {
    color: #121212;
    font-weight: 400;
    line-height: 160%;
    font-size: 1rem;
}

#imprint-details>p:last-child {
    color: #121212;
    line-height: 160%;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
}

#imprint-details>div>p {
    color: #12121266;
    line-height: 160%;
    font-size: 1rem;
    font-weight: 400;
}

#imprint-details a:hover {
    text-decoration-color: #12121266;
}

/* ********** footer (existing styles) ******** */

.imprint-footer>ul{
    display: flex;
    flex-direction: column; 
    gap: 1rem; /* Steuert den Abstand zwischen E-Mail, Instagram, Imprint, Disclaimer etc. */
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap; 
}

.imprint-footer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
    color: #12121299;
    margin-top: 6rem;
    margin-bottom: 1.5rem;
}

.imprint-footer>:first-child{
    color: #121212;
    font-size: 1rem;
    font-weight: 500;
}
/* ********** gallery ******** */
.masonry-section {
    max-width: 1080px; 
    margin: 0 auto;
    margin-top: 2.5rem;
    margin-bottom: 4rem;
}
/* Standardeinstellung für kleine mobile Geräte (z.B. < 375px) */
.masonry-item {
    margin-bottom: 5px;
    float: left; 
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Weicher Übergang beim Einblenden */
    /* Stellen Sie sicher, dass es beim Laden keine fixe Höhe hat, wenn Sie aspect-ratio nicht nutzen */
    transform: translateZ(0); 
}
/* Diese Klasse wird per JavaScript hinzugefügt, sobald das Bild geladen ist */
.masonry-item.is-loaded {
    opacity: 1;
}
/* Container ist standardmäßig unsichtbar, um Flackern zu verhindern */
.masonry-section.is-loading {
    opacity: 0;
    transition: opacity 0.3s ease-out; 
}
/* Container wird sichtbar, sobald die is-loaded Klasse hinzugefügt wird */
.masonry-section.is-loaded {
    opacity: 1;
    overflow: hidden;
    min-height: 80vh;
}
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
}
/* Content-Bereich unter dem Bild */
.item-content {
    padding: 0 0 5px 0;
}
/* Zeilen für Caption und Buttons */
.caption-row,
.text-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    transform: translateZ(0); 
}
.text-row {
    margin-top: 0; 
}
.secondary-text {
    color: #12121299;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    /* Wichtig: Füge eine maximale Breite hinzu, damit der Umbruch kontrolliert stattfindet */
    max-width: 90%; 
}
.caption {
    color: #121212;
    font-size: 16px;
    font-weight: 400;
}
/* Button-Styling */
.action-button {
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft, wenn der Text viel Platz braucht */
    margin-left: 10px; /* Abstand zum Text links davon */
    transform: translateZ(0); 
}
.arrow-btn {
    font-size: 1rem;
    display: inline-block;
    transform: rotate(45deg) translateZ(0);
    background-color: transparent; /* Hilft manchmal bei Rendering-Fehlern */
}

.cross-btn {
    font-size: 1rem;
    display: inline-block;
    transform: rotate(0deg) translateZ(0);
    background-color: transparent; /* Hilft manchmal bei Rendering-Fehlern */
}
.dots-btn {
    font-size: 22px;
}
/* Versteckte Textzeile (Grundzustand) */
.hidden-text {
    color: #12121299;
    font-size: 16px;
    font-weight: 400;
    max-height: 1000px; /* Sichtbarer Zustand */
    opacity: 1;
    overflow: hidden; 
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out; /* Übergang für alle Eigenschaften */
    margin-top: 0px; /* Abstand, wenn sichtbar */
    display: flex;
    flex-direction: column; /* Gut hinzugefügt */
}

/* Zustand, wenn die Klasse 'hidden' per JS hinzugefügt wird */
.hidden-text.hidden {
    /* Endzustand (versteckt) */
    max-height: 0; 
    opacity: 0;
    margin-top: 0; 
    /* NEU: display hier nicht setzen, wir nutzen max-height: 0 */
}

.grid-sizer,
.masonry-item { 
  width: 100%;
}
/* ********** responsiveness ******** */
@media screen and (max-width: 1366px)  {
    .container{
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (min-width: 400px) {
  .grid-sizer,
  .masonry-item { width: 49%; } /* 2 Spalten (genug Puffer für 8px Gutter) */
}

@media (min-width: 769px) {
  .grid-sizer,
  .masonry-item { width: 32.5%; } /* 3 Spalten (genug Puffer für 8px Gutter) */
}

@media (min-width: 1025px) {
  .grid-sizer,
  .masonry-item { width: 24%; } /* 4 Spalten (genug Puffer für 8px Gutter) */
}

@media (min-width: 375px) {
.imprint>ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 0.5rem;
}
  }

/* ********** zoomed image ******** */