/*
 * Veranstaltungen (Terminredaktion): nur Klassen mit Vorsilbe „mv-“ innerhalb von .mv, damit andere Seiten und das
 * Erscheinungsbild der Magazine unberührt bleiben. Schrift, Schriftgröße und Linkfarbe erben vom Seitenlayout.
 *
 * Gestaltung M8.4: ruhig, journalistisch, ohne Verläufe, große Schatten oder Animationen. Das Layout richtet sich nach
 * der Breite der Inhaltsspalte (Container-Abfragen), nicht nach der Breite des Bildschirms. So passt es in die
 * zweispaltigen Magazinlayouts ebenso wie in eine volle Seitenbreite.
 *
 * Anpassung je Magazin nur über Variablen in einer eigenen Regel des Sitepackages, zum Beispiel:
 *   .mv { --mv-accent: #1a67b0; }                       (Markenfarbe: Datum, Schaltflächen, Links, Hervorhebungen)
 *   .mv { --mv-accent: #b36b00; --mv-accent-text: #fff; } (Schrift auf Schaltflächen in der Markenfarbe)
 * Weitere Variablen (Linien, Flächen, Anzeigenbereich, Bildformate) bei Bedarf, siehe unten.
 *
 * --mv-accent trägt Text (Datum, Links, Schaltflächen) und braucht mindestens 4,5:1 Kontrast zu Weiß.
 * --mv-brand ist die reine Markenfarbe für dünne Linien und Markierungen ohne Text (mindestens 3:1).
 * Voreinstellung je Magazin über die Klasse „mv--<Kürzel>“, die die Erweiterung selbst setzt (siehe Ende der Datei).
 */
.mv {
  /* Zentrale Farben je Magazin */
  --mv-accent: #2b2b2b;
  --mv-accent-text: #fff;
  --mv-brand: var(--mv-accent);
  --mv-link: var(--mv-accent);
  /* Schrift: vom Seitenlayout */
  --mv-font: inherit;
  --mv-font-heading: inherit;
  --mv-font-size-small: 0.875em;
  /* Neutrale Farben */
  --mv-text: inherit;
  --mv-background: transparent;
  --mv-muted: #5c5c5c;
  --mv-line: #dcdcdc;
  --mv-surface: #f5f5f3;
  --mv-control-border: #8a8a8a;
  --mv-alert: #a4161a;
  --mv-focus: #1a5fb4;
  /* Schaltflächen (für ältere Anpassungen weiter nutzbar) */
  --mv-button-background: var(--mv-accent);
  --mv-button-text: var(--mv-accent-text);
  /* Anzeigen: erkennbar abgesetzt, aber ruhig */
  --mv-ad-background: #f3f1ec;
  --mv-ad-text: inherit;
  --mv-ad-border: #d9d4c7;
  --mv-ad-label-background: #fff;
  --mv-ad-label-text: #2b2b2b;
  /* Abstände, Formen, Bildformate */
  --mv-radius: 2px;
  --mv-gap: 1.25rem;
  --mv-space-s: 0.5rem;
  --mv-space-m: 1rem;
  --mv-space-l: 1.75rem;
  --mv-control-height: 2.75rem;
  --mv-teaser-ratio: 3 / 2;
  --mv-slide-ratio: 3 / 2;

  container-type: inline-size;
  container-name: mv;
  font-family: var(--mv-font);
  color: var(--mv-text);
  background: var(--mv-background);
}

.mv :focus-visible {
  outline: 3px solid var(--mv-focus);
  outline-offset: 2px;
}

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

.mv img {
  max-width: 100%;
  height: auto;
}

.mv-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Überschrift und Einführung der Übersicht */
.mv-intro {
  margin: 0 0 var(--mv-space-l);
}

.mv-intro__title {
  margin: 0 0 var(--mv-space-s);
  font-family: var(--mv-font-heading);
  font-size: 1.75em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mv-intro__text {
  max-width: 42em;
  line-height: 1.6;
}

.mv-intro__text > :first-child {
  margin-top: 0;
}

.mv-intro__text > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ Such- und Filterleiste */
.mv-search {
  margin: 0 0 var(--mv-space-l);
  padding: var(--mv-space-m);
  border-top: 3px solid var(--mv-brand);
  background: var(--mv-surface);
}

.mv-search__grid {
  display: grid;
  gap: 0.75rem var(--mv-space-m);
}

.mv-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mv-field__label {
  display: block;
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: var(--mv-font-size-small);
  font-weight: 600;
}

.mv-field__hint,
.mv-field__sub {
  font-weight: normal;
  font-size: var(--mv-font-size-small);
  color: var(--mv-muted);
}

.mv-field__control {
  display: block;
  width: 100%;
  min-height: var(--mv-control-height);
  margin: 0;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--mv-control-border);
  border-radius: var(--mv-radius);
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  /* 16px verhindert das automatische Vergrößern auf dem iPhone */
  font-size: max(1rem, 16px);
  line-height: 1.3;
}

.mv-field__pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mv-space-s);
  align-items: center;
}

/* Datumsfelder (1.2.1): Breite nach der Schrift des Feldes (em), nicht nach der Grundschrift der Website (rem).
   Websites mit html { font-size: 62.5% } machten sonst die Felder so schmal, dass die Jahreszahl abgeschnitten wurde.
   Nebeneinander erst ab 460 Pixel Breite des Datumsbereichs, darunter untereinander in voller Breite. */
.mv-field--range {
  container: mv-range / inline-size;
}

@container mv-range (min-width: 460px) {
  .mv-field__pair {
    grid-template-columns: auto max-content auto max-content;
    justify-content: start;
  }

  .mv-field__pair .mv-field__control {
    width: 10.5em;
  }
}

.mv-search__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-s);
  align-items: end;
}

.mv-search__notices {
  margin: var(--mv-space-m) 0 0;
  padding: var(--mv-space-s) var(--mv-space-m) var(--mv-space-s) 2rem;
  border-left: 4px solid var(--mv-alert);
  background: #fff;
}

@container mv (min-width: 30rem) {
  .mv-search__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-field--query,
  .mv-field--range,
  .mv-search__actions {
    grid-column: 1 / -1;
  }
}

@container mv (min-width: 40rem) {
  .mv-search__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-field--range {
    grid-column: 1 / 3;
  }

  .mv-search__actions {
    grid-column: 3;
    justify-content: end;
  }
}

/* ------------------------------------------------------------------ Schaltflächen und Links */
.mv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mv-control-height);
  margin: 0;
  padding: 0.375rem 1rem;
  border: 1px solid var(--mv-accent);
  border-radius: var(--mv-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.mv-button:hover {
  text-decoration: underline;
}

.mv-button--primary {
  border-color: var(--mv-button-background);
  background: var(--mv-button-background);
  color: var(--mv-button-text);
}

.mv-button--primary:hover,
.mv-button--primary:visited {
  color: var(--mv-button-text);
}

.mv-button--secondary {
  border-color: var(--mv-control-border);
  background: #fff;
  color: #1a1a1a;
}

/* ------------------------------------------------------------------ Content-Slider mit gebuchten Veranstaltungen */
.mv-slider {
  margin: 0 0 var(--mv-space-l);
  padding: 0.75rem;
  border: 1px solid var(--mv-ad-border);
  background: var(--mv-ad-background);
  color: var(--mv-ad-text);
}

.mv-slider a {
  color: inherit;
}

.mv-slider__track {
  display: flex;
  gap: var(--mv-space-m);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.mv-slider--js .mv-slider__track {
  scrollbar-width: none;
}

.mv-slider--js .mv-slider__track::-webkit-scrollbar {
  display: none;
}

.mv-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

.mv-slide__card {
  position: relative;
  display: grid;
  gap: 0.75rem var(--mv-gap);
  align-content: start;
}

/* Kennzeichnung auf jeder Folie, oben links auf dem Bild */
.mv-slide__badge {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0.2rem 0.5rem;
  background: var(--mv-ad-label-background);
  color: var(--mv-ad-label-text);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mv-slide__media {
  display: block;
}

.mv-slide__image {
  display: block;
  width: 100%;
  aspect-ratio: var(--mv-slide-ratio);
  object-fit: cover;
  background: rgba(0, 0, 0, 0.06);
}

.mv-slide__body {
  min-width: 0;
}

.mv-slide__when {
  margin: 0 0 0.25rem;
  color: var(--mv-accent);
  font-size: var(--mv-font-size-small);
  font-weight: 700;
}

.mv-slide__title {
  margin: 0 0 0.375rem;
  font-family: var(--mv-font-heading);
  font-size: 1.375em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mv-slide__title a {
  text-decoration: none;
}

.mv-slide__title a:hover {
  text-decoration: underline;
}

.mv-slide__venue {
  margin: 0 0 0.375rem;
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

.mv-slide__text {
  margin: 0;
  line-height: 1.55;
}

.mv-slide__more {
  margin: 0.625rem 0 0;
  font-size: var(--mv-font-size-small);
  font-weight: 600;
}

.mv-slide__more a {
  color: var(--mv-link);
}

/* Navigation unter den Folien: Pfeile außen, Punkte in der Mitte */
.mv-slider__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  /* nutzt auf schmalen Bildschirmen den Innenabstand mit, damit 5 Punkte und 2 Pfeile (je 44 px) in eine Zeile passen */
  margin: 0.75rem -0.5rem 0;
}

.mv-slider__nav[hidden],
.mv-slider__dots[hidden] {
  display: none;
}

.mv-slider__dots {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
}

.mv-slider__arrow {
  flex: 0 0 auto;
  width: var(--mv-control-height);
  height: var(--mv-control-height);
  padding: 0 0 0.15em;
  border: 1px solid var(--mv-ad-border);
  border-radius: var(--mv-radius);
  background: #fff;
  color: #2b2b2b;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.mv-slider__arrow:hover {
  border-color: #2b2b2b;
}

/* Punkte mit ausreichender Klickfläche, sichtbarer Punkt in der Mitte */
.mv-slider__dot {
  position: relative;
  width: var(--mv-control-height);
  height: var(--mv-control-height);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mv-slider__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 0.625rem;
  margin: -0.3125rem 0 0 -0.3125rem;
  border: 1px solid #5c5c5c;
  border-radius: 50%;
  background: transparent;
}

.mv-slider__dot[aria-current="true"]::before {
  border-color: #2b2b2b;
  background: #2b2b2b;
}

/* Automatischen Wechsel anhalten / starten (M8.4). Auf sehr schmalen Spalten in einer eigenen Zeile. */
.mv-slider__toggle {
  position: relative;
  flex: 0 0 auto;
  width: var(--mv-control-height);
  height: var(--mv-control-height);
  margin-left: 0.25rem;
  padding: 0;
  border: 1px solid var(--mv-ad-border);
  border-radius: var(--mv-radius);
  background: #fff;
  color: #2b2b2b;
  cursor: pointer;
}

.mv-slider__toggle[hidden] {
  display: none;
}

.mv-slider__toggle:hover {
  border-color: #2b2b2b;
}

/* Pause: zwei Balken */
.mv-slider__toggle-icon,
.mv-slider__toggle-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.25rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.375rem;
  background: currentColor;
}

.mv-slider__toggle-icon::after {
  content: "";
  margin: -0.4375rem 0 0 0.375rem;
}

/* Abspielen: Dreieck */
.mv-slider__toggle[data-mv-slider-toggle="play"] .mv-slider__toggle-icon {
  width: 0;
  height: 0;
  margin: -0.4375rem 0 0 -0.25rem;
  border-style: solid;
  border-width: 0.4375rem 0 0.4375rem 0.75rem;
  border-color: transparent transparent transparent currentColor;
  background: transparent;
}

.mv-slider__toggle[data-mv-slider-toggle="play"] .mv-slider__toggle-icon::after {
  display: none;
}

@container mv (min-width: 36rem) {
  .mv-slider {
    padding: var(--mv-space-m);
  }

  .mv-slide__card {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-slider__track {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------ Ergebnisse und Hinweise */
.mv-results__summary {
  margin: 0 0 var(--mv-space-s);
  font-weight: 600;
}

.mv-results__range {
  font-weight: normal;
  color: var(--mv-muted);
}

.mv-results__shown {
  display: block;
  font-weight: normal;
  color: var(--mv-muted);
}

.mv-notice {
  margin: 0 0 var(--mv-space-l);
  padding: var(--mv-space-m);
  background: var(--mv-surface);
}

/* ------------------------------------------------------------------ Chronologische Liste */
.mv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mv-line);
}

.mv-list__item {
  margin: 0;
  padding: var(--mv-gap) 0;
  border-bottom: 1px solid var(--mv-line);
}

/* Schmale Spalte: kleines Bild links neben Datum und Titel, Text darunter über die volle Breite */
.mv-teaser {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 0.875rem;
  align-items: start;
}

.mv-teaser__media {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: block;
  align-self: start;
}

.mv-teaser__body {
  display: contents;
}

.mv-teaser__body > * {
  grid-column: 2;
  min-width: 0;
}

.mv-teaser__body > .mv-teaser__text,
.mv-teaser__body > .mv-teaser__foot {
  grid-column: 1 / -1;
}

.mv-teaser__image {
  display: block;
  width: 100%;
  aspect-ratio: var(--mv-teaser-ratio);
  object-fit: cover;
  background: var(--mv-surface);
}

/* Ohne Bild: ruhiges Datumsfeld im gleichen Format */
.mv-teaser__media--date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--mv-teaser-ratio);
  border: 1px solid var(--mv-line);
  background: var(--mv-surface);
  line-height: 1.1;
  text-align: center;
}

.mv-teaser__day {
  font-size: 1.75em;
  font-weight: 700;
  color: var(--mv-accent);
}

.mv-teaser__month {
  font-size: var(--mv-font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mv-teaser__when {
  margin: 0 0 0.25rem;
  color: var(--mv-accent);
  font-size: var(--mv-font-size-small);
  font-weight: 700;
  line-height: 1.4;
}

.mv-teaser__time::before,
.mv-detail__time::before {
  content: " · ";
}

/* In der Terminliste steht die Uhrzeit in einer eigenen Zeile unter dem Datum */
.mv-dates__time {
  display: block;
  font-weight: 600;
}

.mv-teaser__more {
  display: inline-block;
  color: var(--mv-muted);
  font-weight: normal;
}

.mv-teaser__title {
  margin: 0 0 0.25rem;
  font-family: var(--mv-font-heading);
  font-size: 1.1875em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mv-teaser__title a {
  color: inherit;
  text-decoration: none;
}

.mv-teaser__title a:hover {
  color: var(--mv-link);
  text-decoration: underline;
}

.mv-teaser__subtitle {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.mv-teaser__venue {
  margin: 0 0 0.25rem;
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

.mv-teaser__text {
  margin: 0.5rem 0 0;
  line-height: 1.55;
}

.mv-teaser__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  margin: 0.5rem 0 0;
  font-size: var(--mv-font-size-small);
}

.mv-teaser__link {
  color: var(--mv-link);
  font-weight: 600;
}

.mv-teaser__link::after {
  content: " ›";
}

/* Breite Spalte: Bild links, alle Angaben rechts */
@container mv (min-width: 34rem) {
  .mv-teaser {
    grid-template-columns: 11.5rem minmax(0, 1fr);
    column-gap: var(--mv-gap);
  }

  .mv-teaser__media {
    grid-row: 1 / span 20;
  }

  .mv-teaser__body > .mv-teaser__text,
  .mv-teaser__body > .mv-teaser__foot {
    grid-column: 2;
  }

  .mv-teaser__text {
    margin-top: 0.375rem;
  }
}

@container mv (min-width: 46rem) {
  .mv-teaser {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

/* Kategorien: schlichte Aufzählung statt Etiketten */
.mv-tags {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--mv-muted);
}

.mv-tags__item {
  margin: 0;
}

.mv-tags__item + .mv-tags__item::before {
  content: " · ";
  white-space: pre;
}

/* Status: Abgesagt, Verschoben, Ausverkauft */
.mv-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.375rem;
  border: 1px solid currentColor;
  border-radius: var(--mv-radius);
  color: #3d3d3d;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 0.05em;
}

.mv-badge--alert {
  color: var(--mv-alert);
}

/* ------------------------------------------------------------------ Tagesübersicht (M8.4) */
.mv-week__range {
  margin: 0 0 var(--mv-space-s);
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

.mv-day {
  margin: 0 0 var(--mv-space-l);
}

/* Tagesüberschrift: deutlich, aber knapp; dünne Linie in der Markenfarbe */
.mv-day__title {
  margin: 0;
  padding: 0 0 0.375rem;
  border-bottom: 2px solid var(--mv-brand);
  font-family: var(--mv-font-heading);
  font-size: 1.0625em;
  font-weight: 700;
  line-height: 1.35;
}

.mv-day__relative {
  color: var(--mv-accent);
}

.mv-day__relative::after {
  content: " ·";
}

.mv-day .mv-list {
  border-top: 0;
}

/* Tage ohne Veranstaltungen: eine kurze Zeile statt eines leeren Abschnitts */
.mv-day--empty {
  margin: 0 0 var(--mv-space-l);
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--mv-line);
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

/* Mehrere Termine am Tag: „15:00 Uhr und 20:00 Uhr“; abgesagte und verschobene Uhrzeiten durchgestrichen */
.mv-occ {
  white-space: nowrap;
}

.mv-occ--void .mv-occ__time {
  color: var(--mv-muted);
  text-decoration: line-through;
}

.mv-occ__venue {
  color: var(--mv-muted);
  font-weight: normal;
  white-space: normal;
}

.mv-teaser__period {
  margin: 0 0 0.25rem;
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

/* Alle Termine des Tages abgesagt oder verschoben: Eintrag zurückgenommen */
.mv-teaser--void .mv-teaser__title,
.mv-teaser--void .mv-teaser__text {
  color: var(--mv-muted);
}

/* Kurzer Eintrag für Veranstaltungen, die im Abschnitt schon ausführlich erschienen sind */
.mv-teaser--compact {
  display: block;
}

.mv-teaser--compact .mv-teaser__body {
  display: block;
}

.mv-teaser--compact .mv-teaser__title {
  font-size: 1em;
}

.mv-list__item:has(.mv-teaser--compact) {
  padding: 0.625rem 0;
}

/* ------------------------------------------------------------------ Blättern (sieben Tage) */
.mv-weeknav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
  margin: var(--mv-space-m) 0 0;
  padding: 0;
}

.mv-weeknav__item {
  flex: 1 1 12rem;
  margin: 0;
}

.mv-weeknav__item--next {
  text-align: right;
}

.mv-weeknav__item--next:only-child {
  margin-left: auto;
  flex-grow: 0;
}

.mv-weeknav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--mv-control-height);
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  color: var(--mv-link);
  text-decoration: none;
}

.mv-weeknav__link:hover {
  border-color: var(--mv-accent);
}

.mv-weeknav__link:hover .mv-weeknav__label {
  text-decoration: underline;
}

.mv-weeknav__label {
  font-weight: 700;
}

.mv-weeknav__range {
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

/* ------------------------------------------------------------------ Detailseite */
.mv-detail__header {
  margin: 0 0 var(--mv-space-m);
}

.mv-detail__title {
  margin: 0 0 0.375rem;
  font-family: var(--mv-font-heading);
  font-size: 1.75em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mv-detail__subtitle {
  margin: 0 0 0.5rem;
  font-size: 1.1875em;
  line-height: 1.4;
}

.mv-detail__when {
  margin: 0;
  color: var(--mv-accent);
  font-weight: 700;
}

.mv-detail__all {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
  font-weight: 600;
}

.mv-detail__series {
  margin: 0.375rem 0 0;
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

.mv-detail__section {
  margin: var(--mv-space-l) 0;
}

.mv-detail__heading,
.mv-info__heading {
  margin: 0 0 0.75rem;
  font-family: var(--mv-font-heading);
  font-size: 1.25em;
  line-height: 1.3;
}

.mv-detail__lead {
  margin: 0 0 1em;
  font-size: 1.0625em;
  font-weight: 600;
  line-height: 1.55;
}

/* Beschreibung: normaler Fließtext mit den Formatierungen aus der Terminredaktion */
.mv-description {
  max-width: 42em;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.mv-description p {
  margin: 0 0 1em;
}

.mv-description h2,
.mv-description h3,
.mv-description h4 {
  margin: 1.5em 0 0.5em;
  font-family: var(--mv-font-heading);
  line-height: 1.3;
}

.mv-description h2 {
  font-size: 1.25em;
}

.mv-description h3,
.mv-description h4 {
  font-size: 1.0625em;
}

.mv-description ul,
.mv-description ol {
  margin: 0 0 1em;
  padding-left: 1.375em;
}

.mv-description li {
  margin: 0 0 0.375em;
}

.mv-description blockquote {
  margin: 0 0 1em;
  padding-left: 1em;
  border-left: 3px solid var(--mv-line);
  color: var(--mv-muted);
}

.mv-description a,
.mv-link,
.mv-back a,
.mv-dates__format a {
  color: var(--mv-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mv-description > :last-child {
  margin-bottom: 0;
}

/* Bilder ohne Verzerrung und ohne Vergrößerung kleiner Bilder */
.mv-figure {
  margin: 0 0 var(--mv-space-m);
}

.mv-figure__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.mv-figure__caption {
  margin-top: 0.375rem;
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
  line-height: 1.45;
}

.mv-figure__credit {
  display: block;
  font-size: 0.875em;
}

.mv-gallery {
  display: grid;
  gap: var(--mv-gap);
}

@container mv (min-width: 34rem) {
  .mv-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-detail__title {
    font-size: 2em;
  }
}

/* Termine und Informationen: leicht abgesetzte Fläche */
.mv-info {
  padding: var(--mv-space-m) var(--mv-space-m) var(--mv-space-m);
  border-top: 3px solid var(--mv-brand);
  background: var(--mv-surface);
}

.mv-dates__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mv-dates__item {
  margin: 0;
  padding: 0.625rem 0;
  border-top: 1px solid var(--mv-line);
  overflow-wrap: anywhere;
}

.mv-dates__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.mv-dates__item p {
  margin: 0.125rem 0 0;
}

.mv-dates__when {
  font-weight: 700;
}

.mv-dates__venue,
.mv-dates__note,
.mv-dates__format {
  color: var(--mv-muted);
  font-size: var(--mv-font-size-small);
}

.mv-dates__label {
  font-weight: 600;
}

.mv-dates__item--cancelled time,
.mv-dates__item--cancelled .mv-dates__time {
  text-decoration: line-through;
}

.mv-facts {
  margin: var(--mv-space-m) 0 0;
  padding-top: var(--mv-space-m);
  border-top: 1px solid var(--mv-line);
}

.mv-facts__row {
  margin: 0 0 0.625rem;
}

.mv-facts__row:last-child {
  margin-bottom: 0;
}

.mv-facts dt {
  font-size: var(--mv-font-size-small);
  font-weight: 700;
}

.mv-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.mv-address {
  overflow-wrap: anywhere;
}

@container mv (min-width: 34rem) {
  .mv-info {
    padding: 1.25rem 1.5rem;
  }

  .mv-dates__item {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    column-gap: var(--mv-gap);
  }

  .mv-dates__item > * {
    grid-column: 2;
  }

  .mv-dates__item > .mv-dates__when {
    grid-column: 1;
    grid-row: 1 / span 5;
    margin: 0;
  }

  .mv-dates__item > :nth-child(2) {
    margin-top: 0;
  }

  .mv-facts__row {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    column-gap: var(--mv-gap);
  }

  .mv-facts dt {
    padding-top: 0.1em;
  }
}

.mv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin: var(--mv-space-m) 0 0;
}

.mv-back {
  margin: var(--mv-space-l) 0 0;
  padding-top: var(--mv-space-m);
  border-top: 1px solid var(--mv-line);
  font-weight: 600;
}

/* ------------------------------------------------------------------ Video (erst nach Klick) */
.mv-video {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--mv-line);
}

.mv-video__ratio {
  position: relative;
  aspect-ratio: 16 / 9;
}

.mv-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------ Farbvoreinstellungen je Magazin (M8.4) */
/*
 * Berlin-Magazin.info: Markenfarbe #F06900 (Headerbild). Auf Weiß nur 3,1:1, daher als --mv-brand für Linien und
 * Markierungen; Text, Links und Schaltflächen im dunkleren Ton derselben Farbfamilie #B34E00 (5,2:1 auf Weiß,
 * 4,8:1 auf der grauen Fläche). Eigene Regeln im Sitepackage haben weiterhin Vorrang, wenn sie später geladen werden.
 */
.mv--ber {
  --mv-brand: #f06900;
  --mv-accent: #b34e00;
  --mv-accent-text: #fff;
}