/* Theater fortepiano – Werte stammen ausschließlich aus DESIGN.md */

/* == tokens == */
:root {
  --black: #000000;
  --red: #990000;
  --flash: #ff3333;
  --paper: #ffffff;
  --ink: #111111;
  --ink-soft: #595959;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  --font-text: "Fira Sans", system-ui, sans-serif;
  --font-head: "Fira Sans Condensed", system-ui, sans-serif;

  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;

  --sp-4: 4px;
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-72: 72px;
  --sp-96: 96px;

  --container: 1200px;
  --gutter: 24px;
  --section: 72px;
  --scrim: rgb(0 0 0 / .65);
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --measure: 68ch;
}

@media (max-width: 599px) {
  :root {
    --gutter: 16px;
    --section: 48px;
  }
}

/* == fonts == */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-condensed-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-condensed-latin-600-normal.woff2") format("woff2");
}


/* == base == */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
/* Seitenwechsel: weiches Überblenden, Kopf bleibt stehen */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }
}
.site-header { view-transition-name: site-header; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 250ms; }
::selection {
  background: var(--red);
  color: var(--paper);
}
body {
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1, h2, h3, h4 {
  margin: 0 0 var(--sp-16);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
}
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--fs-36); }
h2 { font-size: var(--fs-28); }
h3 { font-size: var(--fs-22); }
h4 { font-size: var(--fs-18); }
@media (min-width: 900px) {
  h1 { font-size: var(--fs-48); }
}
p {
  margin: 0 0 var(--sp-16);
  text-wrap: pretty;
}
a {
  color: inherit;
}
/* Fokus: weiß auf dunkel; Komponenten auf Papier setzen --focus */
:focus-visible {
  outline: 2px solid var(--focus, var(--paper));
  outline-offset: 2px;
}

/* == layouts/default == */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 400 var(--fs-18) / 1.6 var(--font-text);
  color: var(--paper);
  background: var(--red) url("../images/fond-forte-2-2b-2000x1500.webp") center top / max(100%, 800px) auto no-repeat;
}
.layout__main {
  flex: 1 0 auto;
}

/* == components/skip-link == */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--sp-16);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-8) var(--sp-16);
  background: var(--paper);
  color: var(--red);
  --focus: var(--red);
  font: 600 var(--fs-18) / 1.2 var(--font-head);
  transform: translateY(-120%);
}
.skip-link:focus-visible {
  transform: none;
}

/* == components/stripe == */
.stripe {
  height: 8px;
  background: var(--flash);
}

/* == components/site-header == */
.site-header {
  position: relative; /* Bezug für das aufklappbare Menü (main-nav) */
  z-index: 20;
  background: var(--black);
  color: var(--paper);
}
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-24);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--sp-8) var(--gutter);
}
.site-header__logo {
  display: block;
  flex: none;
}
.site-header__logo img {
  height: 44px;
  width: auto;
}
.site-header__claim {
  margin: 0;
  font: 400 var(--fs-16) / 1.2 var(--font-head);
  color: var(--flash);
}
@media (min-width: 1100px) {
  .site-header__bar {
    flex-wrap: nowrap;
  }
  .site-header__logo img {
    height: 64px;
  }
  .site-header__claim {
    white-space: nowrap;
  }
}
@media (min-width: 1240px) {
  .site-header__claim {
    font-size: var(--fs-22);
  }
}

/* == components/main-nav == */
.main-nav__toggle {
  display: none;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: 0 var(--sp-16);
  border: 0;
  background: transparent;
  color: var(--paper);
  font: 600 var(--fs-18) / 1 var(--font-head);
  cursor: pointer;
}
.main-nav__toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.main-nav__panel {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--sp-16);
  font: 400 var(--fs-18) / 1.2 var(--font-head);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 200ms;
}
.main-nav__link:hover {
  opacity: .8;
}
.main-nav__link[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--flash);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
@media (max-width: 1099px) {
  /* ohne JS steht das Menü offen unter der Leiste */
  html:not(.js) .main-nav {
    flex-basis: 100%;
  }
  .main-nav__panel {
    display: block;
  }
  .main-nav__link {
    padding-inline: var(--gutter);
  }
  .js .main-nav {
    margin-left: auto;
  }
  .js .main-nav__toggle {
    display: inline-flex;
  }
  .js .main-nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
  }
  .js .main-nav:not(.is-open) .main-nav__panel {
    display: none;
  }
}
@media (min-width: 1100px) {
  .main-nav {
    margin-left: auto;
  }
  .main-nav__link {
    font-size: var(--fs-16);
    padding-inline: var(--sp-8);
  }
  .main-nav__panel {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1240px) {
  .main-nav__link {
    font-size: var(--fs-18);
  }
}

/* == components/banner == */
.banner {
  position: relative;
  background: var(--black);
}
.banner__media {
  overflow: clip;
}
.banner__image {
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
  object-position: 50% 30%;
  animation: banner-zoom 1000ms var(--ease-out) both;
}
@keyframes banner-zoom {
  from { scale: 1.08; }
  to { scale: 1; }
}
/* Bildreiter fährt von links ein */
.banner:not(.banner--plain) .banner__label {
  animation: banner-wipe 700ms var(--ease-out) 250ms both;
}
@keyframes banner-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
/* Parallax: Bild wandert beim Wegscrollen langsamer; Handy ohne, dort steht der Titel unter dem Bild */
@media (min-width: 600px) {
  @supports (animation-timeline: view()) {
    .banner {
      view-timeline: --banner block;
    }
    .banner__image {
      animation: banner-zoom 1000ms var(--ease-out) both, banner-parallax linear both;
      animation-timeline: auto, --banner;
      animation-range: normal, exit 0% exit 100%;
    }
    @keyframes banner-parallax {
      from { translate: 0 0; }
      to { translate: 0 30%; }
    }
  }
}
/* Zeile als Bildreiter: schwarzer Block unten links, sitzt direkt auf dem Streifen */
.banner__title {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  font: 600 var(--fs-22) / 1.2 var(--font-head);
  letter-spacing: .12em;
  color: var(--paper);
}
/* Handy: Bild im eigenen Seitenverhältnis, Zeile steht darunter auf Schwarz */
@media (max-width: 599px) {
  .banner__image {
    height: auto;
    max-height: 320px;
  }
  .banner:not(.banner--plain) .banner__title {
    position: static;
    background: var(--black);
  }
  .banner:not(.banner--plain) .banner__label {
    padding: var(--sp-16) 0;
    background: none;
  }
}
.banner__inner {
  display: block;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.banner__label {
  display: inline-block;
  padding: var(--sp-16) var(--sp-24);
  background: var(--black);
}
.banner--plain {
  background: transparent;
}
.banner--plain .banner__title {
  position: static;
  padding: var(--sp-48) 0 0;
  font-size: var(--fs-36);
}
.banner--plain .banner__label {
  padding: 0;
  background: none;
}
@media (min-width: 900px) {
  .banner__title {
    font-size: var(--fs-36);
  }
  .banner--plain .banner__title {
    padding-top: var(--sp-72);
    font-size: var(--fs-48);
  }
}

/* == components/page-section == */
.page-section {
  padding-block: var(--section);
}
.page-section__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-section__inner > * + * {
  margin-top: var(--sp-48);
}

/* == components/page-title == */
.page-title {
  margin: 0;
  color: var(--paper);
}
.page-title--paper {
  color: var(--ink);
}

/* == shared: Akzent- und Fokusfarbe auf Papier == */
.reading-card,
.event,
.event-dialog {
  --accent: var(--red);
  --accent-hover: var(--ink);
  --focus: var(--red);
}

/* == components/reading-card == */
/* volle Containerbreite; nur der Fließtext (rich-text) hält die Zeilenlänge */
.reading-card {
  padding: var(--sp-48);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.reading-card > * + * {
  margin-top: var(--sp-32);
}
.reading-card > :is(h1, h2) + * {
  margin-top: var(--sp-16);
}
/* Text beginnt selbst mit Zwischentitel (Impressum, Datenschutz): mehr Luft unter dem Seitentitel */
.reading-card > h1 + :has(> :first-child:is(h2, h3)) {
  margin-top: var(--sp-32);
}
@media (max-width: 599px) {
  .reading-card {
    padding: var(--sp-24);
  }
}

/* == components/rich-text == */
.rich-text > * {
  max-width: var(--measure);
}
.rich-text {
  overflow-wrap: anywhere;
}
.rich-text > :last-child {
  margin-bottom: 0;
}
.rich-text > * + :is(h2, h3) {
  margin-top: var(--sp-32);
}
.rich-text :is(h2, h3, h4) {
  color: inherit;
}
.rich-text :is(ul, ol) {
  padding-left: var(--sp-24);
}
.rich-text a {
  color: var(--accent, inherit);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rich-text a:hover {
  color: var(--accent-hover, inherit);
}

/* == components/image == */
.image {
  margin: 0;
}
.image__img {
  width: 100%;
}
.image--square .image__img {
  aspect-ratio: 1;
  object-fit: cover;
}
.image--logo .image__img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}
.image__caption {
  margin-top: var(--sp-8);
  font-size: var(--fs-14);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* == components/image-grid == */
/* Galerie ohne Beschnitt: Reihen gleicher Höhe, jedes Bild so breit wie sein Seitenverhältnis (--r), letzte Reihe wird nicht aufgezogen */
.image-grid {
  --row: 140px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.image-grid::after {
  content: "";
  flex-grow: 1000000;
}
.image-grid__item {
  position: relative;
  display: block;
  flex: var(--r) 1 calc(var(--r) * var(--row));
  max-width: min(calc(var(--r) * var(--row) * 1.5), var(--w));
  cursor: zoom-in;
  transition: opacity 200ms;
}
.image-grid__item:hover {
  opacity: .85;
}
.image-grid__img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
}
.image-grid__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Einzelbild: linksbündig, nie größer als die Datei */
.image-grid--single {
  display: block;
}
.image-grid--single::after {
  content: none;
}
.image-grid--single .image-grid__item {
  width: 100%;
  max-width: var(--w);
}
.image-grid--single .image-grid__img {
  width: 100%;
}
@media (min-width: 900px) {
  .image-grid--single .image-grid__item {
    width: fit-content;
    max-width: min(100%, var(--w));
  }
  .image-grid--single .image-grid__img {
    width: auto;
    max-width: 100%;
    max-height: 460px;
  }
}
.image-grid__logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
  align-items: center;
  margin-top: var(--sp-24);
}
@media (min-width: 600px) {
  .image-grid__logos {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}
.image-grid__logos .image__img {
  height: var(--sp-48);
  width: auto;
  max-width: min(160px, 100%);
  object-fit: contain;
}
@media (max-width: 599px) {
  /* schmaler Container: kleinere Zielhöhe, damit auch Hochformate in Reihen mit Querformaten passen */
  .image-grid {
    --row: 100px;
  }
}
@media (min-width: 900px) {
  .image-grid {
    --row: 220px;
  }
}

/* == components/pdf-list == */
.pdf-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdf-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-8);
  min-height: 44px;
  color: var(--accent, inherit);
  text-decoration: none;
}
.pdf-list__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdf-list__link:hover {
  color: var(--accent-hover, inherit);
}
.pdf-list__size {
  font-size: var(--fs-16);
  color: var(--ink-soft);
}

/* == components/video-link == */
.video-link {
  margin: 0;
}

/* == components/button == */
/* Rot und Weiß heißen hier: klickbar. Überschriften tragen nie die Knopffarbe. */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: var(--sp-8) var(--sp-16);
  border: 2px solid currentColor;
  background: transparent;
  font: 600 var(--fs-18) / 1.2 var(--font-head);
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}
.button::-webkit-details-marker {
  display: none;
}
.button--primary {
  border-color: var(--red);
  background: var(--red);
  color: var(--paper);
}
.button--primary:hover {
  border-color: var(--black);
  background: var(--black);
}
.button--outline {
  color: var(--red);
}
.button--outline:hover {
  border-color: var(--red);
  background: var(--red);
  color: var(--paper);
}
.button--light {
  color: var(--paper);
}
.button--light:hover {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--red);
}
/* Pfeil (Chevron) gemeinsam: Größe und Strich */
.button--toggle::after,
.button--dialog::after,
.program-card__more::after,
.site-footer__link::before,
.back-link::before {
  content: "";
  width: var(--sp-8);
  height: var(--sp-8);
  border: 0 solid currentColor;
  border-bottom-width: 2px;
}
.button--toggle::after,
.button--dialog::after,
.program-card__more::after,
.site-footer__link::before {
  border-right-width: 2px;
}
.back-link::before {
  border-left-width: 2px;
}

/* Aufklapp-Knopf: Pfeil dreht sich beim Öffnen */
.button--toggle::after {
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease-out;
}
[open] > .button--toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Fenster-Knopf: Pfeil nach rechts, dreht nicht */
.button--dialog::after {
  transform: rotate(-45deg);
  transition: translate 200ms var(--ease-out);
}
.button--dialog:hover::after {
  translate: var(--sp-4) 0;
}

/* == components/tabs == */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-32);
}
/* Reiter sind leichte Knöpfe: 1 px weiß umrandet, nur der aktive ist weiß gefüllt.
   Fokus bleibt weiß, weil der Rahmen immer auf Rot liegt. */
.tabs__tab {
  min-height: 44px;
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font: 400 var(--fs-18) / 1.2 var(--font-head);
  text-align: left;
  cursor: pointer;
}
.tabs__tab:hover {
  background: var(--black);
}
.tabs__tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--flash);
}
.tabs__panel[hidden] {
  display: none;
}
.tabs__panel + .tabs__panel {
  margin-top: var(--sp-48);
}
.tabs__heading {
  color: var(--paper);
}
/* ohne JS kein Reiter-Gerüst, alle Panels stehen mit Überschrift untereinander */
html:not(.js) .tabs__list {
  display: none;
}
/* vor dem Start von JS nur das erste Panel zeigen, damit nichts springt */
.js .tabs:not(.tabs--active) .tabs__panel ~ .tabs__panel {
  display: none;
}
/* mit JS ersetzen die Reiter die Überschriften; sie bleiben für die Gliederung (visuell versteckt) */
.js .tabs__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tabs--active .tabs__panel + .tabs__panel {
  margin-top: 0;
}

/* == components/card-grid == */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.card-grid__item {
  display: flex;
}
.card-grid__item > * {
  flex: 1;
}

/* == components/program-card == */
/* wie die Termin-Karte: Papier auf Rot, Bild oben, ganze Karte ist der Link */
.program-card {
  --focus: var(--red);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: clip;
  transition: transform 200ms;
}
/* Bewegung beim Hover nur mit Maus, auf Touch bleibt sie sonst nach dem Tippen hängen */
@media (hover: hover) and (pointer: fine) {
  .program-card:hover {
    transform: translateY(-4px);
  }
}
.program-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  transition: scale 600ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .program-card:hover .program-card__image {
    scale: 1.04;
  }
}
.program-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-24);
}
.program-card__title {
  margin-bottom: var(--sp-8);
  font-size: var(--fs-22);
  text-wrap: pretty;
}
.program-card__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.program-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.program-card:hover .program-card__link {
  text-decoration-color: currentColor;
}
.program-card__link:focus-visible {
  outline: none;
}
.program-card:has(.program-card__link:focus-visible) {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.program-card__teaser {
  font-size: var(--fs-16);
  line-height: 1.4;
}
.program-card__teaser > * {
  margin: 0 0 var(--sp-8);
}
.program-card__teaser > :last-child {
  margin-bottom: 0;
}
.program-card__more {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: auto 0 0;
  padding-top: var(--sp-16);
  font: 600 var(--fs-18) / 1.2 var(--font-head);
  color: var(--red);
}
.program-card__more::after,
.site-footer__link::before {
  transform: rotate(-45deg);
  transition: translate 200ms var(--ease-out);
}
.program-card:hover .program-card__more::after {
  translate: var(--sp-4) 0;
}

/* == components/event == */
/* Karte: großes quadratisches Bild, Datum als schwarzer Reiter mit Streifen */
.event {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.event:has(.event__open) {
  cursor: pointer;
  transition: transform 200ms;
}
@media (hover: hover) and (pointer: fine) {
  .event:has(.event__open):hover {
    transform: translateY(-4px);
  }
}
.event__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--black);
  overflow: clip;
}
.event__media .image,
.event__media .image__img {
  display: block;
  width: 100%;
  height: 100%;
}
.event__media .image__img {
  object-position: 50% 30%;
  transition: scale 600ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .event:has(.event__open):hover .event__media .image__img {
    scale: 1.04;
  }
}
.event__date {
  position: absolute;
  top: 0;
  left: var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
  border-bottom: var(--sp-8) solid var(--flash);
  background: var(--black);
  color: var(--paper);
  font-family: var(--font-head);
  line-height: 1;
  text-align: center;
}
.event__weekday {
  font-size: var(--fs-14);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.event__day {
  font-size: var(--fs-48);
  font-weight: 600;
}
.event__month {
  font-size: var(--fs-16);
}
.event__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-24);
}
.event__media--empty {
  aspect-ratio: 8 / 3;
}
/* „Details“ steht in jeder Reihe auf gleicher Höhe; der Knopf spannt die ganze Karte auf */
.event__body > .event__open {
  align-self: flex-start;
  margin-top: auto;
}
.event__open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.event .event__ticket {
  position: relative;
  z-index: 2;
}
.event__body > * {
  margin: 0;
}
.event__title {
  font-size: var(--fs-22);
  text-wrap: pretty;
}
.event__place {
  font-size: var(--fs-16);
  color: var(--ink-soft);
}
.event__ticket {
  margin-top: var(--sp-8);
}
/* Termin-Fenster: dialog scrollt nicht, der innere Wrapper scrollt, Schließen bleibt stehen */
html:has(dialog[open]) {
  overflow: hidden;
}
.event-dialog {
  width: 100%;
  max-width: 960px;
  max-height: calc(100dvh - 2 * var(--gutter));
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.event-dialog[open] {
  display: flex;
  flex-direction: column;
}
.event-dialog::backdrop {
  background: var(--scrim);
  transition: opacity 200ms var(--ease-out);
}
/* Öffnen blendet ein, Schließen ohne Animation */
.event-dialog {
  transition: opacity 200ms var(--ease-out), scale 200ms var(--ease-out);
}
@starting-style {
  .event-dialog[open] {
    opacity: 0;
    scale: .98;
  }
  .event-dialog[open]::backdrop {
    opacity: 0;
  }
}
.event-dialog__scroll {
  overflow: auto;
  overscroll-behavior: contain;
}
.event-dialog__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--black);
  color: var(--paper);
  cursor: pointer;
}
.event-dialog__close:focus-visible {
  outline-color: var(--paper);
  outline-offset: -4px;
}
.event-dialog__media {
  position: relative;
  background: var(--black);
}
.event-dialog__media .image,
.event-dialog__media .image__img {
  display: block;
  width: 100%;
}
/* nie beschnitten: eigenes Seitenverhältnis auf Schwarz */
.event-dialog__media .image__img {
  height: auto;
  max-height: 50dvh;
  object-fit: contain;
}
.event-dialog__media--empty {
  display: none;
}
.event-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-24);
}
.event-dialog__body > * {
  margin: 0;
}
/* Datum ausgeschrieben als schwarzer Reiter über dem Titel, hängt an der Oberkante der weißen Fläche */
.event-dialog__body > .event-dialog__date {
  align-self: flex-start;
  margin: calc(-1 * var(--sp-24)) 0 var(--sp-16);
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
  border-bottom: var(--sp-8) solid var(--flash);
  background: var(--black);
  color: var(--paper);
  font: 600 var(--fs-22) / 1.2 var(--font-head);
}
.event-dialog__title {
  margin-bottom: var(--sp-8);
  font-size: var(--fs-28);
  color: var(--ink);
}
.event-dialog__body .rich-text {
  margin-top: var(--sp-8);
}
.event-dialog .rich-text p {
  margin-bottom: var(--sp-8);
}
.event-dialog__body .event__ticket {
  margin-top: var(--sp-16);
}
@media (min-width: 900px) {
  .event-dialog__scroll {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  /* Bildspalte ganz schwarz über die Fensterhöhe; Bild und Datum bleiben beim Scrollen oben stehen */
  .event-dialog__media {
    display: grid;
    align-content: start;
  }
  .event-dialog__media .image {
    grid-area: 1 / 1;
    position: sticky;
    top: 0;
    align-self: start;
  }
  .event-dialog__media .image__img {
    max-height: calc(100dvh - 2 * var(--gutter));
  }
  .event-dialog__media--empty {
    display: block;
    min-height: 240px;
  }
  .event-dialog__body {
    padding: var(--sp-48);
  }
  .event-dialog__body > .event-dialog__date {
    margin-top: calc(-1 * var(--sp-48));
  }
}
@media (max-width: 599px) {
  .event-dialog {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
}

/* Kommende Termine: Bild links, voller Text rechts */
@media (min-width: 900px) {
  .event--feature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .event--feature .event__body {
    gap: var(--sp-16);
    padding: var(--sp-48);
  }
  .event--feature .event__title {
    font-size: var(--fs-28);
  }
}

/* == components/event-list == */
.event-list__title {
  margin-bottom: var(--sp-24);
}
.event-list__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--gutter);
}
.event-list--feature .event-list__items {
  grid-template-columns: 1fr;
}
.event-list__more {
  margin-top: var(--gutter);
}
.event-list__more > .event-list__items {
  margin-top: var(--sp-16);
}

/* == components/person == */
.person {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
}
.person__name {
  color: inherit;
}
.person__body {
  max-width: var(--measure);
}
.person__body h3 {
  font-size: var(--fs-22);
}
.person__body > :last-child {
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .person {
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: var(--sp-32);
  }
}

/* == components/site-footer == */
.site-footer {
  margin-top: var(--section);
  background: var(--black);
  color: var(--paper);
}
.site-footer__inner {
  display: grid;
  gap: var(--sp-48) var(--gutter);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--section) var(--gutter) var(--sp-24);
}
.site-footer__logo {
  display: inline-block;
}
/* Breite statt Höhe, damit das Logo in schmalen Spalten proportional schrumpft */
.site-footer__logo img {
  width: 126px;
}
.site-footer__claim {
  margin: var(--sp-8) 0 0;
  font: 400 var(--fs-22) / 1.2 var(--font-head);
  color: var(--flash);
}
.site-footer__heading {
  margin-bottom: var(--sp-8);
  font-size: var(--fs-22);
}
.site-footer__contact address {
  font-style: normal;
}
.site-footer__address {
  margin: var(--sp-8) 0;
}
.site-footer__contact-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font: 600 var(--fs-22) / 1.2 var(--font-head);
  text-decoration: none;
}
.site-footer__list,
.site-footer__legal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  min-height: 44px;
  font: 400 var(--fs-18) / 1.2 var(--font-head);
  text-decoration: none;
}
/* Pfeil kommt aus .program-card__more::after, hier in --flash */
.site-footer__link::before {
  flex: none;
  border-color: var(--flash);
}
.site-footer__link:hover::before {
  translate: var(--sp-4) 0;
}
.site-footer__contact-link:hover,
.site-footer__link:hover,
.site-footer__legal-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--flash);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
.site-footer__link[aria-current="page"],
.site-footer__legal-link[aria-current="page"] {
  color: var(--flash);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--red);
  font-size: var(--fs-16);
}
.site-footer__copy {
  margin: 0;
}
.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-24);
}
.site-footer__legal-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
@media (min-width: 600px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__brand,
  .site-footer__legal {
    grid-column: 1 / -1;
  }
}
@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 3fr 4fr 5fr;
  }
  .site-footer__brand {
    grid-column: auto;
  }
  .site-footer__logo img {
    width: 252px;
  }
}
@media (min-width: 1100px) {
  .site-footer__list {
    columns: 2;
    column-gap: var(--gutter);
  }
  .site-footer__list li {
    break-inside: avoid;
  }
}

/* == components/back-link == */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  font: 600 var(--fs-18) / 1.2 var(--font-head);
  color: var(--paper);
  text-decoration: none;
}
.back-link::before {
  transform: rotate(45deg);
  transition: translate 200ms var(--ease-out);
}
.back-link:hover::before {
  translate: calc(-1 * var(--sp-4)) 0;
}
.back-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.page-section__inner > .back-link + * {
  margin-top: var(--sp-8);
}

/* == components/program-layout == */
/* Text links, Seitenleiste rechts; Handy: Leiste nach dem Text */
.program-layout {
  display: grid;
  gap: var(--sp-48);
}
.program-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}
.program-layout__aside p {
  margin: 0;
}
.program-layout__aside .button {
  max-width: 100%;
}
.program-layout__heading {
  margin-bottom: var(--sp-16);
  font-size: var(--fs-22);
  color: var(--ink);
}
.program-layout__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.program-layout__tel:hover {
  color: var(--accent-hover);
}
@media (min-width: 900px) {
  .program-layout {
    grid-template-columns: minmax(0, 68ch) minmax(240px, 360px);
    justify-content: space-between;
  }
  .program-layout--aside-only {
    grid-template-columns: minmax(240px, 360px);
    justify-content: start;
  }
  .program-layout__aside {
    position: sticky;
    top: var(--sp-24);
    align-self: start;
  }
}

/* == components/lightbox == */
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--black);
  color: var(--paper);
  touch-action: pan-y;
}
.lightbox[open] {
  display: flex;
  flex-direction: column;
}
.lightbox::backdrop {
  background: var(--black);
}
.lightbox {
  transition: opacity 200ms var(--ease-out);
}
@starting-style {
  .lightbox[open] {
    opacity: 0;
  }
}
.lightbox__img {
  flex: 1;
  width: 100%;
  min-height: 0;
  max-width: none;
  object-fit: contain;
  transition: opacity 200ms;
}
.lightbox.is-loading .lightbox__img {
  opacity: 0;
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-8) var(--gutter);
  font-size: var(--fs-16);
  line-height: 1.4;
}
.lightbox__text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-16);
  justify-content: space-between;
}
.lightbox__btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: var(--black);
  color: var(--paper);
  cursor: pointer;
}
.lightbox__btn[hidden] {
  display: none;
}
.lightbox__close {
  position: absolute;
  top: var(--sp-8);
  right: var(--sp-8);
}
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__prev {
  left: var(--sp-8);
}
.lightbox__next {
  right: var(--sp-8);
}
@media (max-width: 599px) {
  .lightbox__prev,
  .lightbox__next {
    position: static;
    transform: none;
  }
}

/* == motion == */
/* Karten blenden beim Hereinscrollen ein, nur am Rechner mit Maus (Sergej: stört auf dem Handy beim Scrollen); ohne Support bleibt alles sichtbar */
@media (hover: hover) and (pointer: fine) {
  @supports (animation-timeline: view()) {
    .event,
    .program-card {
      animation: card-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes card-reveal {
      from {
        opacity: 0;
        translate: 0 var(--sp-24);
      }
    }
  }
}
.button:active,
.tabs__tab:active,
.back-link:active {
  translate: 0 1px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .program-card:hover,
  .event:has(.event__open):hover {
    transform: none;
  }
}