/* PartyFrank — Designsprache "Stadtblatt"
 *
 * Verbindliche Grundlage: DESIGN.md. Werte, die dort als Produktionsvorgabe
 * stehen, sind hier umgesetzt und nicht frei zu ersetzen. Neue Komponenten
 * verwenden ausschliesslich die unten definierten Tokens.
 */

/* Schriften vom eigenen Server. Kein Aufruf eines fremden Schriftdienstes,
 * siehe web/static/fonts/LIZENZ.md. Beide sind variabel und decken alle
 * benoetigten Schnitte in je einer Datei ab.
 *
 * font-display: swap sorgt dafuer, dass der Text sofort lesbar ist, auch
 * bevor die Schrift geladen hat. PLAN.md verlangt, dass alles ohne Webfonts
 * verstaendlich bleibt. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-latin.a79fdb52d4a5.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-latin.a30ddcd34970.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Palette, DESIGN.md Abschnitt 4.
     Jeder Wert für Text erreicht auf dem Papier mindestens 4,5:1. */
  --pf-paper: #fbfbfc;          /* neutrales Weiß, weder vergilbt noch grünlich */
  --pf-ink: #16161a;            /* 17,45:1 */
  --pf-accent: #1f3bd6;         /* Druckblau, 7,65:1 */
  --pf-accent-dark: #16299a;    /* für Hover auf gefüllten Flächen */
  --pf-accent2: #c4126c;        /* Druckpink, 5,56:1 */
  /* Nur für Flächen ohne Text: die beiden ungebrochenen Druckfarben,
     übereinandergelegt wie bei einer Risographie. */
  --pf-ink-blue: #1f3bd6;
  --pf-ink-pink: #e6197f;
  --pf-muted: #5a5a64;          /* 6,95:1 */
  --pf-line: #e0dfe4;
  --pf-tint: #f2f1f5;
  --pf-control-border: #16161a;
  --pf-on-accent: #ffffff;      /* 7,91:1 auf Blau, 5,75:1 auf Pink */
  --pf-error: #b3261e;          /* 6,32:1 */
  --pf-warning: #7a5300;        /* 6,63:1 */

  /* Kategoriefarben, DESIGN.md Abschnitt 4 „Kategoriefarben“. Nur für
     Farbpunkt, Druckgang des Kategorieabschnitts und den aktiven
     Kategorieeintrag; nie ohne den Namen als Text. Jede Farbe hält auf dem
     Papier mindestens 3:1 (grafisches Element). --pf-cat-on-* ist die
     Schrift auf der gefüllten Fläche, mindestens 4,5:1. */
  --pf-cat-konzerte: #6d2bc4;       /* Violett, 7,27:1, weiße Schrift 7,52:1 */
  --pf-cat-partys: #c4126c;         /* Pink = Druckpink, 5,56:1, weiß 5,75:1 */
  --pf-cat-buehne: #c62828;         /* Rot, 5,44:1, weiß 5,62:1 */
  --pf-cat-film: #1f3bd6;           /* Blau = Druckblau, 7,65:1, weiß 7,91:1 */
  --pf-cat-kunst: #00707a;          /* Petrol dunkel, 5,64:1, weiß 5,84:1 */
  --pf-cat-lesungen: #1c9aa3;       /* Petrol hell, 3,27:1, Tinte 5,33:1 */
  --pf-cat-feste: #c2410c;          /* Orange dunkel, 5,01:1, weiß 5,18:1 */
  --pf-cat-maerkte: #d4700b;        /* Orange hell, 3,32:1, Tinte 5,26:1 */
  --pf-cat-sport: #2e7d32;          /* Grün dunkel, 4,96:1, weiß 5,13:1 */
  --pf-cat-familie: #4a9a2a;        /* Grün hell, 3,41:1, Tinte 5,11:1 */
  --pf-cat-workshops: #8a5a00;      /* Ocker dunkel, 5,73:1, weiß 5,93:1 */
  --pf-cat-offene-treffen: #ad8412; /* Ocker hell, 3,34:1, Tinte 5,23:1 */
  --pf-cat-weitere: #6b6b75;        /* Grau, 5,10:1, weiß 5,27:1 */

  /* Die Druckanmutung lebt von kräftigen Konturen. */
  --pf-rule: 2px;

  /* Ueberschriften, Wortmarke, Veranstaltungstitel und Zahlen. */
  --pf-font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, sans-serif;
  /* Fliesstext, Bedienung und Metadaten. */
  --pf-font-ui: "Manrope", "Helvetica Neue", Helvetica, sans-serif;

  --pf-space-1: 0.25rem;
  --pf-space-2: 0.5rem;
  --pf-space-3: 0.75rem;
  --pf-space-4: 1rem;
  --pf-space-5: 1.5rem;
  --pf-space-6: 2rem;
  --pf-space-7: 3rem;

  --pf-shell-max: 100rem;
  --pf-gutter: 2.75rem;
  --pf-column-gap: 2.8125rem;
  --pf-radius: 0;
  --pf-radius-control: 0.125rem;
  --pf-focus-ring: 2px solid var(--pf-accent);
}

/* ---------- Grundlagen ---------- */

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

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

body {
  margin: 0;
  background: var(--pf-paper);
  color: var(--pf-ink);
  font-family: var(--pf-font-ui);
  font-size: 1rem;
  line-height: 1.6;
  /* Die Fußzeile sitzt unten, auch wenn wenig Inhalt da ist. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.pf-footer {
  flex-shrink: 0;
  position: relative;
  background: var(--pf-paper);
}

/* Tastaturfokus bleibt immer sichtbar, DESIGN.md Abschnitt 7. */
:focus-visible {
  outline: var(--pf-focus-ring);
  outline-offset: 3px;
}

a {
  color: var(--pf-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover { text-decoration-thickness: 2px; }

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

/* hidden gilt immer, auch für Elemente mit eigener display-Angabe wie
   .pf-button. Sonst erschiene etwa „Ort merken“ ohne JavaScript. */
[hidden] { display: none !important; }

/* Sprungmarke zum Inhalt. */
.pf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pf-paper);
  color: var(--pf-accent);
  padding: var(--pf-space-3) var(--pf-space-4);
  border: 2px solid var(--pf-accent);
  z-index: 10;
}
.pf-skip:focus {
  left: var(--pf-space-4);
  top: var(--pf-space-2);
}

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

/* ---------- Schale ---------- */

.pf-shell {
  max-width: var(--pf-shell-max);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

/* ---------- Kopf ---------- */

.pf-header {
  border-bottom: var(--pf-rule) solid var(--pf-ink);
  position: relative;
  background: var(--pf-paper);
  z-index: 1;
}

.pf-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--pf-space-4);
  min-height: 5.5rem;
  padding-block: var(--pf-space-4);
}

.pf-header__place {
  font-family: var(--pf-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pf-muted);
  line-height: 1.5;
}

.pf-header__actions {
  display: flex;
  justify-content: flex-end;
}

/* Wortmarke: Kleinbuchstaben, gruener Schlusspunkt. */
.pf-wordmark {
  font-family: var(--pf-font-display);
  font-weight: 800;
  font-size: 2.125rem;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--pf-ink);
  text-decoration: none;
  white-space: nowrap;
}
.pf-wordmark:hover { text-decoration: none; }
.pf-wordmark__dot { color: var(--pf-accent2); }

/* ---------- Tageskopf ---------- */

.pf-dayhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pf-space-4);
  padding-block: var(--pf-space-6) var(--pf-space-5);
}

.pf-dayhead__title {
  font-family: var(--pf-font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
}
.pf-dayhead__title::after {
  content: ".";
  color: var(--pf-accent2);
}

.pf-dayhead__meta {
  font-size: 0.875rem;
  color: var(--pf-muted);
  margin: var(--pf-space-2) 0 0;
  /* Auf einer einzelnen Druckfläche hält gedämpfter Text 4,53:1, auf zwei
     übereinanderliegenden nur 3,37:1. Die Überlappung beginnt bei 72
     Prozent der Fensterbreite, diese Zeile endet davor. Das Maß muss sich
     auf das Fenster beziehen: ein Prozentwert gälte hier für das schmale
     Flex-Elternelement und bräche das Datum mitten entzwei. */
  max-width: min(34rem, 62vw);
}

/* ---------- Inhaltsraster ---------- */

.pf-layout {
  padding-bottom: var(--pf-space-7);
}

/* Der Mitmachen-Kasten steht wie eine Anzeige am Fuß der Liste, nicht
   als eigene Spalte: so bleibt der Liste die volle Breite. */
.pf-sidebar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-2) var(--pf-space-4);
  margin-top: var(--pf-space-5);
  border: var(--pf-rule) solid var(--pf-ink);
  padding: var(--pf-space-4);
  font-size: 0.9375rem;
  color: var(--pf-ink);
  background: var(--pf-paper);
  transform: rotate(-0.15deg);
}
.pf-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(9px, 9px);
  background: var(--pf-ink-blue);
  opacity: 0.55;
  pointer-events: none;
}
/* ::after wird nach ::before gemalt und deckt den Druckgang ab; beide liegen
   unter dem Inhalt. */
.pf-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pf-paper);
}
.pf-sidebar > * { position: relative; }
.pf-sidebar .pf-kicker { margin: 0; }
.pf-sidebar__text { margin: 0; flex: 1 1 16rem; color: var(--pf-muted); }
.pf-sidebar__aktion { margin: 0; }

/* ---------- Ausstellungen ---------- */

/* Ausstellungen laufen über viele Tage. Sie stehen nicht zwischen den
   datierten Karten, sondern gesammelt in einem Kasten unter dem Programm:
   dieselbe Kontur und derselbe versetzte Druckgang wie beim Mitmachen-
   Kasten, darin eine durch Linien gegliederte Liste. Siehe DESIGN.md
   Abschnitt 7 „Ausstellungen“. */
.pf-runs {
  position: relative;
  /* Eigener Stapelkontext wie beim gedrehten Mitmachen-Kasten: der
     Druckgang liegt unter dem Inhalt, aber über fremden Hintergründen. */
  isolation: isolate;
  margin-top: var(--pf-space-6);
  border: var(--pf-rule) solid var(--pf-ink);
  padding: var(--pf-space-4) var(--pf-space-5) var(--pf-space-3);
  background: var(--pf-paper);
}
.pf-runs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(9px, 9px);
  background: var(--pf-ink-pink);
  opacity: 0.55;
  pointer-events: none;
}
.pf-runs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pf-paper);
}
.pf-runs > * { position: relative; }
.pf-runs__title {
  font-family: var(--pf-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
}
.pf-runs__hint {
  margin: var(--pf-space-1) 0 var(--pf-space-3);
  font-size: 0.875rem;
  color: var(--pf-muted);
  max-width: 65ch;
}
.pf-runs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  column-gap: calc(var(--pf-space-5) + 0.5rem);
  align-items: start;
}
.pf-run {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-space-1);
  min-width: 0;
  padding-block: var(--pf-space-3);
  border-top: 1px solid var(--pf-line);
}
.pf-run__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pf-space-3);
  width: 100%;
}
.pf-run__title {
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--pf-ink);
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.pf-run__title:hover { color: var(--pf-accent); }
.pf-run__meta {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pf-muted);
}
.pf-run__until {
  font-weight: 600;
  color: var(--pf-ink);
}
/* Regeltermin: ausgeschrieben, nicht nur markiert. */
.pf-event__rule { color: var(--pf-ink); }

/* ---------- Rubrikzeile ---------- */

.pf-kicker {
  font-family: var(--pf-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0 0 var(--pf-space-3);
}

/* ---------- Veranstaltungsliste ---------- */

/* Statt einer durchlaufenden Zeilenliste liegen die Termine als Karten
   mit kräftiger Kontur nebeneinander, wie gedruckte Zettel. */
.pf-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* min() ist hier Pflicht: minmax(21rem, 1fr) allein erzwingt eine Spalte
     von 336px auch dann, wenn der Container schmaler ist, und die Seite
     läuft unter 370px waagerecht über. */
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: var(--pf-space-5) calc(var(--pf-space-5) + 0.5rem);
  /* Jede Karte behält ihre eigene Höhe. Ohne das streckt das Raster alle
     Karten einer Reihe auf die Höhe der höchsten: klappt jemand einen
     Termin auf, wächst die Karte daneben mit und sieht aus, als wäre sie
     ebenfalls geöffnet. */
  align-items: start;
}

.pf-event {
  position: relative;
  border: var(--pf-rule) solid var(--pf-ink);
  background: var(--pf-paper);
  display: flex;
  flex-direction: column;
  /* Jede zweite Karte kippt minimal in die andere Richtung. Mehr als ein
     knappes Grad wirkt schnell wie ein Fehler statt wie Absicht. */
  transform: rotate(-0.35deg);
}
.pf-event:nth-child(4n+2), .pf-event:nth-child(4n+3) { transform: rotate(0.4deg); }
.pf-event:nth-child(3n) { transform: rotate(0.15deg); }
.pf-event:focus-within,
.pf-event:hover { transform: rotate(0deg); }

/* Der zweite Druckgang sitzt minimal daneben, wie bei einer Risographie mit
   ungenauem Passer. Der Karteninhalt deckt die Fläche ab, sichtbar bleibt nur
   der versetzte Rand. Die Drehung der Karte erzeugt einen eigenen
   Stapelkontext, deshalb reicht z-index allein hier nicht. */
.pf-event > details {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--pf-paper);
}
.pf-event::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(9px, 9px);
  background: var(--pf-ink-blue);
  opacity: 0.55;
  pointer-events: none;
}
.pf-event:nth-child(4n+2)::before,
.pf-event:nth-child(4n+3)::before {
  background: var(--pf-ink-pink);
  transform: translate(8px, 10px);
}
.pf-event:nth-child(3n)::before { transform: translate(10px, 7px); }
.pf-event:focus-within::before,
.pf-event:hover::before { transform: translate(13px, 13px); opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .pf-event:focus-within::before,
  .pf-event:hover::before { transform: translate(9px, 9px); }
}

.pf-event__summary {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "kopf kopf"
    "titel titel"
    "meta zeichen";
  gap: var(--pf-space-2) var(--pf-space-3);
  padding: var(--pf-space-4);
  cursor: pointer;
  list-style: none;
  transition: background-color 140ms ease;
}
.pf-event__summary::-webkit-details-marker { display: none; }
.pf-event__summary:hover { background: var(--pf-tint); }

/* Kopfzeile der Karte: Uhrzeit und Preisetikett. */
.pf-event__head {
  grid-area: kopf;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pf-space-3);
}

.pf-event__time {
  font-family: var(--pf-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--pf-ink);
}
.pf-event__time--unknown {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pf-muted);
}

.pf-event__title {
  grid-area: titel;
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  display: block;
}

.pf-event__meta {
  grid-area: meta;
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pf-muted);
  margin: 0;
}
.pf-event__sep { padding-inline: 0.4em; }

.pf-event__price {
  font-family: var(--pf-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  white-space: nowrap;
  color: var(--pf-ink);
}
/* Ein belegter freier Eintritt bekommt ein gedrucktes Etikett. */
.pf-event__price--free {
  background: var(--pf-accent2);
  color: var(--pf-on-accent);
  padding: 0.25rem 0.5rem;
}
.pf-event__price--unknown {
  color: var(--pf-muted);
  font-weight: 400;
}
/* Unvollstaendige Preisangabe: sichtbar gekennzeichnet, nicht nur farblich. */
.pf-event__price--incomplete { color: var(--pf-warning); }

.pf-event__toggle {
  grid-area: zeichen;
  position: relative;
  width: 16px;
  height: 16px;
  align-self: end;
  justify-self: end;
  color: var(--pf-ink);
}
.pf-event__toggle::before,
.pf-event__toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 140ms ease;
}
.pf-event__toggle::before { left: 0; top: 7px; width: 16px; height: 2px; }
.pf-event__toggle::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.pf-event__summary:hover .pf-event__toggle { color: var(--pf-accent); }
[open] > .pf-event__summary .pf-event__toggle::after { transform: scaleY(0); }

/* Statusangaben immer ausgeschrieben, nie nur farblich. */
.pf-status {
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border: 1px solid currentColor;
}
.pf-status--cancelled { color: var(--pf-error); }
.pf-status--moved,
.pf-status--soldout { color: var(--pf-warning); }

.pf-event__details {
  padding: 0 var(--pf-space-4) var(--pf-space-4);
  border-top: 1px dashed var(--pf-line);
  margin-top: var(--pf-space-2);
  padding-top: var(--pf-space-3);
}
.pf-event__description { margin: 0 0 var(--pf-space-4); }
.pf-event__facts {
  margin: 0 0 var(--pf-space-4);
  font-size: 0.875rem;
  color: var(--pf-muted);
}
.pf-event__facts dt {
  font-weight: 600;
  color: var(--pf-ink);
}
.pf-event__facts dd { margin: 0 0 var(--pf-space-2); }
.pf-event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-4);
  font-size: 0.875rem;
}

/* ---------- Navigation und Filter ---------- */

.pf-datenav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-5);
  align-items: center;
  font-family: var(--pf-font-display);
  font-size: 0.9375rem;
  font-weight: 500;
}

.pf-datenav__link {
  color: var(--pf-ink);
  text-decoration: none;
  padding-block: var(--pf-space-2);
}
.pf-datenav__link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.pf-datenav__link[aria-current="page"],
.pf-datenav__link[aria-pressed="true"] {
  background: var(--pf-accent2);
  color: var(--pf-on-accent);
  padding: var(--pf-space-2) var(--pf-space-3);
  text-decoration: none;
  transform: rotate(-1deg);
}

/* Ein Raster mit festen Spalten statt eines umbrechenden Flusses: Die
   Leiste bleibt damit zuverlässig einzeilig, unabhängig davon, wie breit
   der längste Eintrag eines Auswahlfeldes ist. */
/* Der Bedienbereich liegt als freigestelltes Feld auf dem Druckbogen. Ohne
   eigenen Grund läuft der Platzhalter der Suche auf schmaleren Schirmen
   unter die Überlappung zweier Druckfarben und erreicht dort nur 2,71:1. */
.pf-filters {
  position: relative;
  background: var(--pf-paper);
  border-top: var(--pf-rule) solid var(--pf-ink);
  border-bottom: var(--pf-rule) solid var(--pf-ink);
  padding-block: var(--pf-space-3);
  margin-bottom: var(--pf-space-5);
  display: grid;
  grid-template-columns: minmax(8rem, 1.6fr) repeat(2, minmax(5rem, 1fr)) auto;
  gap: var(--pf-space-3) var(--pf-space-4);
  align-items: center;
}

.pf-search {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2);
  border-bottom: var(--pf-rule) solid var(--pf-control-border);
  padding-block: var(--pf-space-1);
  min-width: 0;
}
.pf-search__input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  padding: var(--pf-space-1) 0;
  flex: 1;
  min-width: 0;
}
.pf-search__input:focus { outline: none; }
.pf-search:focus-within { border-bottom-color: var(--pf-accent); }

.pf-field {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-2);
  font-size: 0.875rem;
}
.pf-field select,
.pf-field input[type="date"] {
  font: inherit;
  font-family: var(--pf-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pf-ink);
  background: transparent;
  border: 0;
  border-bottom: var(--pf-rule) solid var(--pf-control-border);
  border-radius: 0;
  padding: var(--pf-space-2) var(--pf-space-2) var(--pf-space-2) 0;
  min-height: 2.75rem;
  cursor: pointer;
}
.pf-field select:hover { border-bottom-color: var(--pf-accent); }
.pf-field select:focus-visible { border-bottom-color: var(--pf-accent); }

/* Ein Auswahlfeld richtet sich sonst nach seinem längsten Eintrag, etwa
   "Besondere Filmtermine". Im Raster füllt es stattdessen seine Spalte. */
.pf-field {
  min-width: 0;
}
.pf-field select {
  width: 100%;
  text-overflow: ellipsis;
}

/* Die Schaltfläche steht in der letzten, sich nach ihrem Inhalt
   richtenden Spalte. */
.pf-filters__apply { white-space: nowrap; }

/* Ein verstecktes Feld wäre im Raster trotzdem eine eigene Zelle und
   würde alles verschieben. */
.pf-filters input[type="hidden"] {
  display: none;
}

/* ---------- Buttons ---------- */

.pf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-2);
  font-family: var(--pf-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  min-height: 2.75rem;
  padding: var(--pf-space-3) var(--pf-space-5);
  border: var(--pf-rule) solid var(--pf-ink);
  border-radius: 0;
  background: var(--pf-accent);
  color: var(--pf-on-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.pf-button:hover { background: var(--pf-accent-dark); }
.pf-button:focus-visible {
  outline: 2px solid var(--pf-paper);
  outline-offset: -5px;
  box-shadow: 0 0 0 2px var(--pf-accent);
}
.pf-button--quiet {
  background: var(--pf-paper);
  color: var(--pf-ink);
}
.pf-button--quiet:hover { background: var(--pf-tint); }
/* Konturbutton auf Papier: der helle Innenring der gefüllten Fläche wäre
   unsichtbar, daher der normale Ring mit 3px Abstand (Abschnitt 7). */
.pf-button--quiet:focus-visible {
  outline: var(--pf-focus-ring);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- Zustaende ---------- */

.pf-empty,
.pf-error {
  padding-block: var(--pf-space-6);
  max-width: 65ch;
}
.pf-empty__title,
.pf-error__title {
  font-family: var(--pf-font-display);
  font-weight: 400;
  font-size: 1.5625rem;
  margin: 0 0 var(--pf-space-3);
}
.pf-error__title { color: var(--pf-error); }

/* ---------- Fusszeile ---------- */

.pf-footer {
  border-top: 1px solid var(--pf-line);
  padding-block: var(--pf-space-5) var(--pf-space-7);
  font-size: 0.8125rem;
  color: var(--pf-muted);
}
.pf-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-4);
  margin-bottom: var(--pf-space-3);
}

/* ---------- Mittlere Breiten ---------- */

@media (max-width: 1000px) {
  :root {
    --pf-gutter: 1.75rem;      /* 28px */
    --pf-column-gap: 1.75rem;
  }

  /* Suche, Kategorie, Preis und Schaltfläche passen hier weiter in eine
     Zeile, ohne die Beschriftungen abzuschneiden. Den Stadtteilfilter gibt
     es seit dem 26. September 2026 nicht mehr. */
}

/* ---------- Mobil ---------- */

@media (max-width: 720px) {
  :root { --pf-gutter: 1.25rem; } /* 20px */

  /* Auf schmalen Flächen zwei Spalten: Suche über die volle Breite,
     darunter Kategorie und Preis nebeneinander und die Schaltfläche über
     die volle Breite, damit keine halbe Zeile leer bleibt. Drei Zeilen wie
     zuvor, siehe Dichteziel in DESIGN.md Abschnitt 6. */
  .pf-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pf-space-2) var(--pf-space-4);
  }
  .pf-search,
  .pf-filters__apply { grid-column: 1 / -1; }

  /* Die Datumsnavigation kompakter, damit sie in eine Zeile passt. */
  .pf-datenav { gap: var(--pf-space-4); font-size: 0.875rem; }

  /* Die Rubrikzeile kostet Höhe, ohne Neues zu sagen. */
  .pf-kicker--optional { display: none; }

  .pf-header__inner {
    grid-template-columns: auto 1fr;
    min-height: 0;
    padding-block: var(--pf-space-3);
  }
  .pf-header__place { display: none; }

  .pf-wordmark {
    font-size: 1.875rem;
    letter-spacing: -0.04em;
  }

  .pf-dayhead {
    padding-block: var(--pf-space-4) var(--pf-space-3);
  }
  .pf-filters { padding-block: var(--pf-space-2); margin-bottom: var(--pf-space-3); }
  .pf-dayhead__title { font-size: clamp(2.5rem, 2.1rem + 2vw, 2.8125rem); }
  .pf-dayhead__meta { max-width: none; }

  /* Der Mitmachen-Kasten steht gerade, auf schmalen Flächen fällt jede
     Drehung als Fehler auf. */
  .pf-sidebar { transform: none; }

  /* Der Druckgang rückt näher heran, sonst ragt er in den Seitenrand. */
  .pf-event::before,
  .pf-event:nth-child(4n+2)::before,
  .pf-event:nth-child(4n+3)::before,
  .pf-event:nth-child(3n)::before { transform: translate(5px, 5px); }
  .pf-event:focus-within::before,
  .pf-event:hover::before { transform: translate(7px, 7px); }
  .pf-sidebar::before { transform: translate(5px, 5px); }
  .pf-runs::before { transform: translate(5px, 5px); }
  .pf-runs { padding-inline: var(--pf-space-4); }
  .pf-run__meta { font-size: 0.75rem; }
  .pf-list { gap: var(--pf-space-4); }

  .pf-event__summary {
    gap: var(--pf-space-2);
    padding: var(--pf-space-4);
  }
  .pf-event__title { font-size: 1.1875rem; }
  .pf-event__meta { font-size: 0.75rem; }
  .pf-event__time { font-size: 0.875rem; }
  .pf-event__price { font-size: 0.875rem; }
  .pf-event__details {
    padding-left: var(--pf-space-2);
    padding-right: var(--pf-space-2);
  }
}

@media (max-width: 370px) {
  :root { --pf-gutter: 1rem; }
  .pf-wordmark { font-size: 1.625rem; }
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Veranstaltungsseite ---------- */

.pf-event-page,
.pf-text-page,
.pf-form-page {
  max-width: 44rem;
  padding-block: var(--pf-space-5) var(--pf-space-7);
}

.pf-event-page__head { margin-bottom: var(--pf-space-5); }

.pf-event-page__title,
.pf-page-title {
  font-family: var(--pf-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 var(--pf-space-3);
}

.pf-event-page__subtitle {
  font-family: var(--pf-font-display);
  font-size: 1.25rem;
  color: var(--pf-muted);
  margin: 0;
}

.pf-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 65ch;
}

/* Faktenliste mit Beschriftung links */
.pf-facts {
  margin: 0 0 var(--pf-space-5);
  border-top: 1px solid var(--pf-line);
}
.pf-facts__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--pf-space-4);
  padding-block: var(--pf-space-3);
  border-bottom: 1px solid var(--pf-line);
}
.pf-facts dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-muted);
  line-height: 1.6;
}
.pf-facts dd { margin: 0; }

.pf-incomplete { color: var(--pf-warning); }
.pf-hint {
  font-size: 0.8125rem;
  color: var(--pf-muted);
  margin: var(--pf-space-1) 0 0;
}

.pf-event-page__text { max-width: 65ch; margin-bottom: var(--pf-space-5); }

.pf-event-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-4);
  padding-block: var(--pf-space-4);
  margin-bottom: var(--pf-space-5);
}

.pf-further,
.pf-provenance {
  border-top: 1px solid var(--pf-line);
  padding-top: var(--pf-space-4);
  margin-top: var(--pf-space-5);
}
.pf-further__title,
.pf-provenance__title {
  font-family: var(--pf-font-display);
  font-weight: 400;
  font-size: 1.4375rem;
  margin: 0 0 var(--pf-space-3);
}
.pf-provenance { font-size: 0.875rem; color: var(--pf-muted); }
.pf-provenance p { margin: 0 0 var(--pf-space-2); }

.pf-further__item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--pf-space-3);
  align-items: baseline;
  padding-block: var(--pf-space-3);
  text-decoration: none;
  color: inherit;
}
.pf-further__item:hover { background: var(--pf-tint); }

/* Datum vor der Uhrzeit auf mehrtägigen Listen */
.pf-event__date {
  display: block;
  font-size: 0.75rem;
  color: var(--pf-muted);
  line-height: 1.4;
}

/* ---------- Hinweise ---------- */

.pf-notice {
  border-left: 3px solid var(--pf-line);
  padding: var(--pf-space-3) var(--pf-space-4);
  margin: 0 0 var(--pf-space-5);
  background: var(--pf-tint);
  max-width: 65ch;
}
.pf-notice--error   { border-left-color: var(--pf-error); }
.pf-notice--warning { border-left-color: var(--pf-warning); }
.pf-notice--ok      { border-left-color: var(--pf-accent); }

/* ---------- Formulare ---------- */

.pf-form { margin-top: var(--pf-space-5); }

.pf-field-block { margin-bottom: var(--pf-space-5); }

.pf-field-block > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--pf-space-2);
}

.pf-field-block input[type="text"],
.pf-field-block input[type="number"],
.pf-field-block input[type="password"],
.pf-field-block input[type="email"],
.pf-field-block input[type="url"],
.pf-field-block input[type="date"],
.pf-field-block input[type="time"],
.pf-field-block select,
.pf-field-block textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  color: var(--pf-ink);
  background: var(--pf-paper);
  border: 1px solid var(--pf-control-border);
  border-radius: var(--pf-radius-control);
  padding: var(--pf-space-3);
  min-height: 2.75rem;
}
.pf-field-block textarea {
  min-height: 7rem;
  line-height: 1.6;
  resize: vertical;
}
.pf-field-block input:focus-visible,
.pf-field-block select:focus-visible,
.pf-field-block textarea:focus-visible {
  outline: var(--pf-focus-ring);
  outline-offset: 1px;
  border-color: var(--pf-accent);
}

.pf-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--pf-space-4);
}

.pf-checkbox {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2);
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: var(--pf-space-2);
  min-height: 2.75rem;
}
.pf-checkbox input { width: 1.125rem; height: 1.125rem; }

/* ---------- Textseiten ---------- */

.pf-text-page h2 {
  font-family: var(--pf-font-display);
  font-weight: 400;
  font-size: 1.5625rem;
  line-height: 1.2;
  margin: var(--pf-space-6) 0 var(--pf-space-3);
}
.pf-text-page p {
  max-width: 65ch;
  margin: 0 0 var(--pf-space-4);
}

@media (max-width: 720px) {
  .pf-facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--pf-space-1); }
  .pf-further__item { grid-template-columns: 3.5rem minmax(0, 1fr); }
}

/* ---------- Druckflächen ---------- */

/* Zwei Farbflächen liegen hinter dem Inhalt, wie zwei Durchgänge einer
   Risographie. Sie sind stark abgeschwächt, damit jeder Text darüber
   seinen Kontrast behält. Reine Dekoration, kein Informationsträger. */
/* Der Druckbogen. Er hängt am Seitenanfang und scrollt mit, statt am
   Fenster zu kleben: fixiert läge er früher oder später unter jedem Text
   und müsste so blass bleiben, dass von der Risographie nur ein
   Farbschleier übrig ist. So bleibt er in der Kopfzone, wo ausschließlich
   Tinte steht, und darf kräftig sein. Der Rest der Seite bleibt Papier. */
.pf-print {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34rem;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

/* Kein display hier: ein absolut positioniertes Element wird ohnehin zum
   Block, und die Angabe wäre spezifischer als das display:none, mit dem
   schmale Schirme einzelne Flächen abschalten. */
.pf-print span {
  position: absolute;
}

/* Die Formen überlappen sichtbar, das ist der zweite Druckgang. Tinte hält
   darauf 8,86:1, auch wo zwei Farben übereinanderliegen. Gedämpfter Text
   käme dort auf 3,35:1 und darf die Überlappungszone nie erreichen, siehe
   DESIGN.md Abschnitt 8. */
.pf-print__blau {
  left: 52%;
  top: -7rem;
  width: 27rem;
  height: 27rem;
  background: var(--pf-ink-blue);
  /* Etwas heller als die beiden anderen: nur unter dieser Fläche kann
     gedämpfter Text liegen, nämlich das Ende der Datumszeile. Bei 0,2
     hält er 4,68:1, bei 0,22 nur noch 4,53:1 und damit ohne Reserve. */
  opacity: 0.2;
  transform: rotate(14deg);
}
.pf-print__kreis {
  left: 72%;
  top: 2rem;
  width: 21rem;
  height: 21rem;
  background: var(--pf-ink-pink);
  opacity: 0.22;
  border-radius: 50%;
}
.pf-print__pink {
  left: 84%;
  top: 13rem;
  width: 16rem;
  height: 16rem;
  background: var(--pf-ink-pink);
  opacity: 0.2;
  transform: rotate(-18deg);
}

/* Der Rollenhinweis bleibt auch im farbigen Kopfbereich gut lesbar. */
.pf-editor, .pf-code-box { background: var(--pf-paper); }
.pf-editor { padding-block: var(--pf-space-6); }
.pf-editor-nav, .pf-editor-actions { display: flex; flex-wrap: wrap; gap: var(--pf-space-4); align-items: center; margin-block: var(--pf-space-5); }
.pf-review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pf-space-5); }
.pf-review-grid > *, .pf-review-list li > * { min-width: 0; overflow-wrap: anywhere; }
.pf-review-message { border-left: var(--pf-rule) solid var(--pf-accent); padding: var(--pf-space-4); background: var(--pf-tint); }
.pf-review-message p { white-space: pre-wrap; }
.pf-review-list { list-style: none; padding: 0; margin: 0; }
.pf-review-list li + li { border-top: 1px solid var(--pf-line); }
.pf-code-box { border: var(--pf-rule) solid var(--pf-ink); padding: var(--pf-space-4); margin-block: var(--pf-space-5); }
.pf-code-box textarea { width: 100%; resize: vertical; padding: var(--pf-space-3); font: inherit; overflow-wrap: anywhere; border: 2px solid var(--pf-ink); }
.pf-editor-actions .pf-button { white-space: normal; }
@media (max-width: 720px) {
  .pf-review-grid { grid-template-columns: minmax(0, 1fr); gap: var(--pf-space-5); }
}

/* Prüftisch: dauerhafte Eingangsliste und ein direkt editierbarer Vorgang. */
main.pf-shell:has(.pf-workspace) { max-width: 92rem; }
.pf-editor-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pf-space-4); }
.pf-editor-header h1 { font: 800 2.75rem/1 var(--pf-font-display); letter-spacing: -0.045em; margin: 0; }
.pf-editor-eyebrow { font: 600 0.75rem/1.5 var(--pf-font-display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--pf-muted); margin: 0 0 var(--pf-space-2); }
.pf-editor-header .pf-editor-nav { font-size: 0.875rem; margin: 0; }
.pf-editor-feedback { font-size: 0.875rem; color: var(--pf-muted); min-height: 1.5em; margin-block: var(--pf-space-4); }
.pf-editor-feedback[data-error] { color: var(--pf-error); }
.pf-workspace { display: grid; grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 2fr); border: var(--pf-rule) solid var(--pf-ink); height: max(32rem, calc(100dvh - 17rem)); max-height: 70rem; }
.pf-workspace > * { min-width: 0; min-height: 0; }
.pf-inbox { display: flex; flex-direction: column; border-right: var(--pf-rule) solid var(--pf-ink); }
.pf-inbox-heading { padding: var(--pf-space-4); border-bottom: var(--pf-rule) solid var(--pf-ink); }
.pf-inbox-heading h2 { display: flex; justify-content: space-between; gap: var(--pf-space-3); font: 700 1.125rem/1.4 var(--pf-font-display); margin: 0; }
.pf-inbox-heading h2 span { color: var(--pf-accent); font-variant-numeric: tabular-nums; }
.pf-inbox-heading p { margin: var(--pf-space-1) 0 0; font-size: 0.75rem; color: var(--pf-muted); }
.pf-editor-tabs { display: flex; flex-wrap: wrap; border-bottom: var(--pf-rule) solid var(--pf-ink); gap: var(--pf-space-3); padding-inline: var(--pf-space-4); }
.pf-editor-tabs a { display: inline-flex; align-items: center; min-height: 44px; font: 600 0.875rem/1.4 var(--pf-font-display); }
.pf-editor-tabs a[aria-current] { border-bottom: 3px solid var(--pf-accent); text-decoration: none; }
.pf-catalog-search { margin-top: var(--pf-space-4); }
.pf-catalog-search .pf-field-block { margin-bottom: var(--pf-space-3); }
.pf-catalog-search .pf-button { width: 100%; }
.pf-event-danger { border-top: var(--pf-rule) solid var(--pf-line); padding-block: var(--pf-space-4); margin-top: var(--pf-space-6); }
.pf-event-danger summary { cursor: pointer; color: var(--pf-error); font-weight: 600; min-height: 44px; }
.pf-event-danger p { font-size: 0.875rem; }
.pf-event-danger .pf-button { white-space: normal; margin-top: var(--pf-space-4); }
.pf-event-duplicates { border-top: var(--pf-rule) solid var(--pf-line); padding-block: var(--pf-space-4); margin-top: var(--pf-space-6); }
.pf-event-duplicates p, .pf-event-duplicates .pf-facts { font-size: 0.875rem; }
.pf-event-duplicates dd { padding-bottom: var(--pf-space-3); }
.pf-event-duplicates form { margin-top: var(--pf-space-4); }
.pf-event-duplicates .pf-button { white-space: normal; margin: var(--pf-space-2) var(--pf-space-3) 0 0; }
.pf-inbox-scroll { overflow-y: auto; flex: 1; scrollbar-gutter: stable; }
.pf-review-item { display: block; color: var(--pf-ink); text-decoration: none; border-left: 4px solid transparent; padding: var(--pf-space-4) var(--pf-space-3); overflow-wrap: anywhere; }
.pf-review-item:hover { background: var(--pf-tint); }
.pf-review-item[aria-current] { background: var(--pf-tint); border-left-color: var(--pf-accent); }
.pf-review-item:focus-visible { outline-offset: -3px; }
.pf-review-item strong { display: block; font: 700 1.125rem/1.3 var(--pf-font-display); margin-block: var(--pf-space-2); }
.pf-review-item__meta, .pf-review-item__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pf-space-1) var(--pf-space-2); font-size: 0.75rem; line-height: 1.5; color: var(--pf-muted); }
.pf-review-item__state { color: var(--pf-accent); font-weight: 600; }
.pf-inbox-pages { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pf-space-3); padding-inline: var(--pf-space-4); border-top: 1px solid var(--pf-line); font-size: 0.875rem; }
.pf-inbox-pages a { display: inline-flex; min-height: 44px; align-items: center; }
.pf-inbox-empty { padding: var(--pf-space-4); color: var(--pf-muted); }
.pf-review-pane { overflow-y: auto; padding: var(--pf-space-5) var(--pf-space-6); scrollbar-gutter: stable; overflow-wrap: anywhere; scroll-padding-block: var(--pf-space-5); }
.pf-review-heading { border-bottom: var(--pf-rule) solid var(--pf-ink); padding-bottom: var(--pf-space-4); margin-bottom: var(--pf-space-5); }
.pf-review-heading h2, .pf-review-empty h2 { font: 700 clamp(1.5rem, 2.5vw, 2rem)/1.15 var(--pf-font-display); letter-spacing: -0.025em; margin: 0; }
.pf-review-heading > p:last-child { font-size: 0.875rem; color: var(--pf-muted); margin-bottom: 0; }
.pf-review-current { border-bottom: 1px solid var(--pf-line); padding-bottom: var(--pf-space-4); }
.pf-review-current .pf-facts { font-size: 0.875rem; }
.pf-review-grid h3 { font: 700 1.125rem/1.4 var(--pf-font-display); margin: 0 0 var(--pf-space-3); }
.pf-review-grid section > p { font-size: 0.875rem; }
.pf-review-pane .pf-form { max-width: none; }
.pf-review-pane .pf-field-row { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.pf-review-pane .pf-editor-actions { padding-top: var(--pf-space-4); border-top: var(--pf-rule) solid var(--pf-ink); }
.pf-review-empty { padding-block: var(--pf-space-7); max-width: 42ch; }
.pf-workspace[aria-busy="true"] .pf-review-heading { opacity: 0.6; }
@media (max-width: 960px) {
  .pf-workspace { grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.5fr); }
  .pf-review-pane { padding: var(--pf-space-4); }
}
@media (max-width: 720px) {
  .pf-editor-header h1 { font-size: 2.25rem; }
  .pf-workspace { grid-template-columns: minmax(0, 1fr); height: auto; max-height: none; }
  .pf-inbox { border-right: 0; border-bottom: var(--pf-rule) solid var(--pf-ink); }
  .pf-inbox-scroll { max-height: 15rem; flex: auto; }
  .pf-review-pane { overflow: visible; }
  .pf-review-pane .pf-facts { grid-template-columns: minmax(0, 1fr); }
  .pf-review-pane .pf-facts dd { margin-left: 0; }
}

/* Keine einzelnen Wörter allein in der letzten Zeile; Überschriften
   gleichmäßig umbrechen. Browser ohne Unterstützung umbrechen wie bisher. */
p, li, dd, dt, summary, figcaption { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.pf-platform-role {
  color: var(--pf-ink);
  background: var(--pf-paper);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Der Inhalt liegt über den Farbflächen. */
.pf-shell { position: relative; }

@media (max-width: 720px) {
  /* Auf kleinen Flächen nur eine Fläche, sonst wird es unruhig. */
  /* Auf schmalen Flächen bleibt nur eine Druckfläche. Zwei würden sich
     hier zwangsläufig überlagern, und die lange Datumszeile des
     Wochenendes läuft über die volle Breite: auf der Überlappung erreicht
     sie 3,42:1. Eine einzelne Fläche hält 4,68:1. */
  .pf-print { height: 20rem; }
  .pf-print__blau { left: 34%; top: -5rem; width: 20rem; height: 20rem; }
  .pf-print__kreis,
  .pf-print__pink { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-event,
  .pf-event:nth-child(4n+2),
  .pf-event:nth-child(4n+3),
  .pf-event:nth-child(3n) { transform: none; }
}
/* Quellenbetrieb: derselbe zweigeteilte Prüftisch, keine Dashboard-Kacheln. */
.pf-crawler-settings { margin-block: 1.5rem; border-block: 1px solid var(--pf-line); padding-block: 1rem; }
.pf-crawler-settings summary { cursor: pointer; min-height: 44px; font-weight: 700; }
.pf-crawler-check { display: flex; align-items: center; gap: .75rem; min-height: 44px; }
.pf-crawler-check input { width: auto; }
.pf-crawl-runs, .pf-crawl-messages { list-style: none; padding: 0; }
.pf-crawl-runs li, .pf-crawl-messages li { padding-block: 1rem; border-bottom: 1px solid var(--pf-line); overflow-wrap: anywhere; }
.pf-crawl-runs p, .pf-crawl-messages p { margin-block: .35rem; }
.pf-crawl-runs [aria-current] { color: var(--pf-accent); font-weight: 700; }
.pf-crawl-warning { color: var(--pf-warning); }
.pf-crawl-url { font-size: .875rem; overflow-wrap: anywhere; }

/* Art und Regelzeiten im Prüftisch: eigener, durch eine Linie abgesetzter
   Bereich unter der geprüften Fassung, siehe DESIGN.md Abschnitt 7. */
.pf-event-rule { border-top: var(--pf-rule) solid var(--pf-line); padding-block: var(--pf-space-4); margin-top: var(--pf-space-6); }
.pf-event-rule h3 { margin-top: 0; }
.pf-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pf-fieldset legend { font-weight: 600; padding: 0; margin-bottom: var(--pf-space-2); }
/* Abstand wie zwischen Feldblöcken, sonst klebt das folgende Label an der
   letzten Auswahl (Browserprüfung 25. September 2026). */
.pf-event-rule .pf-fieldset,
.pf-event-rule .pf-form > .pf-checkbox { margin-bottom: var(--pf-space-5); }

/* ---------- Tagesprogramm: Abschnitte und kompakte Zeilen ---------- */

/* Betreiberauftrag vom 26. September 2026, DESIGN.md Abschnitt 7
   „Tagesprogramm“. Statt einer Kartenwand je Termin eine Zeile: Uhrzeit,
   Titel, Ort · Stadtteil · Kategorie, Preis und Status. Die Abschnitte
   (Tageszeiten, Läuft gerade, Schon vorbei, Regelmäßiges & Kurse) sind
   Kästen mit Kontur und versetztem Druckgang wie der Ausstellungskasten. */

/* Die Schale hat eine feste Breite. Sonst würde eine waagerecht
   verschiebbare Zeile (Kategorien, Sprungmarken) mit ihrer vollen
   Inhaltsbreite die ganze Seite verbreitern. */
main.pf-shell { width: 100%; min-width: 0; }

/* Suche, Preis und Schaltfläche; die Kategorie steht als Auswahl darunter. */
.pf-filters {
  grid-template-columns: minmax(8rem, 2fr) minmax(7rem, 1fr) auto;
  margin-bottom: var(--pf-space-3);
}

/* Kategorien mit Trefferzahl. Links, ohne JavaScript bedienbar. */
.pf-chips { margin: 0 0 var(--pf-space-5); }
.pf-chips__list {
  list-style: none;
  margin: 0;
  padding: var(--pf-space-1) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-2);
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: var(--pf-rule) solid var(--pf-ink);
  background: var(--pf-paper);
  color: var(--pf-ink);
  font-family: var(--pf-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.pf-chip:hover { background: var(--pf-tint); text-decoration: underline; }
.pf-chip__count {
  font-weight: 400;
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}
/* Aktiv wie die aktive Datumsauswahl: gedrucktes Etikett, dazu
   Unterstreichung und aria-current. Nie nur die Farbe. */
.pf-chip[aria-current="true"] {
  background: var(--pf-accent2);
  border-color: var(--pf-accent2);
  color: var(--pf-on-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.pf-chip[aria-current="true"] .pf-chip__count { color: var(--pf-on-accent); }
.pf-chip--mine { border-style: dashed; }

/* Rollenhinweis einmal über der Liste statt in jeder Zeile. */
.pf-platform-role--list { margin: 0 0 var(--pf-space-3); }

/* Sprungmarken zu den Abschnitten. */
.pf-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--pf-space-4);
  margin: 0 0 var(--pf-space-2);
  font-family: var(--pf-font-display);
  font-size: 0.9375rem;
}
.pf-jump__now { margin: 0; font-weight: 700; }
.pf-jump__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--pf-space-4);
}
.pf-jump__list a {
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--pf-ink);
  font-weight: 500;
}
.pf-jump__count {
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}

/* Abschnitt als Druckbogen. */
.pf-slot {
  position: relative;
  isolation: isolate;
  margin-top: var(--pf-space-5);
  border: var(--pf-rule) solid var(--pf-ink);
  padding: var(--pf-space-3) var(--pf-space-5) var(--pf-space-1);
  background: var(--pf-paper);
  scroll-margin-top: var(--pf-space-4);
}
.pf-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(9px, 9px);
  background: var(--pf-ink-blue);
  opacity: 0.55;
  pointer-events: none;
}
.pf-slot:nth-of-type(even)::before { background: var(--pf-ink-pink); }
.pf-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pf-paper);
}
.pf-slot > * { position: relative; }
.pf-slot__title {
  font-family: var(--pf-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
}
.pf-slot__range,
.pf-slot__count {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--pf-muted);
  font-variant-numeric: tabular-nums;
}
.pf-slot__hint {
  font-size: 0.8125rem;
  color: var(--pf-muted);
  margin: var(--pf-space-1) 0 0;
  max-width: 65ch;
}

/* Zugeklappte Abschnitte: Schon vorbei, Regelmäßiges & Kurse. */
.pf-slot--folded { padding-bottom: var(--pf-space-3); }
.pf-slot--folded[open] { padding-bottom: var(--pf-space-1); }
.pf-slot__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-3);
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}
.pf-slot__summary::-webkit-details-marker { display: none; }
.pf-slot__summary:hover .pf-slot__title { text-decoration: underline; text-decoration-thickness: 2px; }
.pf-slot--folded .pf-slot__title { font-size: 1.375rem; font-weight: 700; }
.pf-slot__toggle,
.pf-row__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--pf-ink);
}
.pf-slot__toggle::before, .pf-slot__toggle::after,
.pf-row__toggle::before, .pf-row__toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 140ms ease;
}
.pf-slot__toggle::before, .pf-row__toggle::before { left: 0; top: 7px; width: 16px; height: 2px; }
.pf-slot__toggle::after, .pf-row__toggle::after { left: 7px; top: 0; width: 2px; height: 16px; }
[open] > .pf-slot__summary .pf-slot__toggle::after,
[open] > .pf-row__summary .pf-row__toggle::after { transform: scaleY(0); }

/* Die Zeile. Uhrzeit links, Titel und Metazeile in der Mitte, Preis und
   Status rechts; das Öffnungszeichen sitzt oben rechts. Das details-
   Element spannt unter der Zeile, sein summary ist herausgelöst, damit
   geschlossen keine zusätzliche Zeile entsteht und kein Link im summary
   liegt. */
.pf-rows {
  list-style: none;
  margin: var(--pf-space-2) 0 0;
  padding: 0;
}
.pf-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto 2.75rem;
  grid-template-areas:
    "time title price ."
    "time meta  price ."
    "more more  more  more";
  column-gap: var(--pf-space-4);
  padding-block: var(--pf-space-3);
  border-top: 1px solid var(--pf-line);
}
.pf-row:first-child { border-top: 0; }
.pf-row__time {
  grid-area: time;
  margin: 0;
  font-family: var(--pf-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pf-row__open,
.pf-row__state {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0;
  line-height: 1.3;
}
.pf-row__open { font-weight: 600; color: var(--pf-muted); }
/* „läuft“ und „vorbei“ ausgeschrieben, in Tinte. */
.pf-row__state { font-family: var(--pf-font-ui); font-weight: 700; margin-top: 0.2rem; }
.pf-row__title {
  grid-area: title;
  margin: 0;
  font-family: var(--pf-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.pf-row__title a { color: var(--pf-ink); text-decoration-thickness: 1px; }
.pf-row__title a:hover { color: var(--pf-accent); text-decoration-thickness: 2px; }
.pf-row__meta {
  grid-area: meta;
  margin: var(--pf-space-1) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pf-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.pf-row__place { color: inherit; }
.pf-row__place:hover { color: var(--pf-accent); }
.pf-row__price {
  grid-area: price;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pf-space-1);
}
.pf-row__more { grid-area: more; min-width: 0; }
.pf-row__summary {
  position: absolute;
  top: 0.25rem;
  right: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}
.pf-row__summary::-webkit-details-marker { display: none; }
.pf-row__summary:hover { background: var(--pf-tint); }
.pf-row__summary:hover .pf-row__toggle { color: var(--pf-accent); }
.pf-row__details {
  margin: var(--pf-space-3) 0 0 calc(4.75rem + var(--pf-space-4));
  padding-top: var(--pf-space-3);
  border-top: 1px dashed var(--pf-line);
}
.pf-row__text {
  margin: 0 0 var(--pf-space-3);
  max-width: 65ch;
  font-size: 0.9375rem;
  white-space: pre-line;
}
.pf-event-page__text p { white-space: pre-line; }

.pf-more { padding-block: var(--pf-space-5); margin: 0; }

@media (max-width: 720px) {
  /* Suche über die volle Breite, darunter Preis und Schaltfläche. */
  .pf-filters { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-filters__apply { grid-column: auto; }

  /* Kategorien und Sprungmarken als eine waagerecht verschiebbare Zeile
     innerhalb der Spalte; die Seite selbst läuft nie über. Jeder Eintrag
     ist ein Link und per Tastatur erreichbar. */
  .pf-chips { margin-bottom: var(--pf-space-3); }
  .pf-chips__list,
  .pf-jump__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .pf-chips__list > li,
  .pf-jump__list > li { flex: 0 0 auto; }
  .pf-jump { display: block; font-size: 0.875rem; }
  .pf-jump__now { padding-top: var(--pf-space-1); }

  .pf-slot { padding-inline: var(--pf-space-4); margin-top: var(--pf-space-4); }
  .pf-slot::before { transform: translate(5px, 5px); }
  .pf-slot__title { font-size: 1.5rem; }
  .pf-slot--folded .pf-slot__title { font-size: 1.1875rem; }

  .pf-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-areas:
      "time title"
      "time meta"
      "time price"
      "more more";
    column-gap: var(--pf-space-3);
  }
  .pf-row__time { font-size: 1.125rem; }
  .pf-row__title { font-size: 1.0625rem; }
  .pf-row__price {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    min-height: 2.75rem;
    padding-right: 3rem;
    margin-top: var(--pf-space-1);
  }
  /* Das Öffnungszeichen steht neben dem Preis, an der Stelle, an der es
     ohne Herauslösen stünde. */
  .pf-row__summary { top: auto; margin-top: -2.75rem; }
  .pf-row__details { margin-left: 0; }
}

@media (max-width: 370px) {
  .pf-slot { padding-inline: var(--pf-space-3); }
  .pf-row { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--pf-space-2); }
}

/* ---------- Ortsseiten und „Meine Orte“ ---------- */

/* Ortsseite: derselbe Tageskopf, der Ortsname ist das Plakat. Lange Namen
   brechen um statt die Seite zu verbreitern. */
.pf-placehead__title {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.pf-placehead .pf-hint { max-width: min(34rem, 62vw); }
.pf-placehead__kicker {
  margin: 0 0 var(--pf-space-2);
  font-family: var(--pf-font-display);
  font-size: 0.875rem;
  font-weight: 600;
}
.pf-placehead__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pf-space-2);
  max-width: 22rem;
}
/* Merken: Konturbutton mit Linienstern. Gedrückt füllt sich der Stern,
   dazu aria-pressed und ein ausgeschriebener Hinweis, nie nur die Farbe. */
.pf-star__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.pf-star[aria-pressed="true"] { background: var(--pf-tint); }
.pf-star[aria-pressed="true"] .pf-star__icon { fill: var(--pf-accent2); stroke: var(--pf-accent2); }
.pf-star__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--pf-muted);
  background: var(--pf-paper);
  text-align: right;
}
.pf-filters--place { grid-template-columns: minmax(7rem, 16rem) auto; justify-content: start; }

/* Orte, deren Name zur Suche passt. */
.pf-placematch {
  margin: 0 0 var(--pf-space-4);
  padding: var(--pf-space-3) 0;
  border-bottom: 1px solid var(--pf-line);
}
.pf-placematch__title {
  margin: 0 0 var(--pf-space-1);
  font-family: var(--pf-font-display);
  font-weight: 700;
}
.pf-placematch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-1) var(--pf-space-5);
}
.pf-placematch__list a { display: inline-block; padding-block: var(--pf-space-2); font-weight: 600; }
.pf-placematch__count { font-size: 0.8125rem; color: var(--pf-muted); }
.pf-myplaces { max-width: none; }

@media (max-width: 720px) {
  .pf-placehead__actions { align-items: flex-start; max-width: none; }
  .pf-star__note { text-align: left; }
  .pf-filters--place { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Highlights, Tagesauswahl und Suche beim Tippen ---------- */

/* Highlights: eine kompakte Kachel wie ein Abschnitt, Druckgang in Pink.
   Höchstens fünf Einträge, je Eintrag Uhrzeit, Titel und Ort in einem
   Fluss, damit die Liste mobil früh beginnt. Kein Grund-Etikett je
   Eintrag; ein Satz darunter erklärt die Auswahl. */
.pf-hl {
  position: relative;
  isolation: isolate;
  margin: 0 0 var(--pf-space-5);
  border: var(--pf-rule) solid var(--pf-ink);
  padding: var(--pf-space-3) var(--pf-space-5) var(--pf-space-2);
  background: var(--pf-paper);
}
.pf-hl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(9px, 9px);
  background: var(--pf-ink-pink);
  opacity: 0.55;
  pointer-events: none;
}
.pf-hl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pf-paper);
}
.pf-hl__title {
  font-family: var(--pf-font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.pf-hl__list {
  list-style: none;
  margin: var(--pf-space-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  column-gap: var(--pf-space-5);
}
.pf-hl__item {
  min-width: 0;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--pf-space-2);
  align-items: baseline;
  padding-block: var(--pf-space-2);
  border-top: 1px solid var(--pf-line);
}
.pf-hl--days .pf-hl__item { grid-template-columns: 4.5rem minmax(0, 1fr); }
.pf-hl__time {
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pf-hl__text { min-width: 0; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.pf-hl__link {
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--pf-ink);
}
.pf-hl__link:hover { color: var(--pf-accent); }
.pf-hl__place { font-size: 0.8125rem; color: var(--pf-muted); hyphens: manual; }
.pf-hl__place a { color: inherit; }
.pf-hl__hint {
  margin: var(--pf-space-1) 0 0;
  font-size: 0.75rem;
  color: var(--pf-muted);
}

/* Tagesauswahl von Wochenende und Kostenlos: dieselben Auswahlkästen wie
   die Kategorien, eine Zeile über der Suche. */
.pf-days { margin: 0 0 var(--pf-space-3); }

/* Kicker über dem Tagestitel von Wochenende und Kostenlos. */
.pf-dayhead__kicker {
  margin: 0 0 var(--pf-space-2);
  font-family: var(--pf-font-display);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Kostenlos hat kein Preisfeld. */
.pf-filters--noprice { grid-template-columns: minmax(8rem, 1fr) auto; }

/* Mit JavaScript filtert die Suche beim Tippen; „Anwenden“ entfällt, und
   Suche und Preis stehen auch mobil in einer Zeile. */
.pf-filters--live .pf-filters__apply { display: none; }
.pf-filters--live { grid-template-columns: minmax(8rem, 2fr) minmax(7rem, 1fr); }
.pf-filters--live.pf-filters--noprice { grid-template-columns: minmax(0, 1fr); }
.pf-filters--live.pf-filters--place { grid-template-columns: minmax(7rem, 16rem); }
.pf-filters[aria-busy="true"] .pf-search { border-bottom-color: var(--pf-accent); }

@media (max-width: 720px) {
  .pf-hl { padding: var(--pf-space-2) var(--pf-space-3) var(--pf-space-1); margin-bottom: var(--pf-space-4); }
  .pf-hl::before { transform: translate(5px, 5px); }
  .pf-hl__title { font-size: 1.125rem; }
  .pf-hl__item { grid-template-columns: 2.75rem minmax(0, 1fr); padding-block: 0.375rem; }
  .pf-hl--days .pf-hl__item { grid-template-columns: 4rem minmax(0, 1fr); }
  .pf-hl__time { font-size: 0.875rem; }
  .pf-hl__link { font-size: 0.9375rem; }

  .pf-filters--live { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-filters--live .pf-search { grid-column: auto; }
  .pf-filters--live .pf-field select { max-width: 8.5rem; }
  .pf-filters--noprice .pf-search { grid-column: auto; }
  .pf-filters--live.pf-filters--noprice { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kompakter Listenanfang (26. September 2026) ----------
   „Schon vorbei“ und „Läuft gerade“ stehen als schmale Leisten
   nebeneinander; geöffnet nehmen sie die volle Breite ein. */
.pf-slot--compact {
  display: inline-block;
  vertical-align: top;
  margin: var(--pf-space-3) var(--pf-space-3) 0 0;
  padding: 0 var(--pf-space-3);
  border-width: 1px;
}
.pf-slot--compact::before { display: none; }
.pf-slot--compact > .pf-slot__summary { min-height: 2.25rem; gap: var(--pf-space-2); }
.pf-slot--compact .pf-slot__title,
.pf-slot--compact.pf-slot--folded .pf-slot__title { font-size: 0.9375rem; font-weight: 700; }
.pf-slot--compact[open] {
  display: block;
  margin-right: 0;
  padding: 0 var(--pf-space-4) var(--pf-space-1);
}
.pf-slot--compact + .pf-slot:not(.pf-slot--compact) { margin-top: var(--pf-space-4); }

/* Breite Bildschirme: Termine zweispaltig, Reihenfolge zeilenweise. */
@media (min-width: 1280px) {
  .pf-slot .pf-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--pf-space-6);
  }
  .pf-slot .pf-rows > .pf-row:nth-child(2) { border-top: 0; }
}
@media (max-width: 720px) {
  /* Beide Leisten passen auch bei 320px nebeneinander. */
  .pf-slot--compact { margin-right: var(--pf-space-2); padding: 0 var(--pf-space-2); }
  .pf-slot--compact .pf-slot__title,
  .pf-slot--compact.pf-slot--folded .pf-slot__title { font-size: 0.8125rem; }
  .pf-slot--compact .pf-slot__toggle { width: 12px; height: 12px; }
  .pf-slot--compact .pf-slot__toggle::before { top: 5px; width: 12px; }
  .pf-slot--compact .pf-slot__toggle::after { left: 5px; height: 12px; }
  .pf-slot--compact[open] { margin-right: 0; padding: 0 var(--pf-space-3) var(--pf-space-1); }
}

/* ---------- Gliederung nach Kategorie und Kategoriefarben ----------
   Betreiberauftrag vom 26. September 2026, DESIGN.md Abschnitt 7
   „Tagesprogramm“ und Abschnitt 4 „Kategoriefarben“. Die Farbe steht nie
   allein: Der Name steht immer als Text daneben. */
.pf-cat--konzerte { --pf-cat: var(--pf-cat-konzerte); }
.pf-cat--partys { --pf-cat: var(--pf-cat-partys); }
.pf-cat--buehne { --pf-cat: var(--pf-cat-buehne); }
.pf-cat--film { --pf-cat: var(--pf-cat-film); }
.pf-cat--kunst { --pf-cat: var(--pf-cat-kunst); }
.pf-cat--lesungen { --pf-cat: var(--pf-cat-lesungen); --pf-cat-on: var(--pf-ink); }
.pf-cat--feste { --pf-cat: var(--pf-cat-feste); }
.pf-cat--maerkte { --pf-cat: var(--pf-cat-maerkte); --pf-cat-on: var(--pf-ink); }
.pf-cat--sport { --pf-cat: var(--pf-cat-sport); }
.pf-cat--familie { --pf-cat: var(--pf-cat-familie); --pf-cat-on: var(--pf-ink); }
.pf-cat--workshops { --pf-cat: var(--pf-cat-workshops); }
.pf-cat--offene-treffen { --pf-cat: var(--pf-cat-offene-treffen); --pf-cat-on: var(--pf-ink); }

/* Farbpunkt vor dem Kategorienamen. Unbekannte Kategorien und „Weitere
   Events“ sind grau. */
.pf-catdot {
  display: inline-block;
  width: 0.5625rem;
  height: 0.5625rem;
  margin-right: 0.35em;
  border-radius: 50%;
  background: var(--pf-cat, var(--pf-cat-weitere));
  vertical-align: 0.02em;
  flex: 0 0 auto;
}
.pf-slot__title .pf-catdot { width: 0.875rem; height: 0.875rem; margin-right: 0.3em; vertical-align: 0.08em; }
.pf-event-page .pf-catdot, dd > .pf-catdot { vertical-align: 0.05em; }

/* Kategorieabschnitt: Druckgang in der Kategoriefarbe statt Blau/Pink. */
.pf-slot.pf-slot--cat::before { background: var(--pf-cat, var(--pf-cat-weitere)); }

/* Aktiver Kategorieeintrag gefüllt in der Kategoriefarbe; Schrift weiß
   oder bei hellen Farben Tinte (mindestens 4,5:1). Der Punkt bekommt
   einen Ring in der Schriftfarbe, damit er auf der gleichfarbigen Fläche
   sichtbar bleibt. */
.pf-chip[class*="pf-cat--"][aria-current="true"] {
  background: var(--pf-cat, var(--pf-cat-weitere));
  border-color: var(--pf-cat, var(--pf-cat-weitere));
  color: var(--pf-cat-on, var(--pf-on-accent));
}
.pf-chip[class*="pf-cat--"][aria-current="true"] .pf-chip__count { color: inherit; }
.pf-chip[aria-current="true"] .pf-catdot { box-shadow: 0 0 0 2px var(--pf-cat-on, var(--pf-on-accent)); }

/* Rest eines Kategorieabschnitts hinter „Alle 22 Konzerte“. */
.pf-slot__more { border-top: 1px solid var(--pf-line); }
.pf-slot__moresummary {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2);
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--pf-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
}
.pf-slot__moresummary::-webkit-details-marker { display: none; }
.pf-slot__morelabel {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.pf-slot__moresummary:hover .pf-slot__morelabel { color: var(--pf-accent); text-decoration-thickness: 2px; }
.pf-slot__moresummary .pf-slot__toggle { width: 12px; height: 12px; }
.pf-slot__moresummary .pf-slot__toggle::before { top: 5px; width: 12px; }
.pf-slot__moresummary .pf-slot__toggle::after { left: 5px; height: 12px; }
[open] > .pf-slot__moresummary .pf-slot__toggle::after { transform: scaleY(0); }
.pf-slot__more > .pf-rows { margin-top: 0; }
.pf-slot__more[open] > .pf-rows > .pf-row:first-child { border-top: 1px solid var(--pf-line); }

/* Eine Zeile über der Liste: Umschalter und die Leisten „Schon vorbei“
   und „Läuft gerade“. Eine geöffnete Leiste nimmt die volle Breite ein. */
.pf-listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-2) var(--pf-space-3);
  margin-top: var(--pf-space-3);
}
.pf-hl + .pf-listbar { margin-top: 0; }
.pf-slot__short { display: none; }
.pf-listbar > .pf-slot--compact { margin: 0; }
.pf-listbar > .pf-slot--compact[open] { flex: 1 0 100%; }
.pf-listbar + .pf-slot:not(.pf-slot--compact) { margin-top: var(--pf-space-4); }

/* Umschalter „Nach Kategorie | Nach Uhrzeit“: zwei aneinanderstoßende
   Links in 1px-Kontur, klein wie die Leisten. Aktiv gefüllt in Tinte,
   unterstrichen und aria-current, nie nur die Farbe. */
.pf-view {
  display: inline-flex;
  border: 1px solid var(--pf-ink);
  background: var(--pf-paper);
  font-family: var(--pf-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}
.pf-view__link {
  display: inline-block;
  padding: 0.5625rem var(--pf-space-3);
  color: var(--pf-ink);
  text-decoration: none;
  white-space: nowrap;
}
.pf-view__link + .pf-view__link { border-left: 1px solid var(--pf-ink); }
.pf-view__link:hover { background: var(--pf-tint); text-decoration: underline; }
.pf-view__link[aria-current="true"] {
  background: var(--pf-ink);
  color: var(--pf-paper);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.pf-view__link:focus-visible { outline-offset: 2px; }

@media (max-width: 720px) {
  /* Umschalter und beide Leisten passen ab etwa 375px in eine Zeile:
     „Nach“ und „Schon“/„gerade“ entfallen sichtbar, bleiben aber für
     Screenreader. Schmaler bricht die Zeile um. */
  .pf-listbar { gap: 0.375rem; }
  .pf-view { font-size: 0.8125rem; }
  .pf-view__link { padding: 0.625rem 0.4375rem; }
  .pf-listbar > .pf-slot--compact:not([open]) { padding: 0 0.375rem; }
  .pf-listbar > .pf-slot--compact > .pf-slot__summary { gap: 0.375rem; }
  .pf-view__extra,
  .pf-view ~ .pf-slot--compact .pf-slot__long {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .pf-view ~ .pf-slot--compact .pf-slot__short { display: inline; }
  /* Die Kategorie in den Highlights entfällt mobil: Sie brach die Zeilen
     um und schob die Liste nach unten; die Kachel zeigt ohnehin nur
     Konzerte, Partys und Bühne. */
  .pf-hl__cat { display: none; }
  .pf-slot__moresummary { font-size: 0.875rem; }
}