/* "Ton an": Schalter, hörbare Arbeiten und Wiedergabeleiste (seit 12.11.2026 auf
   der Startseite). Baut nur auf den Tokens aus main.css
   (--n, --tx-*, --c, --c-text, --line, --glass-s, --ease). Kein neuer Farbton:
   Rot erscheint erst, wenn Ton läuft, wie die Aufnahmelampe im Studio. */

/* Die Tasten-Tokens (--rot-*, --kn-*) und der Haupt-Button stehen seit dem
   Ausrollen auf alle Seiten in main.css, Block "Tasten-System". */

/* ── Hero ── */
.ta-hero .hero-sub{margin-bottom:28px}
.ta-hero .hero-cta{margin-top:28px}
.ta-hero .hero-h1{margin-bottom:12px}

/* ── Der Claim ist der Schalter (12.11.2026, Rahims Idee) ──
   "Ton an." steht als unbeleuchtete Leuchtschrift da (rote Kontur, innen leer)
   mit einer kleinen Kippe daneben. Ein Tipp, und die Schrift leuchtet: Der
   Claim wird wahr. Solange Ton läuft, atmet ihr Schein mit dem Pegel (--p0).
   Ohne Web Audio (html.ta-ohne) und ohne JavaScript (noscript im Markup)
   bleibt der Claim eine normale rote Überschrift ohne Kippe. */
.ta-claim{display:inline-flex;align-items:center;gap:.2em;margin:0;padding:0;border:0;border-radius:.1em;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .2s var(--ease)}
.ta-claim:active{transform:scale(.98);transition-duration:.1s}
.ta-claim em{position:relative;color:transparent;-webkit-text-stroke:max(1px,.02em) var(--c);text-shadow:none;transition:color .3s ease}
/* Das Leuchten: eine Kopie des Claims, von der nur der Schein zu sehen ist
   (heller Kern, roter Hof). Liegt über der Füllung und macht sie heiß. */
.ta-claim em::after{content:attr(data-t) / "";position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:0;text-shadow:0 0 .07em rgba(255,90,90,.95),0 0 .28em rgba(235,0,0,.85),0 0 .75em rgba(208,0,0,.6),0 0 1.5em rgba(208,0,0,.3);opacity:0;pointer-events:none;will-change:opacity;transition:opacity .25s ease}
.ta-claim[aria-checked="true"] em{color:var(--c)}
/* Die Stärke folgt dem Pegel (--p0, in jedem Bild neu). Das Einblenden macht
   deshalb eine Animation und kein Übergang: Ein Übergang auf opacity startete
   bei jeder Pegeländerung samt Verzögerung neu, das Leuchten kam dann erst,
   wenn der Pegel kurz stillstand. will-change hält den Schein auf einer
   eigenen Ebene, so muss er nicht in jedem Bild neu gezeichnet werden. */
@keyframes taGlimmen{from{opacity:0}}
.ta-claim[aria-checked="true"] em::after{opacity:calc(.62 + var(--p0,0) * .38);transition:none;animation:taGlimmen .5s ease .4s backwards}
/* Die Schrift füllt sich von links nach rechts, mit welliger Kante: eine rote
   Kopie des Claims liegt über der Kontur, eine Maske mit Wellenrand fährt
   darüber. Die Maske ist 2,5-mal so breit wie die Schrift; rechts ausgerichtet
   zeigt sie nur ihren leeren Teil, links ausgerichtet nur ihren vollen. Der
   Rand rund um die Kopie fängt die Überhänge der Kursiven ab. */
@supports ((-webkit-mask-image:none) or (mask-image:none)){
  .ta-claim[aria-checked="true"] em{color:transparent}
  .ta-claim em::before{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:-.2em;top:-.12em;padding:.12em .2em;color:var(--c);-webkit-text-stroke:0;pointer-events:none;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H138C150 12 126 25 138 37S150 62 138 75S126 88 138 100H0Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H138C150 12 126 25 138 37S150 62 138 75S126 88 138 100H0Z'/%3E%3C/svg%3E");-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;
    transition:-webkit-mask-position .4s ease-in,mask-position .4s ease-in}
  .ta-claim[aria-checked="true"] em::before{-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position .6s cubic-bezier(.4,.1,.3,1),mask-position .6s cubic-bezier(.4,.1,.3,1)}
  .ta-ohne .ta-claim em::before{display:none}
}
@media(hover:hover){.ta-claim[aria-checked="false"]:hover em{color:rgba(208,0,0,.3)}}
/* Einmal nach dem Laden zuckt die Schrift wie eine Röhre, die zünden will */
@keyframes taFunke{0%,100%{color:transparent}18%{color:rgba(208,0,0,.5)}36%{color:transparent}58%{color:rgba(208,0,0,.32)}}
.ta-claim:not(.ta-benutzt)[aria-checked="false"] em{animation:taFunke 1.3s ease-in-out 2s 1}
/* Kippe in Schriftgröße: wächst mit der Überschrift */
.ta-claim .ta-kippe{--kh:clamp(32px,.46em,46px);--kw:clamp(54px,.78em,78px);width:var(--kw);height:var(--kh);transform:translateY(.05em)}
.ta-claim .ta-kippe span{width:calc(var(--kh) - 6px);height:calc(var(--kh) - 6px)}
.ta-claim[aria-checked="true"] .ta-kippe span{transform:translateX(calc(var(--kw) - var(--kh)))}
.ta-ohne .ta-claim{cursor:default;pointer-events:none}
.ta-ohne .ta-claim em{color:var(--c);-webkit-text-stroke:0}
.ta-ohne .ta-claim .ta-kippe,.ta-ohne .ta-hinweis{display:none}

/* Schalter: Glas im Ruhezustand, Rot nur an Lampe und Kippe, sobald Ton läuft */
.ta-claim:focus-visible,.ta-play:focus-visible,.ta-dock-aus:focus-visible{outline:2px solid var(--c);outline-offset:3px}


/* Bahn eingelassen, Knopf liegt obenauf */
.ta-kippe{flex:0 0 auto;position:relative;width:60px;height:36px;border-radius:100px;background:var(--kn-mulde);box-shadow:var(--kn-mulde-schatten);transition:background .25s,box-shadow .25s}
.ta-kippe span{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#fff 0%,#dcdcdc 100%);box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.35),0 3px 7px rgba(0,0,0,.45);transition:transform .32s cubic-bezier(.34,1.3,.64,1)}
[aria-checked="true"] .ta-kippe{background:var(--rot-flaeche);box-shadow:inset 0 1px 3px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.1)}
[aria-checked="true"] .ta-kippe span{transform:translateX(24px)}
/* Der Knopf zeigt, wohin er will: unter dem Zeiger rückt er ein Stück vor,
   und einmal nach dem Laden stupst er kurz an, solange noch niemand gedrückt hat. */
@media(hover:hover){.ta-claim[aria-checked="false"]:hover .ta-kippe span{transform:translateX(5px)}}
@keyframes taStups{0%,100%{transform:translateX(0)}40%{transform:translateX(9px)}}
.ta-claim:not(.ta-benutzt)[aria-checked="false"] .ta-kippe span{animation:taStups .9s var(--ease) 2s 1 both}


.ta-hinweis{margin:0 auto 22px;max-width:48ch;min-height:1.45em;font-size:.9rem;line-height:1.45;color:var(--tx-4);text-shadow:0 0 10px var(--bg),0 0 20px var(--bg)}
.ton-an .ta-hinweis{color:var(--tx-2)}

/* ── Abschnittsköpfe ── */
.ta-kopf{max-width:var(--w-text);margin-bottom:clamp(36px,5vw,64px)}
.ta-kopf .sp{max-width:52ch}

/* ── Cases zum Hören ── */
.ta-hoeren{padding-top:clamp(72px,9vw,128px)}
.ta-case{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(20px,2.4vw,32px);margin-bottom:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:12px;background:rgba(var(--n),.02);transition:border-color .35s,background-color .35s,opacity .35s}
.ta-bild{display:block;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:#0A0A0A}
.ta-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),filter .35s}
.ta-case:hover .ta-bild img{transform:scale(1.03)}
.ta-info{min-width:0}
.ta-zeile{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ta-kunde{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c-text)}
.ta-laeuft{display:none;align-items:center;gap:7px;font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--tx-3)}
.ta-laeuft::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px rgba(208,0,0,.8)}
.ta-case.spielt .ta-laeuft{display:inline-flex}
.ta-info h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.12;letter-spacing:-.015em;color:var(--fg);margin:0 0 12px;overflow-wrap:anywhere}
.ta-info h3 a{color:inherit;text-decoration:none}
.ta-info p{font-size:1.0625rem;line-height:1.7;color:var(--tx-2);margin:0 0 22px;max-width:46ch}

.ta-spur{display:flex;align-items:center;gap:14px}
.ta-play{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;background:var(--rot-flaeche);box-shadow:var(--rot-schatten);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .2s var(--ease),box-shadow .25s,filter .2s}
.ta-play:active{transform:scale(.94);filter:brightness(.96);box-shadow:var(--rot-schatten-tief);transition-duration:.1s}
.ta-play svg{width:22px;height:22px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.ta-play .ic-play{transform:translateX(1px)}
.ta-play .ic-pause{display:none}
.ta-case.spielt .ta-play .ic-pause{display:block}
.ta-case.spielt .ta-play .ic-play{display:none}
@media(hover:hover){.ta-play:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:var(--rot-schatten-hoch)}}
.ta-case.spielt .ta-play{box-shadow:var(--rot-schatten),0 0 0 5px rgba(208,0,0,.16)}
.ta-welle{flex:1 1 auto;min-width:0;height:48px;border-radius:6px;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.ta-welle:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.ta-welle canvas{width:100%;height:100%;display:block}
.ta-zeit{flex:0 0 auto;font-size:.8rem;color:var(--tx-4);font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right}
.ta-spur-text{margin:8px 0 18px 66px;font-size:.82rem;line-height:1.45;color:var(--tx-4)}

/* Läuft Ton, tritt die spielende Arbeit hervor und die anderen zurück */
.ton-an:has(.ta-case.spielt) .ta-case:not(.spielt){opacity:.62}
.ton-an:has(.ta-case.spielt) .ta-case:not(.spielt) .ta-bild img{filter:grayscale(.7) brightness(.8)}
.ta-case.spielt{border-color:rgba(208,0,0,.5);background:rgba(208,0,0,.035)}

.ta-mehr{margin:clamp(28px,4vw,48px) 0 0;font-size:1rem;line-height:1.7;color:var(--tx-3);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}

/* ── Drei Türen ── */
.ta-tueren{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.ta-tuer{position:relative;display:flex;flex-direction:column;min-height:260px;padding:clamp(24px,2.6vw,36px);border:1px solid var(--kn-rand);border-radius:14px;background:var(--kn-flaeche-gross);box-shadow:var(--kn-schatten);color:inherit;text-decoration:none;overflow:hidden;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.ta-tuer::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ta-tuer:active{transform:scale(.985)}
@media(hover:hover){.ta-tuer:hover{border-color:rgba(var(--n),.3);transform:translateY(-3px);box-shadow:var(--kn-schatten-hoch)}.ta-tuer:hover::before{transform:scaleX(1)}.ta-tuer:hover .ta-nr{color:var(--c)}.ta-tuer:hover .cta-pfeil{background:var(--rot-flaeche);color:#fff}.ta-tuer:hover .cta-pfeil svg{transform:translateX(3px)}}
.ta-nr{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--tx-6);transition:color .3s}
.ta-tuer h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,2.4vw,2.3rem);line-height:1.1;margin:28px 0 12px;color:var(--fg)}
.ta-tuer p{font-size:1rem;line-height:1.7;color:var(--tx-3);margin:0 0 24px}
/* Fußzeile der Karte: Ziel links, Pfeil-Scheibe rechts. Sagt "die ganze Karte ist ein Knopf". */
.ta-weiter{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--line);font-size:.95rem;font-weight:600;color:var(--fg)}
.ta-weiter .cta-pfeil{background:var(--kn-scheibe);color:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .25s,color .25s}
.ta-tuer:active .cta-pfeil{background:var(--rot-flaeche);color:#fff}

/* ── Founder und Ablauf ── */
.ta-founder-i{display:grid;grid-template-columns:minmax(220px,380px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ta-portrait{position:relative;display:block;border-radius:6px;overflow:hidden}
.ta-portrait img{width:100%;height:auto;display:block;filter:grayscale(1)}
.ta-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.55),transparent 50%)}
.ta-founder .sp{margin:20px 0 28px;max-width:560px}
.ta-ablauf{list-style:none;counter-reset:ta;margin:0 0 28px;padding:0;max-width:560px;border-top:1px solid var(--line)}
.ta-ablauf li{counter-increment:ta;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:2px 8px;padding:14px 0;border-bottom:1px solid var(--line)}
.ta-ablauf li::before{content:counter(ta,decimal-leading-zero);grid-row:1 / span 2;font-family:var(--serif);font-size:1.3rem;line-height:1.35;color:var(--tx-6)}
.ta-ablauf strong{font-weight:600;color:var(--fg)}
.ta-ablauf span{font-size:.98rem;line-height:1.6;color:var(--tx-3)}

/* ── Wiedergabeleiste ── */
.ta-dock{position:fixed;left:clamp(16px,2vw,28px);bottom:24px;z-index:8900;display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100vw - 120px));padding:8px 8px 8px 16px;border:1px solid rgba(var(--n),.14);border-radius:100px;background:var(--glass-s);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 20px 50px var(--shadow);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1),bottom .35s var(--ease)}
.ta-dock[hidden]{display:none}
.ta-dock.da{opacity:1;transform:none}
.ta-dock-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ta-dock-text strong{font-size:.86rem;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-dock-text span{font-size:.75rem;color:var(--tx-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-dock-aus{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--n),.16);background:rgba(var(--n),.06);color:var(--fg);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out,background-color .2s}
.ta-dock-aus:active{transform:scale(.92)}
.ta-dock-aus svg{width:16px;height:16px}
body.mm-offen .ta-dock,body:has(#cookie-banner.vis) .ta-dock{visibility:hidden}

/* ── Schmal ── */
@media(max-width:900px){
  .ta-tueren{grid-template-columns:1fr}
  .ta-tuer{min-height:0}
  .ta-tuer h3{margin-top:16px}
}
@media(max-width:820px){
  .ta-case{grid-template-columns:1fr;gap:18px;padding:14px 14px 20px}
  .ta-info{padding:0 4px}
  .ta-founder-i{grid-template-columns:1fr}
  .ta-portrait{max-width:260px}
}
@media(max-width:768px){
    /* über der unteren Leiste, solange sie da ist; rückt nach, wenn sie ausweicht */
  .ta-dock{left:12px;bottom:86px;max-width:calc(100vw - 96px)}
  body.dock-weg .ta-dock{bottom:16px}
  .ta-spur-text{margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  .ta-claim,.ta-claim em,.ta-claim em::before,.ta-claim em::after,.ta-kippe span,.ta-dock,.ta-tuer,.ta-tuer::before,.ta-bild img,.ta-case,.ta-play{transition:none}
  .ta-case:hover .ta-bild img,.ta-tuer:hover{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .ta-dock{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-l)}
}

/* Fakten unter dem Hero-Knopf: Gründungsjahr und Standorte, leise gesetzt */
.ta-fakten{margin:22px auto 0;max-width:44ch;font-size:.85rem;line-height:1.5;color:var(--tx-4);text-shadow:0 0 10px var(--bg),0 0 20px var(--bg)}
.ta-founder .ta-mehr{margin-top:0}
/* Handy und flache Fenster: Die Faktenzeile bleibt schmal, damit der
   WhatsApp-Knopf sie nicht anschneidet, und der Scroll-Hinweis weicht ihr. */
@media(max-width:768px){
  .ta-hinweis{max-width:34ch;min-height:2.9em;margin-bottom:16px}
  .ta-fakten{max-width:27ch;margin-top:18px}
  .ta-hero .hero-scroll{display:none}
}
@media(max-height:820px){
  .ta-hero .hero-scroll{display:none}
}
/* Handy: Der Hero-Inhalt steht mittig über der unteren Leiste statt mittig im
   ganzen Bildschirm, sonst liegt die Leiste auf der letzten Zeile. */
@media(max-width:768px){
  .ta-hero{padding-top:84px;padding-bottom:154px}
}
/* Niedrige Handy-Fenster (bis 700 px, also fast jedes Handy mit eingeblendeter
   Adressleiste): Der Haupt-Button rückt vor den Erklärsatz, direkt unter den
   Claim. Gemessen am 12.11.2026 lag sonst der WhatsApp-Knopf oder die untere
   Leiste auf dem Button (360x640, 375x667, 390x664). Nur die Reihenfolge auf
   dem Bildschirm ändert sich, im Dokument bleibt sie gleich. */
@media(max-width:768px) and (max-height:700px){
  .ta-hero{padding-bottom:88px}
  .ta-hero .hero-inner{display:flex;flex-direction:column;align-items:center}
  .ta-hero .hero-cta{order:1;margin-top:6px}
  .ta-hero .hero-sub{order:2;margin:20px 0 0}
  .ta-fakten{order:3}
}
@media(max-width:768px) and (max-height:580px){
  .ta-hero .hero-h1{margin-bottom:6px}
  .ta-hinweis{margin-bottom:8px}
  .ta-hero .hero-cta{margin-top:0}
}
/* Kurze Handys: Die Faktenzeile weicht, damit der Knopf über der Leiste bleibt. */
@media(max-width:768px) and (max-height:780px){
  .ta-fakten{display:none}
}
/* Flache Fenster (Laptop mit 720 px Höhe): ohne Faktenzeile bleibt Abstand zur Navigation. */
@media(max-height:760px){
  .ta-fakten{display:none}
}

/* Arbeiten ohne Hörprobe auf der Seite (Film auf YouTube, Sounds auf Spotify):
   gleiche Karte, statt Wellenform ein Verweis in die Case Study. */
.ta-film{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 20px 6px 6px;border:1px solid rgba(var(--n),.18);border-radius:100px;color:var(--fg);font-size:.9rem;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out,border-color .25s,background-color .25s}
.ta-film svg{flex:0 0 auto;width:36px;height:36px;padding:9px;border-radius:50%;background:rgba(var(--n),.1);color:var(--fg);transition:background-color .25s,color .25s}
.ta-film:active{transform:scale(.97)}
@media(hover:hover){.ta-film:hover{border-color:var(--c)}.ta-film:hover svg{background:var(--c);color:#fff}}
.ta-film:focus-visible{outline:2px solid var(--c);outline-offset:3px}

/* Einzelsounds einer Arbeit (Fissler): kleine Tasten, je ein Sound. Rot erst,
   wenn die Taste klingt. */
.ta-pads{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 20px}
.ta-pad{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 6px;border:1px solid var(--kn-rand);border-radius:100px;background:var(--kn-flaeche);box-shadow:var(--kn-schatten);color:var(--fg);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
/* Kleine Scheibe mit Dreieck: dieselbe Sprache wie der große Play-Knopf */
.ta-pad::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--kn-scheibe);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .2s,box-shadow .2s}
.ta-pad::after{content:"";position:absolute;left:19px;top:50%;margin-top:-5px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.ta-pad:active{transform:scale(.96);transition-duration:.1s}
.ta-pad.spielt{border-color:rgba(208,0,0,.6);background:var(--kn-an-flaeche);box-shadow:var(--kn-an-schatten)}
.ta-pad.spielt::before{background:var(--rot-flaeche);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 12px rgba(208,0,0,.7)}
.ta-pad.spielt::after{left:17px;margin-top:-4px;width:8px;height:8px;border:0;border-radius:1.5px;background:#fff}
.ta-pad:focus-visible{outline:2px solid var(--c);outline-offset:3px}
@media(hover:hover){.ta-pad:hover{transform:translateY(-1px);border-color:rgba(var(--n),.34);box-shadow:var(--kn-schatten-hoch)}.ta-pad.spielt:hover{border-color:rgba(208,0,0,.8);box-shadow:var(--kn-an-schatten)}}
@media(pointer:coarse){.ta-pad{min-height:46px}}
@media(max-width:768px){.ta-pads{margin-top:4px}}

/* Fig. 1 Mischpult: der Verweis auf die ganze Kundenliste soll als Link erkennbar sein */
.cm-kanaele .cm-fig-body a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(var(--n),.4);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s ease}
.cm-kanaele .cm-fig-body a:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:2px}
@media(hover:hover){.cm-kanaele .cm-fig-body a:hover{text-decoration-color:var(--c)}}

/* Ruhige Bewegung: was nur die Startseite betrifft (der Rest steht in main.css) */
@media(prefers-reduced-motion:reduce){
  .ta-tuer:hover .cta-pfeil svg{transform:none}
  .ta-kippe span,.ta-claim em,.ta-claim em::after{animation:none!important}
  .ta-claim:active,.ta-pad:hover,.ta-play:hover,.ta-claim[aria-checked="false"]:hover .ta-kippe span{transform:none}
}