/* ==========================================================================
   Route 66 – Bausteine der Website (Projekt)
   --------------------------------------------------------------------------
   Aus dem freigegebenen Entwurf docs/route66-seitenentwurf22.html übernommen.
   Werkbank-Varianten sind auf die festgelegten Werte aufgelöst:
   Effekt „beide“ (Scheinwerfer + Linsenreflex), Karten deckend,
   Logo-Rand aus, Anlässe als Punkte, Logostrich überall.
   Nicht übernommen: Werkbank, Diskussionsnotizen, Tabs, Musterbogen,
   Schriftumschalter.

   Tokens und Schrift stehen in project.css, hier nur die Bausteine.
   ========================================================================== */

@layer project {

  /* ---------- Ergänzungen zum Theme ---------- */
  :where(.ui-chip) {
    background: var(--surface-filled);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
  }
  :where(.r66-sage .ui-chip) {
    border-color: color-mix(in oklch, var(--sage) 45%, transparent);
    color: light-dark(#2f4a2a, #a8c79c);
  }
  :where(.ui-critical, [data-invalid], del) { --palette-source: oklch(0.58 0.21 var(--hue-red)); }
  :where(.ui-info, abbr, dfn) { --palette-source: oklch(0.58 0.21 var(--hue-blue)); }
  :where(.ui-success, ins) { --palette-source: oklch(0.58 0.21 var(--hue-green)); }
  :where(.ui-warning) { --palette-source: oklch(0.58 0.21 var(--hue-orange)); }

  :where(body) { hyphens: auto; -webkit-hyphens: auto; }
  :where(h1, h2, h3, button, .ui-button) { hyphens: manual; -webkit-hyphens: manual; }

  /* Auf dem Einstiegsbild liegen die Buttons auf einem Foto: Umriss immer weiß. */
  .buehne-aktionen .ui-button.ui-outlined { --_color-contrast: #0b1a2a; }   /* Farbe: --buehne-umriss (Baukasten) */

  /* ---------- Grundgerüst ---------- */
  body { background: var(--surface-default); color: var(--text-primary); margin: 0; padding-block-end: var(--size-10); }
  /* Der Scheinwerfer hinter den Formaten ragt bewusst über den Rand (-50vw) – nicht scrollbar machen. */
  body { overflow-x: clip; }
  .wrap { margin-inline: auto; max-inline-size: 68rem; padding-inline: var(--size-5); }
  .logo { block-size: auto; display: block; }
  .logo-full { inline-size: clamp(11rem, 26vw, 15rem); }
  .logo-trio { inline-size: clamp(10rem, 24vw, 13.5rem); }
  /* Im Seitenkopf: Band- und Trio-Logo exakt gleich groß (beide SVGs ~3,25:1),
     damit beim Seitenwechsel nichts springt. */
  .seitenkopf .logo { aspect-ratio: 2000 / 616; block-size: auto; inline-size: clamp(11rem, 26vw, 15rem); }
  .seitenkopf > a:first-child { flex-shrink: 0; }   /* Logo nie zusammendrücken – lieber bricht die Leiste um */

  /* Ein Raster für alle Kachelfelder. Abweichungen als --raster-min / --raster-gap am Element. */
  .raster {
    display: grid;
    gap: var(--raster-gap, var(--size-4));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--raster-min, 15rem), 100%), 1fr));
  }

  .unsichtbar {
    block-size: 1px; clip-path: inset(50%); inline-size: 1px;
    overflow: hidden; position: absolute; white-space: nowrap;
  }

  /* ---------- Seitenkopf ---------- */
  .seitenkopf { align-items: center; border-block-end: var(--border-width) solid var(--border-color);
    display: flex; flex-wrap: wrap; gap: var(--size-4); justify-content: space-between; padding-block: var(--size-5); }
  /* Navigation kommt aus dem Baukasten (navigation.css): Abschnitt-Leiste im Kopf,
     Seiten im Menü-Panel. Route 66: Trio in Sage */
  .hauptmenue a[data-seite="trio"],
  .sitemap a[data-seite="trio"] { color: var(--sage); }
  /* Logo links, Aktionen immer rechts – auch wenn die Navigation umbricht. */
  .kopf-aktionen { align-items: center; display: flex; gap: var(--size-2); margin-inline-start: auto; }
  /* Handy: Hell/Dunkel sitzt im Menü-Panel, damit Logo, Anfrage und Menü in eine Zeile passen */
  @media (max-width: 51.99rem) {
    .kopf-aktionen .modus-wechsel { display: none; }
  }
  /* Breit: Aktionen bleiben rechts in der Logo-Zeile */
  @media (min-width: 52rem) {
    .seitenkopf { flex-wrap: nowrap; }
    .kopf-aktionen { flex-shrink: 0; }
  }
  /* Handy: Logo schmaler, damit Logo und Aktionen in eine Zeile passen */
  @media (max-width: 30rem) {
    .seitenkopf { gap: var(--size-3); }
    .seitenkopf .logo { inline-size: 7rem; }
  }
  .icon-knopf { aspect-ratio: 1; justify-content: center; padding: var(--size-2); }
  .icon-knopf svg { block-size: 1.25em; inline-size: 1.25em; }

  /* ---------- Bühne / Einstieg ----------
     Markup, Mechanik und Grundstil kommen aus dem Baukasten (bausteine.css).
     Hier nur die Route-66-Werte aus dem Entwurf. */
  .buehne {
    --buehne-hoehe: clamp(23rem, 62vh, 34rem);
    --buehne-schleier: linear-gradient(to top, #0b1a2ae6 0%, #0b1a2a99 45%, #0b1a2a1a 80%);
    --buehne-titel-abstand: .6rem;
    --buehne-akzent: var(--sunflower);
    --buehne-text-farbe: #dde6ef;
    --buehne-aktionen-abstand: .75rem;
    /* Pfeile neben der Textspalte statt darauf: Kante der Spalte (50vw − 33rem),
       um die eigene Breite nach außen versetzt – nie näher als 1rem am Bildschirmrand. */
    --pfeil-abstand: max(calc(1rem + 44px), calc(50vw - 33rem));
    --pfeil-versatz-zurueck: -100%;
    --pfeil-versatz-vor: 100%;
    --pfeil-flaeche: #0b1a2acc;
    --pfeil-rand: #ffffff33;
  }
  .r66-sage .buehne { --buehne-akzent: var(--sage); }
  /* Mittlere Breiten (Pfeile sichtbar, aber kein Platz neben der Textspalte):
     Text um Pfeil + Abstand einrücken, damit die Pfeile nichts überdecken. */
  @media (min-width: 48rem) and (max-width: 75.99rem) {
    .buehne-inhalt { padding-inline: calc(1rem + 44px + var(--size-3)); }
  }

  /* ---------- Abschnitte ---------- */
  section.block { margin-block: var(--size-11); }
  h2.rubrik { border-block-end: var(--border-width) solid var(--border-color);
    margin-block: 0 var(--size-5); padding-block-end: var(--size-2); }
  h2.gross { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.15; margin: 0 0 var(--size-2); text-wrap: balance; }
  p.lead { color: var(--text-muted); font-size: var(--font-size-2); margin-block-start: 0; max-inline-size: 52ch; }

  .kennzahlen { margin-block-start: var(--size-8); }
  .kennzahlen div { padding: var(--size-5) var(--size-3); text-align: center; }
  .kennzahlen .zahl { color: var(--sunflower); display: block; font-size: var(--font-size-5); font-weight: 700; line-height: 1; }

  /* Innenabstand aller Karten: ein Token statt OPUIs festem --size-3.
     Fließend von 1rem (Handy) bis 4rem (breite Bildschirme). */
  :root { --karte-innen: clamp(var(--size-3), 5vw, var(--size-9)); }
  .ui-card { padding-block: var(--karte-innen); }
  .ui-card > :where(hgroup, .ui-content, .ui-actions, .karte-logo) { padding-inline: var(--karte-innen); }
  .ui-card > :where(hgroup, .ui-content):last-child,
  .ui-card > .ui-actions { padding-block-end: 0; }
  .ui-card > hgroup:first-child { padding-block-start: 0; }

  .formate .ui-card { display: flex; flex-direction: column; }
  .formate .ui-actions { justify-content: center; margin-block-start: auto; }  /* zentriert: Abweichung vom Entwurf (dort links), abgestimmt 2026-09-27 */
  .karte-logo { display: flex; justify-content: center; margin-block-end: var(--size-2); }
  .karte-logo .logo { inline-size: min(100%, 17rem); }

  /* .ui-list blendet das ::before der Listenpunkte aus – der Gedankenstrich kommt hier zurück. */
  .merkliste li { align-items: baseline; color: var(--text-muted); }
  .merkliste li::before { color: var(--primary); content: "\2013"; display: block; }

  /* Anlässe: Besetzung als Punktreihe. Drei = Trio, sechs = volle Besetzung,
     „beide“ = drei Gelb + drei Sage (die Band steht vorn). */
  .anlass { background: var(--surface-tonal); border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-2); padding: var(--size-3); }
  .anlass b { display: block; margin-block-end: var(--size-1); }
  .anlass::before {
    background: var(--punkte, var(--sunflower));
    block-size: 8px; content: ""; display: block;
    inline-size: calc(var(--musiker, 6) * 12px);
    margin-block-end: var(--size-2);
    -webkit-mask: radial-gradient(circle at 4px 4px, #000 3.5px, transparent 4px) 0 0 / 12px 8px repeat-x;
            mask: radial-gradient(circle at 4px 4px, #000 3.5px, transparent 4px) 0 0 / 12px 8px repeat-x;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .anlass[data-format="trio"]  { --musiker: 3; --punkte: var(--sage); }
  .anlass[data-format="beide"] { --punkte: linear-gradient(90deg, var(--sunflower) 36px, var(--sage) 0); }

  .zweispalt { align-items: center; }
  .zweispalt img { border-radius: var(--radius-3); display: block; inline-size: 100%; }
  .zweispalt p { margin-block: 0 var(--size-3); }

  .row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--size-2); }

  .ui-blockquote { border-inline-start-color: var(--primary); }

  .galerie-mehr { margin-block: var(--size-5) 0; text-align: center; }
  .band-mehr { margin-block: var(--size-5) 0; }

  /* Galerie (Baustein aus dem Baukasten): Route-66-Werte */
  :root {
    --galerie-kachel-m: 13rem;   /* wie der frühere Platzhalter auf der Startseite */
    --grossansicht-hintergrund: #0d1b2a;   /* Navy, deckend – Text in der Großansicht bleibt ruhig lesbar */
  }

  .stimmen-slider { --slide-size: min(100%, 22rem); --slide-gap: var(--size-4); --pfeil-abstand: calc(-1 * var(--size-3)); }
  /* Genug Platz neben dem Inhalt (68rem + 2 × Pfeil + Abstand): Pfeile ganz nach außen */
  @media (min-width: 76rem) {
    .stimmen-slider { --pfeil-abstand: calc(-1 * var(--size-3)); --pfeil-versatz-zurueck: -100%; --pfeil-versatz-vor: 100%; }
  }
  .stimmen-slider .ui-card { block-size: 100%; }
  /* Zitate: halber Karten-Innenabstand (gilt für Slider und Raster) */
  #stimmen .ui-card { --karte-innen: calc(clamp(var(--size-3), 5vw, var(--size-9)) / 2); }

  .journal { background: var(--surface-tonal); border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-3); padding: var(--size-7) var(--size-6); }
  .journal > h2 { color: var(--sage); margin-block-start: 0; }
  .journal .ui-card { background: var(--surface-elevated); }

  /* ---------- Layout-Seiten (Baukasten-Zeilen, z. B. Trio) ----------
     Rhythmus und Breite wie auf der Startseite: Inhalt 68rem, Seitenrand
     wie .wrap, Abstand M ergibt zusammen die 120px zwischen Abschnitten. */
  .layout-seite .center { --gutter: var(--size-5); }
  .layout-seite .center[data-width="default"] { --center-max: 68rem; }
  .layout-seite .section { --section-pad: calc(var(--size-11) / 2); color: var(--text-primary); }
  .layout-seite .section[data-spacing="s"] { --section-pad: var(--size-7); }
  .layout-seite .section[data-spacing="l"] { --section-pad: var(--size-11); }
  .layout-seite .section[data-spacing="none"] { --section-pad: 0; }
  .layout-seite .stack { --space: var(--size-5); }
  .layout-seite { --abschnittskopf-lead-breite: 72ch; }   /* Einleitung im Abschnittskopf: breiter als Baukasten-Standard */
  /* Bühnentitel auf Layout-Seiten: bewusst 3 Zeilen (liest sich besser).
     Handy: Untergrenze 1.9rem statt 2rem – sonst werden es dort 4 Zeilen. */
  .layout-seite .buehne-titel { font-size: clamp(1.9rem, 5.5vw, 3.5rem); }

  /* Vergleichstabelle: Kante gelb für die Band, Sage fürs Trio */
  :root { --akzent-1: var(--sunflower); --akzent-2: var(--sage); }

  /* ---------- Anfrage ---------- */
  .buchung { margin-block-start: var(--size-11); }
  .buchung-kopf { margin-block-end: var(--size-6); }
  .buchung-titel { color: var(--primary); margin-block: 0 var(--size-2); }
  .buchung .formular { margin-block-start: var(--size-6); }
  .ui-divider.ui-border-primary { block-size: var(--border-size-3); inline-size: min(100%, 32rem); margin-block: 0; }
  .weit { grid-column: 1 / -1; }
  .feld-fehler { color: var(--critical); font-size: var(--font-size-0); margin: var(--size-1) 0 0; }
  .formular-hinweis { color: var(--text-muted); font-size: var(--font-size-0); margin-block: var(--size-2) 0; }
  .formular-hinweis a { color: inherit; }
  .buchung .ui-callout { margin-block: var(--size-4); }

  .fuss { border-block-start: var(--border-width) solid var(--border-color); color: var(--text-muted);
    display: flex; flex-wrap: wrap; font-size: var(--font-size-05); gap: var(--size-5);
    justify-content: space-between; margin-block-start: var(--size-8); padding-block-start: var(--size-5); }
  .fuss a { color: inherit; }

  /* ---------- Logostrich ----------
     Der Unterstrich aus dem Logo als Maske, viewBox 1191 x 93.
     Nimmt die Farbe von --primary bzw. currentColor an. */
  :root { --strich-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1191 93' preserveAspectRatio='none'%3E%3Cpath d='M811.0,0.2 749.1,1.4 685.5,3.6 624.8,6.5 565.3,10.0 508.6,14.1 435.0,20.3 378.4,25.8 303.3,33.9 228.2,43.0 151.9,53.3 78.7,64.1 18.2,73.6 0.2,92.5 123.6,73.4 212.3,61.0 312.1,48.3 418.4,36.6 512.7,27.7 569.3,23.2 631.0,18.9 713.8,14.3 759.6,12.4 797.0,11.5ZM823.4,10.8 863.7,9.8 927.6,9.6 938.6,1.2 900.4,0.2 837.6,0.0 835.7,1.0ZM954.0,9.6 1026.6,10.8 1034.6,5.0 989.2,2.6 964.3,1.9ZM1053.0,11.5 1111.6,13.9 1115.7,11.0 1086.6,8.4 1060.0,6.7ZM1138.0,15.3 1187.6,18.4 1142.8,13.4 1140.9,13.4Z'/%3E%3C/svg%3E"); }

  .ui-divider.ui-border-primary {
    aspect-ratio: 1191 / 93; background: var(--primary); block-size: auto; border: 0;
    -webkit-mask: var(--strich-maske) center / 100% 100% no-repeat;
            mask: var(--strich-maske) center / 100% 100% no-repeat;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Einstieg: Strich unter dem hervorgehobenen Schluss, flach, rechtsbündig. */
  /* vertical-align: top statt baseline: Safari legt die Grundlinie eines
     beschnittenen inline-block an die Unterkante (inkl. Polster) – das Wort
     rutscht sonst nach oben. So sitzt es in jedem Browser auf der Zeile. */
  .buehne-titel em { display: inline-block; overflow: clip; padding-block-end: .32em; position: relative; vertical-align: top; }
  .buehne-titel em::after {
    aspect-ratio: 1191 / 93; background: currentColor; content: "";
    inline-size: max(100%, 4.5em); inset-block-end: 0; inset-inline-end: 0;
    max-block-size: .3em; pointer-events: none; position: absolute;
    -webkit-mask: var(--strich-maske) center / 100% 100% no-repeat;
            mask: var(--strich-maske) center / 100% 100% no-repeat;
  }
  /* Fließtext: <em class="strich">, bleibt inline, Strich im Unterlängenbereich. */
  em.strich { color: var(--primary); font-style: normal; position: relative; white-space: nowrap; }
  em.strich::after {
    aspect-ratio: 1191 / 93; background: currentColor; content: "";
    inline-size: 100%; inset-block-end: -.42em; inset-inline-start: 0;
    max-block-size: .38em; pointer-events: none; position: absolute;
    -webkit-mask: var(--strich-maske) center / 100% 100% no-repeat;
            mask: var(--strich-maske) center / 100% 100% no-repeat;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* ---------- Songliste ----------
     Die Titel stehen als Markup in der Seite, das Skript blendet nur aus
     (Suchmaschinen und Ausdruck sehen alles). */
  .songliste { margin-block-start: var(--size-5); }
  .songliste > details > summary { color: var(--text-muted); cursor: pointer; padding-block: var(--size-2); }
  .songliste > details[open] > summary { margin-block-end: var(--size-3); }
  .songliste-kopf { align-items: end; display: flex; flex-wrap: wrap; gap: var(--size-3); margin-block-end: var(--size-4); }
  .songliste-kopf .ui-text-field { flex: 1 1 15rem; max-inline-size: 24rem; }
  .songliste-kopf .trefferzahl { margin: 0; padding-block-end: var(--size-2); }

  .lieder { column-gap: var(--size-7); columns: 2 17rem; }
  .lieder li { align-items: baseline; border-block-end: var(--border-width) solid var(--border-color);
    break-inside: avoid; column-gap: var(--size-3); display: grid;
    grid-template-columns: 1fr auto; padding-block: var(--size-2); }
  .lied-titel { font-weight: 600; }
  .lied-neben { color: var(--text-muted); font-size: var(--font-size-0); grid-column: 1; }
  .lied-genre { align-self: center; color: var(--text-muted); font-size: var(--font-size-05);
    grid-column: 2; grid-row: 1 / span 2; text-align: end; }

  .genre-filter { cursor: pointer; font: inherit; }
  .genre-filter[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
  .chip-zahl { font-variant-numeric: tabular-nums; opacity: .55; }
  .genre-filter[hidden], .lieder li[hidden] { display: none; }

  @media print {
    .songliste-kopf, .songliste .row, .songliste > details > summary { display: none; }
    .lieder { columns: 3; font-size: 9pt; }
    .lieder li { border: 0; }
  }

  @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
  html { scroll-behavior: smooth; }

  /* ---------- Bühneneffekte hinter den zwei Formaten ----------
     Scheinwerfer auf der Sektion, Linsenreflex auf den Karten.
     Laufzeiten gehen nicht ineinander auf – Wiederholung erst nach gut einer Minute. */
  #formate { position: relative; }
  #formate > * { position: relative; z-index: 1; }
  #formate::before {
    background: radial-gradient(45% 130% at 50% 0%, rgb(255 197 0 / .30) 0%, transparent 70%);
    background-repeat: no-repeat; background-size: 260% 200%;
    content: ""; inset: -2rem -50vw; opacity: 0; pointer-events: none; position: absolute; z-index: 0;
  }
  .formate .ui-card { position: relative; }
  .formate .ui-card > * { position: relative; z-index: 1; }
  .formate .ui-card::before, .formate .ui-card::after {
    content: ""; inset: -45%; opacity: 0; pointer-events: none; position: absolute; z-index: 0;
  }
  .formate .ui-card::before { rotate: -13deg; }
  .formate .ui-card::after  { rotate:   8deg; }
  .formate .ui-card:nth-child(2)::before { rotate:  17deg; }
  .formate .ui-card:nth-child(2)::after  { rotate: -6deg; }
  /* Die Lichtpunkte einmal als Variablen – genutzt von den Formate-Karten
     und von der Band-Großansicht (unten). Je Flare vier Ebenen: Kern,
     weicher Halo, waagrechter und senkrechter Strahl. */
  :root {
    --r66-funkeln-weiss:
      radial-gradient(circle, #fff 0 1.5px, transparent 2.4px),
      radial-gradient(circle, rgb(255 255 255 / .40) 0 2px, transparent 15px),
      radial-gradient(26px 1.3px at 50% 50%, rgb(255 255 255 / .55) 0 35%, transparent 100%),
      radial-gradient(1.3px 18px at 50% 50%, rgb(255 255 255 / .40) 0 35%, transparent 100%);
    --r66-funkeln-gelb:
      radial-gradient(circle, #fff 0 1.2px, transparent 2px),
      radial-gradient(circle, rgb(255 197 0 / .45) 0 2px, transparent 18px),
      radial-gradient(32px 1.2px at 50% 50%, rgb(255 197 0 / .55) 0 35%, transparent 100%),
      radial-gradient(1.2px 22px at 50% 50%, rgb(255 197 0 / .38) 0 35%, transparent 100%);
    --r66-funkeln-sage:
      radial-gradient(circle, #fff 0 1.2px, transparent 2px),
      radial-gradient(circle, rgb(143 177 131 / .50) 0 2px, transparent 18px),
      radial-gradient(32px 1.2px at 50% 50%, rgb(143 177 131 / .60) 0 35%, transparent 100%),
      radial-gradient(1.2px 22px at 50% 50%, rgb(143 177 131 / .42) 0 35%, transparent 100%);
  }
  .formate .ui-card::before {
    background-image: var(--r66-funkeln-weiss);
    background-position: 34px 28px;
    background-size: 232px 178px;
  }
  .formate .ui-card::after {
    background-image: var(--r66-funkeln-gelb);
    background-position: 96px 74px;
    background-size: 297px 241px;
  }
  .r66-sage.ui-card::after { background-image: var(--r66-funkeln-sage); }

  /* Funkeln auch in der Band-Großansicht (Personen-Porträts).
     Die Fläche ist viel größer als eine Karte – die Kacheln daher etwa
     doppelt so weit, sonst flirrt der ganze Bildschirm. Liegt hinter Bild und Text. */
  .personen-rahmen .grossansicht { overflow: hidden; }
  .personen-rahmen .grossansicht::before,
  .personen-rahmen .grossansicht::after {
    content: ""; inset: -45%; opacity: 0; pointer-events: none; position: absolute; z-index: 0;
  }
  .personen-rahmen .grossansicht::before {
    background-image: var(--r66-funkeln-weiss);
    background-position: 34px 28px;
    background-size: 480px 370px;
    rotate: -13deg;
  }
  .personen-rahmen .grossansicht::after {
    background-image: var(--r66-funkeln-gelb);
    background-position: 96px 74px;
    background-size: 610px 500px;
    rotate: 8deg;
  }
  .personen-rahmen .grossansicht > * { z-index: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .formate .ui-card::before,
    .personen-rahmen .grossansicht::before { animation: r66-flare 17s ease-out infinite; }
    .formate .ui-card::after,
    .personen-rahmen .grossansicht::after  { animation: r66-flare 23s ease-out infinite; animation-delay: -9s; }
    .formate .ui-card:nth-child(2)::before { animation-delay: -7.5s; }
    .formate .ui-card:nth-child(2)::after  { animation-delay: -16s; }
    #formate::before { animation: r66-schwenk 15s ease-in-out infinite alternate; }
  }
}

/* Keyframes stehen außerhalb des Layers (gleiche Wirkung, einfacher zu finden). */
@keyframes r66-flare {
  0%   { opacity: 0; scale: 1; translate: 0 0; }
  30%  { opacity: 0; }
  38%  { opacity: var(--flare-max, .75); }
  46%  { opacity: calc(var(--flare-max, .75) * .45); }
  72%  { opacity: 0; }
  100% { opacity: 0; scale: 1.16; translate: 3.5% -2.5%; }
}
@keyframes r66-schwenk {
  from { opacity: 1; background-position: 14% 0; }
  to   { opacity: 1; background-position: 86% 0; }
}