/* ===============================
   ARCHIV – GRID
================================== */
.grz-ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

@media (min-width: 700px) {
  .grz-ref-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grz-ref-grid {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* ===============================
   CARD BASIS
================================== */
.grz-ref-card {
  position: relative;
}

.grz-ref-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.grz-ref-card__figure {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.grz-ref-card__img,
.grz-ref-card__placeholder {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 900 / 650;
  background:#f3f3f3;
}

/* ===============================
   OVERLAY – TITEL / STADTTEIL / LINIE / DATUM
================================== */
.grz-ref-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 16px 26px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.65) 60%,
    rgba(0,0,0,.85) 100%
  );
  display: flex;
  justify-content: center;
  text-align: center;
}

.grz-ref-card__overlay-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
  max-width: 90%;
  margin: auto;
}

/* TEXT ALLES GROSS */
.grz-ref-card__title,
.grz-ref-card__stadt,
.grz-ref-card__date {
  text-transform: uppercase;
  letter-spacing: .5px;
}

.grz-ref-card__title {
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  font-size: 28px;
  line-height: 36px;
  font-family: "montserrat-medium";
  margin-bottom: 30px;
  color: #fff;
}

/* STADT */
.grz-ref-card__stadt {
  margin-top: 6px;
  font-size: .94rem;
  color: #fff;
  opacity: .95;
}

/* LINIE */
.grz-ref-card__divider {
  width: 62px;
  height: 2px;
  background:#fff;
  margin: 12px auto 10px;
  opacity: .95;
  display: block;
}

/* DATUM */
.grz-ref-card__date {
  font-size: .88rem;
  color:#fff;
  opacity:.95;
}

/* Meta unter Bild entfernen — nicht mehr benötigt */
.grz-ref-card__meta { 
  display:none !important; 
}

/* --- Fix: Divider sichtbar erzwingen --- */
.grz-ref-card__overlay-inner > * { 
  display:block !important; 
}

.grz-ref-card__divider {
  display: block !important;
  width: 62px !important;
  height: 0 !important;           
  margin: 12px auto 10px !important;
  border: 0 !important;
  border-top: 2px solid #fff !important; 
  opacity: .95 !important;
  background: transparent !important;     
}

/* ===============================
   RESPONSIVE – TITEL & OVERLAY
================================== */

/* bis 1400px: etwas kleiner */
@media screen and (max-width: 1400px) {
  .grz-ref-card__title {
    font-size: 20px !important;
    line-height: 28px;
  
  }
.grz-ref-card__stadt {
    font-size: 13px;
}

section.grz-ref-hero button.nav.prev {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: unset;
    color: #fff;
    z-index: 5;
    line-height: 44px;
    text-align: center;
    font-size: 75px;
    top: 50%;
    margin-left: -100px;
}


section.grz-ref-hero button.nav.next {
      position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: unset;
    color: #fff;
    z-index: 5;
    line-height: 44px;
    text-align: center;
    font-size: 75px;
    top: 50%;
margin-right: -75px;
}
button.grz-more__nav.grz-more__nav--prev {
     margin-left: -100px;
}

button.grz-more__nav.grz-more__nav--next {
  margin-right: -100px;
}



}
/* bis 1024px: Titel weiter verkleinern, Padding etwas enger */
@media screen and (max-width: 1024px) {
  .grz-ref-card__title {
    font-size: 20px !important;
    line-height: 28px;
      margin-bottom:0px !important;
  }
      .grz-ref-grid {
    
        padding-left: 50px;
        padding-right: 50px;
    }

  .grz-ref-card__overlay {
    padding: 18px 14px 22px;
  }
}

@media (max-width: 800px) {
 main.grz-ref-archive {
    padding-left: 25px;
    padding-right: 25px;
}
.grz-ref-hero__title {
    font-size: 25px !important;
    line-height:35px !important;
            margin-bottom: 30px !important;
}


section.grz-ref-hero button.nav.prev {
    
    top: 75% !important;
   
}


section.grz-ref-hero button.nav.next {

     top: 75% !important;

}

.grz-ref-hero__stadt {
    font-size: 15px !important;
}

.grz-ref-hero__meta-line {
    font-size: 12px !important;
}

.grz-ref-hero__meta-line span {
    font-size: 12px !important;
}

}

@media (max-width: 600px) {
 main.grz-ref-archive {
    padding-left: 0px;
    padding-right: 0px;
}
.grz-ref-hero__title {
    font-size: 20px !important;
    line-height:30px !important;
     margin-bottom: 0px !important;
}

.grz-ref-hero__stadt {
    font-size: 13px !important;
}

.grz-ref-hero__meta-line {
    font-size: 10px !important;
}

.grz-ref-hero__meta-line span {
    font-size: 10px !important;
}



}

/* bis 768px (Tablet / kleines Notebook) */
@media screen and (max-width: 768px) {
  .grz-ref-card__title {
    font-size: 18px !important;
    line-height: 26px;
  }

  .grz-ref-card__overlay-inner {
    max-width: 100%;
  }

}

/* bis 480px (Smartphone) – max Lesbarkeit */
@media screen and (max-width: 480px) {
  .grz-ref-card__title {
    font-size: 14px !important;
    line-height: 24px;
    margin-bottom: 20px;
  }

  .grz-ref-card__stadt {
    font-size: 12px !important;
}

  .grz-ref-card__overlay {
    padding: 14px 12px 18px;
  }
}