/* Startseite: Hero-Bühne, Soundbastl-Aussage, Sound + Bastl. */

/* ---------- Hero ----------
   Bühne 100 × 62,5 Einheiten; eine Einheit (--u) = 1vw, höchstens 15px und so,
   dass die Bühne in die Fensterhöhe passt (wie auf der WordPress-Seite). */
.jk-hero { position: relative; height: max(100vh, 600px); height: max(100svh, 600px); overflow: hidden; --u: min(1vw, (max(100svh, 600px)) / 62.5, 15px); }
.jk-buehne { position: absolute; left: 50%; bottom: 0; width: calc(100 * var(--u)); height: calc(62.5 * var(--u)); transform: translateX(-50%); }
.jk-hero__text { position: absolute; left: var(--jk-gutter); top: 0; bottom: 0; width: 46%; z-index: 4; pointer-events: none; }
.jk-hero__text a { pointer-events: auto; }
.jk-hero .jk-display { position: absolute; top: 32%; --jk-display-size: max(56px, calc(8.4 * var(--u))); }
.jk-hero .jk-roles { position: absolute; bottom: calc(4.5 * var(--u)); }

.jk-portrait { position: absolute; left: calc(58.9 * var(--u)); bottom: 0; width: calc(29.4 * var(--u)); z-index: 2; transform-origin: 50% 100%; }
.jk-portrait img { display: block; width: 100%; height: auto; filter: var(--photo-portrait); }

.jk-hero .jk-instr-pos { position: absolute; z-index: 3; }
.jk-hero .pos-kalimba { left: calc(82.5 * var(--u)); top: calc(11.5 * var(--u)); }
.jk-hero .pos-kalimba .jk-instr { --p: calc(var(--u) * .95 / 14.4); --jk-rot: -10deg; }
.jk-hero .pos-harmonika { left: calc(27 * var(--u)); top: calc(43.5 * var(--u)); }
.jk-hero .pos-harmonika .jk-instr { --p: calc(var(--u) * 1.55 / 14.4); --jk-rot: -5deg; }
.jk-hero .pos-trommel { left: calc(80.5 * var(--u)); top: calc(33 * var(--u)); }
.jk-hero .pos-trommel .jk-instr { --p: calc(var(--u) * 1.1 / 14.4); --jk-rot: 0deg; }
.jk-hero .pos-rassel { left: calc(50.5 * var(--u)); top: calc(9.5 * var(--u)); }
.jk-hero .pos-rassel .jk-instr { --p: calc(var(--u) * .95 / 14.4); }
.jk-hero .jk-sound-toggle { position: absolute; right: var(--jk-gutter); bottom: calc(4.8 * var(--u)); z-index: 6; }
.jk-sound-toggle.jk-lockt { animation: jk-lockt .8s ease-in-out; }
@keyframes jk-lockt { 0%, 100% { translate: 0 0; } 15%, 45%, 75% { translate: -2px 0; } 30%, 60% { translate: 2px 0; } }

.jk-grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .10; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); background-size: 200px 200px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.jk-scroll-cue { position: absolute; left: 50%; bottom: 28px; z-index: 6; width: 44px; height: 44px; margin-left: -22px; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; color: var(--ink-muted); text-decoration: none; opacity: .75; transition: opacity .25s, color .25s; }
.jk-scroll-cue:hover { opacity: 1; color: var(--ink); }
.jk-scroll-cue span { width: 9px; height: 9px; margin-top: -4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .jk-scroll-cue span { animation: jk-cue-bob 2.6s ease-in-out infinite; } }
@keyframes jk-cue-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }

/* ---------- Live als nächstes + Neu im Regal ---------- */
main .jk-weiter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px clamp(24px, 8vw, 160px); padding-bottom: 160px; overflow-x: clip; }
.jk-weiter .jk-gig-next { position: relative; left: auto; bottom: auto; width: auto; max-width: 380px; margin: 40px 20px 0 14px; box-shadow: none; transform: rotate(-1.5deg); } /* Rand für die Stanzlöcher des Tickets */
.jk-weiter .jk-link { margin-top: 40px; }
.jk-weiter__regal > .jk-link { display: table; }
.jk-cd { display: block; width: min(300px, 72%); margin-top: 40px; color: var(--ink); text-decoration: none; }
.jk-cd__huelle { position: relative; display: block; aspect-ratio: 1; }
.jk-cd__cover { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--sand); }
.jk-cd:hover .jk-cd__scheibe, .jk-cd:focus-visible .jk-cd__scheibe { translate: 34% 0; }
.jk-cd .jk-card__title { transition: color .2s; }
.jk-cd:hover .jk-card__title { color: var(--rust); }
@media (max-width: 900px) { main .jk-weiter { grid-template-columns: 1fr; padding-bottom: 100px; } }

/* ---------- Auftritt nach der Ladeanimation, Schweben, Scroll-Flug ----------
   Die Hero-Animationen warten, solange die Trommel „gestimmt“ wird (.jk-wartet-auf-loader).
   Flug und Zurückweichen beim Scrollen: assets/js/instrumentenflug.js */
.jk-hero.is-offen { overflow-x: clip; overflow-y: visible; z-index: 3; }
@property --balg { syntax: '<number>'; inherits: true; initial-value: .54; }
.jk-hero.is-offen .jk-harmonika { --balg: .54 !important; transition: --balg .6s cubic-bezier(.22, .61, .36, 1); }
html.jk-flug .jk-bereich__deko .jk-instr { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .jk-hero .jk-display { animation: jk-hero-auf 1.1s cubic-bezier(.22, .61, .36, 1) .15s both; }
  .jk-hero .jk-display .jk-star { animation: jk-stern-auf 1.3s cubic-bezier(.34, 1.56, .64, 1) .95s both; }
  .jk-hero .jk-roles li { animation: jk-hero-auf .9s cubic-bezier(.22, .61, .36, 1) both; }
  .jk-hero .jk-roles li:nth-child(1) { animation-delay: .5s; }
  .jk-hero .jk-roles li:nth-child(2) { animation-delay: .6s; }
  .jk-hero .jk-roles li:nth-child(3) { animation-delay: .7s; }
  .jk-portrait picture { display: block; animation: jk-portrait-auf 1.4s cubic-bezier(.22, .61, .36, 1) both; }
  .jk-hero .pos-harmonika > .jk-instr { animation: jk-instr-auf 1.1s cubic-bezier(.34, 1.3, .64, 1) .35s both, jk-schweben 8s ease-in-out 1.5s infinite; }
  .jk-hero .pos-trommel > .jk-drum { display: block; animation: jk-instr-auf 1.1s cubic-bezier(.34, 1.3, .64, 1) .45s both, jk-schweben 10s ease-in-out 1.6s infinite reverse; }
  .jk-hero .pos-kalimba > .jk-instr { animation: jk-instr-auf 1.1s cubic-bezier(.34, 1.3, .64, 1) .55s both, jk-schweben 9s ease-in-out 1.7s infinite; }
  .jk-hero .pos-rassel > .jk-rassel { animation: jk-instr-auf 1.1s cubic-bezier(.34, 1.3, .64, 1) .65s both; }
  .jk-hero .jk-sound-toggle, .jk-hero .jk-scroll-cue { animation: jk-einblenden .9s ease 1.4s both; }
}
@keyframes jk-hero-auf { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes jk-stern-auf { from { opacity: 0; rotate: -150deg; scale: .3; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes jk-portrait-auf { from { translate: 0 30px; } to { translate: 0 0; } } /* ohne Ausblenden: das Porträt zählt für die Ladezeit */
@keyframes jk-instr-auf { from { opacity: 0; transform: translateY(calc(-3 * var(--u))) rotate(-9deg) rotate(var(--jk-rot, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(0deg) rotate(var(--jk-rot, 0deg)); } }
@keyframes jk-schweben { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 calc(-.4 * var(--u)); rotate: 1deg; } }
@keyframes jk-einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Sternchen als Fußnote: führt zu „* Was ist ein Soundbastl?“ */
/* Der Link bleibt stehen (sonst wandert die Hover-Fläche mit und die Drehung stottert), nur das Zeichen dreht sich –
   um seine eigene Mitte und nur eine Zacke weiter (72°), damit es danach gleich aussieht */
.jk-fussnote { color: var(--rust); text-decoration: none; pointer-events: auto; cursor: pointer; }
.jk-fussnote > span { display: inline-block; transform-origin: 50% 17%; transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.jk-fussnote:hover > span { transform: rotate(72deg); }
@media (prefers-reduced-motion: reduce) { .jk-fussnote > span { transition: none; } }
.jk-aussage .jk-eyebrow .jk-star { margin: 0 .2em 0 0; vertical-align: baseline; }
@media (prefers-reduced-motion: no-preference) { .jk-aussage:target .jk-eyebrow .jk-star { animation: jk-stern-dreh .9s cubic-bezier(.34, 1.56, .64, 1) .3s; } }
@keyframes jk-stern-dreh { from { rotate: -216deg; scale: 1.6; } to { rotate: 0deg; scale: 1; } }

/* „spielt“ schwingt wie eine angezupfte Saite, „baut“ bekommt eine Bemaßung */
.jk-statement em.jk-saite, .jk-statement em.jk-mass { position: relative; display: inline; white-space: nowrap; background: none; padding-bottom: 0; }
.jk-saite::after { content: ""; position: absolute; left: 0; right: 0; top: .96em; height: .26em; transform: scaleY(.18);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q5 0 10 5T20 5' fill='none' stroke='%238c5b45' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") repeat-x 0 50% / .42em 100%; }
.jk-mass::after { content: ""; position: absolute; left: .04em; right: .04em; top: 1.02em; height: .22em; border-inline: 1px solid var(--rust); background: linear-gradient(var(--rust), var(--rust)) 0 50% / 100% 1px no-repeat; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .jk-bewegung .jk-auf.ist-da .jk-saite::after { animation: jk-schwingen 1.8s cubic-bezier(.2, .6, .3, 1) .9s both; }
  .jk-bewegung .jk-auf.ist-da .jk-mass::after { animation: jk-anreissen .9s cubic-bezier(.65, 0, .35, 1) 1.3s both; }
  .jk-aussage .jk-statement:hover .jk-saite::after { animation: jk-schwingen 1.4s cubic-bezier(.2, .6, .3, 1); }
}
@keyframes jk-schwingen { 0% { transform: scaleY(1.5); } 10% { transform: scaleY(-1.2); } 22% { transform: scaleY(.9); } 34% { transform: scaleY(-.65); } 48% { transform: scaleY(.45); } 62% { transform: scaleY(-.3); } 78% { transform: scaleY(.22); } 100% { transform: scaleY(.18); } }
@keyframes jk-anreissen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Spiel-Effekte (von der WordPress-Seite übernommen) */
.jk-tine-pluck { animation: jk-pluck .45s ease-out; }
@keyframes jk-pluck { 0% { transform: rotate(0); filter: brightness(1.4); } 15% { transform: rotate(-5deg); } 35% { transform: rotate(4deg); } 55% { transform: rotate(-2.5deg); } 75% { transform: rotate(1.2deg); } 100% { transform: rotate(0); filter: brightness(1); } }
.jk-drum { cursor: pointer; outline-offset: 6px; }
.jk-drum.is-hit > :first-child { transform: scale(1.04, .94) translateY(6px); }
.jk-ripple { position: absolute; left: 7.5%; top: 10.3%; width: 85%; height: 15.3%; border: 1.5px solid rgb(31 30 28 / .45); border-radius: 50%; pointer-events: none; animation: jk-ripple .5s ease-out forwards; }
@keyframes jk-ripple { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.jk-bam { position: absolute; z-index: 12; pointer-events: none; font-family: var(--font-serif); font-style: italic; font-size: 44px; color: var(--rust); animation: jk-pop .7s ease-out forwards; }
.jk-bam--klein { font-size: 26px; }
@keyframes jk-pop { 0% { transform: translate(0, 0) rotate(-8deg) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -50px) rotate(-4deg) scale(1.1); opacity: 0; } }
.jk-hero.jk-has-stick, .jk-hero.jk-has-stick * { cursor: none !important; }
.jk-hero.jk-has-stick a, .jk-hero.jk-has-stick .jk-sound-toggle { cursor: pointer !important; }
.jk-stick { position: absolute; left: 0; top: 0; width: 16px; height: 210px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .15s; }
.jk-stick.is-on { opacity: 1; }
.jk-stick-inner { width: 100%; height: 100%; transform-origin: 8px 206px; transform: rotate(152deg); transition: transform .07s ease-out; filter: drop-shadow(0 4px 5px rgb(31 30 28 / .18)); }
.jk-stick.is-down .jk-stick-inner { transform: translate(2px, 5px) rotate(158deg); }
.jk-rassel { display: block; outline-offset: 4px; touch-action: manipulation; }
.jk-rassel > .jk-instr { transform: translate(var(--rx, 0px), var(--ry, 0px)) rotate(calc(var(--jk-rot) + var(--rw, 0deg))); }
.jk-zug { position: absolute; z-index: 12; pointer-events: none; translate: -50% 4px; font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1; white-space: nowrap; color: var(--rust); opacity: 0; transition: opacity .25s, translate .35s cubic-bezier(.22, .61, .36, 1); }
.jk-zug.is-an { opacity: 1; translate: -50% 0; }
@media (prefers-reduced-motion: reduce) { .jk-ripple, .jk-bam, .jk-tine-pluck { animation: none; } }
/* Grain-Joystick neigt sich zum Mauszeiger */
.jk-kalimba__stick { translate: var(--sx, 0px) var(--sy, 0px); }

/* Schmale Desktops / Tablet quer: Rollen direkt unter die Überschrift (sonst liegt die Harmonika darauf) */
@media (min-width: 768px) and (max-width: 1180px) {
  .jk-hero .jk-roles { bottom: auto; top: calc(32% + 1.9 * max(56px, 8.4 * var(--u)) + 28px); font-size: 17px; }
}
/* Scroll-Hinweis in die linke Spalte unter die Rollen (in der Mitte läge er auf der Harmonika) */
@media (min-width: 768px) {
  .jk-scroll-cue { left: var(--jk-gutter); margin-left: 0; bottom: calc(4.5 * var(--u)); }
  .jk-hero .jk-roles { bottom: calc(4.5 * var(--u) + 68px); }
}
/* Tablet hochkant: Text oben, ganze Bühne unten */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .jk-hero { display: flex; flex-direction: column; justify-content: space-between; --u: 1vw; padding-top: calc(var(--header-h) + 7vh); }
  .jk-hero__text { position: relative; left: 0; width: auto; padding-inline: var(--jk-gutter); }
  .jk-hero .jk-display, .jk-hero .jk-roles { position: static; }
  .jk-hero .jk-display { --jk-display-size: 12vw; }
  .jk-hero .jk-roles { margin-top: 32px; font-size: 18px; }
  .jk-buehne { position: relative; left: 0; transform: none; flex: none; }
  .jk-scroll-cue { display: none; }
  .jk-hero .jk-sound-toggle { bottom: 28px; }
}

/* Hero am Handy: Text, Spielknopf, darunter die Bühne als Collage */
@media (max-width: 767px) {
  .jk-hero { display: flex; flex-direction: column; height: auto; overflow-x: clip; overflow-y: visible; --u: 1vw; padding-top: calc(var(--header-h) + 28px); }
  .jk-hero__text { position: static; order: 0; width: auto; padding: 0 var(--jk-gutter); pointer-events: auto; }
  .jk-hero .jk-display, .jk-hero .jk-roles { position: static; }
  .jk-hero .jk-display { --jk-display-size: clamp(48px, 14.5vw, 72px); }
  .jk-hero .jk-roles { margin-top: 32px; font-size: 16px; }
  .jk-hero .jk-sound-toggle { order: 1; position: static; align-self: flex-start; margin: 28px var(--jk-gutter) 0; }
  .jk-buehne { order: 2; position: relative; left: 0; transform: none; width: 100%; height: 135vw; margin-top: 8px; }
  .jk-portrait { left: auto; right: 2vw; width: 62vw; }
  .jk-hero .pos-kalimba { left: 4vw; top: 16vw; }
  .jk-hero .pos-kalimba .jk-instr { --p: .19vw; }
  .jk-hero .pos-harmonika { left: 3vw; top: 92vw; }
  .jk-hero .pos-harmonika .jk-instr { --p: .19vw; }
  .jk-hero .pos-trommel { left: 66vw; top: 86vw; }
  .jk-hero .pos-trommel .jk-instr { --p: .18vw; }
  .jk-hero .pos-rassel { left: 14vw; top: 48vw; }
  .jk-hero .pos-rassel .jk-instr { --p: .26vw; }
  .jk-scroll-cue { display: none; }
}

/* ---------- Was ist ein Soundbastl? ---------- */
.jk-aussage { position: relative; z-index: 4; padding-top: 220px; padding-bottom: 120px; }
.jk-aussage .jk-eyebrow { margin-bottom: 22px; }
.jk-aussage .jk-statement { font-size: clamp(32px, 3.4vw, 58px); max-width: 22em; text-wrap: balance; }

/* ---------- Sound + Bastl ---------- */
.jk-zwei { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 clamp(24px, 5vw, 90px); padding-bottom: 160px; }
.jk-bereich__kopf { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 120px; }
.jk-bereich__kopf .jk-section-title { flex-wrap: nowrap; white-space: nowrap; }
.jk-bereich__deko { flex-shrink: 1; min-width: 0; }
.jk-bereich .jk-lead { margin-top: 26px; }
.jk-roles .jk-star { vertical-align: baseline; margin: 0 .1em 0 0; }
.jk-bereich__deko { display: flex; align-items: flex-end; gap: 18px; }
.jk-bereich__deko .jk-instr { --p: .55px; flex: none; }
.jk-bereich__deko .jk-harmonika { --p: .66px; --jk-rot: -4deg; }
.jk-bereich__deko .jk-kalimba { --p: .6px; --jk-rot: -8deg; }
.jk-bereich__deko .jk-trommel { --p: .6px; }
/* „neu!“-Kreis auf einer Karte (wie bei den Releases, aber innen: die Einblende-Animation schneidet am Rahmen ab) */
.jk-karten .jk-card__frame { position: relative; }
.jk-card__neu { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--rust); color: var(--on-rust, var(--paper)); font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1; rotate: 10deg; }
.jk-card__img--microcosm { object-position: 50% 62%; }
.jk-karten { display: grid; gap: var(--space-24); margin-top: 40px; }
.jk-karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jk-karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.jk-bereich .jk-link { margin-top: 40px; }
.jk-zwei .jk-plus { position: relative; align-self: start; margin-top: 360px; }
.jk-plus__zeichen { display: block; }
.jk-plus__gleich { position: absolute; left: 50%; top: 100%; margin-top: 18px; translate: -50% 6px; white-space: nowrap; font-size: 22px; font-style: italic; letter-spacing: 0; line-height: 1; color: var(--rust); opacity: 0; transition: opacity .35s, translate .5s cubic-bezier(.22, .61, .36, 1); }
.jk-zwei .jk-plus:hover .jk-plus__gleich { opacity: 1; translate: -50% 0; }
.jk-bereich--bastl { padding-top: 110px; }

@media (min-width: 1181px) and (max-width: 1599px) {
  .jk-zwei .jk-card__title { font-size: 28px; }
}
@media (min-width: 1181px) and (max-width: 1439px) {
  .jk-zwei .jk-card__title { font-size: 24px; }
  .jk-zwei .jk-card__meta { letter-spacing: .08em; }
}
/* „Neu im Regal“ steht genau unter der Bastl-Spalte (Lücke = 2 × Spaltenabstand + Breite des „+“) */
@media (min-width: 1181px) { main .jk-weiter { column-gap: calc(2 * clamp(24px, 5vw, 90px) + 93px); } }
@media (max-width: 1180px) {
  .jk-aussage { padding-top: 140px; padding-bottom: 90px; }
  .jk-zwei { grid-template-columns: 1fr; padding-bottom: 120px; }
  .jk-zwei .jk-plus { display: none; }
  .jk-bereich--bastl { padding-top: 110px; }
  .jk-bereich__kopf { min-height: 0; }
}
@media (max-width: 900px) {
  .jk-aussage { padding-top: 120px; padding-bottom: 80px; }
  .jk-bereich--bastl { padding-top: 90px; }
}
@media (max-width: 767px) {
  .jk-section-title__main { font-size: 48px; }
  .jk-section-title__accent { font-size: 30px; }
  .jk-lead { font-size: 17px; }
  .jk-bereich__deko { display: none; }
  /* Projektkarten am Handy: Bild links, Text rechts */
  .jk-karten--3 { grid-template-columns: 1fr; gap: 18px; }
  .jk-karten--3 .jk-card { display: grid; grid-template-columns: 42% 1fr; gap: 18px; align-items: center; }
  .jk-karten--3 .jk-card__title { margin-top: 0; }
  .jk-karten--2 { gap: 14px; }
}

/* Das „+“ dreht sich beim Scrollen ein wie eine Schraube (nur Browser mit scroll-gebundenen Animationen) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jk-plus__zeichen { animation: jk-schraube linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes jk-schraube { from { rotate: -180deg; } to { rotate: 0deg; } } /* halbe Umdrehung: + → × → + */

/* Nach dem ersten Zupfen: die Tasten A–J erscheinen kurz unter den Zungen */
.jk-kal-tasten { position: absolute; left: 0; right: 0; top: 88%; pointer-events: none; }
.jk-kal-tasten span { position: absolute; top: 0; translate: -50% 4px; font-family: var(--font-sans); font-size: 10px; font-weight: 700; line-height: 1; color: var(--ink); opacity: 0; transition: opacity .4s, translate .4s; }
.jk-kalimba.zeigt-tasten .jk-kal-tasten span { opacity: .75; translate: -50% 0; }

/* Niedrige Querformate (Handy quer, kleine Laptops): Harmonika etwas kleiner und rechts, damit sie die Rollen freilässt */
@media (min-width: 768px) and (max-height: 560px) {
  .jk-hero .pos-harmonika { left: calc(31 * var(--u)); top: calc(44 * var(--u)); }
  .jk-hero .pos-harmonika .jk-instr { --p: calc(var(--u) * 1.3 / 14.4); }
}