/* The existing illustrated catalog and a single, explicitly started player. */
.preview-controls{display:flex;align-items:center;gap:18px;margin-top:20px}
/* Der runde Play-Knopf in der Farbe des Stils, wie auf Hören in der App. Das Skript
   der Startseite setzt die Farbe je Sound; ohne sie bleibt es Tinte. */
.preview-toggle{flex:0 0 52px;width:52px;height:52px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--style-accent,var(--white-100));color:var(--canvas);cursor:pointer;transition:background-color .2s}
@media(prefers-color-scheme:dark){.preview-toggle{background:var(--style-accent-dark,var(--white-100))}}
.preview-toggle svg{width:20px;height:20px;fill:currentColor}
.preview-toggle [data-icon="pause"],.is-playing .preview-toggle [data-icon="play"]{display:none}
.is-playing .preview-toggle [data-icon="pause"]{display:block}
.preview-timeline{display:flex;flex:1;min-width:0;align-items:center;gap:12px}
.preview-seek{appearance:none;-webkit-appearance:none;min-width:0;flex:1;height:32px;margin:0;cursor:pointer;background:linear-gradient(to right,var(--white-100) var(--played,0%),var(--white-10) var(--played,0%)) center/100% 2px no-repeat}
.preview-seek::-webkit-slider-runnable-track{height:2px;background:transparent}
.preview-seek::-moz-range-track{height:2px;background:transparent}
.preview-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:var(--white-100);margin-top:-5px}
.preview-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--white-100)}
.preview-seek:disabled{opacity:.5;cursor:default}
.preview-time{white-space:nowrap;font:var(--type-metadata);font-variant-numeric:tabular-nums;color:var(--white-50)}
.preview-status,.preview-fallback{font:var(--type-metadata);line-height:1.5;color:var(--white-50);margin:8px 0 0}
.preview-status:empty{display:none}
.preview-controls audio{width:100%}
.catalogue-preview.is-enhanced audio,.catalogue-preview.is-enhanced .preview-fallback,.catalogue-preview [hidden]{display:none!important}
.catalogue-preview .catalogue-caption{margin-top:18px}
.preview-toggle:focus-visible,.preview-seek:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.catalogue-preview.is-playing .bar-hit[aria-pressed="true"]{border-bottom-width:3px}
@media(max-width:360px){.catalogue-preview .bars-row{grid-template-columns:repeat(5,minmax(0,1fr))}}