* {
  padding: 0;
  margin: 0;
}
/* -------           Grundlegende Fonts & Farben        ---------- */
:root {
  --primary-color: #253F2D;
  --accent-color: #D8DB94;
  --bg-light: #D6DFCF;
  --bg-color: #E5EBE0;
  --footer-color: #1E1B22;
}

@font-face {
  font-family: 'primary';
  src: url('Times New Roman.ttf') format('truetype');
}

@font-face {
  font-family: 'accent';
  src: url('CormorantUpright-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  color: var(--primary-color);
  background-color: var(--bg-color);
  font-family: 'primary', serif;
}







/* ------         HEADER         --------- */
body.page-start nav a[href="index.php"],
body.page-archiv nav a[href="archiv.php"],
body.page-trachtengruppe nav a[href="trachtengruppe.php"],
body.page-geschichte nav a[href="geschichte.php"],
body.page-seniorenkreis nav a[href="seniorenkreis.php"],
body.page-vorstand nav a[href="vorstand.php"],
body.page-kalender nav a[href="kalender.php"]

 {
  background-color: var(--primary-color);;
  color: var(--accent-color);
  font-weight: bolder;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 30px 0;
  justify-content: center;
  display: flex;
  width: 100%; 
  background: transparent;
}

header nav {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px; /* Abstand zwischen Buttons */
}

header nav a {
  text-decoration: none;
  font-family: 'other', sans-serif;
  font-size: 18px;
  color: var(--primary-color);
  background-color: var(--bg-light);
  padding: 10px 20px;
  border-radius: 50px; /* Kapsel-Form */
}

.menu-toggle,
.menu-close {
  display: none;
  border: 0;
  cursor: pointer;
}

@media (max-width: 900px) {
  header {
    left: auto;
    right: 0;
    width: auto;
    padding: 20px 5vw;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 50px;
    background: var(--bg-light);
  }

  .menu-toggle span {
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
  }

  .menu-toggle span:first-child { width: 28px; }
  .menu-toggle span:last-child  { width: 18px; }

  header nav {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 5vw;
    background: var(--footer-color);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0s linear 0.4s;
  }

  header.menu-open nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s ease, visibility 0s;
  }

  .menu-close {
    display: block;
    position: absolute;
    top: 14px;
    right: 5vw;
    background: none;
    color: var(--accent-color);
    font-size: 3rem;
    line-height: 1;
  }
}


.button {
  text-decoration: none;
  font-family: 'other', sans-serif;
  font-size: 18px;
  color: var(--primary-color);
  background-color: var(--bg-light);
  padding: 10px 20px;
  border-radius: 50px; /* Kapsel-Form */
}



.button--accent {
  background-color: var(--accent-color);
}

/* ------         ALLGEMEINE SECTIONS         --------- */
section {
  padding-top: clamp(5rem, 9vw, 9rem);
  padding-bottom: clamp(5rem, 9vw, 9rem);
  padding-left: 5vw;
  padding-right: 5vw;
  text-align: center;
  align-items: center;
}
.image-block img{
  width:80vw;
  max-width: 1000px;
}














/* ------------        H1         ------------- */
h1{
  font-family: 'accent', serif;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(3rem, 7vw, 10rem);
  line-height: 0.9;
  text-shadow: none;
  filter: none;
  -webkit-text-stroke: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}












/* ------------        H2         ------------- */
h2{
  font-family: 'accent', serif;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(2rem, 5vw, 4rem);
  margin: 50px 50px;
  line-height: 1;
  -webkit-text-stroke: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}










/* ------------        PARAPGRAPH         ------------- */
.text-block{
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

p {
  font-size: clamp(1.5rem, 1.5vw, 2rem);
  max-width: 1000px;
  margin-top: 30px;
  margin-bottom: 30px; /* dünnt Times New Roman aus: Strich in Hintergrundfarbe */
  hyphens: auto;
  overflow-wrap: break-word;
}

.left{
  text-align: left;
  margin-left: 5vw;
  margin-right: 5vw;
  align-items:start;
}
.text-head{
  font-size: clamp(2rem, 3vw, 3rem);
}











/* ------------        ARROW-BUTTON         ------------- */
.arrow-link {
  display: inline-flex;             /* Text + Pfeil nebeneinander */
  align-items: center;
  gap: 1px;                         /* Abstand zwischen Text und Pfeil */
  text-decoration: none;            /* keine Unterstreichung */
  color: var(--primary-color);                    /* Textfarbe */
  font-size: clamp(1rem, 2vw, 2rem);
  font-family: 'other', sans-serif;
  background: none;                 /* kein Hintergrund */
  border: none;                     /* keine Umrandung */
  cursor: pointer;
  transition: color 0.3s ease;
}
.arrow-link:hover {
  color: var(--accent-color);
}
.arrow {
  transition: transform 0.3s ease;
}
.arrow-link:hover .arrow {
  transform: translateX(5px);
}





/* ------         SPEZIAL SECTIONS         --------- */
.hero {
  box-sizing: border-box;
  height: 100vh;
  height: 100svh; /* mobil: ohne die ein-/ausfahrende Browserleiste */
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  background: url('pictures/IMG_9446.JPG') center 70%/cover no-repeat;
  text-align: center;
}
.hero--tracht {
  background-image: url('pictures/trachtengruppe/IMG_9480.JPG');
  background-position: center 40%;
}
/* Alles nach dem Hero schiebt sich beim Scrollen darüber (Specificity 0: .contact, footer usw. behalten ihren Hintergrund) */
:where(.hero ~ *) {
  position: relative;
  z-index: 1;
  background: var(--bg-color);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.5); /* 0.5 = 50% Abdunkelung */
  z-index: 1; /* unter Inhalt */
}
.hero > * {
  position: relative;
  z-index: 2;
}

.hero h1{
  z-index: 2;
  color: var(--accent-color);
  padding: 40px 20px 40px 20px;
}
.hero p{
  z-index: 2;
  color: var(--accent-color);
  padding: 40px 20px 40px 20px;
}
.hero .scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  color: var(--accent-color);
  text-decoration: none;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}
.scroll-down:hover .arrow {
  transform: translateY(5px);
}
.section-dark {
  background: var(--footer-color);
  color: var(--accent-color);
}

.zitat{
  padding-top: clamp( 7rem,9vw, 9rem) ;
  padding-bottom: clamp( 7rem,9vw, 9rem);
  background-color: var(--primary-color);
  color: var(--accent-color);
  border-radius: 20px;
}

.daten > h2 {
  padding-bottom: 50px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
}

.fact h2 {
  margin: 0;
}

.fact p {
  margin: 1rem 0 0;
}

@media (max-width: 750px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

.geschichte{
  padding-bottom: clamp( 10rem,12vw, 12rem);
}

/* Einheitliche Textbreite und Abstand zum Button für die Startseiten-Absätze */
:root {
  --text-width: clamp(18rem, 75vw, 1100px);
  --text-gap: 40px;
}

.fit-width,
.tanz-grid__text {
  display: grid;
  max-width: 100%;
  margin-inline: auto;
}

.fit-width p,
.tanz-grid__text p {
  max-width: var(--text-width);
  margin: 0 auto var(--text-gap);
}

.fit-width p {
  margin-top: 30px;
}

.fit-width .button,
.tanz-grid__text .button {
  justify-self: center;
}

.underline {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.12em;
}

/* Karte: Pins werden per left/top in Prozent über das Bild gelegt */
.map-section {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 32rem);
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-inline: 12vw;
}

.map-section__text {
  text-align: left;
}

.map-section__text h2 {
  margin: 0;
}

.map-section__text p {
  margin: var(--text-gap) 0 0;
}

.map {
  position: relative;
}

@media (max-width: 750px) {
  .map-section {
    grid-template-columns: 1fr;
    padding-inline: 5vw;
  }

  .map-section__text {
    display: contents;
    text-align: center;
  }

  .map-section__text h2 {
    order: 1;
  }

  .map {
    order: 2;
    width: 65%;
    justify-self: center;
  }

  .map-section__text p {
    order: 3;
    margin: 0;
  }
}

.map img {
  display: block;
  width: 100%;
}

.map__pins {
  list-style: none;
}

.map__pin {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 63, 45, 0.2);
  cursor: pointer;
}

.map__pin:hover,
.map__pin:focus {
  z-index: 1;
}

.map__label {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--primary-color);
  color: var(--bg-color);
  font-size: 0.9rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.map__pin:hover .map__label,
.map__pin:focus .map__label {
  opacity: 1;
}

.image-pair {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.image-pair img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 550px;
  height: auto;
}

/* Tracht: Bildergrid (12 Spalten). Überschrift über allem. Links ein hohes Bild, rechts zwei kleinere,
   darunter Text + Button, darunter ein breites Bild. */
.tracht-grid,
.tanz-grid,
.probe-grid {
  --row: clamp(160px, 20vw, 280px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 2vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

.tracht-grid {
  grid-template-rows: auto var(--row) auto var(--row) auto;
}

.tracht-grid img,
.tanz-grid img,
.probe-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tracht-grid__title  { grid-column: 1 / -1; grid-row: 1; margin: 0 0 clamp(1rem, 3vw, 2.5rem); }
.tracht-grid__girls  { grid-column: 1 / span 5;  grid-row: 2 / span 3; object-position: 30% 30%; }
.tracht-grid__watch  { grid-column: 6 / span 3;  grid-row: 2;          object-position: 50% 68%; }
.tracht-grid__shawls { grid-column: 9 / span 4;  grid-row: 2;          object-position: 50% 40%; }
.tracht-grid__hats   { grid-column: 6 / span 7;  grid-row: 4;          object-position: 50% 65%; }

.tracht-grid__text {
  grid-column: 6 / span 7;
  grid-row: 3;
  align-self: center;
  text-align: left;
}

.tracht-grid__button {
  grid-column: 1 / -1;
  grid-row: 5;
  justify-self: center;
  margin-top: clamp(1rem, 3vw, 2.5rem);
}

.tracht-grid__text p {
  margin: 0;
}

#tanz {
  background: var(--primary-color);
  color: var(--accent-color);
}

#tanz.tanz--light,
#tanz.tanz--light .tanz-grid__quote {
  color: var(--bg-color);
}

.tanz-grid__quote {
  color: var(--accent-color);
}

/* Tanz: Überschrift, links ein hohes Bild, rechts zwei breite übereinander, darunter der Text. */
.tanz-grid {
  --row: clamp(180px, 22vw, 320px);
  grid-template-rows: auto var(--row) auto var(--row) auto;
}

.tanz-grid__title  { grid-column: 1 / -1; grid-row: 1; margin: 0 0 clamp(1rem, 3vw, 2.5rem); }
.tanz-grid__dancer { grid-column: 1 / span 6;  grid-row: 2 / span 3; object-position: 55% 40%; }
.tanz-grid__circle { grid-column: 7 / span 6;  grid-row: 2; object-position: 50% 65%; }
.tanz-grid__quote  { grid-column: 7 / span 6;  grid-row: 3; align-self: center; margin: 0; text-align: left; }
.tanz-grid__line   { grid-column: 7 / span 6;  grid-row: 4; object-position: 50% 60%; }

.tanz-grid__text {
  grid-column: 1 / -1;
  grid-row: 5;
  margin-top: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}

/* Probe: Überschrift, rechts ein hohes Bild, links zwei Bilder, Text, zwei Bilder. */
.probe-grid {
  grid-template-rows: auto var(--row) minmax(var(--row), auto) var(--row);
}

.probe-grid__title { grid-column: 1 / -1; grid-row: 1; margin: 0 0 clamp(1rem, 3vw, 2.5rem); }
.probe-grid__tall  { grid-column: 8 / span 5; grid-row: 2 / span 3; object-position: 50% 40%; }
.probe-grid__a     { grid-column: 1 / span 3; grid-row: 2; }
.probe-grid__b     { grid-column: 4 / span 4; grid-row: 2; }
.probe-grid__c     { grid-column: 1 / span 4; grid-row: 4; }
.probe-grid__d     { grid-column: 5 / span 3; grid-row: 4; }

.probe-grid__text {
  grid-column: 1 / span 7;
  grid-row: 3;
  align-self: center;
  text-align: left;
}

.probe-grid__text p {
  margin: 0;
}

@media (max-width: 750px) {
  :root { --text-width: 100%; }

  .probe-grid {
    --row: 45vw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto var(--row) auto var(--row) 65vw;
  }
  .probe-grid__a     { grid-column: 1;      grid-row: 2; }
  .probe-grid__b     { grid-column: 2;      grid-row: 2; }
  .probe-grid__text  { grid-column: 1 / -1; grid-row: 3; text-align: center; }
  .probe-grid__c     { grid-column: 1;      grid-row: 4; }
  .probe-grid__d     { grid-column: 2;      grid-row: 4; }
  .probe-grid__tall  { grid-column: 1 / -1; grid-row: 5; }

  .tracht-grid {
    --row: 45vw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto var(--row) var(--row) 65vw auto auto;
  }
  .tracht-grid__hats   { grid-column: 1 / -1; grid-row: 2; }
  .tracht-grid__watch  { grid-column: 1;      grid-row: 3; }
  .tracht-grid__shawls { grid-column: 2;      grid-row: 3; }
  .tracht-grid__girls  { grid-column: 1 / -1; grid-row: 4; }
  .tracht-grid__text   { grid-column: 1 / -1; grid-row: 5; margin-top: 1rem; }
  .tracht-grid__button { grid-row: 6; }

  .tanz-grid {
    --row: 45vw;
    grid-template-columns: 1fr;
    grid-template-rows: auto var(--row) auto var(--row) 90vw auto;
  }
  .tanz-grid__circle { grid-column: 1; grid-row: 2; }
  .tanz-grid__quote  { grid-column: 1; grid-row: 3; }
  .tanz-grid__line   { grid-column: 1; grid-row: 4; }
  .tanz-grid__dancer { grid-column: 1; grid-row: 5; }
  .tanz-grid__text   { grid-column: 1; grid-row: 6; margin-top: 1rem; }

  .tanz--light .tanz-grid {
    grid-template-rows: auto var(--row) var(--row) 90vw auto;
  }
  .tanz--light .tanz-grid__quote  { display: none; }
  .tanz--light .tanz-grid__line   { grid-row: 3; }
  .tanz--light .tanz-grid__dancer { grid-row: 4; }
  .tanz--light .tanz-grid__text   { grid-row: 5; }
}

#verbandsleben{
  display: flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.verbandsleben {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 2rem; /* Abstand zwischen den Cards */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

}
.veranstaltungen{
  gap: 20px;
  flex-wrap: wrap;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}











/* ------------        CARDS         ------------- */
.card {
  position: relative;
  flex: 1 1 200px; /* minimale Breite 300px, wächst bei Platz */
  overflow: hidden; /* damit die Rundung auch das Bild betrifft */
  aspect-ratio: 16 / 9; /* Querformat */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.03);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9); /* leicht abdunkeln für bessere Lesbarkeit */
  transition: filter 0.3s ease;
}

.card:hover img {
  filter: brightness(0.6);
}

.card-link {
  position: absolute;
  inset: 0; /* füllt die gesamte Karte */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bg-color);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.1); /* halbtransparentes Overlay */
}





/* ------------        KONTAKTSEITEN         ------------- */
.contact{
  background-color: var(--footer-color);
  color: var(--bg-color);
  overflow: hidden;
}
.contact p{
  max-width: var(--text-width);
}
.contact .button{
  margin-top: 30px;
  margin-bottom: 30px;
}
.contact-icons {
  display: flex;
  justify-content: center;
  z-index: 3;
}
.contact-icons img {
  width: 10vw;
}
.contact-icons a{
  size: 10vw;
  transition: transform 0.3s ease, color 0.3s ease;
}
.contact-icons a:hover {
  transform: scale(1.1);
  color: var(--bg-light);
}










/* ------------        FOOTER         ------------- */
footer {
  background-color: var(--footer-color);
  color: var(--bg-color);
  text-align: center;
}
.footer-bottom {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-bottom h1 {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.footer-bottom nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.footer-bottom nav a {
  color: var(--bg-color);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}
.footer-bottom nav a:hover {
  color: var(--accent-color);
}
.footer-bottom nav a[href="impressum.php"],
.footer-bottom nav a[href="datenschutz.php"] {
  color: var(--accent-color);
}
.footer-bottom nav a[href="impressum.php"]:hover,
.footer-bottom nav a[href="datenschutz.php"]:hover {
  color: var(--bg-color);
}
.footer-bottom p {
  margin-inline: auto;
  opacity: 0.3;
}
.social-icons {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.social-icons a {
  transition: transform 0.3s ease, color 0.3s ease;
}
.social-icons img {
  width: clamp(2rem, 3vw, 2.75rem);
  display: block;
}
.social-icons a:hover {
  transform: scale(1.1);
  color: var(--bg-light);
}























/* ------------        SCROLL GALLERY         ------------- */
.image-scroll-container {
  width: 100%;
  overflow-x: scroll;
   /* Horizontal scrollen erlauben */
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* smooth scroll für iOS */
  scroll-behavior: smooth;
  padding: 5rem 0;
}
/* hebt das seitliche Section-Padding auf, damit die Galerie von Rand zu Rand geht */
.abseits .image-scroll-container {
  width: auto;
  margin-inline: -5vw;
}

.image-track {
  display: flex;     /* inline-flex sorgt dafür, dass Track horizontal bleibt */
  padding-left: 5vw;
}
.image-track img {
  margin-left: -4vw;
  height: 25vw;
  flex-shrink: 0; /* verhindert, dass Bilder zusammengestaucht werden */
  display: inline-block;
}



/* ------------        EVENT         ------------- */
.image-view {
  display: flex;     /* inline-flex sorgt dafür, dass Track horizontal bleibt */
  padding-left: 5vw;
}
.image-view img {
  padding: 2vw;
  height: 20vw;
  flex-shrink: 0; /* verhindert, dass Bilder zusammengestaucht werden */
  display: inline-block;
}




/* ------------        OVERLAY         ------------- */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5); /* leichteres Abdunkeln */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

#modal-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

#modal-overlay.active img {
  transform: scale(1);
}

.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.modal-arrow--prev {
  left: 1vw;
}

.modal-arrow--next {
  right: 1vw;
}

.modal-arrow--prev:hover {
  transform: translateY(-50%) translateX(-5px);
}

.modal-arrow--next:hover {
  transform: translateY(-50%) translateX(5px);
}













/* ------------        SMOOTH SCROLL (Lenis)         ------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }



/* ------------        MEDIA QUERIES         ------------- */
@media (max-width: 750px) {
  .verbandsleben {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .verbandsleben > div {
    width: 70%; /* Cards nehmen nur 70% der Containerbreite ein */
  }
}




/* EVENT GRID (kalender.php, archiv.php, archiv_jahr.php)
   Varianten ändern nur Variablen am Grid: --cols, --gap, --align */
.event-grid {
  --cols: 0.75fr 0.25fr;
  --gap: 30px;
  --align: flex-start;

  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.event-row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
  align-items: var(--align);
  position: relative;

  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid rgba(70, 76, 66, .3);
  box-sizing: border-box;

  text-decoration: none;
  color: var(--primary-color);
  text-align: left;
}

.event-row:first-child {
  border-top: 1px solid rgba(70, 76, 66, .3);
}

.event-row h2,
.event-row p {
  margin: 0;
  text-align: left;
}

/* Hover: Text leicht ausblenden, Bilder nicht */
.event-row > :not(.event-image, .event-preview) {
  transition: opacity 0.3s ease;
}

.event-row:hover > :not(.event-image, .event-preview) {
  opacity: 0.7;
}


/* Zeile mit Bild (kalender.php) */
.event-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

.event-meta {
  margin-top: 20px;
}

.event-meta p {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.event-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}


/* Kompakte Liste (archiv.php, archiv_jahr.php): Bilder nur beim Hover */
.event-grid--compact {
  --cols: 0.25fr 0.75fr;
  --align: baseline;
}

/* Vorschaubild: Standard rechts in der Zeile.
   Variablen: --x/--y Position, --tx Versatz, --w/--h Maximalgröße, --r Neigung */
.event-preview {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, auto);
  right: var(--right, 0);
  max-width: var(--w, clamp(300px, 37.5vw, 600px));
  max-height: var(--h, 60vh);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--tx, 0), -50%) rotate(var(--r, 0deg)) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 20;
}

.event-preview.visible {
  opacity: 1;
  transform: translate(var(--tx, 0), -50%) rotate(var(--r, 0deg)) scale(1);
}


/* archiv.php: Liste links, 5 Bilder an festen Plätzen rechts neben der gehoverten Zeile (Bild n gehört zu Platz n).
   --x: Mitte ab rechtem Zeilenrand, --y: Mitte ab Zeilenmitte. Bilder scrollen mit der Zeile. */
.event-grid--narrow {
  --cols: 0.4fr 0.6fr;
}

.event-grid--narrow h2 {
  font-family: 'primary', serif;
}

.event-preview--scatter {
  --right: auto;
  --tx: -50%;
  --h: 35vh;
}

.event-preview--scatter:nth-of-type(1) { --x: calc(100% + 10vw); --y: calc(50% - 28vh); --w: 18vw; --r: -7deg; }
.event-preview--scatter:nth-of-type(2) { --x: calc(100% + 31vw); --y: calc(50% - 34vh); --w: 16vw; --r: 6deg; }
.event-preview--scatter:nth-of-type(3) { --x: calc(100% + 25vw); --y: 50%;              --w: 20vw; --r: -4deg; }
.event-preview--scatter:nth-of-type(4) { --x: calc(100% + 9vw);  --y: calc(50% + 18vh); --w: 15vw; --r: 8deg; }
.event-preview--scatter:nth-of-type(5) { --x: calc(100% + 33vw); --y: calc(50% + 32vh); --w: 14vw; --r: 3deg; }

/* Rechts Platz für die Bilder lassen (nur Desktop) */
@media (min-width: 1001px) {
  .event-grid--narrow {
    width: 60vw;
  }
}


/* Mobil / Touch / schmal: keine Vorschaubilder, nur die Liste */
@media (hover: none), (max-width: 1000px) {
  .event-preview {
    display: none;
  }
}

@media (max-width: 750px) {
  .event-grid--compact {
    --cols: 1fr;
    --gap: 10px;
  }

  /* archiv.php: Jahr und Anzahl bleiben in einer Zeile */
  .event-grid--narrow {
    --cols: auto 1fr;
    --gap: 40px;
  }
}