/* Schöner Tag Kollektiv — one page, plain CSS, no JavaScript anywhere. */

/* ---------- Font: DM Mono, self-hosted (no requests to Google) ---------- */
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Colours ----------
   Light version = day: the three colours of the logo (lilac, logo blue, sun yellow)
   printed on lilac and cream paper. Dark version = night: deep violet (further down).
   Everything below uses these names; the dark version only swaps the values. */
:root {
  --paper: #ded9fd;       /* lilac paper, a lighter shade of the logo's arch */
  --cream: #fbf7e8;       /* flyer paper: cards and text on blue */
  --ink: #585fa8;         /* logo blue */
  --ink-soft: #b4b0d8;    /* logo arch fill */
  --sky: #363675;         /* deep logo blue: the programme */
  --night: #272659;       /* darkest blue: text on paper, buttons */
  --night-deep: #1e1e47;  /* hard shadows */
  --violet: #585fa8;      /* second print colour (in the light version: logo blue) */
  --sun: #ffe185;         /* sun yellow */

  --page-bg: var(--paper);
  --hero-bg: var(--paper);
  --hero-grain: var(--grain-dark);
  --lettering: var(--ink);
  --hero-text: var(--night);
  --halo: 255, 225, 133;
  /* The glow around the logo: yellow at the sun, warm white further out. (Pale yellow over
     lilac would look grey; a light that is brighter than the paper looks like light.) */
  --glow-mid: rgba(255, 236, 170, 0.8);
  --glow-out: rgba(255, 248, 226, 0.4);
  --beam: rgba(255, 246, 214, 0.75);

  --program-bg: var(--sky);
  --program-text: var(--cream);
  --program-rule: rgba(251, 247, 232, 0.3);
  --offset: var(--night-deep);     /* the off-register shadow of the big yellow date */
  --shadow: var(--night-deep);

  --card-bg: var(--cream);
  --card-grain: var(--grain-soft);
  --card-text: var(--night);
  --card-rule: rgba(39, 38, 89, 0.28);
  --tape: rgba(196, 190, 238, 0.8);       /* lilac tape */

  --footer-bg: var(--sun);
  --footer-grain: var(--grain-soft);
  --footer-text: var(--night);
  --button-bg: var(--night);
  --button-text: var(--sun);
  --button-shadow: var(--violet);
  --fine-print: #45437a;
  --footer-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10C46 4 92 13 148 8s104-6 148 1' fill='none' stroke='%23585fa8' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 .95%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url%28%23n%29%22 opacity=%22.14%22/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 .95%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url%28%23n%29%22 opacity=%22.07%22/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.65%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url%28%23n%29%22 opacity=%22.11%22/%3E%3C/svg%3E");
  --gutter: clamp(18px, 4vw, 36px);
  color-scheme: light dark;
}

/* Dark version: shown when the visitor's device is set to dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #ddcfff;       /* lavender */
    --night: #362565;       /* deep violet */
    --night-deep: #1d1339;  /* darkest violet */
    --violet: #694fb0;

    --page-bg: var(--night-deep);
    --hero-bg: var(--night-deep);
    --hero-grain: var(--grain-light);
    --lettering: var(--paper);
    --hero-text: var(--paper);
    --glow-mid: rgba(var(--halo), 0.75);
    --glow-out: rgba(var(--halo), 0.3);
    --beam: rgba(var(--halo), 0.55);

    --program-bg: var(--night);
    --program-text: var(--paper);
    --program-rule: rgba(221, 207, 255, 0.32);
    --offset: var(--violet);
    --shadow: #0d0820;
    --card-bg: #cdbff4;
    --card-grain: var(--grain-dark);
    --card-rule: rgba(54, 37, 101, 0.3);
    --tape: rgba(221, 207, 255, 0.45);

    --footer-bg: #261a4d;
    --footer-grain: var(--grain-light);
    --footer-text: var(--paper);
    --button-bg: var(--sun);
    --button-text: var(--night);
    --button-shadow: #0d0820;
    --fine-print: rgba(221, 207, 255, 0.7);
    --footer-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10C46 4 92 13 148 8s104-6 148 1' fill='none' stroke='%23ffe185' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
}

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

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

body {
  margin: 0;
  color: var(--hero-text);
  background: var(--page-bg);
  font-family: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

::selection { background: var(--sun); color: var(--night); }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

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

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  padding: 0.5em 1em;
  background: var(--sun);
  color: var(--night);
  border: 2px solid var(--night);
}
.skip-link:focus { top: 16px; }

/* A strip of masking tape, used on flyers and cards */
.flyer::before, .event--card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 28px;
  background: var(--tape);
  transform: translateX(-50%) rotate(-4deg);
  clip-path: polygon(3% 0, 97% 4%, 100% 22%, 97% 45%, 100% 70%, 96% 100%, 2% 96%, 0 74%, 3% 50%, 0 25%);
  pointer-events: none;
}

/* Hand-drawn marker line under headings */
.section-title, .follow h2 {
  display: inline-block;
  padding-bottom: 0.32em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10C46 4 92 13 148 8s104-6 148 1' fill='none' stroke='%23ffe185' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
    left bottom / 100% 0.4em no-repeat;
}

/* ---------- Top: logo and lettering ---------- */
.hero {
  background: var(--hero-grain), var(--hero-bg);
  color: var(--hero-text);
  --w: 172px;                                   /* logo width */
  padding: calc(var(--w) * 0.6 + 24px) var(--gutter) clamp(64px, 10vh, 112px);   /* room for the glow */
  text-align: center;
  overflow: hidden;
}

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vw, 14px);
  width: min(440px, 82vw);
  margin: 0 auto;
  color: var(--lettering);
}
.wordmark .word { display: block; height: auto; }
.word-schoener  { width: 100%; }
.word-tag       { width: 44.6%; }
.word-kollektiv { width: 92.9%; }

.tagline {
  margin: clamp(22px, 3.5vh, 34px) 0 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* ---------- Logo: the sun rises and shines ----------
   Every moving part is its own layer, so the graphics card can animate it
   (only transform and opacity change). That keeps it smooth. */
.logo {
  isolation: isolate;
  --u: calc(var(--w) / 102.55);          /* one unit of the original logo drawing */
  position: relative;
  width: var(--w);
  height: calc(var(--u) * 115.08);
  margin: 0 auto clamp(28px, 4.5vh, 44px);
}
.logo > svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.arch-fill { fill: var(--ink-soft); }
.arch-line, .rays, .sun path { fill: var(--ink); }
.sun .sun-fill { fill: var(--sun); }
.sun > svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

/* Now and then the sun blinks: once, later twice, then it starts over (every 10–12 seconds).
   The eyes are their own layer, so only they move. */
.eyes {
  transform-origin: 50% 86%;            /* the middle of the eyes */
  will-change: transform;
  animation: blink 22s 2.6s infinite;
}
@keyframes blink {
  0%, 10%, 11.3%, 55%, 56.3%, 57.6%, 100% { transform: scaleY(1); }
  10.5%, 55.5%, 56.8%                     { transform: scaleY(0.12); }
}

/* Window inside the arch: rays, sun and glow are clipped to it */
.sky {
  position: absolute;
  left: calc(var(--u) * 2.55);
  top: calc(var(--u) * 2.5);
  width: calc(var(--u) * 97.5);
  height: calc(var(--u) * 110.6);
  border-radius: 50% 50% 0 0 / 51% 51% 0 0;
  overflow: hidden;
}
.sky > * {
  display: block;
  position: absolute;
  left: calc(var(--u) * -2.55);
  top: calc(var(--u) * -2.5);
  width: var(--w);
  height: calc(var(--u) * 115.08);
  will-change: transform, opacity;
}
.rays, .glow { transform-origin: 49.5% 97.5%; }   /* the sun's centre on the horizon */
.glow {
  background: radial-gradient(circle at 49.5% 97.5%,
    rgba(255, 225, 132, 0.95) 0, rgba(255, 225, 132, 0.45) 34%, rgba(255, 225, 132, 0) 62%);
  opacity: 0.7;
}
.dusk { background: #4c4791; opacity: 0; }

/* The sun shines beyond its arch: a warm halo, and soft beams that continue the logo's rays.
   Both sit behind the logo. The halo breathes slowly; the beams turn once every two minutes. */
.logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(var(--w) * 2.6);
  height: calc(var(--w) * 2.6);
  left: 50%;
  top: 66%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side,
    rgba(var(--halo), 1) 0%, var(--glow-mid) 24%, var(--glow-out) 52%, transparent 92%);
  opacity: 0.75;
  will-change: opacity;
  pointer-events: none;
  animation: halo-in 1.6s 1s ease-out both, halo 6s 2.6s ease-in-out infinite;
}
@keyframes halo-in { from { opacity: 0; } to { opacity: 0.75; } }
@keyframes halo    { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* The beams: a window above the horizon (fading out towards it), with a slowly turning disc inside */
.burst {
  position: absolute;
  z-index: -1;
  left: calc(var(--w) * -1.15);
  width: calc(var(--w) * 3.3);
  top: calc(var(--u) * 112.25 - var(--w) * 1.65);
  height: calc(var(--w) * 1.65);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 38%);
  mask-image: linear-gradient(to top, transparent 0%, #000 38%);
  animation: burst-in 1.8s 1.3s ease-out both;
}
.burst-rays {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--w) * 3.3);
  height: calc(var(--w) * 3.3);
  background: repeating-conic-gradient(
    transparent 0deg 4deg, var(--beam) 6deg, transparent 8deg 12deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 14%, #000 26%, rgba(0, 0, 0, 0.45) 55%, transparent 85%);
  mask-image: radial-gradient(circle closest-side, transparent 14%, #000 26%, rgba(0, 0, 0, 0.45) 55%, transparent 85%);
  will-change: transform;
  animation: turn 120s linear infinite;
}
@keyframes burst-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes turn     { to { transform: rotate(360deg); } }

.sun  { animation: rise 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dusk { animation: dawn 2.4s ease-out both; }
.rays { animation: rays-in 1.1s 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both, shine 6s 2.6s ease-in-out infinite; }
.glow { animation: glow-in 1.4s 1s ease-out both, glow 6s 2.6s ease-in-out infinite; }

@keyframes rise    { from { transform: translateY(38%); } to { transform: translateY(0); } }
@keyframes dawn    { from { opacity: 0.55; } to { opacity: 0; } }
@keyframes rays-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes glow-in { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes shine   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes glow    { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }


/* ---------- Programme (deep blue by day, deep violet by night) ---------- */
.program {
  position: relative;
  background: var(--grain-light), var(--program-bg);
  color: var(--program-text);
  padding: clamp(72px, 10vw, 120px) 0 clamp(80px, 10vw, 120px);
}
.program::before {   /* torn paper edge on top */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -15px;
  height: 16px;
  background: var(--grain-light), var(--program-bg);
  clip-path: polygon(0 100%, 0.0% 45%, 3.3% 18%, 4.4% 47%, 6.5% 75%, 8.4% 32%, 10.1% 9%, 11.7% 66%, 15.0% 21%, 16.2% 71%, 18.3% 73%, 21.0% 63%, 22.9% 15%, 24.4% 12%, 27.0% 30%, 29.6% 54%, 32.0% 55%, 35.6% 44%, 38.3% 48%, 40.8% 68%, 42.2% 69%, 44.8% 65%, 47.5% 28%, 49.0% 30%, 51.4% 74%, 52.9% 22%, 54.1% 62%, 55.2% 43%, 58.7% 43%, 61.8% 50%, 63.1% 44%, 65.5% 66%, 67.9% 41%, 69.3% 23%, 72.1% 71%, 73.8% 77%, 75.1% 20%, 78.6% 29%, 80.8% 12%, 81.9% 61%, 83.9% 28%, 87.0% 9%, 90.6% 15%, 93.0% 64%, 95.9% 52%, 96.9% 56%, 99.2% 12%, 100% 39%, 100% 100%);
}
.program :focus-visible { outline-color: var(--sun); }

.section + .section { margin-top: clamp(72px, 10vw, 120px); }
.section-title {
  display: block;
  width: fit-content;
  margin: 0 auto clamp(32px, 5vw, 52px);
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  text-align: center;
}

/* The next event: flyer and text side by side */
.event { position: relative; }
/* Flyer and details side by side; the flyer is centred next to the details.
   The "Mehr lesen" text sits in its own row below, so opening it never moves the flyer. */
.event--next {
  display: grid;
  column-gap: clamp(40px, 6vw, 72px);
  row-gap: 0;
  align-items: start;
}
.event--next .flyer { margin-bottom: 44px; }
@media (min-width: 820px) {
  .event--next { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .event--next .flyer { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .event--next .event-body { grid-column: 2; grid-row: 1; }
  .event--next .event-more { grid-column: 2; grid-row: 2; }
}

.flyer { position: relative; margin: 0; }
.flyer a { display: block; }
.flyer img { display: block; width: 100%; }
.event--next .flyer {
  justify-self: center;
  width: 100%;
  transform: rotate(-1.8deg);
  box-shadow: 14px 14px 0 var(--shadow);
  max-width: 520px;
}

/* Big printed date, slightly off-register like a riso print */
.event-date { margin: 0 0 0.12em; font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.event-date .pre {
  display: inline-block;
  margin-right: 0.35em;
  font-size: 0.3em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.95em;
}
.event-date .year { font-size: 0.42em; letter-spacing: 0; margin-left: 0.15em; }
.event--next .event-date .year { text-shadow: 2px 2px 0 var(--offset); }
.event--next .event-date {
  font-size: clamp(3.4rem, 9vw, 6rem);
  color: var(--sun);
  text-shadow: 4px 4px 0 var(--offset);
}

.event-title { margin: 0 0 0.55em; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.event--next .event-title { font-size: clamp(1.7rem, 4vw, 2.6rem); }

/* Practical info between two dashed lines, like a ticket stub.
   The label column has the same width on every card, so everything lines up. */
.event-body { container-type: inline-size; }
.info {
  margin: 0 0 1.4em;
  padding: 1.1em 0;
  border-block: 2px dashed var(--rule);
}
.program { --rule: var(--program-rule); --label: var(--sun); }
.event--card { --rule: var(--card-rule); --label: var(--violet); }
.facts {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: 0.7em 1em;
  margin: 0;
  line-height: 1.5;
}
.facts div { display: contents; }
.facts dt { font-weight: 500; color: var(--label); }
.facts dd { margin: 0; }
.facts .sub { display: block; opacity: 0.8; font-size: 0.92em; }
.facts .map { margin-left: 0.5em; font-size: 0.85em; white-space: nowrap; }
@container (max-width: 24em) {             /* phones: label above value */
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0.1em; }
  .facts dd { margin-bottom: 0.7em; }
  .facts div:last-child dd { margin-bottom: 0; }
}

/* Line-up: one act per line, crew/label smaller.
   Two columns when there is room, as a grid: each row lines up across both columns,
   and the order still runs down the left column first (--rows is set by the builder). */
.lineup { margin: 0 0 1.4em; }
.label { margin: 0 0 0.6em; font-size: 1rem; font-weight: 500; color: var(--label); }
.lineup ul { display: grid; row-gap: 0.4em; list-style: none; margin: 0; padding: 0; }
@container (min-width: 30em) {
  .lineup ul.cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), auto);
    grid-auto-flow: column;
    column-gap: 2.5em;
    row-gap: 0.55em;
  }
  .lineup ul.cols .crew { display: block; }   /* crew on its own line: every entry has the same shape */
}
.lineup li {
  position: relative;
  padding-left: 1.35em;
  margin: 0;
  line-height: 1.45;
}
.lineup li::before {
  content: "";
  position: absolute;
  left: 0.1em; top: 0.5em;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--sun);
}
.event--card .lineup li::before { box-shadow: 0 0 0 1.5px var(--night); }
.lineup .act, .lineup a { font-weight: 500; }
.lineup a::after { content: "\2009↗"; font-size: 0.8em; font-weight: 400; }
.lineup .crew { display: inline-block; font-size: 0.85em; opacity: 0.72; }

.teaser { margin: 0 0 1.2em; }
.event--next .teaser { font-size: 1.1rem; }

/* "Mehr lesen": opens in place, no JavaScript */
.more summary {
  display: inline-flex;
  gap: 0.5em;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.more summary span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.more summary:hover span { text-decoration-thickness: 4px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "↓"; display: inline-block; transition: transform 0.2s ease; }
.more[open] summary::after { transform: rotate(180deg); }
.more .open, .more[open] .closed { display: none; }
.more[open] .open { display: inline; }
.program .more summary { color: var(--sun); }
.more .prose { margin-top: 1.2em; }

/* Text inside events */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h4 { margin: 1.5em 0 0.5em; font-size: 1.05rem; font-weight: 500; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1em; }
.prose ul { list-style: none; padding: 0; }
.prose ul li { position: relative; padding-left: 1.4em; margin-bottom: 0.3em; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.1em; top: 0.6em;
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--sun);
}
.prose ol { padding-left: 1.6em; }
.prose strong { font-weight: 500; }
.program .prose strong, .program .prose h4 { color: var(--sun); }
.prose blockquote { padding-left: 1em; border-left: 3px solid var(--sun); }
.prose hr { border: 0; border-top: 2px dashed currentColor; opacity: 0.4; margin: 1.6em 0; }
.prose img { display: block; margin: 1.2em 0; }

/* SoundCloud player (loads only after a click) */
.soundcloud { margin: 1.3em 0; box-shadow: 8px 8px 0 var(--shadow); }
.soundcloud iframe { display: block; width: 100%; border: 0; background: var(--sun); }

/* Weitere Termine: flyers pinned to the wall */
.event-grid {
  display: grid;
  gap: clamp(48px, 6vw, 64px) clamp(32px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 700px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-grid:has(> :only-child) { grid-template-columns: minmax(0, 500px); justify-content: center; }
}
.event--card {
  padding: 20px 20px 26px;
  background: var(--card-grain), var(--card-bg);
  color: var(--card-text);
  box-shadow: 10px 10px 0 var(--shadow);
  transition: transform 0.25s ease;
}
.event-grid > .event--card:hover { transform: translateY(-4px); }
.event--card .flyer { margin-bottom: 20px; }
.event--card .flyer::before { display: none; }   /* the card already has tape */
.event--card .flyer img { border: 2px solid var(--night); }
.event--card .event-date {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-size: clamp(2.4rem, 5vw, 3.1rem);
}
.event--card .event-date::after {   /* yellow highlighter stroke */
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.1em; right: -0.12em; bottom: 0.08em;
  height: 0.42em;
  background: var(--sun);
  transform: skewX(-12deg) rotate(-1.5deg);
}
.event--card .event-title { font-size: 1.4rem; }

.event--card .more summary { color: var(--card-text); }
.event--card .more summary span { text-decoration-color: var(--violet); }
.event--card .prose ul li::before { box-shadow: 0 0 0 1.5px var(--night); }
.event--card .soundcloud { box-shadow: 6px 6px 0 var(--night); }

/* Draft label (only in the preview) */
.stamp {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  margin: 0;
  padding: 0.15em 0.6em;
  border: 2.5px solid currentColor;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(8deg);
  opacity: 0.85;
}
.program .event--next .stamp { color: var(--sun); position: static; display: inline-block; margin-bottom: 1em; }

/* No upcoming events */
.empty p { max-width: 36em; font-size: 1.1rem; margin: 0 auto; text-align: center; }

/* ---------- Footer: Folgt uns stands out, Impressum is small print ---------- */
.site-footer {
  position: relative;
  background: var(--footer-grain), var(--footer-bg);
  color: var(--footer-text);
  padding: clamp(64px, 8vw, 96px) 0 36px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -15px;
  height: 16px;
  background: var(--footer-grain), var(--footer-bg);
  clip-path: polygon(0 100%, 0.0% 46%, 3.1% 55%, 5.6% 14%, 8.4% 17%, 10.4% 12%, 13.4% 32%, 14.7% 60%, 16.7% 35%, 18.1% 59%, 19.4% 20%, 22.5% 12%, 24.9% 55%, 26.2% 33%, 27.4% 22%, 29.2% 23%, 31.5% 44%, 33.8% 28%, 35.2% 29%, 37.2% 75%, 39.8% 12%, 42.2% 68%, 44.8% 59%, 47.6% 64%, 49.9% 63%, 51.8% 36%, 54.6% 36%, 56.0% 43%, 58.3% 48%, 60.9% 41%, 63.3% 14%, 64.8% 58%, 66.3% 48%, 67.8% 67%, 69.8% 14%, 72.6% 45%, 74.4% 49%, 76.8% 63%, 78.2% 16%, 81.3% 65%, 83.9% 13%, 85.2% 44%, 87.7% 62%, 89.4% 54%, 92.4% 49%, 93.7% 64%, 95.6% 19%, 97.8% 32%, 100% 18%, 100% 100%);
}
.site-footer :focus-visible { outline-color: currentColor; }

.footer-main {
  display: grid;
  gap: 48px;
  align-items: end;
}
@media (min-width: 760px) {
  .footer-main { grid-template-columns: 1fr auto; }
}

.follow h2 {
  margin: 0 0 32px;
  font-size: clamp(2rem, 5vw, 3rem);
  background-image: var(--footer-underline);
}
.follow-links { display: flex; flex-wrap: wrap; gap: 18px 22px; margin: 0; padding: 0; list-style: none; }
.follow-links a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 14px 18px;
  background: var(--button-bg);
  color: var(--button-text);
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--button-shadow);
  transform: rotate(-1.2deg);
  transition: transform 0.2s ease;
}
.follow-links li:nth-child(even) a { transform: rotate(1.2deg); }
.follow-links a:hover, .follow-links a:focus-visible { transform: rotate(0deg) translateY(-3px); }
.follow-links svg { width: 28px; height: 28px; flex: none; }

.contact h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 500; }
.mail { display: inline-flex; align-items: center; gap: 10px; font-size: 0.95rem; text-decoration: none; }
.mail svg { width: 20px; height: 20px; flex: none; }
.mail:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

.impressum {
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 20px;
  border-top: 1.5px dashed var(--fine-print);
  color: var(--fine-print);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}
.impressum h2 { margin: 0 0 0.7em; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.impressum h3 { margin: 0; font-size: inherit; font-weight: 500; }
.impressum p { margin: 0 0 0.9em; }
.impressum a { color: inherit; }

/* ---------- Tickets on top, calendar below; both centred ---------- */
.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 1.4em 0 0;
  text-align: center;
}
.button {
  display: inline-block;
  min-width: 11.5em;
  padding: 0.6em 1.4em;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.button:hover, .button:focus-visible { transform: translate(-2px, -2px); }
.program .button { background: var(--sun); color: var(--night); box-shadow: 5px 5px 0 var(--offset); }
.event--card .button { background: var(--night); color: var(--sun); box-shadow: 5px 5px 0 var(--violet); }

.cal-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin: 0 0 0.6em;
  font-size: 0.85rem;
}
.cal-label .ico { flex: none; }
.cal-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.pill {                                    /* equal-width outline buttons, so they line up */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11.5em;
  padding: 0.45em 1em;
  border: 1.5px solid currentColor;
  font-size: 0.85rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.program .pill:hover, .program .pill:focus-visible { background: var(--sun); border-color: var(--sun); color: var(--night); }
.event--card .pill:hover, .event--card .pill:focus-visible { background: var(--night); border-color: var(--night); color: var(--sun); }
.site-footer .pill:hover, .site-footer .pill:focus-visible { background: var(--button-bg); border-color: var(--button-bg); color: var(--button-text); }

.program .facts a { color: inherit; }

/* Subscribe to all dates, inside "Folgt uns" */
.subscribe { margin-top: 30px; }
.subscribe .cal-label { justify-content: flex-start; margin: 0; font-size: 1rem; font-weight: 500; }
.subscribe-note { margin: 0.15em 0 0.9em; font-size: 0.85rem; opacity: 0.8; }
.subscribe .cal-buttons { justify-content: flex-start; }
.subscribe .pill { min-width: 0; }

/* ---------- Datenschutz page ---------- */
.subpage .hero { --w: 104px; }
.subpage .wordmark { width: min(270px, 64vw); }
.subpage .hero { padding-bottom: clamp(48px, 7vh, 80px); }
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px);
  background: var(--card-grain), var(--card-bg);
  color: var(--card-text);
  box-shadow: 12px 12px 0 var(--shadow);
}
.legal .back { margin: 0 0 1.6em; font-size: 0.9rem; }
.legal-title { margin: 0 0 0.3em; font-size: clamp(1.6rem, 4.4vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; hyphens: manual; }
.legal h3 { margin: 2em 0 0.5em; font-size: 1.15rem; font-weight: 500; }
.legal h4 { margin: 1.5em 0 0.4em; font-size: 1rem; font-weight: 500; }
.legal p { margin: 0 0 1em; }
.legal a { overflow-wrap: anywhere; }
.legal :focus-visible { outline-color: var(--night); }

.legal-links { margin: 0.4em 0 0; }

/* ---------- Phones ---------- */
@media (max-width: 520px) {
  .hero { --w: 136px; }
  .event--next .flyer { width: 92%; box-shadow: 10px 10px 0 var(--shadow); }
  .follow-links a { padding: 12px 20px 12px 14px; }
}

/* ---------- The little sun that peeks up now and then ----------
   One 80-second cycle with three appearances at different spots, so it shows up about every
   25 seconds and stays 5 to 8 seconds: it pops up and looks around, later it pops up and
   wiggles, later it peeks up shyly and ducks away. Only once the big logo has scrolled out of
   view (in browsers that support scroll-driven animations). Clicks always pass through it.
   The keyframes below are percentages of the 80 seconds (1% = 0.8 s). */
.peek {
  position: fixed;
  left: 0;
  bottom: -4px;
  z-index: 20;
  width: 132px;
  height: 106px;
  pointer-events: none;
  will-change: transform;
  animation: peek-where 80s infinite;
}
.peek-gate, .peek-sun, .peek-look { position: absolute; inset: 0; }
.peek-sun {
  transform: translateY(105%);             /* hidden below the screen edge … */
  visibility: hidden;                      /* … and invisible while it waits */
  transform-origin: 50% 100%;
  will-change: transform;
  animation: peek-rise 80s infinite;
}
.peek svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.peek-body path, .peek-rays path, .peek-eyes path { fill: var(--ink); }
.peek-body .sun-fill { fill: var(--sun); }
.peek-glow {
  position: absolute;
  left: 50%;
  top: 96.7%;
  width: 260%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side,
    rgba(var(--halo), 0.95) 0%, rgba(var(--halo), 0.5) 30%, rgba(var(--halo), 0) 80%);
  opacity: 0;
  will-change: opacity;
  animation: peek-glow 80s infinite;
}
.peek-rays {
  opacity: 0;
  transform-origin: 50% 96.7%;
  will-change: transform, opacity;
  animation: peek-rays 80s infinite;
}
.peek-look { will-change: transform; animation: peek-look 80s infinite; }
.peek-eyes { transform-origin: 50% 81%; will-change: transform; animation: peek-blink 80s infinite; }

@supports (animation-timeline: view()) {
  .home { timeline-scope: --hero; }
  .home .hero { view-timeline: --hero block; }
  .peek-gate {
    animation: peek-gate linear both;
    animation-timeline: --hero;
    animation-range: exit 30% exit 90%;
  }
}
@keyframes peek-gate { from { opacity: 0; } to { opacity: 1; } }

@keyframes peek-where {
  0% { transform: translateX(8vw); }
  30% { transform: translateX(8vw); }
  30.013% { transform: translateX(calc(100vw - 170px)); }
  60% { transform: translateX(calc(100vw - 170px)); }
  60.013% { transform: translateX(44vw); }
  100% { transform: translateX(44vw); }
}

@keyframes peek-rise {
  0% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
  10% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
  10.938% { transform: translateY(-7%) rotate(0deg); visibility: visible; }
  11.25% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  18.875% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  19.75% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
  40% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
  40.875% { transform: translateY(-9%) rotate(0deg); visibility: visible; }
  41.188% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  41.875% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  42.125% { transform: translateY(0%) rotate(-8deg); visibility: visible; }
  42.438% { transform: translateY(0%) rotate(7deg); visibility: visible; }
  42.75% { transform: translateY(0%) rotate(-4deg); visibility: visible; }
  43% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  46.5% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  46.75% { transform: translateY(0%) rotate(-6deg); visibility: visible; }
  47.062% { transform: translateY(0%) rotate(5deg); visibility: visible; }
  47.375% { transform: translateY(0%) rotate(-3deg); visibility: visible; }
  47.625% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  49.5% { transform: translateY(0%) rotate(0deg); visibility: visible; }
  50.313% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
  71.25% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
  73% { transform: translateY(9%) rotate(0deg); visibility: visible; }
  77.5% { transform: translateY(9%) rotate(0deg); visibility: visible; }
  77.875% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
  100% { transform: translateY(105%) rotate(0deg); visibility: hidden; }
}

@keyframes peek-rays {
  0% { opacity: 0; transform: scale(0.3); }
  11.125% { opacity: 0; transform: scale(0.3); }
  11.75% { opacity: 1; transform: scale(1); }
  18.5% { opacity: 1; transform: scale(1); }
  19% { opacity: 0; transform: scale(0.3); }
  41.125% { opacity: 0; transform: scale(0.3); }
  41.625% { opacity: 1; transform: scale(1); }
  49.062% { opacity: 1; transform: scale(1); }
  49.5% { opacity: 0; transform: scale(0.3); }
  72.625% { opacity: 0; transform: scale(0.3); }
  73.25% { opacity: 1; transform: scale(1); }
  77.375% { opacity: 1; transform: scale(1); }
  77.75% { opacity: 0; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(0.3); }
}

@keyframes peek-glow {
  0% { opacity: 0; }
  10.75% { opacity: 0; }
  11.75% { opacity: 1; }
  18.625% { opacity: 1; }
  19.375% { opacity: 0; }
  40.75% { opacity: 0; }
  41.625% { opacity: 1; }
  49.25% { opacity: 1; }
  50% { opacity: 0; }
  72% { opacity: 0; }
  73% { opacity: 1; }
  77.375% { opacity: 1; }
  77.812% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes peek-look {
  0% { transform: translateX(0); }
  12% { transform: translateX(0); }
  12.375% { transform: translateX(-5%); }
  13.25% { transform: translateX(-5%); }
  13.75% { transform: translateX(5%); }
  14.5% { transform: translateX(5%); }
  14.75% { transform: translateX(0); }
  16.625% { transform: translateX(0); }
  16.875% { transform: translateX(5%); }
  17.5% { transform: translateX(5%); }
  17.75% { transform: translateX(0); }
  44.5% { transform: translateX(0); }
  44.75% { transform: translateX(-5%); }
  45.625% { transform: translateX(-5%); }
  45.875% { transform: translateX(0); }
  73.25% { transform: translateX(0); }
  73.562% { transform: translateX(6%); }
  74.875% { transform: translateX(6%); }
  75.125% { transform: translateX(0); }
  75.75% { transform: translateX(0); }
  76% { transform: translateX(-6%); }
  76.75% { transform: translateX(-6%); }
  76.937% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes peek-blink {
  0% { transform: scaleY(1); }
  15.375% { transform: scaleY(1); }
  15.463% { transform: scaleY(0.12); }
  15.65% { transform: scaleY(1); }
  18.25% { transform: scaleY(1); }
  18.338% { transform: scaleY(0.12); }
  18.525% { transform: scaleY(1); }
  43.625% { transform: scaleY(1); }
  43.712% { transform: scaleY(0.12); }
  43.875% { transform: scaleY(1); }
  44.062% { transform: scaleY(0.12); }
  44.25% { transform: scaleY(1); }
  48.25% { transform: scaleY(1); }
  48.337% { transform: scaleY(0.12); }
  48.525% { transform: scaleY(1); }
  75.375% { transform: scaleY(1); }
  75.463% { transform: scaleY(0.12); }
  75.65% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

@media (max-width: 520px) {
  .peek { width: 104px; height: 84px; }
}

/* People who ask their device for less motion get a still page (the little sun stays hidden). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .more summary, .follow, .peek { display: none; }
  .program, .hero, .site-footer { background: #fff; color: #000; }
  .event--card, .event--next .flyer { box-shadow: none; transform: none; }
}