:root { --gap: 12px; }

.gallery-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Desktop */
@media (min-width: 992px) {
  .gallery-hero {
    height: clamp(520px, 65vh, 700px);
  }
}

/* Mobile / Tablet */
@media (max-width: 991px) {
  .gallery-hero {
    aspect-ratio: 16 / 9;  /* oder 4/3 oder 3/2 */
    height: auto;
  }
}

.gallery-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}

/* Thumbs Container */
.gallery-thumbs{
--thumbSize: 200px;      /* Desktop */
--thumbGap: 33px;
--thumbMarginTop: 14px;  /* Abstand zum Hero */

margin: var(--thumbMarginTop) 0 28px;
display: flex;
gap: var(--thumbGap);
align-items: center;
flex-wrap: nowrap;
}

/* Thumb-Kachel */
.thumb-btn{
inline-size: var(--thumbSize);
block-size: var(--thumbSize);
flex: 0 0 auto;
border-radius: 12px;
overflow: hidden;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
position: relative;
}

.thumb-btn img{
width: 100%;
height: 100%;
object-fit: cover;
display:block;
}

/* Mobile allgemein: Abstand halbieren */
@media (max-width: 768px){
.gallery-thumbs{
--thumbMarginTop: -20px; /* halbiert von 14px */
--thumbGap: 10px;
}
}

/* Mobile Portrait: 75x75 + (JS rendert 4 thumbs) */
@media (max-width: 768px) and (orientation: portrait){
.gallery-thumbs{ --thumbSize: 91px; }
}

/* =========================
TABLET PORTRAIT
========================= */
@media (pointer: coarse) and (min-width: 769px) and (max-width: 1199px) and (orientation: portrait){
.gallery-thumbs{
--thumbSize: 130px;
--thumbGap: 17px;
--thumbMarginTop: 0px;
}
}

/* =========================
TABLET LANDSCAPE
========================= */
@media (pointer: coarse) and (min-width: 769px) and (max-width: 1199px) and (orientation: landscape){
.gallery-thumbs{
--thumbSize: 160px;
--thumbGap: 28px;
--thumbMarginTop: 6px;
}
}

/* iPhone / Phone Landscape zuverlässig */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
.gallery-thumbs{
--thumbSize: 125px;
--thumbGap: 21px;
--thumbMarginTop: 0px;
}
}

.thumb-btn {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  outline: none;
  aspect-ratio: 1 / 1;
  position: relative;
  touch-action: manipulation;
}
.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .15s ease;
}
.thumb-btn:hover img { transform: scale(1.06); }

.thumb-btn.more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* Skeleton sichtbar -> grauer Hintergrund */
.img-skeleton{
  background: #e6e6e6;
  overflow: hidden;
}

/* Bild erst zeigen wenn geladen */
.img-skeleton img{
  opacity: 0;
  transition: opacity .18s ease;
  display:block;
  width:100%;
  height:100%;
}

/* sobald geladen -> Bild einblenden */
.img-skeleton.is-loaded img{
  opacity: 1;
}

/* optional: bei error nicht schwarz bleiben */
.img-skeleton.is-error{
  background: #d9d9d9;
}

.text-wrapper {
  position: relative;
  max-width: 800px;
}

/* Basis */
.text-content {
  overflow: hidden;
  transition: max-height 0.6s ease;
}

/* Eingeklappt = ca. 20 Zeilen */
.text-content.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 10;        /* Anzahl Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

/* Smooth Fade-Out Effekt */
.text-content.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

/* Button Styling */
.toggle-btn {
  margin-top: 10px;
  background: none;
  border: none;
  color: #0b35ae;
  font-weight: 600;
  cursor: pointer;
}

.mb-10 {
  margin-bottom: 10px;
}

.video-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrap iframe{
  width: 100%;
  height: 100% !important;
  border: 0;
  display: block;
}