/* Allgemeine Spaltenstruktur */
.startseite-row {
    display: flex;
    flex-wrap: wrap;      /* damit mobil gestapelt wird */
    gap: 20px;            /* Abstand zwischen Spalten */
    margin-bottom: 40px;  /* Abstand nach unten zu nächsten Abschnitt */
}

/* Spaltenbreiten */
.startseite-col-left, .startseite-col-right {
    flex: 1;              /* gleiche Breite */
    min-width: 300px;     /* unter 300px werden sie gestapelt */
}

/* Bilder in Spalten skalieren */
.startseite-img {
    width: 100%;          /* passt Bild an Spaltenbreite an */
    height: auto;         /* proportional */
    display: block;       /* verhindert kleine Lücken */
    border-radius: 4px;   /* optional, abgerundete Ecken */
}

/* Optional: Textabstände */
.startseite-col-right h2 {
    margin-top: 0;
}

.startseite-col-right p {
    line-height: 1.6;
}

/* Trennlinien */
hr.custom-hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 40px 0;
}
.cust_user1 {
    text-align: right;
}
/* Galerie-Container */
.socken-galerie {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Abstand zwischen den Zeilen */
}

/* Zeilen */
.galerie-zeile {
  display: flex;
  gap: 20px; /* Abstand zwischen den Bildern */
}

/* Galerie-Items */
.galerie-item {
  flex: 1; /* Gleichmäßige Breite */
}

/* Bilder */
.galerie-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* optional: leichte Abrundung */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* optional: dezenter Schatten */
}

/* Mobile Ansicht: einspaltig */
@media (max-width: 768px) {
  .galerie-zeile {
    flex-direction: column;
  }
}

.galerie-item img:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}
/* Fancybox: Abstand vom oberen Rand für Sticky Header */
/* Desktop (>992px) */
.fancybox__container {
  top: 100px !important;
}
.fancybox__content {
  max-height: calc(100vh - 110px) !important;
}

/* Tablet: 768px – 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .fancybox__container {
    top: 100px !important; /* gleiche Header-Höhe wie Desktop */
  }
  .fancybox__content {
    max-height: calc(100vh - 110px) !important;
  }
}

/* Mobil <768px */
@media (max-width: 767px) {
  .fancybox__container {
    top: 70px !important; /* Header Höhe Mobil */
  }
  .fancybox__content {
    max-height: calc(100vh - 80px) !important;
  }
}


/* Optional: kleine Abrundung + Schatten für Fancybox */
.fancybox__content {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* Close-Button fixieren */
.fancybox__container .fancybox__close {
  display: block !important;
  opacity: 1 !important;
  top: 10px;
  right: 10px;
  z-index: 9999;
}