/* Veranstaltungsseite. Die Daten kommen aus dem woechentlichen Sammler
   (ellie/fetch_events.py), die Bilder liegen lokal - kein Fremdabruf im Browser. */

.termin-kopf{display:grid; gap:var(--s4); max-width:64ch}
.termin-quellen{font-size:14px; color:var(--neben)}

.filterreihe{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s5)}
.filterreihe button{
  min-height:40px; padding:0 15px; border:1.5px solid var(--linie); background:var(--karte);
  color:var(--tinte); font-weight:600; font-size:14.5px; cursor:pointer; border-radius:var(--r-element);
  transition:border-color var(--schnell) var(--kurve), background var(--schnell) var(--kurve);
}
.filterreihe button[aria-pressed="true"]{border-color:var(--tinte); background:var(--sand-weich)}
@media (hover:hover) and (pointer:fine){ .filterreihe button:hover{border-color:var(--sand)} }
.filterreihe .filter-extern{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 15px;
  border:1.5px solid var(--linie); background:var(--karte); color:var(--tinte); font-weight:600;
  font-size:14.5px; text-decoration:none; border-radius:var(--r-element);
  transition:border-color var(--schnell) var(--kurve);
}
.filterreihe .filter-extern span{color:var(--akzent)}
.filterreihe .filter-art{display:inline-flex; align-items:center; gap:6px}
.filterreihe .filter-art svg{width:16px; height:16px; color:var(--akzent)}
@media (hover:hover) and (pointer:fine){ .filterreihe .filter-extern:hover{border-color:var(--sand)} }

.monat{margin-top:var(--s7)}
.monat > h2{
  font-size:clamp(20px,2.4vw,26px); padding-bottom:var(--s3);
  border-bottom:6px solid transparent; border-image:var(--schraffur) 6 repeat;
}
.termine{display:grid; gap:0; margin-top:var(--s2)}

.termin{
  display:grid; gap:var(--s3) var(--s4); align-items:start;
  grid-template-columns:64px minmax(0,1fr);
  padding:var(--s5) 0; border-bottom:1px solid var(--linie);
}
.termin:last-child{border-bottom:0}
.termin[hidden]{display:none}
.monat[hidden], .termin-mehr[hidden], .termin-leer[hidden]{display:none}
.termin-mehr{margin-top:var(--s6); display:flex; justify-content:center}

.termin-datum{
  text-align:center; border:1.5px solid var(--linie); border-radius:var(--r-element);
  padding:8px 4px; background:var(--karte); line-height:1.05;
}
.termin-datum b{display:block; font-family:var(--schrift-display); font-size:23px; letter-spacing:-.03em}
.termin-datum span{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--neben); margin-top:3px}
.termin-datum small{display:block; font-size:11px; color:var(--gold); margin-top:3px}

.termin-inhalt h3{font-size:19px; line-height:1.24}
.termin-inhalt h3 a{text-decoration:none}
.termin-meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:13.5px; color:var(--neben)}
.termin-meta span{display:inline-flex; align-items:center; gap:6px}
.termin-meta svg{width:13px;height:13px;color:var(--sand)}
.termin-inhalt p{margin-top:8px; color:var(--neben); font-size:15px; max-width:66ch}
.termin-inhalt .mehr{display:inline-block; margin-top:8px; font-size:14.5px}

.termin-bild{grid-column:1 / -1; border-radius:var(--r-flaeche); overflow:hidden; background:var(--sand-hell)}
.termin-bild img{width:100%; aspect-ratio:16/9; object-fit:cover}
.termin-bild-symbol{position:relative}
.termin-bild-symbol picture{display:block}
.symbolbild{position:absolute; right:4px; bottom:3px; font-size:9px; line-height:1; letter-spacing:.02em;
  color:rgba(255,255,255,.85); text-shadow:0 0 3px rgba(0,0,0,.6)}

@media (min-width:760px){
  .termin{grid-template-columns:72px minmax(0,1fr) 210px}
  .termin-bild{grid-column:3; grid-row:1; margin:0}
  .termin-bild img{aspect-ratio:4/3}
  .termin-datum{padding:10px 4px}
}

.termin-leer{
  margin-top:var(--s6); padding:var(--s6); text-align:center;
  border:6px solid transparent; border-image:var(--schraffur) 6 repeat; color:var(--neben);
}