/* css/zettel.css · Der Aufklapp-Zettel (Zettel V2) und der Marker auf dem Liga-Detail (R10),
 * gebaut nach dem Figma-Screen „Liga-Detail (mit Zettel)" (221:2), am 02.09.2026 über den Draht
 * gemessen, deckungsgleich mit `zettel-v2-werte-abgenommen.md` und `zettel-v2-parameter.json`
 * (SPEC B2, Entscheidungen 67, 69, 70, 71, 81). Lage ab der linken oberen Ecke des Screens,
 * Einheit --u wie in start.css.
 *
 * Baustein 248,67 × 298,67 bei 145,48 / 379,19, in Figma +7,25 Grad um die linke obere Ecke,
 * im Browser also −7,25 Grad. Darin der Zwei-Ebenen-Schatten (746 × 896 in 3x) über den
 * ganzen Baustein, das Papier 165 × 215 bei 41,67 / 41,67 (gewölbt, 495 × 645 in 3x) und die
 * Klammer 66 × 63 bei 162,1 / 65,67 mit zusätzlich +5 Grad (im Browser −5). Papier und Klammer
 * ragen bewusst über die Pergamentkante bei 369 hinaus (Punkt 46).
 * Elf Textebenen in Indie Flower, Espresso, jede mit eigener Größe und eigenem Winkel, gerechnet
 * aus demselben Gitter wie das Papier (Weg 1, Entscheidung 81): Lage der Textbox ab der
 * Papierecke, Oberkante = Grundlinie − 0,98 × Größe, Winkel im Browser mit umgekehrtem Vorzeichen.
 * Marker 313 × 27 bei 38 / 326, 0,6 Grad, Multiplizieren, Marker-Orange als Foto
 * (DESIGN.md Abschnitt 2, Ausnahme zu Stilregel 8), auf der angetippten Zeile: Zeilenoberkante + 10.
 *
 * Verhalten (SPEC B2): Ein Tipp auf eine Zeile schiebt den Zettel seitlich ein, er bleibt an
 * der Blattkante hängen, mit einer Bremse am Ende; ein zweiter Tipp fährt ihn hinaus.
 * Punkt 42 ist entschieden (Tabea, 03.09.2026, Entscheidung 86): Weg 1, elf Textebenen wie in
 * Figma. Der Kandidat Weg 5 (echter Text mit CSS-Perspektive) ist nach dem Bildvergleich
 * gelöscht. Styling-Datei im Sinne von CLAUDE.md: Claude ändert sie nie ungefragt.
 */
.rangliste tbody tr { cursor: pointer; }
.marker {
  position: absolute; display: none;
  left: calc(38 * var(--u)); top: calc(326 * var(--u)); width: calc(313 * var(--u)); height: calc(27 * var(--u));
  transform: rotate(-0.6deg); transform-origin: 0 0;
  mix-blend-mode: multiply; pointer-events: none;
}
.marker img { display: block; width: 100%; height: 100%; object-fit: cover; }
.liga.offen .marker { display: block; }

.zettel {
  position: absolute;
  left: calc(145.48 * var(--u)); top: calc(379.19 * var(--u)); width: calc(248.67 * var(--u)); height: calc(298.67 * var(--u));
  transform: translateX(calc(300 * var(--u))) rotate(-7.25deg);
  transform-origin: 0 0;
  transition: transform .55s cubic-bezier(.2, .9, .25, 1);   /* seitlich ein, Bremse am Ende */
  pointer-events: none;
}
.liga.offen .zettel { transform: translateX(0) rotate(-7.25deg); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .zettel { transition: none; } }
.zettel img { position: absolute; display: block; object-fit: cover; }
.zettel .schatten { left: 0; top: 0; width: 100%; height: 100%; }
.zettel .papier {
  position: absolute; left: calc(41.67 * var(--u)); top: calc(41.67 * var(--u)); width: calc(165 * var(--u)); height: calc(215 * var(--u));
  font-family: "Indie Flower", sans-serif; color: #2a1d12; line-height: normal; white-space: nowrap;
}
.zettel .papier > img { left: 0; top: 0; width: 100%; height: 100%; }
.zettel .klammer { left: calc(162.1 * var(--u)); top: calc(65.67 * var(--u)); width: calc(66 * var(--u)); height: calc(63 * var(--u)); transform: rotate(-5deg); transform-origin: 0 0; }

/* Die elf Textebenen (Weg 1), Werte aus zettel-v2-parameter.json (x, Oberkante, Größe, Winkel) */
.zettel .t { position: absolute; transform-origin: 0 0; }
.zettel .t1  { left: calc(6.52 * var(--u));   top: calc(11.1 * var(--u));   font-size: calc(12.9 * var(--u));  transform: rotate(-1.5deg); }
.zettel .t2  { left: calc(9.8 * var(--u));    top: calc(37.05 * var(--u));  font-size: calc(21.18 * var(--u)); transform: rotate(0.47deg); }
.zettel .t3  { left: calc(117.69 * var(--u)); top: calc(41.44 * var(--u));  font-size: calc(15.91 * var(--u)); transform: rotate(-0.41deg); }
.zettel .t4  { left: calc(8.3 * var(--u));    top: calc(65.24 * var(--u));  font-size: calc(21.14 * var(--u)); transform: rotate(0.49deg); }
.zettel .t5  { left: calc(115.86 * var(--u)); top: calc(70.17 * var(--u));  font-size: calc(16.49 * var(--u)); transform: rotate(-0.45deg); }
.zettel .t6  { left: calc(8.55 * var(--u));   top: calc(93.4 * var(--u));   font-size: calc(22.92 * var(--u)); transform: rotate(-0.08deg); }
.zettel .t7  { left: calc(115.58 * var(--u)); top: calc(98.86 * var(--u));  font-size: calc(16.46 * var(--u)); transform: rotate(6.16deg); }
.zettel .t8  { left: calc(8.1 * var(--u));    top: calc(124.05 * var(--u)); font-size: calc(22.22 * var(--u)); transform: rotate(-0.7deg); }
.zettel .t9  { left: calc(113.61 * var(--u)); top: calc(129.22 * var(--u)); font-size: calc(16.13 * var(--u)); transform: rotate(-2.24deg); }
.zettel .t10 { left: calc(7.7 * var(--u));    top: calc(154.74 * var(--u)); font-size: calc(21.2 * var(--u));  transform: rotate(-0.64deg); }
.zettel .t11 { left: calc(116.79 * var(--u)); top: calc(157.12 * var(--u)); font-size: calc(18.53 * var(--u)); transform: rotate(-0.93deg); }