/* 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 */

  /* 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: 77.5rem;
  --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; }

/* 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; }

/* ---------- 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(3, 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); }

/* ---------- 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;
  }

  /* Fünf Elemente in einer Zeile schneiden hier die Beschriftungen ab
     („Alle Katego…“). Die Suche nimmt deshalb die volle Breite, die vier
     übrigen teilen sich die Zeile darunter. */
  .pf-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
  .pf-search { grid-column: 1 / -1; }
}

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

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

  /* Auf schmalen Flächen zwei Spalten: Suche über die volle Breite,
     darunter die drei Auswahlfelder und die Schaltfläche. Das spart Höhe
     über der Terminliste, 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 { 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-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="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 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; }
}