/* ============================================================
V3 — KELLERDECK · Das Label als Player
Dichtes, dunkles Streaming-Interface im Markenlook.
Persistente Player-Leiste, Cyan-Waveform, scanbare
Tracklist. Ansichten wechseln, die Wiedergabe laeuft weiter.
============================================================ */
:root{
--tex-hero:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20800%27%3E%3Cfilter%20id%3D%27c%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%200.038%27%20numOctaves%3D%275%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%271200%27%20height%3D%27800%27%20fill%3D%27%230e0e0e%27%2F%3E%3Crect%20width%3D%271200%27%20height%3D%27800%27%20filter%3D%27url%28%23c%29%27%20opacity%3D%270.62%27%2F%3E%3Cg%20fill%3D%27%23e8e6e1%27%20opacity%3D%270.05%27%3E%3Crect%20y%3D%27196%27%20width%3D%271200%27%20height%3D%279%27%2F%3E%3Crect%20y%3D%27523%27%20width%3D%271200%27%20height%3D%274%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--tex-cover:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20800%20800%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.014%200.055%27%20numOctaves%3D%275%27%20seed%3D%2711%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27800%27%20height%3D%27800%27%20fill%3D%27%23101010%27%2F%3E%3Crect%20width%3D%27800%27%20height%3D%27800%27%20filter%3D%27url%28%23g%29%27%20opacity%3D%270.66%27%2F%3E%3Cg%20fill%3D%27%23e8e6e1%27%20opacity%3D%270.07%27%3E%3Crect%20y%3D%27112%27%20width%3D%27800%27%20height%3D%277%27%2F%3E%3Crect%20y%3D%27318%27%20width%3D%27800%27%20height%3D%273%27%2F%3E%3Crect%20y%3D%27487%27%20width%3D%27800%27%20height%3D%2712%27%2F%3E%3Crect%20y%3D%27655%27%20width%3D%27800%27%20height%3D%274%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--black:#0a0a0a;
--black-2:#131313;
--black-3:#1c1c1d;
--white:#eeece6;
--grey:#a5a39c;
--grey-dim:#8a8881; /* 4.8:1 auf --black-3, 6.6:1 auf --black. War #85837d
und lag auf --black-3 bei 4.49:1 — knapp unter AA. */
--cyan:#17f2ff;
--line:#2a2a2a; /* Trennlinien und Flaechenkanten, kein Bedienelement */
--rand:#6b6963; /* Rand von Bedienelementen: 3.6:1 auf --black,
3.4:1 auf --black-2 — WCAG 1.4.11 verlangt 3:1 */
--warn:#ff5a4d; /* Fehlerzustaende, 6.4:1 auf --black */
--warn-text:#ffb3ac; /* Fehlertext, 11.6:1 auf --black */
--font-display:'Anton','Arial Narrow',sans-serif;
--font-body:'Barlow Condensed','Arial Narrow',sans-serif;
--font-mono:'Space Mono','Courier New',monospace;
--gutter:clamp(16px,4vw,56px);
--bar-h:84px; /* Hoehe der Player-Leiste, Desktop */
/* Abstandsskala, Vierer-Basis. Die mittleren Stufen fehlen einer reinen
Achterskala, und genau die braucht diese Seite zwischen Zeile und Block. */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:20px;
--s-5:32px; --s-6:52px; --s-7:84px;
/* Rhythmus: drei benannte Intervalle statt eines wiederholten Wertes.
Vorher hatte jede Sektion denselben Innenabstand — dadurch wog alles
gleich viel und die Seite hatte keine Gliederung, nur Wiederholung.
eng = innerhalb einer Gruppe, Teile gehoeren zusammen
mittel = zwischen Gruppen derselben Aussage
weit = zwischen zwei Gedanken, hier darf der Blick anhalten */
--takt-eng:clamp(20px,3vh,34px);
--takt-mittel:clamp(34px,5vh,56px);
--takt-weit:clamp(56px,8.5vh,108px);
}
*,*::before,*::after{box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:72px;
-webkit-text-size-adjust:100%;
}
body{
margin:0;
background:var(--black);
color:var(--white);
font-family:var(--font-body);
font-size:clamp(16px,1.05vw,18px);
line-height:1.5;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
/* Platz fuer die fixe Player-Leiste, damit sie nie Inhalt verdeckt */
padding-bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom, 0px));
/* Kurze Seiten endeten mitten im Bild: unter dem Fussbereich stand
schwarzer Leerraum bis zur Player-Leiste — gemessen 194 Pixel auf
/interpreten bei 1440x900 und 315 Pixel im Impressum. Der Fussbereich
ist der Abschluss der Seite und gehoert an deren Unterkante, auch
wenn der Inhalt den Schirm nicht fuellt. */
min-height:100vh;
display:flex;
flex-direction:column;
}
/* Neuere Browser rechnen die ein- und ausfahrende Adressleiste des Telefons
mit; bei 100vh springt die Hoehe dort. */
@supports (min-height:100dvh){
body{min-height:100dvh}
}
body > main{flex:1 0 auto}
/* Verwaltung, Rechtstexte und die 404-Seite tragen keine Player-Leiste. Der
reservierte Platz stand dort trotzdem: 88 Pixel Leere unter dem Fussbereich,
auf dem Telefon fast eine Bildschirmzeile. */
body.ohne-player{padding-bottom:env(safe-area-inset-bottom, 0px)}
img{max-width:100%;display:block}
::selection{background:var(--cyan);color:var(--black)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* Was der Browser selbst zeichnet, gehoert trotzdem zum Geraet. Auf einem
fast schwarzen Grund ist die helle Standard-Bildlaufleiste ein heller
Streifen aus einer fremden Oberflaeche — und die Songliste hat auf breiten
Schirmen eine waagerechte, die staendig zu sehen ist. */
html{scrollbar-color:var(--rand) var(--black-2);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--black-2)}
::-webkit-scrollbar-thumb{background:var(--rand);border:2px solid var(--black-2)}
::-webkit-scrollbar-thumb:hover{background:var(--grey-dim)}
::-webkit-scrollbar-corner{background:var(--black-2)}
/* Der Schreibcursor im Akzent des Labels: das einzige Cyan, das der Besucher
selbst bewegt. */
.field input,.field textarea,.field select,.afeld input{caret-color:var(--cyan)}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wrap{
max-width:1400px;margin-inline:auto;
/* Im Querformat schneiden Kerbe und Rundung in den Rand. max() nimmt
jeweils den groesseren von Gestaltungsrand und Geraeterand. */
padding-inline:
max(var(--gutter), env(safe-area-inset-left, 0px))
max(var(--gutter), env(safe-area-inset-right, 0px));
}
/* Feines Korn — leiser als in den Schwestervarianten,
das Interface soll ruhig bleiben. */
body::after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
opacity:.22;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
.skip{
position:absolute;left:var(--gutter);top:-100px;z-index:90;
background:var(--cyan);color:var(--black);
font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;padding:10px 16px;text-decoration:none;
}
.skip:focus{top:12px}
/* ---------- Kopfleiste mit Ansichtswechsel ---------- */
.top{
position:sticky;top:0;z-index:40;
background:rgba(10,10,10,.94);
backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
.top__inner{
display:flex;align-items:center;justify-content:space-between;
gap:16px;height:60px;
}
.top__mark{
display:flex;align-items:baseline;gap:8px;
font-family:var(--font-display);
font-size:clamp(15px,1.5vw,19px);letter-spacing:.05em;
text-transform:uppercase;color:var(--white);
text-decoration:none;white-space:nowrap;
/* Die Zeile ist 20 Pixel hoch — als einziger Weg zurueck auf die Startseite
ist das auf dem Telefon zu wenig. Der Rand waechst, die Schrift nicht;
in der 60 Pixel hohen Kopfleiste bleibt das ohne Folge fuers Bild. */
padding-block:13px;
}
.top__mark span{
font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
color:var(--cyan);border:1px solid var(--cyan);padding:2px 5px;
}
/* Segmentierter Umschalter, kein Link — die Wiedergabe soll
den Ansichtswechsel ueberleben. */
.views{display:flex;border:1px solid var(--rand)}
.views__btn{
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;
background:transparent;border:0;color:var(--grey);
display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
cursor:pointer;text-decoration:none;
transition:background .12s linear,color .12s linear;
}
.views__btn + .views__btn{border-left:1px solid var(--line)}
.views__btn:hover{color:var(--white)}
.views__btn[aria-selected="true"]{background:var(--cyan);color:var(--black)}
/* Auf dem Telefon braucht die Kopfleiste mehr Platz als vorhanden ist:
Wortmarke, "DECK"-Plakette und beide Reiter stehen alle auf nowrap und
ergeben zusammen 409 px Mindestbreite. Im Browser bei 360 und 390 px
gemessen: die ganze Seite liess sich seitlich schieben, und der Reiter
"Interpreten" lag zur Haelfte ausserhalb des Sichtfelds — der zweite von
zwei Ansichten war damit nur ueber eine Seitwaertsgeste erreichbar.
Die Plakette ist Schmuck und geht zuerst. */
@media (max-width:560px){
.top__inner{gap:10px}
.top__mark{font-size:13px;letter-spacing:.04em}
.top__mark span{display:none}
.views__btn{padding:0 10px;letter-spacing:.08em}
}
/* ---------- Ansichten ---------- */
.view[hidden]{display:none}
/* ---------- Hero ---------- */
.hero{
position:relative;overflow:hidden;
border-bottom:1px solid var(--line);
padding-block:clamp(40px,7vh,86px) clamp(28px,4.5vh,54px);
}
.hero::before{
content:"";position:absolute;inset:0;
background:var(--tex-hero) center/cover no-repeat;
opacity:.42;filter:grayscale(.4) contrast(1.2);
mask-image:linear-gradient(to bottom,#000,transparent);
-webkit-mask-image:linear-gradient(to bottom,#000,transparent);
pointer-events:none;
}
.hero__inner{position:relative;z-index:1}
.hero__meta{
display:flex;flex-wrap:wrap;gap:6px 22px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--grey-dim);
margin-bottom:clamp(16px,3vh,28px);
}
.hero__meta b{color:var(--cyan);font-weight:400}
.hero__title{
margin:0;font-family:var(--font-display);font-weight:400;
text-transform:uppercase;line-height:.84;letter-spacing:-.018em;
font-size:clamp(50px,12vw,180px);
}
.hero__title span{display:block}
.hero__title .l2{color:var(--grey)}
.hero__claim{
margin:clamp(20px,3.5vh,36px) 0 0;
max-width:44ch;
font-size:clamp(17px,1.5vw,22px);
line-height:1.45;color:var(--grey);
}
/* ---------- Sektionen ---------- */
.section{
border-bottom:1px solid var(--line);
padding-block:clamp(40px,7vh,84px);
}
.section__head{
display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:space-between;gap:10px 24px;
padding-bottom:20px;margin-bottom:clamp(22px,4vh,40px);
border-bottom:1px solid var(--line);
}
.section__title{
margin:0;font-family:var(--font-display);font-weight:400;
text-transform:uppercase;line-height:.92;letter-spacing:-.005em;
font-size:clamp(28px,4.4vw,58px);
}
.section__hint{
margin:0;font-family:var(--font-mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);
}
/* ---------- Rollen der Sektionen ----------
Die Startseite hat drei Aufgaben, und sie sind nicht gleich viel wert:
zuerst hoerbar machen, dann erklaeren, dann ansprechbar sein. Vorher trugen
alle drei dieselbe Klasse und damit dasselbe Gewicht — die Musik stand als
vierter Block hinter rund 450 Woertern, obwohl der Hero „direkt, ohne
Umweg" verspricht. Die Reihenfolge im Markup ist jetzt Hero, Musik, Text,
Anfrage; hier bekommt jede Rolle den Abstand, der ihr zusteht. */
/* Fuehrend: haengt am Hero, beide lesen als ein Moment. Deshalb oben eng,
unten weit — der Bruch kommt nach der Musik, nicht vor ihr. Zwischen Hero
und Titel lagen vorher drei Linien kurz hintereinander; die mittlere faellt. */
.section--fuehrend{padding-block:var(--takt-mittel) var(--takt-weit)}
.section--fuehrend .section__head{
border-bottom:0;padding-bottom:0;margin-bottom:var(--takt-eng);
}
.section--fuehrend .section__title{font-size:clamp(32px,5.2vw,68px)}
/* Lesen und Handeln: davor darf der Blick anhalten. */
.section--lesen,.section--handeln{padding-block:var(--takt-weit)}
/* Der Fliesstext misst 66ch, das Formular 620px — eine 1400px breite
Ueberschriftenlinie zeigte darueber ins Leere. Kopf und Inhalt teilen
sich jetzt dieselbe Spalte. */
.wrap--lesen{max-width:74ch}
/* ---------- Lesetext: ruhig und offen ---------- */
.prose{max-width:66ch}
.prose p{margin:0 0 1.05em;font-size:clamp(17px,1.2vw,19px);line-height:1.62}
.prose p:first-child{
font-size:clamp(20px,1.9vw,27px);line-height:1.38;margin-bottom:.85em;
color:var(--white);
}
.prose p:last-child{margin-bottom:0}
.disclaimer{
margin:clamp(24px,4vh,40px) 0;
padding:clamp(18px,2.6vw,28px);
background:var(--black-2);
border:1px solid var(--line);
border-left:2px solid var(--cyan);
max-width:66ch;
}
.disclaimer__label{
display:block;font-family:var(--font-mono);font-size:11px;
letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
margin-bottom:12px;
}
.disclaimer p{
margin:0 0 .9em;font-family:var(--font-mono);
font-size:14px;line-height:1.75;color:var(--grey);
}
.disclaimer p:last-child{margin-bottom:0}
.statement{
margin-top:clamp(32px,5vh,60px);padding-top:clamp(22px,4vh,40px);
border-top:1px solid var(--line);
}
.statement blockquote{
margin:0;font-family:var(--font-display);font-weight:400;
line-height:1.12;
font-size:clamp(22px,3.4vw,48px);max-width:24ch;
}
.statement blockquote em{font-style:normal;color:var(--cyan)}
/* ---------- Cover-Platzhalter ---------- */
.cover{
position:relative;aspect-ratio:1/1;flex:none;
background:var(--black-2);border:1px solid var(--line);overflow:hidden;
}
.cover::before{
content:"";position:absolute;inset:0;
background-image:var(--tex-cover);
background-size:280% auto;
filter:grayscale(.7) contrast(1.4) brightness(.85);
opacity:.8;
}
.cover__mark{
position:absolute;inset:0;display:flex;align-items:flex-end;
padding:8%;font-family:var(--font-display);
font-size:clamp(20px,3vw,44px);line-height:.8;
text-transform:uppercase;color:var(--white);
mix-blend-mode:difference;letter-spacing:-.02em;
}
.cover--a::before{background-position:14% 22%}
.cover--b::before{background-position:66% 42%}
.cover--c::before{background-position:34% 76%}
.cover--d::before{background-position:86% 16%}
.cover--e::before{background-position:8% 58%}
.cover--f::before{background-position:50% 10%}
.cover--g::before{background-position:74% 86%}
/* Der cyanfarbene Querbalken auf den Kacheln ist auf Wunsch des Betreibers
ersatzlos entfernt (2026-09-08). Er stammte aus dem Entwurf V3 und sass je
Kachelvariante auf einer anderen Hoehe (40 bis 70 Prozent); bei echten
Bildern lag er ueber dem Artwork, auf leeren Kacheln quer ueber der
Betonflaeche. Weil er absolut positioniert war, aendert sein Wegfall am
Layout der Karten und Listenzeilen nichts — die Kachel behaelt Groesse,
Rahmen und Seitenverhaeltnis.
Der Akzent lebt weiter, wo er Bedeutung traegt: laufender Track, Zaehlwert,
aktive Karte, Waveform. */
/* Die Beton-Textur bleibt der leeren Kachel vorbehalten. Hinter einem echten
Bild ist sie unsichtbar und kostet nur eine Malschicht. */
.cover.has-bild::before{display:none}
/* ---------- Vorstellung: drei Karten ---------- */
/* auto-fill statt drei festen Spalten: bei zwei Tracks im Deck zogen sich
zwei Karten ueber 1400px auseinander und die Kachel stand allein in einer
Wueste aus leerem Kasten. Jetzt behalten die Karten ihr Mass, und die
Reihe fuellt sich erst, wenn der Katalog dafuer da ist. */
.top3{
display:grid;gap:clamp(14px,2vw,22px);
grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
}
.top3__card{
display:flex;gap:14px;align-items:center;
background:var(--black-2);border:1px solid var(--line);
padding:14px;text-align:left;
transition:border-color .12s linear,background .12s linear;
}
@media (hover:hover){.top3__card:hover{background:var(--black-3)}}
.top3__card.is-active{border-color:var(--cyan)}
.top3__cover{width:76px}
.top3__body{min-width:0;flex:1}
.top3__rank{
font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
color:var(--grey-dim);display:block;margin-bottom:4px;
}
.top3__card.is-active .top3__rank{color:var(--cyan)}
.top3__title{
margin:0 0 4px;font-family:var(--font-display);font-weight:400;
text-transform:uppercase;line-height:1.3;
font-size:clamp(19px,1.9vw,26px);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top3__artist{
margin:0 0 6px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top3__clicks{
font-family:var(--font-mono);font-size:12px;
font-variant-numeric:tabular-nums;color:var(--cyan);
}
/* ---------- Play-Schalter ---------- */
.play{
--sz:44px;width:var(--sz);height:var(--sz);flex:none;
display:grid;place-items:center;padding:0;
background:transparent;border:1px solid var(--rand);
color:var(--white);cursor:pointer;
transition:background .12s linear,border-color .12s linear,color .12s linear;
}
.play:hover,.play:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.play[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--black)}
.play__glyph{
width:0;height:0;
border-left:10px solid currentColor;
border-top:6.5px solid transparent;
border-bottom:6.5px solid transparent;
margin-left:3px;
}
.play[aria-pressed="true"] .play__glyph{
width:10px;height:12px;margin-left:0;border:0;
background:linear-gradient(to right,currentColor 0 34%,transparent 34% 66%,currentColor 66% 100%);
}
/* ---------- Tracklist ---------- */
.tracks-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tracks{
width:100%;min-width:620px;border-collapse:collapse;
font-variant-numeric:tabular-nums;
}
.tracks caption{
text-align:left;font-family:var(--font-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);
padding-bottom:12px;
/* Ohne Begrenzung lief dieser Satz auf dem Rechner ueber die volle
Tabellenbreite: bei 1440 Pixeln rund 150 Zeichen in einer Zeile, also
das Doppelte dessen, was das Auge am Zeilenende noch zurueckfindet.
Auf dem Telefon aendert die Grenze nichts — dort ist die Spalte
ohnehin schmaler, und der Block bleibt wie verlangt randbuendig. */
max-width:72ch;
}
.tracks th{
text-align:left;font-family:var(--font-mono);font-weight:400;
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--grey-dim);padding:0 12px 10px 0;
border-bottom:1px solid var(--line);white-space:nowrap;
}
.tracks th.num{text-align:right;padding-right:0}
/* Sortierrichtung sichtbar markiert */
.tracks th.is-sorted{color:var(--cyan)}
.tracks th.is-sorted::after{content:" ↓"}
.tracks td{
padding:0 12px 0 0;border-bottom:1px solid var(--line);
vertical-align:middle;height:62px;
}
.tracks tbody tr{transition:background .1s linear}
.tracks--reflow tbody tr:has(.play:not([disabled])){cursor:pointer}
@media (hover:hover){.tracks tbody tr:hover{background:var(--black-2)}}
/* Auf dem Telefon gibt es kein Hover — und damit fehlte dort jeder Hinweis
darauf, dass die ganze Zeile ausloest und nicht nur der Knopf am Rand. Den
Platz des Zeigers nimmt hier der Druck ein: solange der Finger liegt, faerbt
sich die Zeile und die Rangziffer tauscht gegen das Abspielzeichen. Die
Rueckmeldung kommt also im selben Moment, in dem sie gebraucht wird.
Ergaenzt in app.js um einen leeren touchstart-Horcher — ohne den schickt
iOS an eine Tabellenzeile gar kein :active. */
@media (hover:none){
.tracks tbody tr:has(.play:not([disabled])):active{background:var(--black-2)}
.tracks tbody tr:has(.play:not([disabled])):not(.is-current):active .track__nr{opacity:0}
.tracks tbody tr:has(.play:not([disabled])):not(.is-current):active .track__rank::after{opacity:1}
.top3__card:active{background:var(--black-3)}
}
.tracks tbody tr.is-current{background:var(--black-3)}
.tracks tbody tr.is-current .track__title{color:var(--cyan)}
.track__rank{
width:52px;font-family:var(--font-mono);font-size:12px;color:var(--grey-dim);
position:relative;
}
.tracks tbody tr.is-current .track__rank{color:var(--cyan)}
/* Die Rangnummer ist der Ausloeser.
Beim Zeigen oder Fokussieren tauscht die Ziffer gegen das Abspielzeichen —
gleiche Box, gleiche Breite, nichts springt. Dass die ganze Zeile ausloest,
hat bisher nur der Mauszeiger behauptet und auf dem Handy niemand erfahren.
Nicht auf der laufenden Zeile: dort saehe ein Abspielzeichen aus, als waere
nichts an. */
.track__nr{transition:opacity .12s linear}
.track__rank::after{
content:"";position:absolute;top:50%;left:0;
width:0;height:0;margin-top:-6px;
border-left:9px solid var(--cyan);
border-top:6px solid transparent;
border-bottom:6px solid transparent;
opacity:0;transition:opacity .12s linear;
pointer-events:none;
}
.tracks tbody tr:has(.play:not([disabled])):not(.is-current):focus-within .track__nr{opacity:0}
.tracks tbody tr:has(.play:not([disabled])):not(.is-current):focus-within .track__rank::after{opacity:1}
@media (hover:hover){
.tracks tbody tr:has(.play:not([disabled])):not(.is-current):hover .track__nr{opacity:0}
.tracks tbody tr:has(.play:not([disabled])):not(.is-current):hover .track__rank::after{opacity:1}
}
.track{display:flex;align-items:center;gap:14px;min-width:0}
.track__cover{width:44px;height:44px}
.track__cover .cover__mark{font-size:16px;padding:6%}
.track__title{
font-family:var(--font-display);font-size:clamp(17px,1.5vw,22px);
line-height:1.3;text-transform:uppercase;white-space:nowrap;
}
.track__artist,.track__len{
font-family:var(--font-mono);font-size:12px;color:var(--grey);white-space:nowrap;
}
.track__clicks{
font-family:var(--font-mono);font-size:12.5px;color:var(--cyan);
white-space:nowrap;text-align:right;
}
.track__act{width:56px;text-align:right}
.track__act .play{margin-left:auto}
/* Laufender Track: kleiner Pegel-Indikator statt Icon */
.track__eq{
display:inline-flex;align-items:flex-end;gap:2px;height:12px;
margin-right:8px;vertical-align:-1px;
}
.track__eq i{
width:2px;background:var(--cyan);height:4px;
animation:eq .9s ease-in-out infinite;
}
.track__eq i:nth-child(2){animation-delay:.15s}
.track__eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{
0%,100%{height:3px}
50%{height:12px}
}
.is-paused .track__eq i{animation-play-state:paused}
/* ---------- Interpreten ---------- */
.artists{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,28px)}
@media (min-width:720px){.artists{grid-template-columns:1fr 1fr}}
.artists__item{
background:var(--black-2);border:1px solid var(--line);padding:16px;
display:flex;gap:16px;align-items:center;
}
.artists__portrait{width:clamp(90px,16vw,130px);aspect-ratio:4/5}
.artists__portrait .cover__mark{
align-items:center;justify-content:center;font-size:clamp(34px,5vw,58px);
}
.artists__name{
margin:0 0 6px;font-family:var(--font-display);font-weight:400;
text-transform:uppercase;line-height:.95;font-size:clamp(24px,3vw,40px);
}
.artists__meta{
margin:0 0 10px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
.note{
font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
color:var(--grey-dim);margin-top:var(--s-4);line-height:1.7;
}
/* Ohne diese Regel setzte der Browser sein Standardblau: 2,11:1 unbesucht,
1,80:1 besucht — und die einzige zweite Farbe auf einer Seite, die sich auf
genau einen Akzent festgelegt hat. */
.note a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:3px}
/* ---------- Anfrage ---------- */
.form{max-width:620px}
.field{margin-bottom:clamp(16px,2.6vh,24px)}
.field label{
display:block;font-family:var(--font-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);
margin-bottom:7px;
}
.field input,.field select,.field textarea{
width:100%;background:var(--black-2);border:1px solid var(--rand);
border-radius:0;color:var(--white);font-family:var(--font-body);
font-size:clamp(16px,1.3vw,19px);padding:11px 13px;
transition:border-color .12s linear;
}
.field select{
font-family:var(--font-mono);
/* Nicht kleiner: iOS Safari zoomt beim Fokussieren jedes Feld unter 16px
und reisst damit das Formularlayout auseinander. */
font-size:16px;
appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),
linear-gradient(135deg,var(--grey) 50%,transparent 50%);
background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
background-size:5px 5px;background-repeat:no-repeat;padding-right:34px;
}
.field select option{background:var(--black-2);color:var(--white)}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--cyan);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
outline:2px solid var(--cyan);outline-offset:2px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-dim)}
/* Bleibender Hinweis am Feld. Ein Platzhalter kann das nicht leisten: er ist
ein Beispiel, keine Anforderung, und verschwindet beim ersten Zeichen —
also genau dann, wenn die Anforderung gebraucht wird. Steht ueber dem Feld,
weil eine Anforderung vor dem Ausfuellen kommt, nicht danach. */
.field__hint{
margin:0 0 8px;font-family:var(--font-body);font-size:15px;line-height:1.45;
color:var(--grey);max-width:60ch;overflow-wrap:break-word;
}
/* Die Auswahl steht offen statt in einer Liste: alle Moeglichkeiten sind
gleichzeitig sichtbar, die Wahl kostet einen Griff statt zwei, und auf dem
Telefon oeffnet sich kein Systemrad. Das