/* ============================================================
   gemein.css — was auf ALLEN Seiten gleich sein muss.
   Fusszeile und Rubrikzeilen stehen nur hier und werden von den
   Inhaltsseiten wie von den Konzertseiten geladen, jeweils hinter dem
   Seiten-Stylesheet. Das Markup der Fusszeile liegt in includes/fuss.php.
   Konvention: eine Regel, eine Quelle.
   ============================================================ */
/* ---------- Fusszeile ----------
   Sie war das einzige Stueck der Seite, das nicht mitwuchs: Schrift und
   Abstaende standen in rem und festen Pixeln, alles darueber rechnet in
   --sk (1672 als Grundmass). Auf einem breiten Bildschirm wuchs also die
   Seite und die Fusszeile blieb stehen — darum wirkte sie immer kleiner,
   je groesser das Fenster war. Jetzt rechnet sie in denselben Einheiten
   wie die Konzertseite und haelt ihr Verhaeltnis auf jeder Breite.
   Unter 820 gelten wieder feste Pixel, sonst wird sie auf dem Telefon
   unlesbar. Eine Regel, eine Quelle: das gilt fuer alle Seiten. */
:root{ --fuss-rand:calc(48 * var(--sk, 1px)) }
.fuss{ display:block !important; position:relative; z-index:2;
  background:var(--nacht); border-top:1px solid var(--kante);
  padding:calc(54 * var(--sk, 1px)) var(--fuss-rand) }
.netze{ display:flex; align-items:center; justify-content:center;
  gap:calc(26 * var(--sk, 1px)); margin:0 0 calc(28 * var(--sk, 1px)) }
.netze::before,.netze::after{ content:""; flex:1; height:1px; background:var(--kante) }
.netze a{ display:block; line-height:0; border:0; color:var(--creme-still);
  transition:color .25s ease }
.netze a:hover{ color:var(--creme) }
.netze svg{ width:calc(24 * var(--sk, 1px)); height:calc(24 * var(--sk, 1px));
  fill:currentColor; display:block }
.fuss__recht{ display:flex; gap:calc(22 * var(--sk, 1px));
  flex-wrap:wrap; justify-content:center }
/* 9.92 ist genau das, was .62rem bei 16er Grundschrift ergibt — also die
   Groesse, die die Fusszeile vorher bei 1672 hatte. Sie bleibt, nur
   rechnet sie jetzt mit und waechst auf breiten Schirmen mit der Seite. */
.fuss__recht a{ border:0; font-family:var(--sans);
  font-size:calc(9.92 * var(--sk, 1px)); letter-spacing:.18em;
  text-transform:uppercase; color:var(--creme-still) }
.fuss__recht a:hover{ color:var(--creme-leise) }
/* Keine Leerzeile zwischen den Rechtslinks und der Zeile darunter. */
.fuss__copy{ margin:0; text-align:center;
  font-family:var(--sans); font-size:calc(9.92 * var(--sk, 1px)); letter-spacing:.18em;
  text-transform:uppercase; color:var(--creme-still) }
@media (max-width:820px){
  :root{ --fuss-rand:clamp(16px,4vw,40px) }
  .fuss{ padding:34px var(--fuss-rand) }
  .netze{ gap:22px; margin:0 0 22px }
  .netze svg{ width:24px; height:24px }
  .fuss__recht{ gap:18px }
  .fuss__recht a{ font-size:.62rem }
  .fuss__copy{ margin:0; font-size:.62rem }
}

/* Reste der alten Konzert-Fusszeile, falls das Markup noch auftaucht */
.fuss__marke,.fuss__spruch,.fuss .knopf{ display:none }


/* ---------- Rubrikzeile ----------
   Konvention ohne Ausnahme: der Abschnittstitel steht mittig, links und
   rechts je eine Haarlinie bis zum Seitenrand. Traegt die Zeile eine zweite
   Angabe (ein Link, ein Zusatz), rutscht diese in eine eigene Zeile darunter
   und steht dort ebenfalls mittig. Nichts geht verloren, nichts draengt den
   Titel aus der Mitte. */
.rubrik{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:18px }
.rubrik::before{ content:""; flex:1 1 auto; height:1px;
  background:var(--kante); order:1 }
.rubrik > span:first-of-type{ order:2 }
.rubrik > i{ flex:1 1 auto; height:1px; background:var(--kante); order:3 }
.rubrik > span:first-of-type ~ span{
  order:4; flex:1 0 100%; text-align:center; margin-top:2px }
/* remode.css zeichnet die zweite Haarlinie als ::after. Wo die Zeile die
   vorgesehene Auszeichnung traegt (<span> plus <i>), uebernimmt das <i>
   diese Linie — sonst stehen zwei Linien nebeneinander und die Schrift
   rutscht an den Rand. */
.rubrik:has(> span):has(> i)::after{ display:none }

/* ---------- Die naechsten Termine ----------
   Drei Termine und als viertes Feld der Weg zur vollstaendigen Tour.
   Am Desktop stehen alle vier nebeneinander. */
.weiter{ grid-template-columns:repeat(4, minmax(0,1fr)) }
@media (max-width:1100px){ .weiter{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:560px){ .weiter{ grid-template-columns:1fr } }
.weiter--alle b{ color:var(--creme) }
.weiter--alle span{ color:var(--creme-still) }

/* ============================================================
   Die Kopfleiste — eine Quelle fuer alle Seiten.

   Das Markup steht in includes/fuss.php Geschwister includes/kopf.php,
   das Aussehen vollstaendig hier. gemein.css wird auf den Inhaltsseiten
   hinter remode.css und auf den Terminseiten hinter konzert/stil.css
   geladen, also gewinnt dieser Block ueberall.

   Der Block steht bewusst allein: er nimmt keine Farbe und kein Mass aus
   den beiden Seiten-Stylesheets, weil die sich unterscheiden (das Rot der
   Terminseite ist ein anderes). Alles, was er braucht, steht hier.

   Gemessen am Entwurf bei 1672: Kopfzeile 76 hoch, Seitenrand 48,
   Schriftzug 38 hoch, Menue Oswald 500 bei 13.4 mit 34 Abstand,
   Symbole 24 mit 30 Abstand.
   ============================================================ */
@font-face{ font-family:"KopfSans"; src:url("/assets/fonts/oswald-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap }

/* Die beiden Schriften der Konzertseite, damit sie auf JEDER Seite zu haben
   sind. Auf der Konzertseite selbst stecken sie zusaetzlich eingebettet im
   mitgelieferten Element — dieselbe Schrift, darum faellt das nicht auf.
   Das Element bleibt unangetastet (Konvention 9), hier kommt nur dazu, was
   die uebrigen Seiten brauchen. */
@font-face{ font-family:"HeadCond"; src:url("/assets/fonts/anton.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"SubCond"; src:url("/assets/fonts/oswald-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"SubCond"; src:url("/assets/fonts/oswald-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap }

:root{ --sk:calc(100vw / 1672) }

/* Konvention: die Kopfzeile bleibt oben stehen, die Seite schiebt sich
   darunter her. Sie steht damit auf jeder Seite immer zur Verfuegung —
   auch nach dreissig Konzertkacheln. */
.kopf{
  --kopf-rand:calc(48 * var(--sk));
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,2vw,40px);
  /* Schmaler geworden: 58 statt 76. Die Schriftgroessen bleiben, was
     wegfaellt ist Luft ueber und unter dem Satz — der stand ohnehin
     senkrecht mittig. */
  height:calc(58 * var(--sk)); min-height:48px;
  padding:0 var(--kopf-rand);
  background:#0b0b0c; border-bottom:1px solid rgba(242,237,228,.14);
}

/* Schriftzug links, senkrecht mittig, ohne Unterzeile. */
.kopf__marke{ display:flex; align-items:center; border:0; text-decoration:none }
.kopf__marke span{ display:none }
.kopf__marke img{ height:calc(34 * var(--sk)); min-height:24px; width:auto;
  display:block; opacity:1 }

/* Das Menue steht als Block mittig auf der Seite — nicht mittig im Rest,
   der zwischen Schriftzug und Symbolen uebrig bleibt. */
.kopf__weg{ position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); margin:0;
  display:flex; align-items:center; gap:calc(34 * var(--sk)) }
.kopf__weg a{
  position:relative; border:0; text-decoration:none;
  font-family:"KopfSans","Oswald","Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:500; font-size:calc(13.4 * var(--sk)); letter-spacing:.1em;
  text-transform:uppercase; color:#b9b2a6;
  padding:calc(5 * var(--sk)) 0;
  border:0;
  transition:color .25s ease }
.kopf__weg a:hover{ color:#f2ede4 }
.kopf__weg a::after{ display:none }
/* Konvention: kein Strich unter dem offenen Punkt — nur die Farbe. */
.kopf__weg a.ist-hier{ color:#e11d2e }

/* Die vier Symbole rechts: 24 Einheiten, creme. */
.kopf__netze{ display:flex; align-items:center; gap:calc(30 * var(--sk)) }
.kopf__netze a{ display:block; line-height:0; border:0; color:#f2ede4;
  text-decoration:none }
.kopf__netze svg{ width:calc(24 * var(--sk)); height:calc(24 * var(--sk));
  fill:currentColor; display:block }

/* Der Brenner: nur am kleinen Fenster. */
.kopf__brenner{ display:none; width:34px; height:26px; padding:0; background:none;
  border:0; cursor:pointer; position:relative; z-index:60 }
.kopf__brenner i{ position:absolute; left:0; right:0; height:1.5px; background:#f2ede4;
  transition:transform .32s ease, opacity .2s ease }
.kopf__brenner i:nth-child(1){ top:3px }
.kopf__brenner i:nth-child(2){ top:12px }
.kopf__brenner i:nth-child(3){ top:21px }
.kopf__brenner.offen i:nth-child(1){ transform:translateY(9px) rotate(45deg) }
.kopf__brenner.offen i:nth-child(2){ opacity:0 }
.kopf__brenner.offen i:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }

/* Kleines Fenster: das Menue klappt ueber die Seite, die Symbole treten ab. */
@media (max-width:820px){
  .kopf{ height:auto; min-height:0; padding:12px clamp(16px,4vw,40px) }
  .kopf__marke img{ height:30px }
  .kopf__netze{ display:none }
  .kopf__brenner{ display:block }
  .kopf__weg{ position:fixed; inset:0; z-index:50; transform:none;
    flex-direction:column; justify-content:center; align-items:center; gap:30px;
    background:#0b0b0c;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s }
  .kopf__weg.offen{ opacity:1; visibility:visible }
  .kopf__weg a{ font-size:1rem; letter-spacing:.24em; border-bottom-width:2px }
}
body.menue-offen{ overflow:hidden }

/* Die vier Symbole im Fuss so hell wie die oben rechts. Ihr Mass steht
   oben im Fusszeilen-Block und wird hier nicht noch einmal gesetzt —
   sonst gewinnt die spaetere Zeile und der Fuss faellt zurueck. */
.netze a{ color:var(--creme) }


/* Die vier Symbole nehmen den Schwung-Effekt von oben. Bis hierher hoben
   sie beim Ueberfahren ab (translateY); in der schmaleren Kopfzeile ist
   dafuer kein Platz mehr, und dieselbe Bewegung wie auf der Konzertseite
   ist ohnehin die ruhigere Loesung: sie kommen nach vorn und schwingen
   aus, statt zu springen. */
.netze a, .kopf__netze a{ transform-origin:center center; will-change:transform;
  transition:scale .9s var(--feder), color .3s ease, filter .3s ease }
.netze a:hover, .netze a:focus-visible,
.kopf__netze a:hover, .kopf__netze a:focus-visible{
  scale:calc(1 + .5 * var(--fx-swing));
  animation:fx-dreh 1.05s linear, fx-schub .86s linear, fx-scher 1.18s linear;
  color:#ffffff }
.netze a svg, .kopf__netze a svg{ transition:filter .3s ease }
.netze a:hover svg, .netze a:focus-visible svg,
.kopf__netze a:hover svg, .kopf__netze a:focus-visible svg{
  filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 16px rgba(255,255,255,.30)) }
@media (prefers-reduced-motion: reduce){
  .netze a, .kopf__netze a{ transition:color .2s ease }
  .netze a:hover, .kopf__netze a:hover{ scale:1; animation:none } }

/* Nur fuer Vorlesegeraete und Suchmaschinen: steht im Text, ist aber nicht
   zu sehen. Wird dort gebraucht, wo die Ueberschrift als Bild gezeichnet
   ist und die Seite sonst ohne Hauptueberschrift dastuende. */
.nur-vorlesen{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }

/* ---------- Sprungziele unter der stehenden Kopfzeile ----------
   Ohne das landet jeder Sprung auf eine Marke hinter der Kopfzeile: der
   Browser scrollt die Marke an den Fensterrand, und dort steht der Kopf. */
[id]{ scroll-margin-top:calc(96 * var(--sk)) }
@media (max-width:820px){ [id]{ scroll-margin-top:72px } }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth } }

/* ---------- Sprungleiste ----------
   Konvention: dieselbe Schrift und dieselbe Groesse wie die Navigation
   oben, aber im normalen Schnitt statt im halbfetten — die Sprungleiste
   ist eine Unterordnung, kein zweites Menue. */
.sprung a,
body[data-neu] .sprung a{
  font-family:"KopfSans","Oswald","Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:calc(13.4 * var(--sk)); letter-spacing:.1em;
  text-transform:uppercase }
@media (max-width:820px){
  .sprung a, body[data-neu] .sprung a{ font-size:.72rem }
}
/* Konvention: kein Strich, nur Farbe und Flaeche. Die Sprungmarken sind
   gebaut wie die Auswahlknoepfe auf /konzerte — ALLE SHOWS, CLUBS, OPEN
   AIR: ruhend nur Schrift, ueberfahren weiss, die offene Stelle steht in
   einem roten Kasten. Dieselbe Form, damit man nicht zweimal lernen muss,
   was anklickbar ist. */
.sprung a, body[data-neu] .sprung a{
  border:0 !important; text-decoration:none;
  display:inline-flex; align-items:center;
  padding:calc(7 * var(--sk)) calc(22 * var(--sk));
  border-radius:3px;
  color:var(--creme-leise, #b9b2a6);
  transition:color .25s ease, background-color .25s ease }
/* Konvention: Ueberfahren faerbt weiss, die offene Stelle steht rot.
   Ueberall gleich — Navigation, Sprungleiste, alles Kuenftige. */
.sprung a:hover, body[data-neu] .sprung a:hover,
.sprung a:focus-visible, body[data-neu] .sprung a:focus-visible{
  color:#f2ede4; border:0 !important }
.sprung a.ist-hier, body[data-neu] .sprung a.ist-hier{
  background:#e11d2e; color:#fff; border:0 !important }
/* Im roten Kasten bleibt die Schrift weiss — sonst wuerde sie beim
   Ueberfahren im Rot verschwinden. */
.sprung a.ist-hier:hover, body[data-neu] .sprung a.ist-hier:hover{
  background:#e11d2e; color:#fff }

/* Die Leiste selbst misst damit genauso viel wie die Filterleiste auf
   /konzerte: 7 Luft, 34 Knopf, 7 Luft, dazu die beiden Haarlinien. */
.sprung, body[data-neu] .sprung{
  align-items:center;
  gap:calc(8 * var(--sk));
  padding-top:calc(7 * var(--sk)); padding-bottom:calc(7 * var(--sk)) }
@media (max-width:820px){
  .sprung a, body[data-neu] .sprung a{ padding:7px 14px }
  .sprung, body[data-neu] .sprung{ gap:6px; padding-top:7px; padding-bottom:7px }
}

/* ---------- Rubrikzeile: dezent ----------
   Konvention: die Beschriftung in der Mitte der Trennlinie ist grau wie
   die Linie selbst und eine Nummer kleiner als der uebrige Satz. Sie
   ordnet, sie ruft nicht. */
body[data-neu] .teil > .rubrik,
#rm-zeitung .rubrik, .rubrik{
  color:var(--creme-still, #6f6a62) }
/* Eine Groesse fuer alle: auf Band stand die Zeile bei 10,24 Punkten, auf
   Presse bei 12. Gilt jetzt ueberall 12 — die groessere der beiden. */
body[data-neu] .teil > .rubrik,
.rubrik, #rm-zeitung .rubrik, .dachzeile, .rand-rubrik{
  font-weight:500; font-size:calc(12 * var(--sk));
  letter-spacing:calc(3 * var(--sk)) }
@media (max-width:820px){
  body[data-neu] .teil > .rubrik,
  .rubrik, #rm-zeitung .rubrik, .dachzeile, .rand-rubrik{
    font-size:.68rem; letter-spacing:.18em }
}

/* ---------- Konvention: keine Unterstriche ----------
   Nirgends auf der Seite wird ein Verweis unterstrichen. Er faerbt sich
   rot — beim Beruehren, und dauerhaft, wo er die offene Stelle ist.
   Der Fliesstext der Zeitungsseiten trug bis hierher Dutzende
   Unterstreichungen; die Seite sah damit aus wie ein Nachschlagewerk. */
a{ text-decoration:none }
a:hover, a:focus-visible{ text-decoration:none }
/* ---------- Verweise im Lauftext ----------
   Ohne Unterstrich muss der Verweis anders auffallen. Rot war die falsche
   Antwort: auf der Bandseite stehen 54 Verweise in sechs Absaetzen, die
   Seite war danach rot gesprenkelt.

   Der Lauftext steht in creme-leise (185,178,166). Ein Verweis steht
   eine Stufe heller, in creme (242,237,228) — derselbe Satz, nur
   praesenter. Das reicht zum Erkennen und laermt nicht.

   Beim Ueberfahren wird er rot. Das widerspricht der Konvention
   "Ueberfahren ist weiss, offen ist rot" nur scheinbar: im Lauftext gibt
   es kein "offen", also ist Rot hier frei und markiert die Beruehrung.

   Kacheln, Knoepfe und Terminzeilen bleiben aussen vor — sie bringen
   ihre eigene Farbe mit. Darum die enge Fassung: ein Verweis OHNE eigene
   Klasse, in einem Absatz, einer Liste, einem Zitat. */
#rm-zeitung :is(p,li,blockquote,figcaption,dd,td):not([class]) a:not([class]),
#rm-zeitung :is(p,li,blockquote,figcaption,dd,td).rmz-inhalt a:not([class]){
  color:var(--creme, #f2ede4); border-bottom:0; box-shadow:none;
  transition:color .2s ease }
#rm-zeitung :is(p,li,blockquote,figcaption,dd,td):not([class]) a:not([class]):hover,
#rm-zeitung :is(p,li,blockquote,figcaption,dd,td).rmz-inhalt a:not([class]):hover{
  color:var(--akzent, #e11d2e) }

/* ---------- Pfeil nach oben ----------
   Konvention: sobald etwas gescrollt wurde, steht rechts unten ein Pfeil,
   der zurueck an den Anfang bringt. Auf jeder Seite, an derselben Stelle.
   Vorher ist er nicht da — auf einer kurzen Seite braucht ihn niemand. */
.hoch{
  position:fixed; right:clamp(16px,2.2vw,32px); bottom:clamp(16px,2.2vw,32px);
  z-index:50; width:44px; height:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
  appearance:none; cursor:pointer; border-radius:50%;
  background:rgba(18,18,20,.82); border:1px solid var(--kante);
  color:var(--creme-leise); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s,
             color .2s ease, border-color .2s ease }
.hoch.ist-da{ opacity:1; visibility:visible; transform:none }
.hoch:hover{ color:var(--creme); border-color:rgba(242,237,228,.34) }
.hoch svg{ width:18px; height:18px; display:block }
@media (prefers-reduced-motion: reduce){ .hoch{ transition:none } }

/* ================= Der Schwung-Effekt =================
   Eine Bewegung, eine Stelle. Wer sie haben will, gibt dem Element die
   Klasse "schwingt" — Kopfzeile, Fusszeile, Terminkacheln, alles Kuenftige.

   Wie sie entsteht: vier Eigenschaften laufen getrennt und mit
   verschiedenen Laufzeiten (1.05s, .86s, 1.18s) — Drehung, Schub und
   Scherung treffen sich also nie im gleichen Takt. Dadurch wandern die
   Ecken unabhaengig voneinander um ihren Nullpunkt, als haenge das Ganze
   an Gummibaendern. Die Groesse federt ueber die Kurve --feder zurueck,
   die ueber ihren Zielwert hinausschiesst (Spitze 1.386 bei 18 Prozent).

   --fx-swing ist die Staerke, 0 bis 1. Bei 1 ist es das, was auf der
   Konzertseite steht; bei 0 passiert gar nichts. Die Seite
   /einstellungen/ stellt sie zum Ausprobieren ein. */
:root{
  --fx-swing:.35;
  --feder:linear(0 0%, 0.111 1.7%, 0.267 3.3%, 0.449 5%, 0.642 6.7%,
    0.829 8.3%, 1 10%, 1.144 11.7%, 1.257 13.3%, 1.334 15%, 1.376 16.7%, 1.386 18.3%,
    1.368 20%, 1.327 21.7%, 1.27 23.3%, 1.203 25%, 1.132 26.7%, 1.063 28.3%, 1 30%,
    0.947 31.7%, 0.906 33.3%, 0.877 35%, 0.862 36.7%, 0.858 38.3%, 0.865 40%, 0.88 41.7%,
    0.901 43.3%, 0.925 45%, 0.952 46.7%, 0.977 48.3%, 1 50%, 1.02 51.7%, 1.035 53.3%,
    1.045 55%, 1.051 56.7%, 1.052 58.3%, 1.05 60%, 1.044 61.7%, 1.036 63.3%, 1.027 65%,
    1.018 66.7%, 1.008 68.3%, 1 70%, 0.993 71.7%, 0.987 73.3%, 0.983 75%, 0.981 76.7%,
    0.981 78.3%, 0.982 80%, 0.984 81.7%, 0.987 83.3%, 0.99 85%, 0.993 86.7%, 0.997 88.3%,
    1 90%, 1.003 91.7%, 1.005 93.3%, 1.006 95%, 1.007 96.7%, 1.007 98.3%, 1 100%);
}

@keyframes fx-dreh{
  0%{ rotate:0deg }
  13%{ rotate:calc(var(--fx-swing) * 1.9deg) }
  30%{ rotate:calc(var(--fx-swing) * -1.12deg) }
  48%{ rotate:calc(var(--fx-swing) * .6deg) }
  67%{ rotate:calc(var(--fx-swing) * -.28deg) }
  84%{ rotate:calc(var(--fx-swing) * .11deg) }
  100%{ rotate:0deg } }
@keyframes fx-schub{
  0%{ translate:0 0 }
  12%{ translate:calc(var(--fx-swing) * .8%) calc(var(--fx-swing) * -2.1%) }
  29%{ translate:calc(var(--fx-swing) * -.46%) calc(var(--fx-swing) * 1.2%) }
  47%{ translate:calc(var(--fx-swing) * .24%) calc(var(--fx-swing) * -.62%) }
  66%{ translate:calc(var(--fx-swing) * -.11%) calc(var(--fx-swing) * .29%) }
  85%{ translate:calc(var(--fx-swing) * .04%) calc(var(--fx-swing) * -.1%) }
  100%{ translate:0 0 } }
@keyframes fx-scher{
  0%{ transform:skewX(0deg) skewY(0deg) }
  11%{ transform:skewX(calc(var(--fx-swing) * -2.6deg)) skewY(calc(var(--fx-swing) * 1.3deg)) }
  28%{ transform:skewX(calc(var(--fx-swing) * 1.5deg)) skewY(calc(var(--fx-swing) * -.76deg)) }
  46%{ transform:skewX(calc(var(--fx-swing) * -.78deg)) skewY(calc(var(--fx-swing) * .4deg)) }
  65%{ transform:skewX(calc(var(--fx-swing) * .36deg)) skewY(calc(var(--fx-swing) * -.19deg)) }
  84%{ transform:skewX(calc(var(--fx-swing) * -.14deg)) skewY(calc(var(--fx-swing) * .07deg)) }
  100%{ transform:skewX(0deg) skewY(0deg) } }

.schwingt{ transform-origin:center center;
  transition:scale .9s var(--feder), color .25s ease, filter .3s ease }
.schwingt:hover, .schwingt:focus-visible{
  scale:calc(1 + .5 * var(--fx-swing));
  animation:fx-dreh 1.05s linear, fx-schub .86s linear, fx-scher 1.18s linear }
@media (prefers-reduced-motion: reduce){
  .schwingt{ transition:color .2s ease }
  .schwingt:hover, .schwingt:focus-visible{ scale:1; animation:none } }