/* Randgestaltung (js/rand.js): Sprüche und Figuren links und rechts neben dem Inhalt.
   Zierde, kein Inhalt — siehe Kopfkommentar in js/rand.js.

   Zwei Zusagen halten diese Datei zusammen:
   1. Der Schmuck verschiebt nichts. Er liegt absolut im Abschnitt, also außerhalb des Flusses.
   2. Der Schmuck überdeckt nichts. Seine Breite ist genau der freie Streifen neben der
      1080-px-Spalte (.innen in modi.css): (100% − 1080px) / 2. Die Inhaltsspalte fängt exakt
      dort an, wo dieser Streifen endet — unabhängig vom Innenabstand des Abschnitts.
   Unter 1280 px ist der Streifen zu schmal für Text, unter 1340 px zu schmal für eine Figur.
   Dort bleibt alles aus, statt verkleinert zu werden. */

.rand { display: none; }

/* ---------- Sprüche in Kritzelschrift ---------- */
@media (min-width: 1280px) {
  /* Bezugsrahmen für den Schmuck. Nur ab dieser Breite, damit auf dem Handy nichts anders ist. */
  .rand-wirt { position: relative; }

  .rand {
    position: absolute;
    width: calc((100% - 1080px) / 2 - 12px);
    overflow: hidden;              /* eine lange Zeile kann den Streifen nicht verlassen */
    pointer-events: none;          /* niemand klickt versehentlich auf die Zierde */
    color: inherit;                /* Farbe des Abschnitts: immer lesbar, nie rote Kleinschrift */
    opacity: .5;
  }
  .rand[data-seite="links"] { left: 0; }
  .rand[data-seite="rechts"] { right: 0; }
  .rand[data-eng="ja"] { display: none; }   /* Abschnitt zu flach (js/rand.js) */

  .rand[data-art="spruch"] { display: block; top: 26%; padding: 10px 0; }
  .rand[data-seite="links"][data-art="spruch"] { padding-right: 16px; text-align: right; }
  .rand[data-seite="rechts"][data-art="spruch"] { padding-left: 16px; text-align: left; }

  /* Welttournee kennt kein --kritzel; dort schreibt die Metal-Schrift des Modus,
     Backstage der Permanent Marker, Stumpi das Rock Salt (docs/STYLEGUIDE.md §3). */
  .rand-spruch {
    font: 15px/1.3 var(--kritzel, var(--metal, "Permanent Marker", cursive));
    transform: rotate(-3.5deg);    /* schräg angeschrieben, nicht gekippt */
    overflow-wrap: break-word;
  }
  .rand[data-seite="rechts"] .rand-spruch { transform: rotate(3deg); }
}

/* ---------- Stumpi und Pumpi, am Seitenrand angeschnitten ---------- */
@media (min-width: 1340px) {
  /* Angeschnitten ohne negative Ränder an der Seitenkante: Das Bild ist breiter als sein
     Streifen und wird von ihm beschnitten. So kann die Seite nie breiter werden als das
     Fenster — der klassische Fehler bei Randschmuck. */
  .rand[data-art="figur"] { display: block; bottom: 6px; padding-top: 10px; }
  .rand-figur { width: 170px; }
  .rand-figur svg { display: block; width: 100%; height: auto; }
  .rand[data-seite="links"] .rand-figur { margin-left: -50px; }
  .rand[data-seite="rechts"] .rand-figur { margin-left: auto; margin-right: -50px; }
  /* Gespiegelt, damit Gitarre und Mikrofon zur Seitenmitte zeigen und nicht weggeschnitten werden */
  .rand[data-seite="rechts"] .rand-figur svg { transform: scaleX(-1); }

  /* Die „9" auf der Weste in der Titelschrift des jeweiligen Modus */
  .rand-figur text {
    font-family: var(--titel, var(--display, var(--block, sans-serif)));
    font-size: 14px;
  }

  /* Ganz leises Wippen, wie Stumpi auf der Backstage-Bühne */
  .rand-figur { animation: rand-wippen 6s ease-in-out infinite; transform-origin: 50% 96%; }
  @keyframes rand-wippen {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
  }
}

@media (min-width: 1560px) {
  .rand-spruch { font-size: 17px; }
  .rand-figur { width: 210px; }
  .rand[data-seite="links"] .rand-figur { margin-left: -62px; }
  .rand[data-seite="rechts"] .rand-figur { margin-right: -62px; }
}

/* Pro Modus etwas anders gewichtet: im Nachtmodus trägt weniger Deckkraft weiter. */
html[data-modus="backstage"] .rand { opacity: .55; }
html[data-modus="welttournee"] .rand { opacity: .42; }
html[data-modus="welttournee"] .rand-spruch { letter-spacing: .02em; }
html[data-modus="stumpi"] .rand { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .rand, .rand-figur { animation: none; }
}