/* ===========================================================================
   Projektion auf der Leinwand
   ---------------------------------------------------------------------------
   Video, Logo und Menü liegen nicht AUF der Seite, sondern auf dem Tuch, als
   wäre es ein Film. Sie sitzen im Tuch (und werden von dessen Kantenmaske
   geschnitten), ihr Oberrand liegt an der Unterkante der Rolle.

   Der Projektor steht fest im Raum: Fährt das Tuch heraus, bleibt das Bild, wo es
   ist, und wird von oben nach unten freigelegt. Das Bild wandert nicht mit.

   MULTIPLIKATION STATT AUFLEGEN: Die Projektion wird mit dem Tuch multipliziert
   (mix-blend-mode: multiply). Dadurch scheinen Falten, Randabfall und der Schatten
   der Rolle durch das Bild, es wirkt wie Licht auf Stoff und nicht wie ein
   aufgeklebtes Rechteck. Multiplizieren dunkelt ab, deshalb hebt
   --projektion-hell das Video wieder an.
   =========================================================================== */

.leinwand {
  --projektion-hell: 1.3;
  --video-deckkraft: .95;     /* nur das Video, Logo und Symbole bleiben voll */
  /* Logobreite wie im Kopf-Baustein (34 % der Breite, höchstens 880 px), nur an der
     Breite der Leinwand gemessen (cqw), nicht des Fensters. */
  /* Eine Leinwand ist nie bis zum Rand bespielt: rundherum bleibt Tuch stehen. */
  --proj-rand-seite: 2.1cqw;
  --proj-rand-oben:  1.6cqw;
  --proj-rand-unten: 1.7cqw;
  /* Die Kante des Lichtbilds ist knackscharf, aber nicht lineal-gerade: Stoff hängt
     nie ganz straff, also wellt sich die Kante minimal. Unruhe 0 = exakt gerade. */
  --proj-unruhe: .3;
  /* Erhebung: Das Lichtbild liegt nicht flach im Tuch, es hebt sich von ihm ab. Die
     Kante wirft einen Schatten aufs Tuch (eng am Rand, dazu weit und weich), unten
     und rechts stärker, weil das Licht von links oben kommt. 0 = flach. */
  --proj-hub: .75;
}

.projektion {
  /* Wächst mit --proj-skala (kommt aus dem Skript, wenn das Bild höher wird). */
  --proj-logo-b: calc(min(34cqw, 880px) * var(--proj-skala, 1));
  position: absolute;
  left: var(--proj-rand-seite); right: var(--proj-rand-seite);
  top: calc(var(--e) * (var(--q-rolle-h) - 6));
  /* Der Rand ist Innenabstand, damit die Höhe ihn schon enthält (die Fahrtweite
     des Tuchs liest offsetHeight). Das Bild selbst liegt im Kopf, der Rand bleibt leer. */
  padding: var(--proj-rand-oben) 0 var(--proj-rand-unten);
  isolation: isolate;
  mix-blend-mode: multiply;
}

/* Hülle um den Kopf: Der Schatten folgt der (welligen) Kante, weil er erst nach dem
   Zuschneiden berechnet wird. */
.projektion__bild {
  filter: url(#proj-weich)
    drop-shadow(calc(.12cqw * var(--proj-hub)) calc(.2cqw * var(--proj-hub)) calc(.18cqw * var(--proj-hub)) rgba(0,0,0,calc(.55 * min(var(--proj-hub), 1.4))))
    drop-shadow(calc(.45cqw * var(--proj-hub)) calc(.8cqw * var(--proj-hub)) calc(1.1cqw * var(--proj-hub)) rgba(0,0,0,calc(.30 * min(var(--proj-hub), 1.4))));
}

/* --- Kopf: Video, Logo, Menü ------------------------------------------------- */
.projektion__kopf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* bei hohem Fenster sitzen Logo und Menü in der Mitte */
  padding: calc(var(--proj-logo-b) * .10) 0 calc(var(--proj-logo-b) * .105);
  overflow: hidden;
  clip-path: polygon(
    0.0% calc(0.75 * var(--proj-unruhe) * 1cqw),
    2.5% calc(0.82 * var(--proj-unruhe) * 1cqw),
    5.0% calc(0.88 * var(--proj-unruhe) * 1cqw),
    7.5% calc(0.91 * var(--proj-unruhe) * 1cqw),
    10.0% calc(0.92 * var(--proj-unruhe) * 1cqw),
    12.5% calc(0.92 * var(--proj-unruhe) * 1cqw),
    15.0% calc(0.90 * var(--proj-unruhe) * 1cqw),
    17.5% calc(0.87 * var(--proj-unruhe) * 1cqw),
    20.0% calc(0.82 * var(--proj-unruhe) * 1cqw),
    22.5% calc(0.77 * var(--proj-unruhe) * 1cqw),
    25.0% calc(0.71 * var(--proj-unruhe) * 1cqw),
    27.5% calc(0.66 * var(--proj-unruhe) * 1cqw),
    30.0% calc(0.61 * var(--proj-unruhe) * 1cqw),
    32.5% calc(0.58 * var(--proj-unruhe) * 1cqw),
    35.0% calc(0.55 * var(--proj-unruhe) * 1cqw),
    37.5% calc(0.54 * var(--proj-unruhe) * 1cqw),
    40.0% calc(0.53 * var(--proj-unruhe) * 1cqw),
    42.5% calc(0.54 * var(--proj-unruhe) * 1cqw),
    45.0% calc(0.56 * var(--proj-unruhe) * 1cqw),
    47.5% calc(0.58 * var(--proj-unruhe) * 1cqw),
    50.0% calc(0.60 * var(--proj-unruhe) * 1cqw),
    52.5% calc(0.61 * var(--proj-unruhe) * 1cqw),
    55.0% calc(0.63 * var(--proj-unruhe) * 1cqw),
    57.5% calc(0.63 * var(--proj-unruhe) * 1cqw),
    60.0% calc(0.61 * var(--proj-unruhe) * 1cqw),
    62.5% calc(0.59 * var(--proj-unruhe) * 1cqw),
    65.0% calc(0.55 * var(--proj-unruhe) * 1cqw),
    67.5% calc(0.49 * var(--proj-unruhe) * 1cqw),
    70.0% calc(0.43 * var(--proj-unruhe) * 1cqw),
    72.5% calc(0.36 * var(--proj-unruhe) * 1cqw),
    75.0% calc(0.28 * var(--proj-unruhe) * 1cqw),
    77.5% calc(0.21 * var(--proj-unruhe) * 1cqw),
    80.0% calc(0.14 * var(--proj-unruhe) * 1cqw),
    82.5% calc(0.08 * var(--proj-unruhe) * 1cqw),
    85.0% calc(0.04 * var(--proj-unruhe) * 1cqw),
    87.5% calc(0.01 * var(--proj-unruhe) * 1cqw),
    90.0% calc(0.01 * var(--proj-unruhe) * 1cqw),
    92.5% calc(0.02 * var(--proj-unruhe) * 1cqw),
    95.0% calc(0.05 * var(--proj-unruhe) * 1cqw),
    97.5% calc(0.10 * var(--proj-unruhe) * 1cqw),
    100.0% calc(0.17 * var(--proj-unruhe) * 1cqw),
    calc(100% - 0.14 * var(--proj-unruhe) * 1cqw) 6.2%,
    calc(100% - 0.29 * var(--proj-unruhe) * 1cqw) 12.5%,
    calc(100% - 0.56 * var(--proj-unruhe) * 1cqw) 18.8%,
    calc(100% - 0.81 * var(--proj-unruhe) * 1cqw) 25.0%,
    calc(100% - 0.96 * var(--proj-unruhe) * 1cqw) 31.2%,
    calc(100% - 0.93 * var(--proj-unruhe) * 1cqw) 37.5%,
    calc(100% - 0.77 * var(--proj-unruhe) * 1cqw) 43.8%,
    calc(100% - 0.58 * var(--proj-unruhe) * 1cqw) 50.0%,
    calc(100% - 0.45 * var(--proj-unruhe) * 1cqw) 56.2%,
    calc(100% - 0.43 * var(--proj-unruhe) * 1cqw) 62.5%,
    calc(100% - 0.46 * var(--proj-unruhe) * 1cqw) 68.8%,
    calc(100% - 0.49 * var(--proj-unruhe) * 1cqw) 75.0%,
    calc(100% - 0.43 * var(--proj-unruhe) * 1cqw) 81.2%,
    calc(100% - 0.29 * var(--proj-unruhe) * 1cqw) 87.5%,
    calc(100% - 0.14 * var(--proj-unruhe) * 1cqw) 93.8%,
    calc(100% - 0.09 * var(--proj-unruhe) * 1cqw) 100.0%,
    97.5% calc(100% - 0.63 * var(--proj-unruhe) * 1cqw),
    95.0% calc(100% - 0.56 * var(--proj-unruhe) * 1cqw),
    92.5% calc(100% - 0.49 * var(--proj-unruhe) * 1cqw),
    90.0% calc(100% - 0.41 * var(--proj-unruhe) * 1cqw),
    87.5% calc(100% - 0.34 * var(--proj-unruhe) * 1cqw),
    85.0% calc(100% - 0.26 * var(--proj-unruhe) * 1cqw),
    82.5% calc(100% - 0.19 * var(--proj-unruhe) * 1cqw),
    80.0% calc(100% - 0.13 * var(--proj-unruhe) * 1cqw),
    77.5% calc(100% - 0.09 * var(--proj-unruhe) * 1cqw),
    75.0% calc(100% - 0.05 * var(--proj-unruhe) * 1cqw),
    72.5% calc(100% - 0.03 * var(--proj-unruhe) * 1cqw),
    70.0% calc(100% - 0.02 * var(--proj-unruhe) * 1cqw),
    67.5% calc(100% - 0.03 * var(--proj-unruhe) * 1cqw),
    65.0% calc(100% - 0.05 * var(--proj-unruhe) * 1cqw),
    62.5% calc(100% - 0.08 * var(--proj-unruhe) * 1cqw),
    60.0% calc(100% - 0.13 * var(--proj-unruhe) * 1cqw),
    57.5% calc(100% - 0.18 * var(--proj-unruhe) * 1cqw),
    55.0% calc(100% - 0.23 * var(--proj-unruhe) * 1cqw),
    52.5% calc(100% - 0.29 * var(--proj-unruhe) * 1cqw),
    50.0% calc(100% - 0.35 * var(--proj-unruhe) * 1cqw),
    47.5% calc(100% - 0.40 * var(--proj-unruhe) * 1cqw),
    45.0% calc(100% - 0.45 * var(--proj-unruhe) * 1cqw),
    42.5% calc(100% - 0.49 * var(--proj-unruhe) * 1cqw),
    40.0% calc(100% - 0.52 * var(--proj-unruhe) * 1cqw),
    37.5% calc(100% - 0.54 * var(--proj-unruhe) * 1cqw),
    35.0% calc(100% - 0.55 * var(--proj-unruhe) * 1cqw),
    32.5% calc(100% - 0.56 * var(--proj-unruhe) * 1cqw),
    30.0% calc(100% - 0.55 * var(--proj-unruhe) * 1cqw),
    27.5% calc(100% - 0.54 * var(--proj-unruhe) * 1cqw),
    25.0% calc(100% - 0.52 * var(--proj-unruhe) * 1cqw),
    22.5% calc(100% - 0.51 * var(--proj-unruhe) * 1cqw),
    20.0% calc(100% - 0.49 * var(--proj-unruhe) * 1cqw),
    17.5% calc(100% - 0.48 * var(--proj-unruhe) * 1cqw),
    15.0% calc(100% - 0.47 * var(--proj-unruhe) * 1cqw),
    12.5% calc(100% - 0.47 * var(--proj-unruhe) * 1cqw),
    10.0% calc(100% - 0.48 * var(--proj-unruhe) * 1cqw),
    7.5% calc(100% - 0.50 * var(--proj-unruhe) * 1cqw),
    5.0% calc(100% - 0.53 * var(--proj-unruhe) * 1cqw),
    2.5% calc(100% - 0.56 * var(--proj-unruhe) * 1cqw),
    0.0% calc(100% - 0.61 * var(--proj-unruhe) * 1cqw),
    calc(0.25 * var(--proj-unruhe) * 1cqw) 93.8%,
    calc(0.18 * var(--proj-unruhe) * 1cqw) 87.5%,
    calc(0.20 * var(--proj-unruhe) * 1cqw) 81.2%,
    calc(0.36 * var(--proj-unruhe) * 1cqw) 75.0%,
    calc(0.60 * var(--proj-unruhe) * 1cqw) 68.8%,
    calc(0.84 * var(--proj-unruhe) * 1cqw) 62.5%,
    calc(0.99 * var(--proj-unruhe) * 1cqw) 56.2%,
    calc(0.97 * var(--proj-unruhe) * 1cqw) 50.0%,
    calc(0.79 * var(--proj-unruhe) * 1cqw) 43.8%,
    calc(0.53 * var(--proj-unruhe) * 1cqw) 37.5%,
    calc(0.30 * var(--proj-unruhe) * 1cqw) 31.2%,
    calc(0.17 * var(--proj-unruhe) * 1cqw) 25.0%,
    calc(0.17 * var(--proj-unruhe) * 1cqw) 18.8%,
    calc(0.26 * var(--proj-unruhe) * 1cqw) 12.5%,
    calc(0.39 * var(--proj-unruhe) * 1cqw) 6.2%
  );
}
.projektion__kopf video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(var(--projektion-hell)) saturate(1.05);
  opacity: var(--video-deckkraft);
}
.projektion .logo,
.projektion .nav { position: relative; z-index: 1; }
.projektion .logo { --logo-breite: var(--proj-logo-b); }
.projektion .nav {
  margin-top: calc(var(--proj-logo-b) * .096);
  color: #12070f;
  opacity: .97;
  mix-blend-mode: multiply;
  --symbol-groesse: calc(min(4.235cqw, 74.2px) * var(--proj-skala, 1));
  --text-faktor: .45;
}

/* --- Schmal: Logo größer, Menü eng gesetzt ----------------------------------------------
   Gemessen an der Breite der Leinwand, nicht des Fensters.
   Bis 800 px: Logo groß, alle sechs Symbole bleiben in EINER Reihe (so groß, dass es
   gerade aufgeht). Bis 600 px (Handy): zu wenig Platz, dann zwei Reihen zu je drei. */
@container (max-width: 800px) {
  .projektion { --proj-logo-b: min(66cqw, 880px); }
  .projektion__kopf { justify-content: flex-start; padding-top: calc(var(--proj-logo-b) * .06); padding-bottom: calc(var(--proj-logo-b) * .06); min-height: 0 !important; }
  .projektion .nav {
    --symbol-groesse: 9cqw;
    --nav-abstand: 2.6cqw;
    --text-faktor: .42;
    flex-wrap: nowrap;
  }
}
@container (max-width: 600px) {
  .projektion .nav {
    --symbol-groesse: min(9cqw, 65px);
    --nav-abstand: 4.5cqw;
    flex-wrap: wrap;
    row-gap: 3cqw;
    width: calc(var(--symbol-groesse) * 1.15 * 3 + var(--nav-abstand) * 2 + 1px);
    max-width: 100%;
  }
}

/* Das gewählte Menüelement zeigt dauerhaft seine Beschriftung. Gleicher Zustand wie
   beim Darüberfahren, nur eben fest. Nur mit Maus: Auf Touchgeräten steht der Würfel
   still und die Schrift darunter (flip.css), gedreht verschwände das Element ganz. */
@media (hover: hover) {
  .projektion .flip[aria-current="true"] .flip__wuerfel {
    transform: translateZ(calc(var(--hoehe) / -2)) rotateX(90deg);
  }
  .projektion .flip[aria-current="true"] .flip__flaeche--symbol { opacity: var(--dimm); }
  .projektion .flip[aria-current="true"] .flip__flaeche--text   { opacity: 1; }
}

/* --- Touchgeräte: Beschriftung ganz, nie mitten im Wort getrennt -------------------
   navigation.css trennt lange Wörter (für eng stehende Kacheln gedacht), hier ergab das
   ABO/UT und TERM/INE. Stattdessen eine Zeile, mittig über die Kachel hinaus, und die
   Schrift höchstens so groß, dass das längste Wort (YOUTUBE, rund 4,4 Schriftgrößen
   breit) in den Spaltenabstand passt. Auf dem Handy etwas mehr Abstand zwischen den
   Spalten, damit die Schrift groß bleibt. Gewählt: Schrift voll statt gedimmt. */
@media (hover: none) {
  .projektion .nav .flip__flaeche--text {
    display: flex;
    justify-content: center;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: min(calc(var(--symbol-groesse) * var(--text-faktor)),
                   calc((var(--symbol-groesse) * 1.15 + var(--nav-abstand)) / 4.8));
  }
  .projektion .flip[aria-current="true"] .flip__flaeche--text { opacity: 1; }
}
@container (max-width: 600px) {
  @media (hover: none) {
    .projektion .nav { --nav-abstand: 8.5cqw; }
  }
}

/* --- Inhalt: erscheint, wenn ein Bereich gewählt ist ------------------------------ */
.projektion__inhalt {
  position: relative;
  padding: calc(var(--proj-logo-b) * .09) 4.5cqw calc(var(--proj-logo-b) * .06);
  color: #12070f;
}
.projektion__inhalt h2 {
  margin: 0 0 1.1rem;
  font: 700 clamp(1.8rem, 4.2cqw, 3.4rem) / 1 "UeberIch", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .01em;
}
.projektion__inhalt p {
  margin: 0 0 1rem;
  max-width: 40rem;
  font: 400 clamp(1rem, 1.7cqw, 1.25rem) / 1.65 ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Terminliste: Datum links, Ort in der Mitte, Tickets rechts, dünne Linien dazwischen. */
.termine { list-style: none; margin: 0; padding: 0; max-width: 46rem; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
.termine li {
  display: grid; grid-template-columns: 5.2rem 1fr auto; align-items: center; gap: 0 1.2rem;
  padding: .9rem 0; border-top: 1px solid rgba(18, 7, 15, .22);
}
.termine li:last-child { border-bottom: 1px solid rgba(18, 7, 15, .22); }
.termine time { display: grid; line-height: 1.05; }
.termine time b { font: 700 clamp(1.3rem, 2.6cqw, 1.9rem) / 1 "UeberIch", ui-sans-serif, system-ui, sans-serif; }
.termine time span { font-size: .8rem; opacity: .7; }
.termine__wo { display: grid; gap: .15rem; }
.termine__wo strong { font-size: 1.1rem; }
.termine__wo em { font-size: .85rem; opacity: .7; }
.termine a {
  color: inherit; text-decoration: none; border: 1.5px solid currentColor; border-radius: 99px;
  padding: .35rem .95rem; font-weight: 600; font-size: .85rem; white-space: nowrap;
}
.termine a:hover, .termine a:focus-visible { background: #12070f; color: #fff; }
@container (max-width: 600px) {
  .termine li { grid-template-columns: 4rem 1fr; }
  .termine a { grid-column: 2; justify-self: start; margin-top: .4rem; }
}

/* Wer Bewegung reduziert haben will, bekommt das Standbild. */
@media (prefers-reduced-motion: reduce) {
  .projektion__kopf video { display: none; }
  .projektion__kopf { background: #8d1f6e url("cellophan-1280.webp") center / cover no-repeat; }
}