/* kreide.css — Anti-Witze in Kreideschrift am Seitenrand (js/kreide.js).
   ---------------------------------------------------------------------------
   Nur im Stumpi-Modus und nur solange Musik läuft. Sechs Plätze, drei links und drei rechts,
   in der Höhe gegeneinander versetzt (Björn am 01.10.2026: „mehr Anti-Witze links und rechts
   reinschreiben"). Versetzt, weil zwei Sprüche auf gleicher Höhe wie eine Tabelle aussähen —
   eine Tafel beschreibt man schief und durcheinander, nicht in Spalten.

   Die Schrift ist nicht eigens geladen: `--kritzel` ist im Stumpi-Modus bereits „Rock Salt"
   (css/modi.css), also genau die krakelige Handschrift, die hier gebraucht wird. Eine neue
   Webschrift für sechzehn Sprüche wäre teuer bezahlter Spaß.

   Der Platz ist derselbe freie Streifen neben der 1080-px-Inhaltsspalte, aus dem sich auch
   css/rand.css bedient: (100% − 1080px) / 2. Unter 1500 px bleibt alles aus, statt in einem
   zu schmalen Streifen auf zehn Zeilen umzubrechen.

   Die Kreide liegt FEST im Fenster, nicht im Abschnitt: Sie gehört zur Musik, nicht zu einer
   Stelle der Seite, und soll beim Scrollen nicht mitwandern. */

.kreide { display: none; }

@media (min-width: 1500px) {
  html[data-modus="stumpi"] .kreide {
    display: block;
    position: fixed;
    top: var(--kreide-oben, 26vh);   /* je Platz einer, gesetzt in js/kreide.js */
    z-index: 3;                 /* über dem Grund, unter Kopfleiste und Vorhang */
    width: min(330px, calc((100vw - 1080px) / 2 - 28px));
    pointer-events: none;       /* niemand klickt versehentlich auf einen Witz */
  }
  .kreide[data-seite="links"] { left: 18px; text-align: right; }
  .kreide[data-seite="rechts"] { right: 18px; text-align: left; }
  /* Vor dem ersten Spruch und nach dem Wischen ist nichts zu sehen. */
  .kreide[data-zustand="aus"], .kreide:not([data-zustand]) { opacity: 0; }

  .kreide-spruch {
    margin: 0;
    padding: 16px 18px;
    font: 18px/1.75 var(--kritzel, "Rock Salt", cursive);
    color: #fff;
    opacity: .82;
    /* Der Wisch auf der Tafel. Er ist NICHT Zierde, sondern Notwendigkeit: Die Kreide liegt
       fest im Fenster, und der Stumpi-Modus hat weiter unten leuchtend gelbe Abschnitte.
       Weiss auf Gelb kommt auf Kontrast 1,07 — unlesbar. Mit dem Wisch darunter sind es ueber
       9:1 auf Gelb und er verschwindet auf dem fast schwarzen Grund der Buehne voellig.
       Weiche Kanten, damit es nach gewischter Tafel aussieht und nicht nach Kasten. */
    background: radial-gradient(ellipse 108% 100% at 50% 50%,
      rgba(8,8,8,.82) 0%, rgba(8,8,8,.76) 62%, rgba(8,8,8,0) 94%);
    /* Kreide staubt: ein harter Kern und ein weicher Hof darum. Kein Weichzeichner auf der
       Schrift selbst — der macht sie unleserlich, statt sie staubig zu machen. */
    text-shadow: 0 0 1px rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.3);
    rotate: -2.5deg;            /* schräg angeschrieben, wie an einer Tafel */
    overflow-wrap: break-word;
  }
  .kreide[data-seite="rechts"] .kreide-spruch { rotate: 2deg; }

  /* Geschrieben wird von oben nach unten, zeilenweise: steps() statt weichem Verlauf, sonst
     wischt es sich auf statt sich zu schreiben. */
  .kreide[data-zustand="schreibt"] .kreide-spruch {
    animation: kreide-schreiben 1.3s steps(6) both;
  }
  @keyframes kreide-schreiben {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 -8px 0); }
  }

  /* Weggewischt: verschmieren und verschwinden, nicht ausblenden. */
  .kreide[data-zustand="weg"] .kreide-spruch {
    animation: kreide-wischen .5s ease-in both;
  }
  @keyframes kreide-wischen {
    from { opacity: .8; filter: blur(0); translate: 0 0; }
    to { opacity: 0; filter: blur(2.5px); translate: 10px 0; }
  }
}

/* js/kreide.js legt die Tafel bei "weniger Bewegung" gar nicht erst an — das hier ist nur das
   Netz darunter, falls die Einstellung mitten in der Sitzung wechselt. */
@media (prefers-reduced-motion: reduce) {
  .kreide { display: none !important; }
}