/* ============================================================
   Termin-Modul — Anzeige  ·  v3
   NEUTRAL gehalten: nutzt zuerst --termine-*-Variablen, dann die
   üblichen Projekt-Variablen, dann neutrale Fallbacks. Für die
   Anpassung an eine Kundenseite reicht es, im Projekt-CSS z. B.
   :root { --termine-akzent: #8A5A2B; --termine-datum-bg: #2E3B47; }
   zu setzen — oder die vorhandene Projekt-Palette wird automatisch
   übernommen (--surface/--line/--ink/--ink-m).
   ============================================================ */

/* ---------- Listen-Layout (Termine ohne Bilder) ---------- */
.termine__list { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.termin {
  display: flex; gap: 20px; align-items: stretch;
  background: var(--termine-flaeche, var(--surface, #F6F7F8));
  border: 1px solid var(--termine-linie, var(--line, #E2E6EA));
  border-radius: 14px;
  padding: 18px 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.termin:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(38,48,58,.08); }
.termin__date {
  flex-shrink: 0; width: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--termine-datum-bg, var(--navy, #2E3B47)); color: #fff;
  border-radius: 10px; padding: 9px 0; line-height: 1.05;
}
.termin__wd  { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.termin__tag { font-family: var(--serif, Georgia, 'Times New Roman', serif); font-size: 1.75rem; font-weight: 700; margin: 1px 0; }
.termin__mon { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.termin__body { min-width: 0; align-self: center; }
.termin__titel { margin: 0 0 3px; font-size: 1.12rem; color: var(--termine-text, var(--ink, #26303A)); }
.termin__meta  { margin: 0; font-size: .86rem; color: var(--termine-text-2, var(--ink-m, #5C6670)); }
.termin__info  { margin: .45em 0 0; font-size: .93rem; color: var(--termine-text-2, var(--ink-m, #5C6670)); }
/* Wiederkehrende Termine (26.08.2026): eine Serie ist EINE Zeile, der Takt
   steht darunter. Bewusst zurueckhaltend — die Information ist wichtig, aber
   nicht wichtiger als Titel und naechstes Datum. */
.termin__wdh   { margin: .3em 0 0; font-size: .82rem; letter-spacing: .01em;
                 color: var(--termine-akzent, var(--akzent, #3E6B57)); }
.termin__link  {
  display: inline-block; margin-top: .6em;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  color: var(--termine-akzent-text, #fff);
  background: var(--termine-akzent, var(--gold, #3E6B57));
  padding: 8px 16px; border-radius: 999px;
}
.termin__link:hover { filter: brightness(1.07); }
.termin__plaetze {
  margin: .35em 0 0; font-size: .85rem; font-weight: 700;
  color: var(--termine-akzent-tief, var(--gold-deep, #2E5242));
}
.termin__badge {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--termine-text-2, var(--ink-m, #5C6670)); color: #fff;
  padding: 3px 10px; border-radius: 999px;
}
.termin__kat, .tkarte__kat {
  display: inline-block; vertical-align: middle;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--termine-akzent-tief, var(--gold-deep, #2E5242));
  background: transparent;
  border: 1px solid currentColor;
  padding: 2px 10px; border-radius: 999px;
}
.termin__kat { margin-left: 8px; }
/* Ausgebucht: nur die Datums-Kachel dimmen, NICHT den Text. Ein opacity auf
   der ganzen Zeile mischt den Text zum Grund hin und faellt unter 4,5:1
   (WCAG-Audit 01.09.2026). Der gedaempfte Eindruck bleibt so erhalten. */
.termin--voll .termin__date { opacity: .6; }
.termine__leer { text-align: center; color: var(--termine-text-2, var(--ink-m, #5C6670)); font-size: 1rem; padding: 10px 0; }

/* ---------- Karten-Layout (sobald Bilder vorhanden) ---------- */
.termine__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  max-width: 1040px; margin: 0 auto;
}
.tkarte {
  display: flex; flex-direction: column;
  background: var(--termine-flaeche, var(--surface, #F6F7F8));
  border: 1px solid var(--termine-linie, var(--line, #E2E6EA));
  border-radius: 14px; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tkarte:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(38,48,58,.10); }
.tkarte__media { aspect-ratio: 16 / 10; overflow: hidden; }
.tkarte__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkarte__media--datum {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--termine-datum-bg, var(--navy, #2E3B47)); color: #fff; line-height: 1.1;
}
.tkarte__wd  { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.tkarte__tag { font-family: var(--serif, Georgia, 'Times New Roman', serif); font-size: 2.6rem; font-weight: 700; margin: 2px 0; }
.tkarte__mon { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.tkarte__body { padding: 16px 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; }
.tkarte__kat { margin-bottom: 6px; }
.tkarte__titel { margin: 0 0 3px; font-size: 1.12rem; color: var(--termine-text, var(--ink, #26303A)); }
.tkarte--voll .tkarte__media img { opacity: .55; }   /* nur das FOTO dimmen: die
   Datums-Kachel ist selbst ein "media" und traegt Text (Wochentag/Monat) —
   dimmt man sie mit, faellt der unter 4,5:1. s. Hinweis bei .termin--voll */
.tkarte .termin__link { margin-top: auto; } /* Button immer unten in der Karte */
.tkarte .termin__meta, .tkarte .termin__info, .tkarte .termin__plaetze,
.tkarte .termin__wdh { margin-bottom: .5em; }

/* ---------- Filterleiste + Monatsgruppen (opt-in, seit 17.08.2026) ----------
   Greifen nur, wenn am Einbau-Div data-filter / data-gruppe / data-max stehen.
   Ohne diese Attribute erzeugt termine.js diese Elemente gar nicht erst. */
.termine__filter {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 auto 26px; max-width: 1040px;
}
.termine__fbtn {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  color: var(--termine-text, var(--ink, #26303A));
  background: transparent;
  border: 1px solid var(--termine-linie, var(--line, #E2E6EA));
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.termine__fbtn:hover { border-color: var(--termine-akzent, var(--gold, #3E6B57)); }
.termine__fbtn.is-aktiv {
  background: var(--termine-akzent, var(--gold, #3E6B57));
  border-color: var(--termine-akzent, var(--gold, #3E6B57));
  color: var(--termine-akzent-text, #fff);
}
.termine__fbtn:focus-visible { outline: 3px solid var(--termine-akzent, #3E6B57); outline-offset: 2px; }
.termine__monat {
  max-width: 1040px; margin: 34px auto 14px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--termine-akzent-tief, var(--gold-deep, #2E5242));
  border-bottom: 1px solid var(--termine-linie, var(--line, #E2E6EA));
  padding-bottom: 8px;
}
.termine__monat:first-child { margin-top: 0; }
.termine__mehr { text-align: center; margin: 30px 0 0; }

@media (max-width: 480px) {
  .termin { gap: 14px; padding: 14px 16px; }
  .termin__date { width: 54px; }
  .termin__tag { font-size: 1.5rem; }
  .termine__grid { grid-template-columns: 1fr; gap: 16px; }
  .termine__fbtn { font-size: .82rem; padding: 7px 14px; }
}


/* ============================================================
   TERMINSEITEN (termin.php) — /termine und /termine/<format>
   ------------------------------------------------------------
   Ergaenzt am 01.09.2026. Bis dahin deckte diese Datei NUR die
   Klassen der JS-Anzeige ab (.termin / .tkarte). Die serverseitig
   erzeugten Seiten benutzen aber eigene Klassen (.termin-karte,
   .termin-eintrag, .termin-seite) — ohne Regeln dafuer rendern sie
   voellig ungestylt: Bilder in Originalgroesse, kein Container,
   die Ueberschrift laeuft unter eine feste Kopfzeile.
   Vier Projekte hatten sich das von Hand nachgebaut, vier nicht.
   Alles hier laeuft ueber die --termine-*-Variablen mit neutralen
   Fallbacks, ist also in jedem Projekt brauchbar.
   ============================================================ */

.termin-seite,
.termin-liste {
  max-width: var(--termine-maxbreite, 1100px);
  margin: 0 auto;
  padding: var(--termine-seite-innen, 0 24px);
}

/* Abstand nach oben: die Vorlage erbt eine feste Kopfzeile, ohne
   diesen Wert steht die h1 dahinter (Playbook-Stolperfalle 14). */
.termin-liste > h1,
.termin-seite > h1 {
  margin-bottom: .5em;
}

/* ---------------- Uebersicht: Karten ---------------- */
.termin-liste {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  /* stretch statt start: Termine ohne Bild sind sonst deutlich niedriger und
     reissen Loecher in die Reihe, die wie fehlgeschlagene Bilder aussehen. */
  align-items: stretch;
}
.termin-liste > h1,
.termin-liste > p:first-of-type {
  grid-column: 1 / -1;
}
.termin-karte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--termine-flaeche, var(--surface, #fff));
  border: 1px solid var(--termine-linie, var(--line, #e3ddd0));
  border-radius: var(--termine-radius, 3px);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.termin-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--termine-schatten, 0 14px 34px rgba(0, 0, 0, .10));
}
.termin-karte__bild {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--termine-linie, #e3ddd0);
}
.termin-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bildersatz: Datums-Kachel fuer Termine ohne Foto. Gleiches Format wie das
   Bild, damit die Karte denselben Aufbau behaelt und im Raster keine Luecke
   entsteht. Farben ueber --termine-datum-* wie die Kachel im Startseiten-
   Widget; ohne Projektwerte greift der dunkle Standard. */
.termin-karte__bild--datum {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background: var(--termine-datum-bg, var(--navy, #2e3b47));
  color: var(--termine-datum-farbe, #fff);
  /* Deckel: Im Kartenraster (~360 px breit) bleibt 16:10 = 225 px unberuehrt.
     In einspaltigen Layouts waere 16:10 einer 800-px-Karte ein 500 px hoher
     dunkler Balken - dort greift der Deckel und es wird ein ruhiges Band. */
  max-height: 260px;
}
.termin-karte__kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding: 12px;
}
.termin-karte__kachel-wd {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}
.termin-karte__kachel-tag {
  font-family: var(--termine-serif, var(--serif, Georgia, 'Times New Roman', serif));
  font-size: 3.1rem;
  font-weight: 700;
  margin: 4px 0 2px;
}
.termin-karte__kachel-mon {
  font-size: .9rem;
  letter-spacing: .05em;
  opacity: .85;
}
.termin-karte__kachel-kat {
  margin-top: 12px;
  padding: 3px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .8;
}
/* Bei einem ausgebuchten Termin nur das FOTO dimmen — die Datums-Kachel
   traegt selbst Text und wuerde sonst unlesbar (Playbook 1k). */
.termin-karte--voll .termin-karte__bild img { opacity: .55; }
.termin-karte > *:not(.termin-karte__bild) {
  padding-left: 22px;
  padding-right: 22px;
}
.termin-karte > *:not(.termin-karte__bild):first-child { padding-top: 22px; }
.termin-karte > p:last-child { padding-bottom: 22px; margin-top: auto; }
.termin-karte h2,
.termin-karte h3 {
  margin: .55rem 0 .3rem;
  font-size: 1.16rem;
  line-height: 1.25;
}
.termin-karte h2 a,
.termin-karte h3 a {
  text-decoration: none;
  color: inherit;
}
.termin-karte h2 a:hover,
.termin-karte h3 a:hover { color: var(--termine-akzent, #8a5a2b); }
.termin-karte__datum {
  margin: 0;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--termine-akzent, #8a5a2b);
}
.termin-karte__ort,
.termin-karte__weitere {
  margin: .2rem 0 0;
  font-size: .92rem;
  color: var(--termine-text-2, var(--ink-m, #5a5a5a));
}
.termin-karte__weitere { font-style: italic; }
.termin-karte__mehr {
  display: inline-block;
  margin-top: .9rem;
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  color: var(--termine-akzent, #8a5a2b);
}
.termin-karte__mehr:hover { text-decoration: underline; }

/* ---------------- Detailseite eines Formats ---------------- */
.termin-seite { max-width: var(--termine-textbreite, 820px); }
.termin-seite__zurueck {
  display: inline-block;
  margin-bottom: 1.4em;
  font-size: .92rem;
  text-decoration: none;
  color: var(--termine-text-2, var(--ink-m, #5a5a5a));
}
.termin-seite__zurueck:hover { color: var(--termine-akzent, #8a5a2b); }
.termin-seite__naechste {
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--termine-linie, var(--line, #e3ddd0));
  font-size: 1.02rem;
  font-weight: 600;
}
.termin-eintrag {
  border-top: 1px solid var(--termine-linie, var(--line, #e3ddd0));
  padding: 1.6em 0;
}
.termin-eintrag:first-of-type { border-top: none; }
.termin-eintrag__bild {
  display: block;
  margin: 0 0 1.1em;
  max-width: 620px;
}
.termin-eintrag__bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--termine-radius, 3px);
}
.termin-eintrag__datum {
  margin: 0 0 .2em;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--termine-akzent, #8a5a2b);
}
.termin-eintrag__ort,
.termin-eintrag__meta {
  margin: .15em 0 0;
  font-size: .95rem;
  color: var(--termine-text-2, var(--ink-m, #5a5a5a));
}
.termin-eintrag__info { margin: .7em 0 0; }

@media (max-width: 560px) {
  .termin-liste { gap: 18px; }
  .termin-karte > *:not(.termin-karte__bild) { padding-left: 18px; padding-right: 18px; }
}