/* Site stylesheet. No hex literals here - every colour is a var() into
 * tokens.css. tests/FrontendTokensTest.php fails the build on a hex. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vsr-bg);
  color: var(--vsr-ink);
  font-family: var(--vsr-font-body);
  font-size: var(--vsr-fs-body);
  overflow-wrap: break-word;
}

a { color: var(--vsr-link); text-decoration: none; }
a:hover { color: var(--vsr-link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

input, textarea, button, select { font-family: var(--vsr-font-body); }

h1, h2, h3 { font-family: var(--vsr-font-heading); text-wrap: pretty; }

.vsr-page { min-height: 100vh; display: flex; flex-direction: column; }
.vsr-main { flex: 1; }

.vsr-container {
  max-width: var(--vsr-container);
  margin: 0 auto;
  padding: var(--vsr-section-top) var(--vsr-gutter) var(--vsr-section-bottom);
}
.vsr-container--narrow { max-width: var(--vsr-container-narrow); }

.vsr-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ header */

.vsr-header {
  background: var(--vsr-surface);
  border-bottom: 1px solid var(--vsr-border);
  position: sticky; top: 0; z-index: 10;
}
.vsr-header__inner {
  max-width: var(--vsr-container); margin: 0 auto;
  padding: 14px var(--vsr-gutter-header);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.vsr-logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.vsr-logo:hover { text-decoration: none; }
.vsr-logo img { width: 48px; height: 48px; }
.vsr-logo__name {
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-bold);
  font-size: var(--vsr-fs-logo); color: var(--vsr-ink); line-height: var(--vsr-lh-logo);
}
.vsr-logo__claim { display: block; font-size: var(--vsr-fs-meta); color: var(--vsr-muted); }

/* header-einzeilig: at 1024px (the narrowest width the header must still hold
 * one row at) the logo lockup plus five nav links plus the CTA button do not
 * fit at the wider spacing used everywhere else, so the desktop nav row
 * trims its own gaps/padding and reuses the existing meta type scale
 * (--vsr-fs-meta, already the claim's token) rather than the larger
 * --vsr-fs-nav. This only affects the row's internal breathing room, not
 * any colour or the claim's own rule. */
.vsr-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.vsr-nav__link {
  background: transparent; color: var(--vsr-body);
  font-size: var(--vsr-fs-meta); font-weight: var(--vsr-fw-semibold);
  padding: 8px 4px; border-radius: var(--vsr-radius-sm); text-decoration: none;
}
.vsr-nav__link:hover { background: var(--vsr-hover-tint); color: var(--vsr-body); text-decoration: none; }
.vsr-nav__link[aria-current="page"], .vsr-nav__link[aria-current="true"] { background: var(--vsr-panel); color: var(--vsr-link-hover); }

.vsr-btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold);
  border-radius: var(--vsr-radius-pill);
}
.vsr-btn:hover { text-decoration: none; }
.vsr-btn--accent { background: var(--vsr-accent); color: var(--vsr-ink); font-size: var(--vsr-fs-nav); padding: 9px 16px; }
.vsr-btn--accent:hover { background: var(--vsr-accent-hover); color: var(--vsr-ink); }
.vsr-btn--dark { background: var(--vsr-ink); color: var(--vsr-on-dark); font-size: var(--vsr-fs-btn); padding: 12px 22px; }
.vsr-btn--dark:hover { background: var(--vsr-ink-hover); color: var(--vsr-on-dark); }
.vsr-btn--ghost {
  background: transparent; color: var(--vsr-ink); font-size: var(--vsr-fs-btn);
  padding: 12px 22px; border: 1.5px solid var(--vsr-on-dark-muted);
}
.vsr-btn--ghost:hover { background: var(--vsr-surface); color: var(--vsr-ink); }
.vsr-btn--cta { background: var(--vsr-accent); color: var(--vsr-ink); font-size: var(--vsr-fs-btn); padding: 12px 24px; }
.vsr-btn--cta:hover { background: var(--vsr-accent-light); color: var(--vsr-ink); }
.vsr-nav__cta { margin-left: 0; padding: 8px 8px; }

/* Pager under Aktuelles and the tag pages. The markup is ProcessWire's
 * MarkupPagerNav (vsrPagerMarkup() in _func.php); the look borrows the
 * Termine month buttons, with the current page in the active-nav fill. */
.vsr-pager { margin: 40px 0 8px; }
.vsr-pager ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
}
.vsr-pager a {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--vsr-border); background: var(--vsr-surface);
  border-radius: var(--vsr-radius-pill); color: var(--vsr-body);
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold);
  font-size: var(--vsr-fs-nav); text-decoration: none;
}
.vsr-pager a:hover { background: var(--vsr-hover-tint); color: var(--vsr-link-hover); text-decoration: none; }
.vsr-pager .MarkupPagerNavOn a { background: var(--vsr-panel); border-color: var(--vsr-row-on-border); color: var(--vsr-link-hover); }
.vsr-pager .MarkupPagerNavSeparator { color: var(--vsr-muted); padding: 0 2px; }
.vsr-pager .MarkupPagerNavPrevious a, .vsr-pager .MarkupPagerNavNext a { padding: 0 18px; }
/* Newer/older post under a Beitrag, then the way back to the list. */
.vsr-postnav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--vsr-border);
}
.vsr-postnav__link {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 18px;
  border: 1px solid var(--vsr-border); background: var(--vsr-surface);
  border-radius: 12px; text-decoration: none;
}
.vsr-postnav__link:hover { background: var(--vsr-hover-tint); text-decoration: none; }
.vsr-postnav__link--aelter { grid-column: 2; text-align: right; }
.vsr-postnav__dir { font-size: var(--vsr-fs-meta); color: var(--vsr-muted); }
.vsr-postnav__title {
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold);
  color: var(--vsr-ink);
}
.vsr-postnav__back { margin: 16px 0 0; font-size: var(--vsr-fs-meta); }
@media (max-width: 560px) {
  .vsr-postnav { grid-template-columns: 1fr; }
  .vsr-postnav__link--aelter { grid-column: auto; text-align: left; }
}
/* Phones: Neuere/Ältere take a row of their own under the numbers. */
@media (max-width: 560px) {
  .vsr-pager .MarkupPagerNavPrevious, .vsr-pager .MarkupPagerNavNext { order: 1; }
}

/* Unsere Schule dropdown. Mouse hover is plain CSS; the keyboard path (open
 * on focus, close on Escape with aria-expanded kept truthful) needs
 * scripts/main.js, which is already true of the burger menu below - :focus-
 * within is deliberately not used here, because focus returning to the
 * trigger on Escape is still focus inside .vsr-nav__item--has-children and
 * would otherwise reopen the very menu Escape just closed. is-dismissed is
 * the same idea for the pointer: Escape pressed while the mouse still rests
 * on the item must not leave the plain :hover rule showing a menu that just
 * closed. */
.vsr-nav__item { position: relative; display: flex; align-items: center; }
.vsr-submenu {
  display: none; position: absolute; top: 100%; left: 0; margin: 4px 0 0; padding: 6px;
  list-style: none; background: var(--vsr-surface); border: 1px solid var(--vsr-border);
  border-radius: var(--vsr-radius-sm); min-width: 200px; z-index: 20;
}
/* An invisible strip over the 4px gap above the submenu: without it the
 * pointer leaves the item on its way down and the submenu closes under it. */
.vsr-submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.vsr-nav__item--has-children:hover:not(.is-dismissed) .vsr-submenu,
.vsr-nav__item--has-children.is-open .vsr-submenu { display: block; }
.vsr-submenu__link { display: block; white-space: nowrap; }

.vsr-mobile-submenu { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }

.vsr-burger {
  display: none; margin-left: auto; width: 46px; height: 46px;
  border: 1.5px solid var(--vsr-burger-border); background: var(--vsr-surface);
  border-radius: var(--vsr-radius); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.vsr-burger:hover { background: var(--vsr-bg); }
.vsr-burger span {
  display: block; width: 20px; height: 2px; background: var(--vsr-ink);
  border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
}
.vsr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vsr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vsr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.vsr-mobile-menu {
  border-top: 1px solid var(--vsr-border); background: var(--vsr-surface);
  padding: 12px var(--vsr-gutter-header) 20px;
  display: flex; flex-direction: column; gap: 4px;
  /* The menu lives in the sticky header, so the page cannot scroll it into
   * view: it scrolls itself, within the screen below the 76px top bar
   * (14px + 48px logo + 14px). dvh follows the phone's collapsing URL bar. */
  max-height: calc(100vh - 77px); max-height: calc(100dvh - 77px);
  overflow-y: auto; overscroll-behavior: contain;
}
.vsr-mobile-menu > * { flex-shrink: 0; }  /* overflow and scroll, never squeeze */
.vsr-mobile-menu[hidden] { display: none; }
.vsr-mobile-menu .vsr-nav__link {
  font-family: var(--vsr-font-heading); font-size: var(--vsr-fs-nav-mobile);
  text-align: left; padding: 14px 16px; border-radius: 10px; min-height: 48px;
}
.vsr-mobile-menu .vsr-btn--accent {
  font-size: var(--vsr-fs-nav-mobile); padding: 14px 16px; margin-top: 8px;
  min-height: 48px; text-align: center;
}

/* The design's two breakpoints, verbatim. */
@media (max-width: 860px) {
  .vsr-nav { display: none !important; }
  .vsr-burger { display: flex !important; }
}
@media (min-width: 861px) {
  .vsr-mobile-menu { display: none !important; }
}

/* -------------------------------------------------------------------- hero */

.vsr-hero { background: var(--vsr-panel); }
.vsr-hero__inner {
  max-width: var(--vsr-container); margin: 0 auto;
  padding: var(--vsr-section-top) var(--vsr-gutter) 48px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min-hero), 1fr));
  gap: 40px; align-items: center;
}
.vsr-hero__eyebrow {
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold);
  font-size: var(--vsr-fs-eyebrow); letter-spacing: var(--vsr-track-eyebrow);
  text-transform: uppercase; color: var(--vsr-link); margin-bottom: 14px;
}
.vsr-hero h1 {
  font-weight: var(--vsr-fw-bold); font-size: var(--vsr-fs-h1);
  line-height: var(--vsr-lh-tight); margin: 0 0 16px; color: var(--vsr-ink);
}
.vsr-hero__lede {
  font-size: var(--vsr-fs-lede); line-height: var(--vsr-lh-body);
  color: var(--vsr-body); margin: 0 0 24px; max-width: 44ch;
}
.vsr-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vsr-hero__media { aspect-ratio: 4 / 3; border-radius: var(--vsr-radius-lg); overflow: hidden; }
.vsr-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------- photo placeholder/empty */

.vsr-hatch {
  background: repeating-linear-gradient(-45deg,
    var(--vsr-hatch-a) 0 14px, var(--vsr-hatch-b) 14px 28px);
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.vsr-hatch span {
  font-family: var(--vsr-font-mono); font-size: 11.5px; color: var(--vsr-hatch-ink);
  background: var(--vsr-hatch-chip); padding: 4px 9px; border-radius: 5px;
}

/* ------------------------------------------------------------- section head */

.vsr-section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.vsr-section-head h2 { font-weight: var(--vsr-fw-bold); font-size: var(--vsr-fs-h2); margin: 0; }
.vsr-section-head span { font-size: var(--vsr-fs-meta); color: var(--vsr-muted); }

.vsr-page-title { font-weight: var(--vsr-fw-bold); font-size: var(--vsr-fs-h1-page); margin: 0 0 10px; }
.vsr-page-lede {
  font-size: var(--vsr-fs-lede-page); line-height: var(--vsr-lh-body);
  color: var(--vsr-body); max-width: 64ch; margin: 0 0 36px;
}
.vsr-empty {
  font-size: var(--vsr-fs-lede-page); color: var(--vsr-muted);
  background: var(--vsr-panel); border-radius: var(--vsr-radius-card);
  padding: 24px; margin: 0;
}

/* -------------------------------------------------------------- news cards */

.vsr-grid { display: grid; gap: var(--vsr-gap-grid); }
.vsr-grid > * { min-width: 0; }
.vsr-grid--news    { grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min), 1fr)); }
.vsr-grid--galerie { grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min-galerie), 1fr)); gap: var(--vsr-gap-galerie); }
.vsr-grid--team    { grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min-team), 1fr)); gap: var(--vsr-gap-team); }
.vsr-grid--info    { grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min), 1fr)); margin-top: 40px; }

.vsr-card {
  background: var(--vsr-surface); border: 1px solid var(--vsr-border);
  border-radius: var(--vsr-radius-card); overflow: hidden;
  display: flex; flex-direction: column;
}
.vsr-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.vsr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vsr-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vsr-card__tags { font-size: var(--vsr-fs-tag); font-weight: var(--vsr-fw-semibold); color: var(--vsr-link); letter-spacing: var(--vsr-track-tag); }
.vsr-card__tags a { color: var(--vsr-link); }
.vsr-card h3 { font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-h3); margin: 0; line-height: var(--vsr-lh-heading); }
.vsr-card h3 a { color: var(--vsr-ink); }
.vsr-card h3 a:hover { color: var(--vsr-link-hover); }
.vsr-card__teaser { font-size: var(--vsr-fs-card); line-height: var(--vsr-lh-card); color: var(--vsr-body); margin: 0; }

.vsr-more { display: block; margin-top: 32px; font-weight: var(--vsr-fw-semibold); }

/* ----------------------------------------------------------- galerie cards */

.vsr-album { border-radius: var(--vsr-radius-card); overflow: hidden; background: var(--vsr-surface); border: 1px solid var(--vsr-border); }
.vsr-album__media { aspect-ratio: 4 / 3; overflow: hidden; }
.vsr-album__media img { width: 100%; height: 100%; object-fit: cover; }
.vsr-album__foot { padding: 14px 18px; display: flex; align-items: baseline; gap: 10px; }
.vsr-album__title { font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-name); flex: 1; }
.vsr-album__count { font-size: var(--vsr-fs-tag); color: var(--vsr-muted); }

/* The two arrangements. `quer` is the wide, landscape-biased grid the design
 * shipped (the galerie card min-width, 4:3 cells); `hoch` is the narrow,
 * portrait-biased one (the team card min-width, 3:4 cells) - both from tokens
 * that already exist, no new custom property. object-fit keeps a mixed set of
 * originals aligned to one cell shape instead of a ragged column of natural
 * heights, which is the "grid alignment" half of this feature. */
.vsr-lightgrid { display: grid; gap: var(--vsr-gap-galerie); margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min-galerie), 1fr)); }
.vsr-lightgrid a { display: block; overflow: hidden; border-radius: var(--vsr-radius); }
.vsr-lightgrid img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: var(--vsr-radius); }
.vsr-lightgrid--quer { grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min-galerie), 1fr)); }
.vsr-lightgrid--quer a { aspect-ratio: 4 / 3; }
.vsr-lightgrid--hoch { grid-template-columns: repeat(auto-fit, minmax(var(--vsr-card-min-team), 1fr)); }
.vsr-lightgrid--hoch a { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------------ photo viewer */

/* Built by scripts/main.js and appended to <body>; hidden until a thumbnail is
 * clicked. The [hidden] rule is not redundant - the UA sheet's `[hidden]
 * { display: none }` loses to the `display: flex` above it on specificity. */
.vsr-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: var(--vsr-gutter);
  background: var(--vsr-ink);
  background: color-mix(in srgb, var(--vsr-ink) 94%, transparent);
  color: var(--vsr-on-dark);
}
.vsr-lightbox[hidden] { display: none; }
.vsr-lightbox__image { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: var(--vsr-radius); }
.vsr-lightbox__caption {
  margin: 0; text-align: center; max-width: var(--vsr-container-narrow);
  font-size: var(--vsr-fs-meta); color: var(--vsr-on-dark-muted);
}
.vsr-lightbox__caption:empty { display: none; }
.vsr-lightbox__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vsr-lightbox__counter {
  font-size: var(--vsr-fs-tag); letter-spacing: var(--vsr-track-chip); color: var(--vsr-on-dark-faint);
}
.vsr-lightbox__btn {
  font: inherit; font-size: var(--vsr-fs-btn); cursor: pointer;
  background: transparent; color: var(--vsr-on-dark);
  border: 1px solid var(--vsr-on-dark-faint); border-radius: var(--vsr-radius-pill);
  padding: 8px 14px;
}
.vsr-lightbox__btn:hover { border-color: var(--vsr-on-dark); }

/* -------------------------------------------------------------- team cards */

.vsr-person {
  background: var(--vsr-surface); border: 1px solid var(--vsr-border);
  border-radius: var(--vsr-radius-card); padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  color: inherit;
}
/* The card is a link now; same affordance .vsr-termin already uses. */
.vsr-person:hover { border-color: var(--vsr-accent); color: inherit; }
.vsr-person__avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold);
  color: var(--vsr-hatch-ink);
  background: repeating-linear-gradient(-45deg,
    var(--vsr-hatch-a) 0 8px, var(--vsr-hatch-b) 8px 16px);
}
.vsr-person__avatar img { width: 72px; height: 72px; object-fit: cover; }
.vsr-person__name { font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-name); }
.vsr-person__role { font-size: var(--vsr-fs-meta); color: var(--vsr-muted); }

/* ------------------------------------------------------------- info blocks */

.vsr-info { background: var(--vsr-panel); border-radius: var(--vsr-radius-card); padding: 24px; }
.vsr-info--surface { background: var(--vsr-surface); border: 1px solid var(--vsr-border); }
.vsr-info__big { font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-bold); font-size: var(--vsr-fs-big); color: var(--vsr-link); margin-bottom: 6px; }
.vsr-info h3 { font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-h3); margin: 0 0 8px; }
.vsr-info--surface h3 { font-size: var(--vsr-fs-h3-sm); margin: 0 0 6px; }
.vsr-info__text { font-size: var(--vsr-fs-card); line-height: var(--vsr-lh-card); color: var(--vsr-body); }
.vsr-info__text p { margin: 0; }
/* /klassen/: each class card is one link, like the team cards. */
.vsr-klasse { display: block; color: inherit; text-decoration: none; }
.vsr-klasse:hover { border-color: var(--vsr-accent); color: inherit; text-decoration: none; }
.vsr-klasse h3 { color: var(--vsr-ink); }
.vsr-klasse__foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: calc(var(--vsr-radius-card) / 2); margin-bottom: 14px; }
.vsr-teamfoto { margin: 0 0 32px; }
.vsr-teamfoto img { display: block; width: 100%; height: auto; border-radius: var(--vsr-radius-card); }

/* ---------------------------------------------------------------- CTA band */

.vsr-cta {
  background: var(--vsr-ink); border-radius: var(--vsr-radius-lg); padding: 32px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px;
}
.vsr-cta__text { flex: 1; min-width: 280px; }
.vsr-cta h2 { font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-h2-card); color: var(--vsr-on-dark); margin: 0 0 6px; }
.vsr-cta p { font-size: var(--vsr-fs-card); color: var(--vsr-on-dark-muted); margin: 0; }

/* --------------------------------------------------------------- termine */

/* The month grid: seven fluid columns, so it never overflows at 375px. */
.vsr-kal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.vsr-kal-nav__btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--vsr-border); background: var(--vsr-surface);
  border-radius: var(--vsr-radius-pill); color: var(--vsr-body);
}
.vsr-kal-nav__btn:hover { background: var(--vsr-hover-tint); color: var(--vsr-link-hover); }
.vsr-kal-nav__mitte { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vsr-kal__monat {
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold);
  font-size: var(--vsr-fs-h2-sub); color: var(--vsr-ink); margin: 0;
}
.vsr-kal-nav__heute { font-size: var(--vsr-fs-meta); color: var(--vsr-link); text-decoration: underline; }
/* The repeat below the list: the gap belongs above it, not under the grid. */
.vsr-kal-nav--unten { margin-top: 22px; margin-bottom: 0; }

.vsr-kal {
  background: var(--vsr-surface); border: 1px solid var(--vsr-border);
  border-radius: var(--vsr-radius-card); padding: 14px; margin-bottom: 28px;
}
.vsr-kal__wochentage,
.vsr-kal__tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.vsr-kal__wochentage { margin-bottom: 6px; }
.vsr-kal__wd {
  text-align: center; font-size: var(--vsr-fs-tag); font-weight: var(--vsr-fw-semibold);
  letter-spacing: var(--vsr-track-tag); text-transform: uppercase;
  color: var(--vsr-muted); padding: 4px 0;
}
.vsr-kal__tag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; min-height: 44px;
  border: 1px solid transparent; border-radius: 10px;
}
.vsr-kal__num {
  font-family: var(--vsr-font-heading); font-size: 15px;
  font-weight: var(--vsr-fw-normal); color: var(--vsr-ink);
}
/* Saturday and Sunday are the sixth and seventh cell of every row. */
.vsr-kal__tage > :nth-child(7n + 6) .vsr-kal__num,
.vsr-kal__tage > :nth-child(7n) .vsr-kal__num { color: var(--vsr-muted); }
.vsr-kal__tag--aussen .vsr-kal__num,
.vsr-kal__tage > :nth-child(7n + 6).vsr-kal__tag--aussen .vsr-kal__num,
.vsr-kal__tage > :nth-child(7n).vsr-kal__tag--aussen .vsr-kal__num { color: var(--vsr-disabled-ink); }
.vsr-kal__tag--markiert { background: var(--vsr-panel); border-color: var(--vsr-row-on-border); }
.vsr-kal__tage > .vsr-kal__tag--markiert .vsr-kal__num { color: var(--vsr-ink); font-weight: var(--vsr-fw-bold); }
.vsr-kal__tag--markiert:hover { border-color: var(--vsr-accent); }
.vsr-kal__tag--aktiv { background: var(--vsr-accent); border-color: var(--vsr-accent); }
.vsr-kal__punkt {
  display: block; width: 5px; height: 5px; border-radius: var(--vsr-radius-pill);
  margin-top: 3px; background: var(--vsr-accent);
}
.vsr-kal__tag--aktiv .vsr-kal__punkt { background: var(--vsr-ink); }
.vsr-kal__listentitel {
  font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold);
  font-size: var(--vsr-fs-h3); color: var(--vsr-ink); margin: 0 0 4px;
}

.vsr-termine { display: flex; flex-direction: column; gap: var(--vsr-gap-list); }
/* One block per day; a calendar cell links to it (#tag-N) and :target marks
 * that day's entries. scroll-margin keeps them clear of the sticky header. */
.vsr-termine__tag { display: flex; flex-direction: column; gap: var(--vsr-gap-list); scroll-margin-top: 110px; }
.vsr-termine__tag:target .vsr-termin { background: var(--vsr-row-on-bg); border-color: var(--vsr-accent); }
.vsr-termin {
  display: flex; align-items: center; gap: 20px; color: inherit;
  background: var(--vsr-surface); border: 1px solid var(--vsr-border);
  border-radius: var(--vsr-radius); padding: 16px 22px;
}
.vsr-termin:hover { border-color: var(--vsr-accent); color: inherit; }
.vsr-termin__meta { font-size: var(--vsr-fs-meta); color: var(--vsr-muted); margin-top: 2px; }
.vsr-termin__pfeil { flex: none; color: var(--vsr-muted); }
.vsr-chip { width: 74px; flex: none; text-align: center; background: var(--vsr-panel); border-radius: 10px; padding: 8px 4px; }
.vsr-chip__day { font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-bold); font-size: var(--vsr-fs-chip-day); color: var(--vsr-link-hover); line-height: 1; }
.vsr-chip__month { font-size: var(--vsr-fs-small); font-weight: var(--vsr-fw-semibold); color: var(--vsr-muted); text-transform: uppercase; letter-spacing: var(--vsr-track-chip); }
.vsr-termin__body { flex: 1; min-width: 0; }
.vsr-termin__title { font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-item); }
.vsr-termin__info { font-size: var(--vsr-fs-meta); color: var(--vsr-muted); }

/* --------------------------------------------------------------- richtext */

.vsr-richtext { font-size: var(--vsr-fs-lede-page); line-height: var(--vsr-lh-body); color: var(--vsr-body); max-width: 64ch; }
.vsr-richtext img { max-width: 100%; height: auto; }
.vsr-richtext table { width: 100%; border-collapse: collapse; }

.vsr-meta { font-size: var(--vsr-fs-meta); color: var(--vsr-muted); margin: 0 0 24px; }
.vsr-meta a { color: var(--vsr-link); }

.vsr-subhead { font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-h2-sub); margin: 40px 0 18px; }

.vsr-taglist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vsr-gap-list); }
.vsr-taglist a { background: var(--vsr-panel); color: var(--vsr-link-hover); border-radius: var(--vsr-radius-pill); padding: 7px 16px; display: inline-block; font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-meta); }

/* ----------------------------------------------------------------- footer */

.vsr-footer { background: var(--vsr-ink); color: var(--vsr-on-dark-muted); }
.vsr-footer__inner {
  max-width: var(--vsr-container); margin: 0 auto; padding: 36px var(--vsr-gutter);
  display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start;
}
.vsr-footer__brand { flex: 1; min-width: 240px; }
.vsr-footer__lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.vsr-footer__lockup img { width: 36px; height: 36px; }
.vsr-footer__lockup span { font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold); font-size: var(--vsr-fs-item); color: var(--vsr-on-dark); }
.vsr-footer__address { font-size: var(--vsr-fs-meta); line-height: var(--vsr-lh-body); margin: 0; }
.vsr-footer__links { font-size: var(--vsr-fs-meta); line-height: 2; }
.vsr-footer__links strong { display: block; font-family: var(--vsr-font-heading); font-weight: var(--vsr-fw-semibold); color: var(--vsr-on-dark); margin-bottom: 4px; }
.vsr-footer__links a { color: var(--vsr-on-dark-muted); display: block; }
.vsr-footer__links a:hover { color: var(--vsr-on-dark); }
.vsr-footer__legal { font-size: var(--vsr-fs-small); color: var(--vsr-on-dark-faint); align-self: flex-end; }
.vsr-footer__address a, .vsr-footer__legal a { color: inherit; }
.vsr-footer__address a:hover, .vsr-footer__legal a:hover { color: var(--vsr-on-dark); }

@media print {
  [data-noprint] { display: none !important; }
  body { background: var(--vsr-surface); }
}