/* Vorlesen – animierter Player unter dem Artikel (Claude 31.10.2026, Andy) */
.tts{display:flex;align-items:center;gap:18px;margin:34px 0 8px;padding:16px 20px;border-radius:22px;
  background:linear-gradient(135deg,rgba(77,163,255,.12),rgba(124,245,200,.08));border:1px solid rgba(77,163,255,.28);
  box-shadow:0 18px 50px -30px rgba(77,163,255,.7);position:relative;overflow:hidden}
.tts::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(77,163,255,.18),transparent 30%);animation:ttsSpin 9s linear infinite;opacity:0;transition:opacity .6s;pointer-events:none}
.tts.playing::before{opacity:1}
@keyframes ttsSpin{to{transform:rotate(360deg)}}
.tts-play{position:relative;flex:none;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 30% 25%,#7cc4ff,#2f7cf6 55%,#1d4fd6);box-shadow:0 12px 30px -8px rgba(47,124,246,.85),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;z-index:1}
.tts-play:hover{transform:scale(1.07)}.tts-play:active{transform:scale(.96)}
.tts-play:focus-visible{outline:3px solid #fbbf24;outline-offset:4px}
.tts-play svg{width:28px;height:28px;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.tts-i-play{margin-left:3px}.tts-i-pause{display:none}
.tts.playing .tts-i-play{display:none}.tts.playing .tts-i-pause{display:block}
.tts-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(77,163,255,.55);animation:ttsRing 2.6s ease-out infinite;pointer-events:none}
.tts-ring.r2{animation-delay:1.3s}
.tts:not(.playing) .tts-ring{animation-duration:3.6s;opacity:.6}
@keyframes ttsRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.tts-main{flex:1;min-width:0;position:relative;z-index:1}
.tts-top{display:flex;align-items:center;gap:12px}
.tts-title{font-size:1rem;color:var(--ink,#fff);font-weight:700;letter-spacing:-.01em}
.tts-time{margin-left:auto;font-size:.8rem;color:var(--dim,#94a3b8)}
.tts-eq{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.tts-eq i{width:3px;height:30%;border-radius:2px;background:linear-gradient(180deg,#7cf5c8,#4da3ff);transition:height .3s}
.tts.playing .tts-eq i{animation:ttsEq 1s ease-in-out infinite}
.tts.playing .tts-eq i:nth-child(2){animation-delay:-.2s}.tts.playing .tts-eq i:nth-child(3){animation-delay:-.45s}
.tts.playing .tts-eq i:nth-child(4){animation-delay:-.7s}.tts.playing .tts-eq i:nth-child(5){animation-delay:-.35s}
@keyframes ttsEq{0%,100%{height:25%}50%{height:100%}}
.tts-bar{margin:10px 0 8px;height:6px;border-radius:999px;background:rgba(148,163,184,.22);cursor:pointer;overflow:hidden}
.tts-bar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#4da3ff,#7cf5c8);transition:width .5s ease}
.tts-sub{display:flex;align-items:center;gap:10px}
.tts-note{font-size:.75rem;color:var(--dim,#94a3b8)}
.tts-ctrl{margin-left:auto;display:flex;gap:6px}
.tts-ctrl button{min-width:38px;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(148,163,184,.3);background:rgba(255,255,255,.04);color:var(--ink,#fff);font-size:.78rem;font-weight:700;cursor:pointer}
.tts-ctrl button:hover{border-color:var(--accent,#4da3ff)}
.tts-reading{background:linear-gradient(90deg,rgba(77,163,255,.14),rgba(77,163,255,0));border-radius:8px;box-shadow:-4px 0 0 0 var(--accent,#4da3ff);transition:background .4s}
:root[data-theme="light"] .tts{background:linear-gradient(135deg,rgba(47,124,246,.08),rgba(16,185,129,.06))}
@media (max-width:560px){.tts{gap:12px;padding:14px}.tts-play{width:56px;height:56px}.tts-note{display:none}}
@media print{.tts{display:none}}
@media (prefers-reduced-motion:reduce){.tts::before,.tts-ring,.tts-eq i{animation:none!important}}
html.a11y-still .tts::before,html.a11y-still .tts-ring{animation:none!important}