/* Links-Seite „Tasche“ (v1, 2026-10-14): die Folg-mir-Pads der Hauptseite auf einem pinken Taschen-Sampler.
   Baut auf style.css auf. --px (ein Art-Pixel) setzt tasche.js aus der Bildschirmbreite, in ganzen Gerätepixeln. */
.pk { --yel: #ffe066; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.pk__bg { position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; }
.pk .sparkles { position: fixed; }
.pk__main { position: relative; z-index: 2; flex: 1; display: grid; justify-items: center; align-content: start; gap: calc(var(--px) * 6); padding: calc(var(--px) * 8) 16px calc(var(--px) * 36); }
.pk__lead { margin: 0; font-size: 16.5px; color: var(--sh3); text-align: center; }

/* the casing is pixel art on a canvas behind the screen and the pads (drawn in tasche.js) */
.tasche { position: relative; width: min(100%, 480px); padding: calc(var(--px) * 16) calc(var(--px) * 7) calc(var(--px) * 14); }
.tasche__art { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.tasche__screen { position: relative; z-index: 1; padding: calc(var(--px) * 3); margin-bottom: calc(var(--px) * 10); }
.tasche__lcd { width: 100%; height: auto; background: var(--lcd0); }

/* the pads: same .fbtn as on the main page, stacked; sizes follow --px */
.pads { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--px) * 6); }
.pads li { padding: calc(var(--px) * 8); margin: calc(var(--px) * -8); pointer-events: none; }   /* room for stickers + shadow while dissolving */
.pads .fbtn { pointer-events: auto; width: 100%; min-width: 0; max-width: none; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(var(--px) * 4);
  padding: calc(var(--px) * 4) calc(var(--px) * 5) calc(var(--px) * 4) calc(var(--px) * 6); }
.pads .fbtn__icon { width: calc(var(--px) * 16); height: calc(var(--px) * 14); }
.pads .fbtn__txt { gap: calc(var(--px) * 1.5); }
.pads .fbtn__txt b { font-size: calc(var(--px) * 8); }
.pads .fbtn__txt small { font-size: max(14px, calc(var(--px) * 4.125)); }
.pads .fbtn__icon--eq { gap: var(--px); }
.pads .fbtn__icon--eq i { width: calc(var(--px) * 2); height: calc(var(--px) * 4); animation-name: eqp; }
@keyframes eqp { 0% { height: calc(var(--px) * 4); } 25% { height: calc(var(--px) * 11); } 50% { height: calc(var(--px) * 7); } 75% { height: calc(var(--px) * 14); } }
.fbtn.is-lit { --led: var(--mint); }
.fbtn__go { width: calc(var(--px) * 4); height: calc(var(--px) * 7); }
.fbtn__go svg { display: block; width: 100%; height: 100%; }
.fbtn:hover .fbtn__go, .fbtn:focus-visible .fbtn__go { animation: nudge .4s steps(1) infinite; }
@keyframes nudge { 50% { transform: translateX(var(--px)); } }

/* the newest song: bigger mint pad with chasing marquee lights, a taped cover and a NEU tag */
.pads .fbtn--new { --fill: var(--mint); --ink-c: var(--ink); animation-delay: -0.5s; gap: calc(var(--px) * 4);
  padding: calc(var(--px) * 6) calc(var(--px) * 5) calc(var(--px) * 6) calc(var(--px) * 6); }
.fbtn--new::before { content: ''; position: absolute; inset: var(--px); pointer-events: none;
  --b: linear-gradient(90deg, var(--hot) 0 25%, transparent 25% 50%, var(--crm) 50% 75%, transparent 75%);
  --bv: linear-gradient(180deg, var(--hot) 0 25%, transparent 25% 50%, var(--crm) 50% 75%, transparent 75%);
  background: var(--b) 0 0 / calc(var(--px) * 8) calc(var(--px) * 2) repeat-x, var(--b) 0 100% / calc(var(--px) * 8) calc(var(--px) * 2) repeat-x,
    var(--bv) 0 0 / calc(var(--px) * 2) calc(var(--px) * 8) repeat-y, var(--bv) 100% 0 / calc(var(--px) * 2) calc(var(--px) * 8) repeat-y;
  animation: chase .6s steps(1) infinite; }
@keyframes chase { 50% { background-position: calc(var(--px) * 4) 0, calc(var(--px) * 4) 100%, 0 calc(var(--px) * 4), 100% calc(var(--px) * 4); } }
.fbtn--new:hover::before, .fbtn--new:focus-visible::before { animation-duration: .2s; }
.fbtn__cover { position: relative; width: calc(var(--px) * 20); height: calc(var(--px) * 20); background: var(--crm); box-shadow: 0 0 0 var(--px) var(--ink), var(--px) var(--px) 0 var(--px) var(--hot); }
.fbtn__cover img, .fbtn__cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fbtn__cover::after { content: ''; position: absolute; left: 50%; top: calc(var(--px) * -3); width: calc(var(--px) * 10); height: calc(var(--px) * 4); margin-left: calc(var(--px) * -5); background: rgba(255, 168, 213, .85); }
.pads .fbtn__title { display: block; line-height: 0; font-size: 0; }
.fbtn__title svg { display: block; height: auto; }
.fbtn__kick { display: flex; align-items: center; gap: var(--px); text-transform: uppercase; }
.fbtn__kick::before { content: ''; width: calc(var(--px) * 2); height: calc(var(--px) * 2); background: var(--hot); box-shadow: 0 0 0 calc(var(--px) / 2) var(--ink); animation: flash 1s steps(1) infinite; }
.fbtn__tag { position: absolute; z-index: 2; right: calc(var(--px) * -5); top: calc(var(--px) * -6); width: calc(var(--px) * 19); height: calc(var(--px) * 11); pointer-events: none; animation: hop .5s steps(1) infinite; }
.fbtn__tag svg { display: block; width: 100%; height: 100%; }
@keyframes hop { 50% { transform: translateY(calc(var(--px) * -1)); } }

/* the newest video (v5): a post with a still, a play key and the heart balloon from the video; opens the video window */
.pads .fbtn--vid { --fill: var(--yel); grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(var(--px) * 5); animation-delay: -0.9s;
  padding: calc(var(--px) * 6) calc(var(--px) * 5) calc(var(--px) * 5) calc(var(--px) * 6); }
.fbtn__thumb { position: relative; grid-column: 1 / -1; aspect-ratio: 1920 / 804; background: var(--lcd0); box-shadow: 0 0 0 var(--px) var(--ink), var(--px) var(--px) 0 var(--px) var(--hot); }
.fbtn__thumb img, .fbtn__thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fbtn__thumb::after { content: ''; position: absolute; z-index: 2; left: calc(var(--px) * -4); top: calc(var(--px) * -2); width: calc(var(--px) * 12); height: calc(var(--px) * 4); background: rgba(255, 168, 213, .85); }
.fbtn__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(var(--px) * 18); height: calc(var(--px) * 14); margin: calc(var(--px) * -7) 0 0 calc(var(--px) * -9); }
.fbtn__play svg, .fbtn__balloon svg { display: block; width: 100%; height: 100%; }
.fbtn--vid:hover .fbtn__play, .fbtn--vid:focus-visible .fbtn__play { animation: hop .4s steps(1) infinite; }
.fbtn__balloon { position: absolute; z-index: 2; right: calc(var(--px) * -4); top: calc(var(--px) * -8); width: calc(var(--px) * 13); height: calc(var(--px) * 19); pointer-events: none; animation: float 1.6s steps(1) infinite; }
@keyframes float { 50% { transform: translateY(calc(var(--px) * -2)); } }

/* ---------- video window: the pad opens up into a window with the same rubber look ---------- */
html:has(.vwin[open]) { overflow: hidden; }
.vwin { width: min(960px, calc(100vw - 32px), calc((100vh - 190px) * 2.39)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: none; color: var(--ink); overflow: visible; }
.vwin::backdrop { background-color: rgba(42, 15, 41, .5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' shape-rendering='crispEdges'%3E%3Cpath fill='%232a0f29' d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E"); background-size: 8px 8px; }
.vwin__box { --fill: var(--yel); --led: var(--crm2); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--px) * 4); padding: calc(var(--px) * 5) calc(var(--px) * 6) calc(var(--px) * 6);
  background: var(--fill);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
    inset 0 calc(var(--px) * -2) 0 0 rgba(58, 24, 56, .14), inset 0 var(--px) 0 0 rgba(255, 255, 255, .55),
    0 calc(var(--px) * 3) 0 0 var(--ink); }
.vwin.is-playing .vwin__box { --led: var(--mint); }
.vwin__box .fbtn__balloon { right: calc(var(--px) * 22); top: calc(var(--px) * -14); }   /* string hangs onto the yellow bar */
.vwin__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(var(--px) * 4); padding-left: calc(var(--px) * 2); }
.vwin__head { display: grid; gap: calc(var(--px) * 1.5); min-width: 0; }
.vwin__title { margin: 0; font-size: 0; line-height: 0; }
.vwin__title svg, .vwin__again svg, .vwin__wait svg { display: block; width: calc(var(--w) * var(--px)); max-width: 100%; height: auto; }
.vwin__head small, .vwin__time { font-size: max(14px, calc(var(--px) * 4.125)); line-height: 1; }
.vwin__head small { opacity: .85; }
.vwin__time { white-space: nowrap; }

/* small rubber keys: same outline and hard shadow as the pads, pressed on hover */
.vwin__btn { --fill: var(--crm); display: grid; place-items: center; width: calc(var(--px) * 13); height: calc(var(--px) * 12); padding: 0; border: 0; border-radius: 0; background: var(--fill); color: var(--ink);
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
    inset 0 calc(var(--px) * -1) 0 0 rgba(58, 24, 56, .14), 0 calc(var(--px) * 2) 0 0 var(--ink); }
.vwin__btn svg { width: calc(var(--px) * 9); height: calc(var(--px) * 7); }
.vwin__btn:hover { --fill: var(--bub); transform: translateY(var(--px));
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink), 0 calc(var(--px) * 1) 0 0 var(--ink); }
.vwin__btn:active { transform: translateY(calc(var(--px) * 2)); box-shadow: 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink); }
.vwin__x { --fill: var(--hot); color: var(--crm); }
.vwin__x:hover { --fill: var(--hot2); }
.vwin__mute[aria-pressed='true'] { --fill: var(--crm2); }

/* the screen: plum bezel like the LCD; paused = dithered dim with the play key */
.vwin__screen { position: relative; min-width: 0; aspect-ratio: 1920 / 804; margin: calc(var(--px) * 3); background: var(--lcd0); box-shadow: 0 0 0 calc(var(--px) * 2) var(--plum), 0 0 0 calc(var(--px) * 3) var(--ink); }
.vwin__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--lcd0); }
.vwin__big { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: calc(var(--px) * 3); padding: 0; border: 0; background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' shape-rendering='crispEdges'%3E%3Cpath fill='%232a0f29' fill-opacity='.4' d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E");
  background-size: calc(var(--px) * 2) calc(var(--px) * 2); }
.vwin.is-playing .vwin__big { display: none; }
.vwin__key { display: block; width: calc(var(--px) * 18); height: calc(var(--px) * 14); }
.vwin__key svg { display: block; width: 100%; height: 100%; }
.vwin__big:hover .vwin__key, .vwin__big:focus-visible .vwin__key { animation: hop .4s steps(1) infinite; }
.vwin__again, .vwin__wait { display: none; background: var(--lcd0); padding: var(--px) calc(var(--px) * 2); box-shadow: 0 0 0 var(--px) var(--ink); }
.vwin.is-ended .vwin__again { display: block; }
.vwin__wait { position: absolute; left: 50%; top: 50%; margin: calc(var(--px) * -4) 0 0 calc(var(--px) * -9); pointer-events: none; animation: flash 1s steps(1) infinite; }
.vwin.is-wait .vwin__wait { display: block; }
@media (min-width: 700px) {
  .vwin__key { width: calc(var(--px) * 36); height: calc(var(--px) * 28); }
  .vwin__again svg { width: calc(var(--w) * var(--px) * 2); }
}

/* controls: play key, segment meter like the track meters on the main page, time, sound, fullscreen */
.vwin__ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: calc(var(--px) * 4); }
.vwin__meter { position: relative; height: calc(var(--px) * 12); cursor: pointer; touch-action: none; }
.vwin__meter::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--px) * 4); margin-top: calc(var(--px) * -2); box-shadow: 0 0 0 var(--px) var(--ink);
  background: var(--lcd0) repeating-linear-gradient(90deg, var(--lcd1) 0 calc(var(--px) * 2), transparent calc(var(--px) * 2) calc(var(--px) * 3)) var(--px) 50% / calc(100% - var(--px) * 2) calc(var(--px) * 2) no-repeat; }
.vwin__meter i { position: absolute; left: var(--px); top: 50%; width: calc((100% - var(--px) * 2) * var(--p, 0)); height: calc(var(--px) * 2); margin-top: calc(var(--px) * -1);
  background: repeating-linear-gradient(90deg, var(--lcd3) 0 calc(var(--px) * 2), transparent calc(var(--px) * 2) calc(var(--px) * 3)); }
.vwin__meter i::after { content: ''; position: absolute; right: calc(var(--px) * -2); top: calc(var(--px) * -2); width: calc(var(--px) * 3); height: calc(var(--px) * 6); background: var(--crm); box-shadow: 0 0 0 var(--px) var(--ink); }
@media (max-width: 559px) {   /* phones: the meter gets its own row above the keys */
  .vwin__ctrl { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: calc(var(--px) * 2); }
  .vwin__meter { grid-column: 1 / -1; order: -1; }
}

/* the whole site (v6): a dark arcade pad that sticks out of the casing on both sides, waving title, a mini sampler with running pads */
.pk__main { overflow-x: clip; }   /* the wide pad's room for the dissolve may reach past the screen edge on narrow phones */
.pads .pads__home { margin: calc(var(--px) * -8) calc(var(--px) * -17) calc(var(--px) * -4); }   /* sticks out 9 art pixels, a bit more room below for its big shadow */
.pads .fbtn--home { --fill: var(--lcd0); --ink-c: var(--crm); --led: var(--plum); gap: calc(var(--px) * 4); animation-delay: -0.3s;
  padding: calc(var(--px) * 8) calc(var(--px) * 6) calc(var(--px) * 8) calc(var(--px) * 7);
  background: var(--lcd0) conic-gradient(var(--lcd1) 25%, transparent 0 50%, var(--lcd1) 0 75%, transparent 0) 0 0 / calc(var(--px) * 2) calc(var(--px) * 2);
  --home-sh: 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
    inset 0 0 0 var(--px) var(--hot), inset 0 0 0 calc(var(--px) * 2) var(--lcd0);
  box-shadow: var(--home-sh), 0 calc(var(--px) * 3) 0 0 var(--ink), calc(var(--px) * 2) calc(var(--px) * 5) 0 0 var(--hot); }
.pads .fbtn--home:hover, .pads .fbtn--home:focus-visible { --led: var(--mint); box-shadow: var(--home-sh), 0 calc(var(--px) * 2) 0 0 var(--ink), calc(var(--px) * 2) calc(var(--px) * 4) 0 0 var(--hot); }
.pads .fbtn--home:active { box-shadow: var(--home-sh), calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--hot); }
.fbtn--home > :not(.fbtn__led):not(.fbtn__stars) { position: relative; z-index: 1; }
.fbtn__mini { width: calc(var(--px) * 24); height: calc(var(--px) * 16); }
.fbtn__mini svg { display: block; width: 100%; height: 100%; }
.fbtn__mini .q { animation: seq 1.6s steps(1) infinite; }
.fbtn__mini .q2 { animation-delay: -1.2s; } .fbtn__mini .q4 { animation-delay: -0.8s; } .fbtn__mini .q3 { animation-delay: -0.4s; }
@keyframes seq { 0% { fill: var(--hot); } 25% { fill: var(--crm); } }
.fbtn__mini .h { animation: beat .8s steps(1) infinite; }
@keyframes beat { 50% { fill: var(--lcd2); } }
.fbtn--home:hover .fbtn__mini .q, .fbtn--home:focus-visible .fbtn__mini .q { animation-duration: .6s; }
/* title: one svg per letter, so the letters can run a wave; --cell (set in tasche.js) is one art pixel when it fits */
.pads .fbtn__wave { display: flex; font-size: 0; line-height: 0; padding-top: calc(var(--px) * 2); }
.fbtn__wave svg { display: block; flex: none; width: calc(var(--w) * var(--cell, var(--px))); height: auto; margin-right: calc(var(--cell, var(--px)) * -1);
  animation: wave 1.6s steps(1) infinite; animation-delay: calc(var(--i) * .1s - 1.6s); }
@keyframes wave { 0%, 100% { transform: translateY(0); } 6% { transform: translateY(calc(var(--cell, var(--px)) * -1)); } 12% { transform: translateY(calc(var(--cell, var(--px)) * -2)); } 18% { transform: translateY(calc(var(--cell, var(--px)) * -1)); } 24% { transform: translateY(0); } }
.fbtn--home:hover .fbtn__wave .f, .fbtn--home:focus-visible .fbtn__wave .f { animation: rgb .48s steps(1) infinite; animation-delay: calc(var(--i) * -.06s); }
@keyframes rgb { 0% { fill: var(--crm); } 25% { fill: var(--yel); } 50% { fill: var(--mint); } 75% { fill: var(--bub); } }
/* three arrows lighting up one after the other */
.fbtn__go--run { width: calc(var(--px) * 12); color: var(--hot); }
.fbtn__go--run .r { animation: run .9s steps(1) infinite; }
.fbtn__go--run .r2 { animation-delay: -.6s; } .fbtn__go--run .r3 { animation-delay: -.3s; }
@keyframes run { 0% { fill: var(--crm); } 33% { fill: var(--hot); } }
.fbtn--home:hover .fbtn__go--run, .fbtn--home:focus-visible .fbtn__go--run { animation: none; }
.fbtn--home:hover .fbtn__go--run .r, .fbtn--home:focus-visible .fbtn__go--run .r { animation-duration: .3s; }
.fbtn--home:hover .fbtn__go--run .r2, .fbtn--home:focus-visible .fbtn__go--run .r2 { animation-delay: -.2s; }
.fbtn--home:hover .fbtn__go--run .r3, .fbtn--home:focus-visible .fbtn__go--run .r3 { animation-delay: -.1s; }
/* twinkling stars in the top and bottom margin of the pad */
.fbtn__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fbtn__stars i { position: absolute; width: calc(var(--px) * 3); height: calc(var(--px) * 3); animation: flash 1.2s steps(1) infinite; }
.fbtn__stars svg { display: block; width: 100%; height: 100%; }

/* business mail (2026-10-18): a small key under the pads, same button as on the homepage */
.tasche__mail { position: relative; z-index: 1; margin: calc(var(--px) * 10) 0 0; text-align: center; }
.tasche__mail .mail__btn { font-size: 13px; }   /* fits the 320-px pocket; style.css enlarges .pxbtn on phones */

/* heart charm hanging off the bottom corner */
.tasche__charm { position: absolute; z-index: 0; top: calc(100% - var(--px) * 3); right: calc(var(--px) * 12); width: calc(var(--px) * 15); height: calc(var(--px) * 30); transform-origin: 50% 0; pointer-events: none; animation: swing 1.3s ease-in-out infinite alternate; }
.tasche__charm canvas { width: 100%; height: 100%; }
@keyframes swing { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.tasche__charm.is-kick { animation: kick .6s steps(6); }
@keyframes kick { 0% { transform: rotate(-22deg); } 40% { transform: rotate(16deg); } 70% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }

.pk .foot { position: relative; z-index: 2; }
.pk .ticker__track { animation: tick 60s linear infinite; }
@keyframes tick { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .pk .ticker__track, .tasche__charm, .fbtn__go, .fbtn--new::before, .fbtn__kick::before, .fbtn__tag,
  .fbtn__balloon, .fbtn__play, .vwin__key, .vwin__wait,
  .fbtn__mini .q, .fbtn__mini .h, .fbtn__wave svg, .fbtn__wave .f, .fbtn__go--run .r, .fbtn__stars i { animation: none !important; }
}