.ms-events, .view-termine {
  --ms-bg:#faf8f5; --ms-panel:#fff; --ms-ink:#2A2D33; --ms-muted:#7a6d61;
  /* Termine-Akzent (Gold) */
  --ms-brand:#b88b3b;         /* Hauptakzent */
  --ms-brand-ink:#7a5c26;     /* dunklere Tinte für Texte/Icons */
  --ms-line:rgba(0,0,0,.12);
  --ms-radius:16px;
}


/* =======================================================================
   Kopf
   ======================================================================= */
.ms-events .head{display:flex; align-items:center; gap:.6rem; margin:12px 0;}
.ms-events .head h2{
  font-family: var(--font-sans,
  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
  Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
  ) !important;
  font-weight:900 !important;
  font-size:clamp(1.45rem, 1.25rem + .4vw, 1.75rem) !important;
  line-height:1.1; letter-spacing:.2px; color:var(--ms-brand-ink); margin:0;
}
.ms-events .head i{ font-size:1.15rem; color:var(--ms-brand); }

/* =======================================================================
   Liste
   ======================================================================= */
.ms-events .list{display:grid; grid-template-columns:1fr; gap:16px;}

/* =======================================================================
   Karte
   ======================================================================= */
.ms-event.card{
  display:grid; grid-template-columns:10px 1fr;
  background:var(--ms-panel);
  border:1px solid var(--ms-line);
  border-radius:var(--ms-radius);
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.ms-event .rail{
  background:linear-gradient(180deg, var(--ms-brand), color-mix(in srgb, var(--ms-brand) 40%, #fff));
  border-top-left-radius:var(--ms-radius);
  border-bottom-left-radius:var(--ms-radius);
}

/* Body zweispaltig: Inhalt + Poster rechts */
.ms-event .body{
  padding:14px;
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
}
.ms-event.has-thumb .body{ min-height:102px; }

/* Poster/Plakat rechts – identische Größe wie Mitteilungen */
.ms-event .thumb-right{ width:130px; justify-self:end; }
.ms-event .thumb-right img{
  display:block; width:100%; height:auto; object-fit:contain;
  border-radius:10px; border:1px solid #e2e8f0; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
@media (max-width:560px){
  .ms-event .thumb-right{ width:100px; }
}

/* =======================================================================
   Headline: Datumspille + Titel
   ======================================================================= */
.ms-event .headline{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.4rem; margin-bottom:.55rem;
}
.ms-event .date-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:.92rem;
  color:var(--ms-brand-ink);
  background:color-mix(in srgb,var(--ms-brand) 18%,#fff);
  border:1px solid color-mix(in srgb,var(--ms-brand) 40%,#eee);
  white-space: nowrap;
}
.ms-event .date-pill i{ font-size:1.05em; line-height:1; opacity:.95; }

/* Titel */
.ms-event .t{
  font-family: var(--font-sans,
  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
  Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
  ) !important;
  font-weight:900 !important;
  font-size:clamp(1.25rem, 1.05rem + .5vw, 1.55rem) !important;
  line-height:1.2; letter-spacing:.2px; margin:0; color:var(--ms-ink);
}
.ms-event .t a{ color:inherit !important; text-decoration:none !important; }

/* =======================================================================
   Subline: Zeit + Ort
   ======================================================================= */
.ms-event .sub{
  margin:.25rem 0 .6rem 0;
  color:var(--ms-muted);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem;
}
.ms-event .sub .mi{ display:inline-flex; align-items:center; gap:.35rem; }
.ms-event .sub .mi i{ margin:0; font-size:1em; line-height:1; opacity:.95; }
.ms-event .sub .mi .txt{ margin:0; line-height:1.2; }
.ms-event .sub .sep{
  width:1px; height:.95em; background:rgba(0,0,0,.12); display:inline-block;
}

/* =======================================================================
   CTA (Einzel-Button "Zum Termin")
   ======================================================================= */
.ms-event .cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--ms-line); text-decoration:none;
  color:var(--ms-ink); background:#fff;
}
.ms-event .cta:hover{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ms-brand) 20%,transparent);
}

/* =======================================================================
   Footer-Button: „Alle Termine“
   ======================================================================= */

/* Container-Abstände (für beide Varianten: More-Link ODER Footer-Link) */
.ms-events .view-more-link,
.view-termine .view-more-link,
.ms-events .view-footer-link,
.view-termine .view-footer-link{
  margin:8px 0 0;
}

/* Grundstil des Buttons (greift bei More-Link <a> UND Footer .btn-more) */
.ms-events .view-more-link a,
.view-termine .view-more-link a,
.ms-events .view-footer-link .btn-more,
.view-termine .view-footer-link .btn-more{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1rem;
  border-radius:999px; font-weight:800; line-height:1;
  color:var(--ms-brand-ink);
  background:color-mix(in srgb, var(--ms-brand) 12%, white);
  border:1px solid color-mix(in srgb, var(--ms-brand) 25%, transparent);
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.9), inset 0 -1px 0 rgba(0,0,0,.05);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

/* Hover/Focus */
.ms-events .view-more-link a:hover,
.view-termine .view-more-link a:hover,
.ms-events .view-more-link a:focus,
.view-termine .view-more-link a:focus,
.ms-events .view-footer-link .btn-more:hover,
.view-termine .view-footer-link .btn-more:hover,
.ms-events .view-footer-link .btn-more:focus,
.view-termine .view-footer-link .btn-more:focus{
  background:color-mix(in srgb, var(--ms-brand) 20%, white);
  border-color:color-mix(in srgb, var(--ms-brand) 40%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transform:translateY(-1px);
  color:var(--ms-brand-ink);
  outline:0;
}

/* Pfeil rechts beim More-Link (SVG via Mask, wie vorher) */
.ms-events .view-more-link a::after,
.view-termine .view-more-link a::after{
  content:"";
  width:1em; height:1em; background:currentColor; display:inline-block; transform:translateY(1px);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 3l9 5-9 5z'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 3l9 5-9 5z'/></svg>") center/100% 100% no-repeat;
}

/* Wenn du in der Footer-Variante eine eigene <span class="ic"> nutzt */
.ms-events .view-footer-link .btn-more .ic,
.view-termine .view-footer-link .btn-more .ic{
  width:1em; height:1em; background:currentColor; display:inline-block; transform:translateY(1px);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 3l9 5-9 5z'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 3l9 5-9 5z'/></svg>") center/100% 100% no-repeat;
}

/* =======================================================================
   Pager (Termine – Page-Display)
   ======================================================================= */
.view-termine.view-display-id-page_1 .pager{ margin-top:1rem; }
.view-termine.view-display-id-page_1 .pager__items{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
}
.view-termine.view-display-id-page_1 .pager__item a,
.view-termine.view-display-id-page_1 .pager__item.is-active{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; height:2.4rem; padding:0 .75rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-weight:600; text-decoration:none;
}
.view-termine.view-display-id-page_1 .pager__item.is-active{
  background:color-mix(in srgb, var(--ms-brand, #b88b3b) 18%, #fff);
  border-color:color-mix(in srgb, var(--ms-brand, #b88b3b) 40%, #eee);
}
.view-termine.view-display-id-page_1 .pager__item a:hover{
  background:color-mix(in srgb, var(--ms-brand, #b88b3b) 12%, #fff);
}
/* --- Termine: CTA immer unten wie bei "Zur Mitteilung" --- */

/* Body-Grid: Items auf volle Höhe strecken, nicht zentrieren */
.ms-event .body{
  align-items: stretch; /* vorher: center */
}

/* Content-Spalte wird Flex-Column */
.ms-event .content{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* CTA rutscht an das untere Ende der Content-Spalte */
.ms-event .content .cta{
  margin-top: auto;
  align-self: flex-start; /* bleibt linksbündig */
}

/* optional: Poster rechts mittig ausrichten (nur Optik) */
.ms-event .thumb-right{
  display: flex;
  align-items: center;
}
/* === Breitere Rail + vertikale Beschriftung (wie Node) ================== */
.ms-event.card{ grid-template-columns: 42px 1fr; } /* vorher: 10px */
.ms-event .rail{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  padding:22px 0; /* Luft oben/unten */
  background:linear-gradient(180deg, var(--ms-brand),
  color-mix(in srgb, var(--ms-brand) 40%, #fff));
  border-top-left-radius:var(--ms-radius);
  border-bottom-left-radius:var(--ms-radius);
}

/* Hochkant-Text in der Rail – Klasse absichtlich wie auf der Node-Seite */
.ms-event .tn-rail__text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  font-size:clamp(.9rem, .8rem + .25vw, 1.05rem);
  user-select:none;
}
/* schlankere Rail minimal straffer machen */
.ms-events .ms-event.card .rail{ padding:12px 0; }

/* vertikaler Text: niemals umbrechen (falls es doch mal eng wird) */
.ms-events .ms-event.card .tn-rail__text{
  white-space: nowrap;
  letter-spacing:.01em; /* dezenter, wirkt schmaler */
}

/* mobil noch eine Spur schlanker – nur wenn gewünscht */
@media (max-width:520px){
  .ms-events{ --ms-rail-w: 38px; }
  .ms-events .ms-event.card .tn-rail__text{ font-size:.85rem; }
}
/* Termine: analog */
.ms-events .ms-event .body{ position: relative; }
.ms-events .ms-event.has-thumb .content{ padding-right: 146px; }
.ms-events .ms-event .thumb-right{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 130px;
}
@media (max-width:560px){
  .ms-events .ms-event.has-thumb .content{ padding-right: 0; }
  .ms-events .ms-event .thumb-right{ position: static; transform:none; width:100%; margin:.4rem 0 .2rem; }
  .ms-events .ms-event .thumb-right img{ width:100%; height:auto; border-radius:12px; object-fit:contain; }
}