/* ============================================================
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;
/* Dieselbe Akzentfarbe, aber fuer TEXT auf der Seitenflaeche statt fuer
eine Flaeche mit dunkler Schrift darauf (--auf-akzent, unten). --cyan ist
auf einen sehr hellen Grundton gerechnet; im hellen Modus wird daraus
ein abgedunkelter Ton, siehe design.css / konfiguration.js. Hier der
Ausweichwert fuer den dunklen Modus und falls design.css nicht ankommt:
unveraendert dieselbe Farbe. */
--akzent-text:var(--cyan);
--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 */
/* Flaechen, die ueber dem Inhalt liegen und deshalb nicht durchsichtig
sein duerfen. Sie standen bis zum 2026-09-20 als feste rgba-Werte in
ihren Regeln — im Dunkeln richtig, im hellen Modus aber schwarz unter
schwarzer Schrift (gemessen 1,08:1 in der Kopfzeile). Als Token koennen
sie mitwandern; die Werte hier sind unveraendert die bisherigen. */
--flaeche-oben:rgba(10,10,10,.94);
--flaeche-oben-fest:#0a0a0a; /* unter 900px, undurchsichtig */
--flaeche-player:rgba(13,13,13,.97);
--flaeche-player-fest:#0d0d0d; /* unter 900px, undurchsichtig */
--flaeche-overlay:rgba(6,6,6,.94);
/* Schrift auf der Akzentflaeche. Im Dunkeln ist das der Grundton, im
hellen Modus muss es die Textfarbe sein — sonst steht beim Ueberfahren
eines Knopfes helle Schrift auf hellem Cyan (gemessen 1,24:1). */
--auf-akzent:var(--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 */
--kopf-h:60px; /* Hoehe der klebenden Kopfleiste, ab 721px */
/* Typografische Skala
-------------------
Es gab bis zum 2026-10-24 keine. Jede Ueberschrift trug ihr eigenes
clamp() — gezaehlt neun verschiedene Werte fuer sechs Ebenen, und
„AUSSEHEN" stand damit fast so gross da wie der Seitentitel. Die Stufen
sind nach ihrer ROLLE benannt und nicht nach einer Nummer: wer eine
Ueberschrift setzt, soll sich fragen, was sie ist, und nicht, die
wievielte sie ist.
Die Werte sind so gewaehlt, dass sich an den bereits geprueften Stellen
nichts verschiebt (Seitentitel, Abschnittstitel, Overlay-Titel standen
vorher schon auf genau diesen clamp()-Werten); neu sind nur die beiden
mittleren Stufen, die bisher fehlten und deshalb geraten wurden.
plakat Anton, einmal je Seite. Der Seitentitel.
titel Anton, Abschnittstitel.
untertitel Anton, Titel eines Kastens oder Overlays.
zwischen Lesetext-Schrift, halbfett: Gliederung INNERHALB einer
Lesestrecke. Hier faengt Anton nichts mehr, hier wird
gelesen und nicht plakatiert.
lead Vorspann, erster Absatz.
text Fliesstext.
klein Hinweis, Fussnote, Nebensatz.
marke Space Mono: Etikett, Reiter, kurze Marke.
wert Space Mono: Messwert, Masse, Dateigroesse, Hexwert. */
--t-plakat:clamp(32px,5.2vw,68px);
--t-titel:clamp(28px,4.4vw,58px);
--t-untertitel:clamp(24px,3.4vw,40px);
--t-zwischen:clamp(19px,1.5vw,23px);
--t-lead:clamp(19px,1.45vw,23px);
--t-text:clamp(16.5px,1.05vw,18px);
--t-klein:15px;
--t-marke:11px;
--t-wert:13px;
/* Zeilenabstaende zu den Stufen. Plakatschrift steht eng, Lesetext offen. */
--zh-plakat:.92;
--zh-zwischen:1.22;
--zh-text:1.62;
/* Satzbreite.
Gemessen am 2026-10-24 im Browser: in Barlow Condensed bei 15,5px
ergaben 82ch rund 103 Zeichen je Zeile — die Einheit `ch` ist die
Breite der Null, und die ist in einer schmalen Schrift deutlich breiter
als der Durchschnittsbuchstabe (Faktor 1,26). 58ch sind damit rund
73 Zeichen und liegen im Fenster 65-75, das eine Lesestrecke braucht.
Gemessen gegengerechnet: ein Zeichen misst im Mittel 0,366em, die Null
0,444em — 58ch sind damit 58 x 0,444 / 0,366 = rund 70 Zeichen, und
zwar unabhaengig von der Schriftgroesse, weil beide Masse in em
rechnen.
Dieses Mass gilt fuer LAUFENDEN Lesetext. Kurze Bloecke daneben —
Hinweiszeilen, Bildunterschriften, Kartentexte — tragen ihr eigenes,
engeres Mass (44ch bis 68ch), weil eine volle Lesezeile neben einem
Formular keine Lesestrecke ist, sondern eine Wand. Wer einen laufenden
Text setzt, nimmt `--mass-lese` und schreibt den Wert nicht aus. */
--mass-lese:58ch;
/* Bedienelemente — eine Familie, ein Satz Werte
---------------------------------------------
Vorher stand jede Flaeche, jeder Rand und jede Hoehe einzeln in ihrer
Regel: Textfeld, Klappliste, Dateiwahl, Farbfeld und Kreuzchen hatten
vier verschiedene Raender und drei verschiedene Hoehen. Alles, was ein
Bedienelement ueber sein Aussehen wissen muss, steht jetzt hier.
Jeder Wert zeigt auf ein vorhandenes Token und rechnet nichts fest aus —
sonst faellt der helle Modus um, der die Toene --black, --white und
--rand ueber /design.css umdreht. */
--feld-h:44px; /* Trefferflaeche, Finger */
--feld-pad-x:13px;
--feld-flaeche:var(--black-2);
/* Zeigen: ein Hauch Textfarbe in die Flaeche. Im hellen Modus ist
--white die dunkle Schrift, die Flaeche wird dort also dunkler statt
heller — in beiden Faellen die richtige Richtung. Im dunklen Modus
ergibt die Mischung #212121; nachgerechnet steht --grey darauf bei
6,4:1 und --white bei 13,7:1, beides ueber den geforderten 4,5:1. */
--feld-flaeche-zeige:color-mix(in oklab,var(--black-2) 92%,var(--white));
--feld-rand:var(--rand); /* 3,4:1 auf --black-2 */
--feld-rand-zeige:var(--grey-dim);
--feld-rand-fokus:var(--akzent-text);
--feld-text:var(--white);
--feld-platzhalter:var(--grey-dim); /* 5,3:1 auf --black-2 */
--feld-aus-text:var(--grey-dim); /* gesperrt */
--feld-aus-rand:var(--line);
/* Die Akzentflaeche eines Bedienelements (gewaehlter Reiter, gesetztes
Kreuzchen, Hauptknopf beim Zeigen). Eigener Name, weil --cyan die
MARKENfarbe ist und nicht automatisch eine Bedienflaeche. */
--feld-akzent:var(--cyan);
/* Breite des Satzspiegels. War 1400px: auf einem 1920er Schirm standen
damit 520 Pixel leer, auf einem 2560er 1160 — der Betreiber hat die
Seite zu Recht als schmal empfunden. 1760 nutzt den grossen Schirm,
ohne dass Kopfzeile, Trackliste und Player ins Uferlose laufen. Was
Text ist, behaelt sein eigenes Mass; Breite gewinnt die Seite weiter
unten dadurch, dass Kopf und Inhalt nebeneinander stehen. */
--breite:1760px;
/* 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;
/* Der Wert war fest 72px. Die Kopfleiste ist 60px hoch — unter 721px
bricht sie aber in zwei Zeilen um (Wortmarke oben, vier Werkzeuge
darunter) und misst dann 110px. Ein Sprungziel landete dort unter der
Leiste. Jetzt rechnet der Abstand mit der tatsaechlichen Hoehe. */
scroll-padding-top:calc(var(--kopf-h) + 12px);
-webkit-text-size-adjust:100%;
}
body{
margin:0;
background:var(--black);
color:var(--white);
font-family:var(--font-body);
font-size:var(--t-text);
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)}
/* Dasselbe gilt, solange kein Track gewaehlt ist: die Leiste ist dann nicht
da, und der reservierte Platz unter dem Fussbereich waere wieder die Leere,
die oben beschrieben ist. Der Uebergang ist mitgezogen, damit der
Fussbereich auf kurzen Seiten nicht springt, sondern zusammen mit der
Leiste wandert - einmal je Besuch, beim ersten gewaehlten Track. */
body{transition:padding-bottom .34s cubic-bezier(.16,.84,.44,1)}
body.player-verborgen{padding-bottom:env(safe-area-inset-bottom, 0px)}
img{max-width:100%;display:block}
::selection{background:var(--cyan);color:var(--auf-akzent)}
:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px}
/* Der Fokusring auf einer AKZENTFLAECHE.
Der Ring ist --akzent-text, und auf einem cyanfarbenen Knopf ist das
dieselbe Farbe wie die Flaeche: gemessen 1,0:1, also unsichtbar. Genau die
Elemente, die beim Zeigen oder im gewaehlten Zustand cyan werden, brauchen
deshalb den Gegenton. --auf-akzent ist dafuer schon da und dreht im hellen
Modus mit. */
.views__btn[aria-selected="true"]:focus-visible,
.views__btn[aria-current="page"]:focus-visible,
.wahl__opt input:checked:focus-visible + span,
.abtn--stark:focus-visible,
.submit:focus-visible,
.skip:focus-visible{outline-color:var(--auf-akzent);outline-offset:-5px}
/* 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)}
/* Beim Ziehen heller als beim Ueberfahren — sonst sagt die Leiste nicht,
dass sie gerade am Zug ist. */
::-webkit-scrollbar-thumb:active{background:var(--white)}
::-webkit-scrollbar-corner{background:var(--black-2)}
/* Der Schreibcursor im Akzent des Labels: das einzige Cyan, das der Besucher
selbst bewegt. Stand nur an drei Feldklassen; jedes Feld, in das man
tippen kann, gehoert dazu — auch die der Werkzeuge und des Kellerpults. */
input,textarea,select,[contenteditable]{caret-color:var(--akzent-text)}
/* Messwerte brauchen Ziffern gleicher Breite, sonst wandert die Zahl unter
dem Finger, waehrend sie hochzaehlt (Laufzeit, Zeichenzaehler, Prozente).
In Space Mono ist das ohnehin so; die Lesetext-Schriften sind
proportional, und genau dort fehlte es. */
.zeichen,.foot__fein{font-variant-numeric:tabular-nums}
.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:var(--breite);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.
`feTurbulence` erzeugt FARBIGES Rauschen: die drei Kanaele werden
unabhaengig voneinander gewuerfelt. Mit `mix-blend-mode:overlay` legt
sich das als Farbstich auf alles darunter — am ehesten sichtbar auf
grossen hellen Flaechen und Buchstaben. Die beiden Schwestertexturen
dieser Datei (--tex-hero, --tex-cover) entsaettigen aus genau diesem
Grund mit `feColorMatrix`; an dieser einen Stelle fehlte es. Das Korn
bleibt unveraendert, nur seine Farbe geht — die Seite hat genau einen
Akzent, und eine Rauschtextur ist keiner. */
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,` in seite.js — und die Content-Security-Policy
(`style-src 'self'`) blockt eingebettete Stilattribute im Browser
ausnahmslos, auch das eigene. Die Spalte lief deshalb links, nicht
rechts. In admin.js und studio.js fehlte die Ausrichtung sogar ganz. Eine
Regel fuer alle drei Tabellen statt drei Einzelloesungen. */
.tracks td.num{text-align:right}
/* Sortierrichtung sichtbar markiert */
.tracks th.is-sorted{color:var(--akzent-text)}
.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(--akzent-text)}
.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(--akzent-text)}
/* 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(--akzent-text);
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(--akzent-text);
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);
}
/* Der Fussnotenkasten.
Er stand in Space Mono, 11px, --grey-dim — auf /kellerpult und
/musikvideo trug er damit den wichtigsten Satz der Seite („Deine Datei
bleibt auf deinem Geraet") im Kleingedruckten-Kostuem: kleinste Schrift,
dunkelste Farbe, Schreibmaschine. Gemessen 173 Zeichen je Zeile vor dem
Mass, danach immer noch 11px.
Jetzt Lesetext in der Lesetextschrift auf der kleinen Stufe. Was den Satz
als Nebenbemerkung ausweist, ist die Farbe und die Groesse — nicht die
Schriftart, die auf dieser Seite etwas anderes bedeutet. */
.note{
font-family:var(--font-body);font-size:var(--t-klein);letter-spacing:0;
color:var(--grey);line-height:1.55;
/* UNTEN einen eigenen Abstand, nicht den Browser-Standard.
Mit nur `margin-top` erbte der Kasten unten 1em = 11px, und auf
/musikvideo stand der wichtigste Satz der Seite („was mit deiner Datei
passiert") damit 11 Pixel ueber dem Titelfeld — er las sich als
Kleingedrucktes des Formulars statt als eigener Absatz. Gemessen: 56px
Abstand oben, 11px unten. */
margin:var(--s-4) 0 var(--takt-eng);
/* Und ein Mass. 11px Monospace ueber die volle Satzspiegelbreite waren
gemessen 173 Zeichen je Zeile — das liest niemand, das wirkt wie ein
Banner. Alle anderen Textklassen hier haben eines (.prose 66ch,
.wk__vorspann 68ch, .afeld__hint 60ch); .note war die einzige ohne.
80ch waren in der Lesetextschrift rund 100 Zeichen — immer noch zu
breit fuer einen Nebentext. */
max-width:var(--mass-lese);
}
/* Das fettgesetzte Stichwort am Anfang. Es ist der Grund, warum der Kasten
ueberhaupt gelesen wird; vorher war es nur eine Spur heller als der Rest. */
.note b,.note strong{color:var(--white);font-weight:600}
/* 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(--akzent-text);text-decoration-thickness:1px;text-underline-offset:3px}
/* ============================================================
Bedienelemente — EINE Familie
============================================================
Bis zum 2026-10-24 gab es zwei Familien, die sich nicht kannten: `.field`
(das oeffentliche Formular) und `.afeld` (Verwaltung und Werkzeuge). Sie
hatten verschiedene Raender (--rand gegen --line), verschiedene
Schriftgroessen (16-19px gegen 18px), verschiedene Schriften in der
Klappliste (Mono gegen Lesetext) und verschiedene Hoehen. Dazu kamen vier
Elemente ganz ohne Hausdarstellung: Dateiwahl, Farbfeld, Kreuzchen und
— in `.afeld` — die Klappliste.
Jetzt steht hier ein Satz Regeln fuer BEIDE Familien, und sechs Zustaende
gelten fuer alle:
Ruhe --feld-flaeche, Rand --feld-rand (3,4:1 — WCAG 1.4.11)
Zeigen Flaeche hebt sich, Rand wird heller (nur hover:hover)
Fokus Rand im Akzent + Ring; Tastatur UND Maus sehen dasselbe
Aktiv Akzentflaeche mit Gegenton-Schrift
Gesperrt Rand faellt auf --line, Schrift auf --feld-aus-text,
Zeiger auf not-allowed — und alle Zeige-Regeln sind
ausdruecklich zurueckgenommen
Fehler Rand und Ring in --warn, Text in --warn-text
Die Zustaende unterscheiden sich nie nur in der Farbe: zum Fokus gehoert
ein Ring, zum Gesperrt-Zustand der Zeiger, zum Aktiv-Zustand der Umschlag
von Flaeche und Schrift. */
.form{max-width:620px}
.field{margin-bottom:clamp(16px,2.6vh,24px)}
/* Die Beschriftung ist eine MARKE und keine Prosa — ein Wort, versal,
gesperrt. Hier bleibt Mono richtig. */
.field label{
display:block;font-family:var(--font-mono);font-size:var(--t-marke);
letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);
margin-bottom:7px;
}
/* --- Ruhe: Textfeld, Klappliste, mehrzeiliges Feld --- */
.field input,.field select,.field textarea,
.afeld input[type=text],.afeld input[type=url],.afeld input[type=email],
.afeld input[type=tel],.afeld input[type=search],
.afeld input[type=password],.afeld input[type=number],
.afeld select,.afeld textarea{
width:100%;
background:var(--feld-flaeche);
border:1px solid var(--feld-rand);
border-radius:var(--radius,0);
color:var(--feld-text);
font-family:var(--font-body);
/* --t-text faengt bei 16,5px an. Unter 16px zoomt iOS Safari beim
Fokussieren die ganze Seite — die Untergrenze der Skala ist auch
deshalb so gewaehlt. */
font-size:var(--t-text);
line-height:1.4;
padding:10px var(--feld-pad-x);
min-height:var(--feld-h);
transition:border-color .12s linear,background-color .12s linear;
}
/* --- Zeigen. Nur wo gezeigt wird: auf dem Telefon klebt `:hover` nach dem
Antippen am Element fest und das Feld bliebe hell stehen. --- */
@media (hover:hover){
.field input:hover,.field select:hover,.field textarea:hover,
.afeld input[type=text]:hover,.afeld input[type=url]:hover,
.afeld input[type=email]:hover,.afeld input[type=tel]:hover,
.afeld input[type=search]:hover,
.afeld input[type=password]:hover,.afeld input[type=number]:hover,
.afeld select:hover,.afeld textarea:hover{
border-color:var(--feld-rand-zeige);
background:var(--feld-flaeche-zeige);
}
}
/* --- Fokus. `:focus` faerbt den Rand (auch bei Maus und Tippen, damit man
sieht, wo man schreibt), `:focus-visible` legt den Ring dazu. --- */
.field input:focus,.field select:focus,.field textarea:focus,
.afeld input:focus,.afeld select:focus,.afeld textarea:focus{
outline:none;border-color:var(--feld-rand-fokus);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.afeld input:focus-visible,.afeld select:focus-visible,.afeld textarea:focus-visible{
outline:2px solid var(--feld-rand-fokus);outline-offset:2px;
}
/* --- Platzhalter. Er ist ein Beispiel und darf deshalb leiser sein als die
Eingabe — aber lesbar bleiben: --feld-platzhalter misst 5,3:1 auf
--feld-flaeche. --- */
.field input::placeholder,.field textarea::placeholder,
.afeld input::placeholder,.afeld textarea::placeholder,
/* `.kp__text` haengt in keinem der beiden Kaesten und behielt deshalb die
Vorgabefarbe des Browsers: gemessen rgb(117,117,117) auf --black, also
4,30:1 und damit der einzige Textwert unter 4,5:1 im ganzen Haus. */
.kp__text::placeholder{
color:var(--feld-platzhalter);opacity:1;
}
/* --- Gesperrt. Vorher sah ein gesperrtes Feld aus wie ein leeres. --- */
.field input[disabled],.field select[disabled],.field textarea[disabled],
.afeld input[disabled],.afeld select[disabled],.afeld textarea[disabled],
.field input[readonly],.afeld input[readonly]{
color:var(--feld-aus-text);border-color:var(--feld-aus-rand);
background:var(--black);cursor:not-allowed;
}
@media (hover:hover){
.field input[disabled]:hover,.field select[disabled]:hover,
.field textarea[disabled]:hover,
.afeld input[disabled]:hover,.afeld select[disabled]:hover,
.afeld textarea[disabled]:hover{
border-color:var(--feld-aus-rand);background:var(--black);
}
}
/* --- Fehler. `aria-invalid` ist die Angabe, die auch die Vorlesehilfe
hoert; die Farbe ist die Verstaerkung, nicht die Information. --- */
/* Mit `input`/`select`/`textarea` davor und nicht als blosser Nachfahre:
die Grundform oben nennt `.afeld input[type=text]` und waere mit einem
Namensteil mehr (0-2-1) staerker als `.afeld [aria-invalid]` (0-2-0) —
gemessen blieb der Fehlerrand auf den drei Werkzeugseiten deshalb aus,
waehrend er auf `/kontakt` (dort heisst die Grundform `.field input`,
ebenfalls 0-2-0, steht aber frueher) wirkte. */
.field input[aria-invalid="true"],.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.afeld input[aria-invalid="true"],.afeld select[aria-invalid="true"],
.afeld textarea[aria-invalid="true"]{
border-color:var(--warn);color:var(--warn-text);
}
/* Eigene Regel und nicht in der Liste darueber: ein Browser, der
`:user-invalid` nicht kennt, wirft die GANZE Regel weg, in der es steht —
dann waere auch `aria-invalid` ohne Wirkung. So faellt nur diese hier. */
.field input:user-invalid,.field textarea:user-invalid,
.afeld input:user-invalid,.afeld textarea:user-invalid{
border-color:var(--warn);color:var(--warn-text);
}
.field input[aria-invalid="true"]:focus-visible,
.field select[aria-invalid="true"]:focus-visible,
.field textarea[aria-invalid="true"]:focus-visible,
.afeld input[aria-invalid="true"]:focus-visible,
.afeld select[aria-invalid="true"]:focus-visible,
.afeld textarea[aria-invalid="true"]:focus-visible{
outline-color:var(--warn);
}
/* --- Die Klappliste --- */
.field select,.afeld select,.kp__auswahl{
appearance:none;-webkit-appearance:none;
/* Der Pfeil steht in einer eigenen Eigenschaft, damit Zeigen und Fokus
ihn mitfaerben koennen, ohne den ganzen Verlauf zu wiederholen. */
--pfeil:var(--grey);
background-image:linear-gradient(45deg,transparent 50%,var(--pfeil) 50%),
linear-gradient(135deg,var(--pfeil) 50%,transparent 50%);
/* Vorher stand der Pfeil fest 20px unter der Oberkante. Das stimmte bei
genau einer Feldhoehe; jede andere schob ihn aus der Mitte. Jetzt
haengt er an der Mitte. */
background-position:calc(100% - 18px) calc(50% - 2px),
calc(100% - 13px) calc(50% - 2px);
background-size:5px 5px;background-repeat:no-repeat;
/* Platz fuer den Pfeil — und die Notbremse fuer zu lange Optionstexte.
Siehe die ausfuehrliche Begruendung weiter unten bei `.afeld`. */
padding-right:38px;
text-overflow:ellipsis;
cursor:pointer;
}
.field select option,.afeld select option,.kp__auswahl option{
background:var(--feld-flaeche);color:var(--feld-text);
}
@media (hover:hover){
.field select:hover,.afeld select:hover,.kp__auswahl:hover{--pfeil:var(--white)}
}
.field select:focus,.afeld select:focus,.kp__auswahl:focus{--pfeil:var(--akzent-text)}
.field select[disabled],.afeld select[disabled],.kp__auswahl[disabled]{--pfeil:var(--feld-aus-text)}
.field textarea,.afeld textarea{
resize:vertical;min-height:120px;line-height:var(--zh-text);
}
/* 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:var(--t-klein);
line-height:1.45;
color:var(--grey);max-width:var(--mass-lese);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 braucht den Reset, sonst
setzt der Browser Rahmen und Innenabstand dazu. */
.feld--wahl{border:0;padding:0;margin:0 0 clamp(16px,2.6vh,24px);min-width:0}
.feld--wahl legend{
padding:0;font-family:var(--font-mono);font-size:var(--t-marke);
letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);
margin-bottom:9px;
}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl__opt{position:relative;display:inline-flex;cursor:pointer}
/* Der Knopf bleibt im Dokument — er traegt Rolle, Name und Zustand fuer die
Hilfstechnik. Sichtbar ist nur die Flaeche daneben. Bewusst ueber den
Geschwister-Wahlschalter gestylt und nicht ueber :has(), damit auch aeltere
Browser den gewaehlten Zustand zeigen. */
.wahl__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.wahl__opt span{
display:inline-flex;align-items:center;min-height:var(--feld-h);
padding:0 14px;
border:1px solid var(--feld-rand);background:var(--feld-flaeche);
border-radius:var(--radius,0);
font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--grey);
transition:border-color .12s linear,color .12s linear,background .12s linear;
}
.wahl__opt input:checked + span{
background:var(--feld-akzent);border-color:var(--feld-akzent);
color:var(--auf-akzent);
}
.wahl__opt input:focus-visible + span{outline:2px solid var(--feld-rand-fokus);outline-offset:2px}
@media (hover:hover){
.wahl__opt:hover input:not(:checked) + span{
color:var(--white);border-color:var(--feld-rand-zeige);
background:var(--feld-flaeche-zeige);
}
}
/* Gesperrte Wahl: dieselbe Sprache wie beim gesperrten Feld. */
.wahl__opt input[disabled] + span{
color:var(--feld-aus-text);border-color:var(--feld-aus-rand);
background:var(--black);cursor:not-allowed;
}
/* Freiwillige Felder sagen das selbst. Sonst raet man, und im Zweifel laesst
man das Feld aus — gerade das mit dem Link zur Musik. */
.field__opt{
font-size:10px;letter-spacing:.12em;color:var(--grey-dim);
border:1px solid var(--line);padding:1px 5px;margin-left:6px;
}
/* ---------- Das Kreuzchen ----------
Vorher ein 24px-Kaestchen, das sich im gesetzten Zustand nur fuellte: kein
Haken, kein Zeige-, kein Fokus-, kein Sperrzustand, und 24 statt 44 Punkte
Trefferflaeche.
Die 44 kommen ueber einen DURCHSICHTIGEN Rand von 10 Pixeln. Damit ist das
Element 44 x 44 gross, der Finger trifft es ueberall, und trotzdem ist nur
das 24er Quadrat in der Mitte zu sehen: `background-clip:padding-box` haelt
die Flaeche innerhalb des Randes, und der sichtbare Rahmen kommt als
`inset`-Schatten, der ebenfalls an der Innenkante sitzt. Ein Polster haette
dasselbe Mass ergeben, aber der echte Rahmen waere dann aussen gelandet. */
.consent{display:flex;gap:4px;align-items:flex-start;margin-bottom:clamp(20px,3vh,28px)}
.consent input{
appearance:none;-webkit-appearance:none;
inline-size:var(--feld-h);block-size:var(--feld-h);flex:none;
margin:-10px 0 -10px -10px;
border:10px solid transparent;
background-color:var(--feld-flaeche);background-clip:padding-box;
background-repeat:no-repeat;background-position:center;
box-shadow:inset 0 0 0 1px var(--feld-rand);
cursor:pointer;border-radius:var(--radius,0);
transition:background-color .12s linear,box-shadow .12s linear;
}
@media (hover:hover){
.consent input:not(:checked):not([disabled]):hover{
background-color:var(--feld-flaeche-zeige);
box-shadow:inset 0 0 0 1px var(--feld-rand-zeige);
}
}
/* Der Ring sitzt am 24er Quadrat und nicht am 44er Kasten: -10px schiebt ihn
genau auf die Innenkante des durchsichtigen Randes, -8px laesst zwei Pixel
Luft. Ohne das stuende der Fokusring weit um das Kaestchen herum und
beruehrte den Text daneben. */
.consent input:focus-visible{outline:2px solid var(--feld-rand-fokus);outline-offset:-8px}
/* Gesetzt: Akzentflaeche UND ein Haken. Die Fuellung allein war Farbe als
einziger Traeger des Zustands (WCAG 1.4.1). Der Haken ist eine gezeichnete
Linie und kein Schriftzeichen — die Seite hat kein Zeichensystem.
Seine Farbe steht als einzige in dieser Datei fest im Bild und nicht in
einem Token: eine Datenadresse kann kein `var()` lesen. Sie entspricht
--auf-akzent, und die Annahme dahinter ist dieselbe, die --auf-akzent
ueberall macht — auf der Akzentflaeche steht der dunkle Ton. */
.consent input:checked{
background-color:var(--feld-akzent);
box-shadow:inset 0 0 0 1px var(--feld-akzent);
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M3.2%208.4%206.4%2011.6%2012.8%204.8%27%20fill%3D%27none%27%20stroke%3D%27%230a0a0a%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27square%27%2F%3E%3C%2Fsvg%3E");
background-size:16px 16px;
}
.consent input[disabled]{
background-color:var(--black);box-shadow:inset 0 0 0 1px var(--feld-aus-rand);
cursor:not-allowed;
}
/* Das Etikett traegt den Text — und bei einem Kreuzchen ist das immer ein
ganzer Satz. Vorher Space Mono in 12px: der laengste Fliesstext der Seite
in der Schrift, die fuer Messwerte da ist. */
.consent label,.consent > span{
font-family:var(--font-body);font-size:var(--t-klein);line-height:1.5;
color:var(--grey);cursor:pointer;
max-width:var(--mass-lese);
}
.consent a{color:var(--akzent-text)}
/* ---------- Knoepfe: drei Raenge ----------
Der Rang sagt, was der Knopf ist, und nicht, wie wichtig er aussehen soll:
.submit Was die Seite tut. Volle Flaeche. Einer je Formular.
.abtn Eine Handlung daneben. Rahmen, keine Flaeche.
.abtn--leise Ein Weg heraus (Abbrechen, Zurueck). Nur Schrift.
Die ersten beiden gab es; die dritte Stufe fehlte, und deshalb trugen
„Abbrechen" und „Speichern" bisher dasselbe Gewicht. */
.submit{
font-family:var(--font-display);font-size:clamp(17px,1.6vw,22px);
letter-spacing:.04em;text-transform:uppercase;
background:var(--white);color:var(--black);border:1px solid var(--white);
display:inline-flex;align-items:center;justify-content:center;
min-height:var(--feld-h);padding:12px 34px;
cursor:pointer;position:relative;
transition:background .1s linear,color .1s linear,border-color .1s linear;
}
.submit:hover,.submit:focus-visible{
background:var(--feld-akzent);color:var(--auf-akzent);
border-color:var(--feld-akzent);
}
/* Gedrueckt. Ohne diesen Zustand gibt der Knopf beim Antippen keine Antwort,
bis der Server geantwortet hat — auf dem Telefon sind das Sekunden. */
.submit:active:not([disabled]){
background:var(--akzent-text);border-color:var(--akzent-text);
color:var(--auf-akzent);
}
/* Steht ueber dem Formular, damit die Rueckmeldung nach dem Absenden
im Blick ist statt zweitausend Pixel darunter. */
.formstate{
margin:0 0 26px;padding:16px 20px;
border:1px solid var(--akzent-text);background:var(--black-2);
/* War Space Mono. Eine Rueckmeldung ist ein Satz und kein Messwert. */
font-family:var(--font-body);font-size:var(--t-text);
line-height:1.55;color:var(--white);max-width:var(--mass-lese);
}
.formstate b{color:var(--akzent-text);font-weight:600}
.formstate:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px}
.formstate.is-fehler{border-color:var(--warn)}
.formstate.is-fehler b{color:var(--warn)}
/* ---------- Fusszeile ---------- */
/* Die Fusszeile nahm auf dem Telefon 308 Pixel ein — 42 Prozent des
Bildschirms — und am Rechner 205. Gekuerzt wurde ueber die Abstaende,
nicht ueber die Schrift: unter 11 Pixel geht Funktionstext hier nicht.
Seit dem 2026-10-24 hat sie ausserdem einen Rang. Vorher war sie eine
Zeile: links eine 11px-Monozeile mit dem Jahr, rechts vier gleich grosse
Verweise, dazwischen nichts — und nach oben keine Kante, der Inhalt lief
einfach aus. Jetzt oben eine Kante, darunter zwei Ebenen: die Wortmarke
mit den Verweisen (das, was man hier noch tun kann) und darunter die
Angaben zum Absender (das, was hier stehen muss). */
.foot{
padding-block:var(--takt-eng);
border-top:1px solid var(--line);
margin-top:var(--takt-eng);
}
.foot__grid{
display:flex;flex-wrap:wrap;gap:12px 28px;
align-items:baseline;justify-content:space-between;
}
/* Die Wortmarke im Fuss. Sie schliesst die Seite ab, wie sie sie oben
aufmacht — nur eine Stufe kleiner, damit sie den Abschluss markiert und
nicht noch einmal anfaengt. */
.foot__mark{
font-family:var(--font-display);font-size:var(--t-zwischen);
letter-spacing:.04em;text-transform:uppercase;
color:var(--white);text-decoration:none;line-height:1;
/* Gemessen 19 Pixel hoch — dieselbe Falle wie bei der Wortmarke oben in
der Kopfleiste und bei der Kanalzeile: der Text ist klein, der Griff
muss es nicht sein. Der Kasten waechst, die Schrift bleibt. */
display:inline-flex;align-items:center;min-height:var(--feld-h);
}
@media (hover:hover){
.foot__mark:hover{color:var(--akzent-text)}
}
/* Die zweite Ebene: Jahr, Betreiber, Adresse. Keine Handlung, nur Angabe —
deshalb leiser und ohne Versalien. --grey-dim misst 5,6:1 auf --black. */
.foot__fein{
display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
margin:0;font-family:var(--font-body);font-size:var(--t-klein);
line-height:1.5;color:var(--grey-dim);
}
.foot__fein a{color:var(--grey);text-underline-offset:3px}
@media (hover:hover){
.foot__fein a:hover{color:var(--akzent-text)}
}
/* Die E-Mail-Adresse ist eine technische Zeichenkette, die man abschreibt —
dafuer ist die Monoschrift da, und nur dafuer. */
.foot__adresse{
font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere;
display:inline-flex;align-items:center;min-height:var(--feld-h);
min-width:0;max-width:100%;
}
.foot__links{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center}
.foot__link{
font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--grey);
background:none;border:0;
display:inline-flex;align-items:center;min-height:var(--feld-h);
/* recht_email (Reiter Impressum) ist frei eingebbar. Ohne dies lief eine
lange Adresse ueber den Rand der Fusszeile statt in die naechste Zeile zu
brechen — .foot__links wrappt zwar als Flexbox, aber ein einzelner
Flex-Kasten bricht seinen Inhalt sonst nicht. */
overflow-wrap:anywhere;min-width:0;max-width:100%;
/* Die Linie lag als Schatten am unteren Rand des Kastens — bei 44 Pixeln
Trefferflaeche also gut einen Zentimeter unter dem Wort, zu dem sie
gehoert. Als Unterstreichung haengt sie am Text, unabhaengig davon, wie
hoch der Kasten fuer den Finger sein muss. */
text-decoration:underline;
text-decoration-color:var(--rand);
text-underline-offset:4px;
padding:0;cursor:pointer;
}
.foot__link:hover,.foot__link:focus-visible{color:var(--akzent-text);text-decoration-color:var(--akzent-text)}
/* Die 44 Pixel sind eine Regel fuer den Finger. Wo mit Maus oder Stift gezeigt
wird, treffen 30 Pixel genauso sicher — WCAG 2.5.8 verlangt 24 — und die
Fusszeile verliert damit drei aufgeblasene Zeilen. Auf Tastgeraeten bleibt
es bei 44. Nebenbei rueckt die Unterstreichung des Links wieder an den
Text heran, statt am Boden eines zu hohen Kastens zu liegen. */
@media (hover:hover) and (pointer:fine){
.foot__link,.foot__plattform a,
.foot__mark,.foot__adresse{min-height:30px}
}
/* ============================================================
Player-Leiste — das Herzstueck. Fix am unteren Rand,
ueberlebt jeden Ansichtswechsel.
============================================================ */
.player{
position:fixed;left:0;right:0;bottom:0;z-index:45;
/* Unter der Leiste liegt auf neueren Telefonen der Home-Indikator. Ohne
diesen Zuschlag sitzt die Wiedergabesteuerung genau darunter. */
height:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
padding-bottom:env(safe-area-inset-bottom, 0px);
background:var(--flaeche-player);
backdrop-filter:blur(8px);
border-top:1px solid var(--line);
/* Ein- und Ausblenden laeuft ueber transform und opacity, nicht ueber
display: beides zeichnet der Compositor, der uebrige Inhalt wird dabei
nicht neu berechnet. Die Leiste liegt ohnehin ausserhalb des Flusses. */
transform:translateY(0);
opacity:1;
visibility:visible;
transition:transform .34s cubic-bezier(.16,.84,.44,1), opacity .22s ease-out;
}
/* Zustand vor der ersten Wahl. `visibility` schaltet erst am Ende der
Bewegung um - ohne das bliebe die verborgene Leiste mit der Tabulatortaste
erreichbar, denn Lautstaerkeregler und Weiter-Schalter sind nicht
deaktiviert. `aria-hidden` und `inert` setzen Markup und Skript dazu. */
.player.is-verborgen{
transform:translateY(100%);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:transform .26s cubic-bezier(.4,0,.7,.2), opacity .18s ease-in,
visibility 0s linear .26s;
}
.player__inner{
height:100%;
display:grid;
grid-template-columns:1fr;
align-items:center;
gap:14px;
}
@media (min-width:900px){
/* Dritte Spalte breiter: dort steht jetzt neben Lautstaerke auch der
Weiter-Schalter. Die Waveform gibt die Breite ab, sie skaliert ohnehin. */
/* Die linke Spalte war auf 240px gedeckelt und damit auf dem grossen
Schirm SCHMALER als auf dem kleinen, wo sie sich am Inhalt orientiert
(298px bei 768). Der Interpretenname brauchte 242px, bekam 176 und
wurde gekuerzt, obwohl daneben Platz frei stand. Der Deckel steigt
deshalb; die Waveform in der Mitte gibt die Breite ab, sie skaliert. */
.player__inner{grid-template-columns:minmax(190px,340px) 1fr minmax(180px,244px)}
}
/* linke Spalte: Was laeuft */
.player__now{display:flex;align-items:center;gap:12px;min-width:0}
.player__cover{
width:52px;height:52px;
/* Die Initiale in der Kachel mischt mit `mix-blend-mode:difference`. Ohne
eigenen Stapelkontext mischt sie nicht nur mit der Kachel, sondern mit
allem dahinter — hier also mit der fixierten Player-Leiste selbst. Das
zwingt die ganze Leiste in eine gemischte Schicht, und auf Android blieb
dann die Flaeche eines Kindes unvollstaendig gefuellt: gemeldet am
Weiter-Schalter, dessen Cyan nur einen Teil des Knopfes bedeckte.
`isolation` sperrt die Mischung in die Kachel, wo sie hingehoert.
Bewusst nur hier und nicht an `.cover` allgemein: seitenweit gesetzt
wechselt der Browser die Kantenglaettung des gesamten Fliesstextes von
Graustufen auf Subpixel, und das ist eine Aenderung am Schriftbild,
die dieser Fehler nicht verlangt. */
isolation:isolate;
}
.player__cover .cover__mark{font-size:18px;padding:6%}
.player__txt{min-width:0}
/* Anton setzt die Umlautpunkte weit ueber die Versalhoehe: gemessen liegt der
Scheitel von Ä bei 1,053 em ueber der Grundlinie, waehrend A bei 0,859 em
endet. Bei line-height:1 reicht die Zeilenbox nur bis 0,924 em — die Punkte
liegen ausserhalb und werden von overflow:hidden abgeschnitten, aus
"GEWÄHLT" wurde "GEWAHLT". Noetig sind rechnerisch 1,26; 1,3 laesst etwas
Luft. Die Zeilen bleiben trotzdem in ihren Kaesten: in der Leiste stehen
84 px zur Verfuegung, in der Songliste gibt das 44-px-Cover die Hoehe vor. */
.player__title{
margin:0;font-family:var(--font-display);font-weight:400;
text-transform:uppercase;line-height:1.3;font-size:clamp(16px,1.5vw,20px);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player__artist{
margin:3px 0 0;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;
}
.player.is-empty .player__title{color:var(--grey-dim)}
/* Mitte: Transport + Waveform */
.player__mid{display:flex;align-items:center;gap:12px;min-width:0}
.player__wave{
flex:1;min-width:0;
display:flex;align-items:center;gap:10px;
}
.player__time{
font-family:var(--font-mono);font-size:11px;
font-variant-numeric:tabular-nums;color:var(--grey);
white-space:nowrap;
}
/* Der Hinweis „Die Wiedergabe laeuft weiter …" stand hier im Leerzustand der
Leiste. Seit dem 2026-09-09 erscheint die Leiste erst mit dem ersten Track,
damit war der Satz unerreichbar — Markup, Regel und Platzhalter sind am
2026-09-11 entfallen. Gesagt wird er jetzt einmalig ueber die Statuszeile
(public/app.js). */
.player.is-empty .player__wave{display:none}
/* Laden und Fehlschlag treten an die Stelle des Sprungbalkens — solange nichts
spielbar ist, zeigt der Balken ohnehin nichts Wahres an. */
.player__status{
display:none;margin:0;min-width:0;
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
line-height:1.4;color:var(--grey);
overflow-wrap:anywhere;
}
.player.is-laedt .player__wave,
.player.is-hinweis .player__wave,
.player.is-fehler .player__wave{display:none}
.player.is-laedt .player__status,
.player.is-hinweis .player__status,
.player.is-fehler .player__status{display:block}
.player.is-fehler .player__status{color:var(--warn-text)}
/* Der Ladepunkt pulst nur, wenn Bewegung erwuenscht ist. */
.player.is-laedt .player__status::before{
content:"";display:inline-block;width:6px;height:6px;margin-right:8px;
background:var(--cyan);vertical-align:1px;
animation:laden 1.1s ease-in-out infinite;
}
@keyframes laden{0%,100%{opacity:.25}50%{opacity:1}}
/* Der Balken ist ein Button: Klicken springt an die Position */
.wavebtn{
flex:1;min-width:0;height:46px;
background:transparent;border:0;padding:0;cursor:pointer;
touch-action:none;
display:block;
}
.wavebtn canvas{display:block;width:100%;height:46px}
.wavebtn:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
/* rechte Spalte: Lautstaerke */
.player__vol{display:flex;align-items:center;gap:10px;justify-content:flex-end}
/* Der Weiter-Schalter. Spricht dieselbe Sprache wie der Ansichtswechsel im
Kopf — Mono, Rahmen, gefuellt wenn aktiv —, damit die Seite nur ein
Schaltermuster hat und nicht zwei. Volle 44 Pixel Trefferflaeche wie jedes
andere Bedienelement hier; die Leiste ist 84 hoch, der Platz ist da. */
.weiter{
flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;
background:transparent;border:1px solid var(--rand);color:var(--grey);
display:inline-flex;align-items:center;min-height:44px;padding:0 11px;
cursor:pointer;
transition:background .12s linear,color .12s linear,border-color .12s linear;
}
.weiter:hover{color:var(--white);border-color:var(--white)}
/* Der Weg zurueck aus der Leiste. Bewusst zurueckhaltender als der
Weiter-Schalter: er ist der seltenere Griff und soll den Blick nicht vom
Abspielknopf abziehen. Trefferflaeche 44 Pixel wie ueberall sonst, das
Zeichen selbst bleibt klein. */
.player__zu{
flex:none;background:transparent;border:1px solid var(--rand);
color:var(--grey-dim);
display:inline-flex;align-items:center;justify-content:center;
width:44px;min-height:44px;padding:0;
font-size:19px;line-height:1;cursor:pointer;
transition:color .12s linear,border-color .12s linear;
}
.player__zu:hover{color:var(--white);border-color:var(--white)}
.player__zu:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.weiter[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--auf-akzent)}
.weiter[aria-pressed="true"]:hover{border-color:var(--cyan)}
.player__vol span{
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--grey-dim);white-space:nowrap;
}
.player__vol input{
-webkit-appearance:none;appearance:none;
/* Die Bahn bleibt 2 Pixel duenn, die Trefferflaeche wird 24 — das Bild
traegt der Track, nicht die Box. WCAG 2.5.8 verlangt 24x24. */
width:clamp(70px,10vw,120px);height:24px;background:transparent;
cursor:pointer;
}
.player__vol input::-webkit-slider-runnable-track{height:2px;background:var(--line)}
.player__vol input::-moz-range-track{height:2px;background:var(--line)}
.player__vol input::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:12px;height:12px;background:var(--cyan);border:0;border-radius:0;
margin-top:-5px; /* mittig auf der 2px-Bahn */
}
.player__vol input::-moz-range-thumb{
width:12px;height:12px;background:var(--cyan);border:0;border-radius:0;
}
.player__vol input:focus-visible{outline:2px solid var(--akzent-text);outline-offset:4px}
/* Mobil: kompakte Leiste. Die Lautstaerke entfaellt — das regelt das Geraet —,
der Weiter-Schalter aber nicht: unterwegs ist er am wichtigsten, und dort
fehlte er bisher ganz. Die dritte Spalte traegt deshalb nur noch ihn. */
/* Drei Schichten liegen dauerhaft ueber jedem Bildlauf: das Korn als
bildschirmfuellende Flaeche mit mix-blend-mode und zweimal backdrop-filter
an Kopf- und Player-Leiste. Auf dem Rechner ist das folgenlos, auf einem
schwachen Telefon kostet jede davon Bildrate — und zwar staendig, nicht nur
einmal. Auf kleinen Geraeten weichen sie deshalb undurchsichtigen Flaechen;
sichtbar ist der Unterschied dort ohnehin kaum. */
@media (max-width:899px){
body::after{display:none}
/* Die Farbe bleibt exakt dieselbe, nur die Alpha-Stufe faellt weg:
rgba(10,10,10,.985) ist #0a0a0a, rgba(13,13,13,.99) ist #0d0d0d.
Der Unterschied ist unsichtbar, die Wirkung nicht. Eine fixierte
Ebene mit *fast* undurchsichtigem Grund muss der Compositor bei
jedem Bildlauf gegen die Seite darunter verrechnen; auf Android
malt er dabei sichtbar in Kacheln, und ein Kind der Leiste kann
dann teilweise ungefuellt stehenbleiben — gemeldet am
Weiter-Schalter, dessen Cyan nur einen Teil der Flaeche fuellte.
Undurchsichtig faellt das Verrechnen ganz weg. */
.top{backdrop-filter:none;background:var(--flaeche-oben-fest)}
.player{backdrop-filter:none;background:var(--flaeche-player-fest)}
}
@media (max-width:899px){
:root{--bar-h:76px}
.player__vol span,.player__vol input{display:none}
/* Die mittlere Spalte trug `auto 1fr auto` und durfte damit auf 0 fallen:
`.player__mid` hat `min-width:0`, also ist die automatische Mindestbreite
der fr-Spalte null, und die linke Spalte nahm sich ihre volle
Inhaltsbreite (gemessen 269 von 328 Pixeln bei 390 px Bildbreite). Der
44 Pixel breite Abspielknopf quoll daraufhin aus der leeren Spalte und
lag UEBER dem Weiter-Schalter — er ueberlappte ihn um 34 Pixel. Das sah
aus wie ein Knopf, dessen Cyan nur halb gefuellt ist, und war in
Wahrheit ein zweiter Knopf davor. Zugleich war der Abspielknopf auf dem
Telefon damit praktisch unbenutzbar.
Jetzt bekommt die Mitte einen Boden in Hoehe des Knopfes, und die
Textspalte gibt nach — kuerzen kann sie ohnehin, Titel und Interpret
tragen seit jeher Auslassungspunkte. */
.player__inner{grid-template-columns:minmax(0,auto) minmax(44px,1fr) auto;gap:10px}
.weiter{font-size:9px;letter-spacing:.1em;padding:0 9px}
/* 36 statt 44 Pixel breit — die Hoehe bleibt bei 44, damit die
Trefferflaeche gross genug ist, und die dritte Spalte waechst dadurch
nur um 46 Pixel statt um 54. */
.player__zu{width:36px;font-size:17px}
.player__vol{gap:8px}
.player__cover{width:44px;height:44px}
.player__wave{gap:8px}
.wavebtn,.wavebtn canvas{height:34px}
.player__time--total{display:none}
}
/* Sehr schmal: auch die laufende Zeit weicht. Sie steht ohnehin im
Sprungbalken, und der Platz gehoert dem Balken selbst. */
@media (max-width:419px){
.player__time{display:none}
.player__now{gap:9px}
}
/* Querformat auf dem Telefon: rund 390 Pixel Hoehe insgesamt. Eine 76 Pixel
hohe Leiste plus 60 Pixel Kopf frisst davon ein Drittel, bevor eine Zeile
Inhalt zu sehen ist. Das Cover ist hier das Erste, was gehen kann. */
@media (max-height:480px) and (orientation:landscape){
:root{--bar-h:58px}
.player__cover{display:none}
.wavebtn,.wavebtn canvas{height:26px}
.top{position:static}
}
/* ---------- Overlays ---------- */
.overlay[hidden]{display:none}
.overlay{
position:fixed;inset:0;z-index:80;
background:var(--flaeche-overlay);
display:grid;place-items:start center;overflow-y:auto;
padding:clamp(16px,5vh,60px) var(--gutter);
}
.overlay__panel{
width:min(700px,100%);background:var(--black);
border:1px solid var(--line);padding:clamp(22px,4vw,42px);
}
.overlay__head{
display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.overlay__title{
margin:0;font-family:var(--font-display);font-weight:400;
text-transform:uppercase;font-size:var(--t-untertitel);line-height:.95;
}
.overlay__close{
flex:none;font-family:var(--font-mono);font-size:var(--t-marke);
letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);background:transparent;
border:1px solid var(--feld-rand);border-radius:var(--radius,0);
display:inline-flex;align-items:center;min-height:var(--feld-h);
padding:0 16px;cursor:pointer;
}
.overlay__close:hover,.overlay__close:focus-visible{color:var(--akzent-text);border-color:var(--akzent-text)}
/* Der Rumpf des Overlays traegt NUR noch Rechtstexte, und die haben ihren
eigenen Satz (`.legal`, gleich darunter). Er stand hier in Space Mono,
12,5px, --grey — dieselbe Schreibmaschinen-Prosa, die das Impressum bis
heute trug, weil dessen Markup keinen `.legal`-Rumpf hatte. Hat es jetzt
(siehe `impressumMarkup` in layout.js); hier bleibt nur die Huelle. */
.overlay__body{font-family:var(--font-body);font-size:var(--t-text);
line-height:var(--zh-text);color:var(--grey)}
.overlay__body strong{color:var(--white);font-weight:600}
.overlay__body a{color:var(--akzent-text)}
/* ---------- Rechtstexte: eine Lesestrecke ----------
Impressum und Datenschutz sind mit Abstand die laengsten Texte der Seite
— die Erklaerung hat fuenfzehn Abschnitte und rund 3500 Woerter. Bis zum
2026-10-24 war sie trotzdem als Beiwerk gesetzt: 15,5px, Abschnittstitel
als 11px-Monomarken, die im Scrollen von einem Absatz nicht zu
unterscheiden waren, und kein einziges Sprungziel. Wer den Abschnitt zu
den Cookies suchte, musste die ganze Erklaerung durchlesen.
Jetzt: Lesegroesse, echte Zwischenueberschriften, Abschnittsrhythmus
(mehr Luft UEBER einer Ueberschrift als darunter) und ein Inhalt mit
Sprungzielen, der am Rechner neben dem Text stehen bleibt. */
.legal{
font-family:var(--font-body);font-size:var(--t-text);
line-height:var(--zh-text);color:var(--grey);
/* Rund 73 Zeichen je Zeile. Vorher stand der Text in einer 82ch breiten
Spalte, gemessen 103 Zeichen — bei dieser Laenge verliert das Auge den
Zeilenanfang. */
max-width:var(--mass-lese);
}
/* h2 UND h3: derselbe Text steht an zwei Orten mit zwei richtigen Ebenen —
im Overlay unter einem h2 als h3, auf der eigenen Seite unter einem h1 als
h2 (siehe `rechtstextSeite` in layout.js). Aussehen soll er beide Male
gleich; die Ebene ist eine Frage der Gliederung, nicht der Gestaltung.
Die Ueberschrift ist jetzt eine Ueberschrift: Lesetextschrift, halbfett,
Lesegroesse, keine Versalien. Anton waere hier falsch — die Plakatschrift
gehoert auf die Plakatebene, und fuenfzehn Plakate hintereinander sind
kein Text, sondern ein Stapel. Der Rhythmus kommt aus dem Abstand:
--takt-mittel darueber, --s-3 darunter, damit die Ueberschrift sichtbar
zu dem gehoert, was ihr folgt, und nicht zu dem, was ihr vorausgeht. */
.legal h2,
.legal h3{
margin:var(--takt-mittel) 0 var(--s-3);
font-family:var(--font-body);font-weight:600;
font-size:var(--t-zwischen);letter-spacing:0;text-transform:none;
line-height:var(--zh-zwischen);color:var(--white);
/* Sprungziel: unter der klebenden Kopfleiste durch. */
scroll-margin-top:calc(var(--kopf-h) + 20px);
}
.legal h2:first-child,
.legal h3:first-child{margin-top:0}
/* Die Nummer bleibt Mono — sie ist eine Marke und keine Prosa, und in
gleich breiten Ziffern steht die Spalte der Nummern untereinander. */
.legal h2 b,
.legal h3 b{
color:var(--akzent-text);font-family:var(--font-mono);font-weight:700;
font-size:var(--t-marke);letter-spacing:.1em;
font-variant-numeric:tabular-nums;
margin-right:.9em;
}
.legal p{margin:0 0 .75em}
.legal ul{margin:0 0 1em;padding-left:20px}
.legal li{margin-bottom:.3em}
.legal strong{color:var(--white);font-weight:600}
.legal a{color:var(--akzent-text);text-underline-offset:3px}
.legal address{
font-style:normal;color:var(--white);margin:0 0 1em;line-height:1.5;
}
.legal .stand{
margin-top:var(--takt-mittel);padding-top:14px;border-top:1px solid var(--line);
font-family:var(--font-mono);font-size:var(--t-marke);letter-spacing:.1em;
text-transform:uppercase;color:var(--grey-dim);
font-variant-numeric:tabular-nums;
}
/* Der Hinweis im Impressum, dass eine Pflichtangabe noch fehlt. Er steht in
`.note` und war damit so leise wie eine Fussnote — bei einer offenen
Pflichtangabe ist das zu leise. */
.legal .note{
margin:var(--s-4) 0;padding:12px 15px;
border:1px solid var(--line);border-left:1px solid var(--warn);
background:var(--black-2);color:var(--grey);max-width:none;
}
.legal .note strong{color:var(--warn-text)}
/* ---------- Der Inhalt der Lesestrecke ----------
Fuenfzehn Abschnitte ohne Verzeichnis sind fuenfzehn Abschnitte, die man
nur der Reihe nach findet. Die Liste entsteht in `rechtstextSeite` aus
denselben Ueberschriften, die darunter stehen — sie kann deshalb nicht
veralten, wenn ein Abschnitt dazukommt oder wegfaellt (Shop,
Auszahlungsdaten und Videowerk schalten sich zu und ab). */
.legal__index{
margin:0 0 var(--takt-mittel);
padding:var(--s-4) var(--s-4) var(--s-4) 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.legal__index h2{
margin:0 0 var(--s-3);font-family:var(--font-mono);font-weight:700;
font-size:var(--t-marke);letter-spacing:.14em;text-transform:uppercase;
color:var(--grey-dim);line-height:1;
}
.legal__index ol{
list-style:none;margin:0;padding:0;
display:grid;gap:2px;
}
/* Dieselbe Regel wie bei `.foot__link`: auf dem Finger 44 Punkte, unter
Maus oder Stift 30 (WCAG 2.5.8 verlangt 24). Sechzehn Eintraege zu
44 Punkten waeren in der stehenden Spalte am Rechner 704 Pixel Liste. */
.legal__index a{
display:flex;gap:.8em;align-items:baseline;
font-family:var(--font-body);font-size:var(--t-klein);line-height:1.35;
color:var(--grey);text-decoration:none;
padding:6px 0;min-height:var(--feld-h);
}
@media (hover:hover) and (pointer:fine){
.legal__index a{min-height:30px}
}
.legal__index a b{
font-family:var(--font-mono);font-weight:400;font-size:var(--t-marke);
color:var(--grey-dim);font-variant-numeric:tabular-nums;flex:none;
}
.legal__index a:hover,.legal__index a:focus-visible{
color:var(--akzent-text);text-decoration:underline;text-underline-offset:3px;
}
.legal__index a:hover b,.legal__index a:focus-visible b{color:var(--akzent-text)}
/* Am Rechner steht das Verzeichnis in der linken Spalte, die bisher nach dem
Titel leer blieb — gemessen 300 Punkte Breite und 1800 Punkte Leere —, und
bleibt beim Scrollen stehen. Erst damit ist es ein Werkzeug und nicht nur
eine Liste am Anfang. */
@media (min-width:1200px){
.legal__index{
border:0;
/* Seitlich 5 Punkte und nicht 0: `overflow-y:auto` setzt `overflow-x`
mit auf `auto`, und der Fokusring der Verweise liegt 2 Punkte
ausserhalb ihres Kastens. Bei `padding:0` schnitt die Spalte ihn
links und rechts ab — gemessen 4,9 Punkte an allen 17 Verweisen, zu
sehen war nur noch die obere und untere Kante des Rings. */
padding:0 5px;
margin:var(--s-5) 0 0;
position:sticky;top:calc(var(--kopf-h) + 20px);
max-height:calc(100vh - var(--kopf-h) - 60px);overflow-y:auto;
}
/* Zwei Spalten unter 1200 braucht es nicht — dort steht das Verzeichnis
ueber dem Text und darf die Breite nutzen. */
}
@media (max-width:1199px){
.legal__index ol{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
column-gap:var(--s-4)}
}
/* ---------- Bewegung nur, wenn erwuenscht ----------
Die Waveform friert ein, der Fortschritt bleibt korrekt. */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
/* Die Regel darunter kuerzt nur die Dauer. Die Verzoegerung von
`visibility` muss eigens weg, sonst bleibt die abgewaehlte Leiste noch
eine Viertelsekunde sichtbar stehen. */
.player,.player.is-verborgen{transition-delay:0s !important}
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
/* Ausnahme: der Pegel ist keine Zierde. Er ist die einzige Stelle, an der
die Songliste zeigt, welcher Track gerade laeuft. Ohne Bewegung bleibt er
als gestaffelte Balkengruppe stehen und sagt dasselbe; pausiert faellt er
flach zusammen. */
.track__eq i{height:12px}
.track__eq i:nth-child(2){height:7px}
.track__eq i:nth-child(3){height:10px}
.is-paused .track__eq i{height:3px}
}
/* ============================================================
Ergänzungen für die echte Seite
Alles darüber stammt unverändert aus der freigegebenen
Richtung V3. Hier kommt nur dazu, was der Entwurf noch
nicht brauchte: echte Bilder, Leerzustände, Verwaltung.
============================================================ */
/* ---------- Echte Cover und Porträts ---------- */
.cover__bild{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
/* Bilder kommen vom Label in unterschiedlicher Qualität —
die Entsättigung hält sie im Look der Seite zusammen. */
filter:grayscale(.35) contrast(1.12);
}
.cover.has-bild .cover__mark{display:none}
/* ---------- Leerzustände ---------- */
.leer{
margin:0;padding:22px 24px;
/* Der Balken links war 2px und im Akzent. Ein Leerzustand ist keine
Warnung und keine Auszeichnung — er sagt „hier ist noch nichts". Eine
Kante genuegt. */
border:1px dashed var(--line);border-left:1px solid var(--akzent-text);
font-family:var(--font-body);font-size:var(--t-text);line-height:1.5;
color:var(--grey);
max-width:var(--mass-lese);
}
.leer a{color:var(--akzent-text)}
/* ---------- Plattform-Links (nur extern, nie eingebettet) ---------- */
.plattform{
display:flex;gap:14px;margin:8px 0 0;
font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.plattform a{
color:var(--grey);
/* Die Unterkante lag als border am Kasten — der darf hier aber auf 44 Pixel
wachsen, und die Linie waere mitgewandert. Als Unterstreichung haengt sie
am Text und bleibt, wo sie hingehoert. */
text-decoration:underline;
text-decoration-color:var(--line);
text-underline-offset:4px;
display:inline-flex;align-items:center;min-height:44px;
}
.plattform a:hover,.plattform a:focus-visible{color:var(--akzent-text);text-decoration-color:var(--akzent-text)}
.inline-link{
background:none;border:0;padding:0;
font:inherit;color:var(--akzent-text);text-decoration:underline;cursor:pointer;
}
/* ---------- Schmale Spalte für Formularseiten ---------- */
.wrap--schmal{max-width:640px}
/* Ab 1440px ist Platz fuer die dritte Spalte: der Inhaltshinweis wandert
neben die Einleitung, statt sie zu unterbrechen. Beiden Spalten bleiben
dabei rund 500 Pixel, also etwa 62 Zeichen je Zeile. */
@media (min-width:1440px){
.section--lesen > .wrap--lesen{
grid-template-columns:minmax(190px,22%) minmax(0,1fr) minmax(0,1fr);
}
.section--lesen > .wrap--lesen > .disclaimer{
grid-column:3;grid-row:1 / span 2;margin-top:0;
}
}
/* Rechtstexte standen als 528 Pixel schmale Spalte in der Mitte eines
1920er Schirms. Sie bekommen dasselbe Muster wie die Textsektionen:
Ueberschrift links, Text rechts daneben, das Mass des Textes bleibt. */
@media (min-width:1200px){
.wrap--recht{
max-width:var(--breite);
display:grid;
/* Der Text misst sich selbst (--mass-lese in `.legal`); die Spalte darf
etwas breiter sein, damit Adressen und lange Links Platz haben. */
grid-template-columns:minmax(230px,24%) minmax(0,70ch);
/* Zwei Reihen, und die erste wird NUR vom Kopf gemessen.
Ohne diese Zeile sind beide Reihen `auto`, und der Rechtstext — der
ueber beide laeuft — verteilt seine Hoehe gleichmaessig auf sie:
gemessen 13218 Pixel Text, also 6609 je Reihe. Das Verzeichnis stand
damit am Anfang der zweiten Reihe, 6642 Pixel unterhalb des Titels,
im Nichts neben der Mitte des Textes. `1fr` gibt der zweiten Reihe
den ganzen Rest und laesst der ersten genau den Kopf. */
grid-template-rows:auto 1fr;
column-gap:clamp(40px,4vw,88px);
align-items:start;
}
.wrap--recht > .section__head{
grid-column:1;grid-row:1;
display:block;border-bottom:0;padding-bottom:0;margin-bottom:0;
}
.wrap--recht > .section__head .section__hint{margin-top:14px}
/* Das Verzeichnis steht unter dem Titel in derselben Spalte. `grid-row:2`
und `align-self:start` sind beide noetig: ohne das Erste rutschte es in
die zweite Spalte, ohne das Zweite zoege es sich ueber die ganze
Resthoehe und `position:sticky` haette keinen Weg. */
.wrap--recht > .legal__index{grid-column:1;grid-row:2;align-self:start}
.wrap--recht > .overlay__body{grid-column:2;grid-row:1 / span 2}
}
/* ============================================================
Verwaltung
Ein Werkzeug, keine Lesestrecke: Zustand muss auf einen Blick
erkennbar sein, deshalb Statuswörter statt bloßer Farbe.
============================================================ */
.akopf{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Der Knopf zweiten Ranges. Rahmen, keine Flaeche — er steht neben dem,
was die Seite tut, und nicht an dessen Stelle.
Zustaende: Ruhe, Zeigen, Gedrueckt, Fokus, Gesperrt, Laeuft (der
Ladebalken steht bei `.submit`, er gilt fuer beide). */
.abtn{
display:inline-flex;align-items:center;justify-content:center;
min-height:var(--feld-h);
font-family:var(--font-mono);font-size:var(--t-marke);letter-spacing:.14em;
text-transform:uppercase;
color:var(--white);background:transparent;
border:1px solid var(--feld-rand);padding:0 16px;
text-decoration:none;cursor:pointer;position:relative;
transition:border-color .12s linear,color .12s linear,background-color .12s linear;
}
.abtn:hover,.abtn:focus-visible{
border-color:var(--akzent-text);color:var(--akzent-text);
background:var(--feld-flaeche-zeige);
}
/* Gedrueckt. Fehlte ganz: zwischen Klick und Antwort sagte nichts, dass der
Knopf den Griff angenommen hat. */
.abtn:active:not([disabled]){
background:var(--feld-akzent);border-color:var(--feld-akzent);
color:var(--auf-akzent);
}
.abtn--stark{border-color:var(--akzent-text);color:var(--akzent-text)}
.abtn--stark:hover,.abtn--stark:focus-visible{background:var(--feld-akzent);color:var(--auf-akzent)}
.abtn--warn:hover,.abtn--warn:focus-visible{
border-color:var(--warn);color:var(--warn);background:transparent;
}
.abtn--warn:active:not([disabled]){
background:var(--warn);border-color:var(--warn);color:var(--auf-akzent);
}
/* Der dritte Rang: ein Weg heraus. „Abbrechen", „Zurueck", „Abwaehlen".
Er hatte bisher keinen — solche Knoepfe trugen denselben Rahmen wie die
Handlung daneben und wogen damit genauso viel. Ohne Rahmen bleibt die
Trefferflaeche (44 Punkte) und die Unterstreichung, die sagt, dass man
draufdruecken kann; die Flaeche faellt weg. */
.abtn--leise{
border-color:transparent;color:var(--grey);
padding-inline:4px;
text-decoration:underline;text-decoration-color:var(--rand);
text-underline-offset:4px;
}
.abtn--leise:hover,.abtn--leise:focus-visible{
border-color:transparent;background:transparent;
color:var(--akzent-text);text-decoration-color:var(--akzent-text);
}
.abtn--leise:active:not([disabled]){
background:transparent;border-color:transparent;color:var(--white);
}
/* Gesperrte Schalter sahen bisher aus wie benutzbare: Farbe, Rand und
Zeigerform blieben, und sie faerbten sich beim Ueberfahren sogar cyan, ohne
etwas zu tun. Im Kellerpult betrifft das Abspielen, A/B und den Export, so
lange keine Datei gewaehlt ist. Die Ueberfahr-Regeln muessen ausdruecklich
zurueckgenommen werden — sie stehen darueber und treffen sonst weiter zu. */
.abtn[disabled],.submit[disabled]{
color:var(--feld-aus-text);border-color:var(--feld-aus-rand);
background:transparent;
cursor:not-allowed;opacity:.6;
}
.abtn[disabled]:hover,.abtn[disabled]:focus-visible,
.abtn[disabled]:active,
.abtn--stark[disabled]:hover,.abtn--stark[disabled]:focus-visible,
.submit[disabled]:hover,.submit[disabled]:focus-visible,
.submit[disabled]:active{
color:var(--feld-aus-text);border-color:var(--feld-aus-rand);background:transparent;
}
.ainline{display:inline}
.aform{max-width:none}
.afeld{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.afeld label{
font-family:var(--font-mono);font-size:var(--t-marke);letter-spacing:.14em;
text-transform:uppercase;
color:var(--grey);
}
/* Flaeche, Rand, Groesse und alle Zustaende der Text- und Auswahlfelder
stehen seit dem 2026-10-24 EINMAL, weiter oben unter „Bedienelemente —
EINE Familie". Hier bleibt nur, was `.afeld` eigen ist.
Die Notbremse fuer zu lange Optionstexte (`text-overflow:ellipsis`) ist
mit umgezogen und steht dort an der gemeinsamen Klapplisten-Regel. Der
Vorwurf vom 2026-10-17 lautete nicht „es passt nicht", sondern „es
schneidet ab, OHNE das anzudeuten" — ein Halbsatz, der mitten im Wort
endet, sieht aus wie der ganze Text. Drei Punkte sagen, dass da mehr
steht. Die Optionstexte sind seit dem 2026-10-18 kurz genug (laengste
210 von 240 px in der Hausschrift), aber `--font-body` ist eine
Einstellung des Betreibers und die Geraete werden nicht breiter: in Space
Grotesk braucht dieselbe Zeile 293 px.
Chromium vererbt `text-overflow` an das innere Element der Klappliste,
Firefox und WebKit setzen es am inneren Block — es wirkt in allen drei.
Bewusst OHNE `color-scheme:dark`: die Farben kommen aus den Tokens, und
die drehen im hellen Modus mit. Ein festes `dark` wuerde die native
Klappliste dort dunkel lassen, waehrend das Feld darueber hell ist. */
/* ---------- Die Dateiwahl ----------
Vorher: ein gestrichelter Kasten in --line (1,3:1 gegen den Grund, also
kaum zu sehen) und darin der Systemknopf des Browsers — in jedem Browser
ein anderer, in keinem der Knopf dieser Seite. Der Dateiname lief in
12px Mono in --grey.
Jetzt ist der Kasten eine Ablegeflaeche mit sichtbarer Kante, und der
Knopf darin spricht dieselbe Sprache wie `.abtn`: Rahmen, Versalien,
44 Punkte hoch, Zeige- und Sperrzustand. Der Dateiname bleibt in Mono —
er ist eine Zeichenkette, die man wiedererkennen und vergleichen muss. */
.afeld input[type=file]{
font-family:var(--font-mono);font-size:var(--t-wert);color:var(--grey);
background:var(--feld-flaeche);
border:1px dashed var(--feld-rand);border-radius:var(--radius,0);
padding:10px;width:100%;min-height:calc(var(--feld-h) + 20px);
cursor:pointer;
transition:border-color .12s linear,background-color .12s linear;
}
@media (hover:hover){
.afeld input[type=file]:hover:not([disabled]){
border-color:var(--feld-rand-zeige);background:var(--feld-flaeche-zeige);
}
}
.afeld input[type=file]:focus-visible{
outline:2px solid var(--feld-rand-fokus);outline-offset:2px;
}
.afeld input[type=file][disabled]{
border-color:var(--feld-aus-rand);color:var(--feld-aus-text);
background:var(--black);cursor:not-allowed;
}
.afeld input[type=file]::file-selector-button{
font-family:var(--font-mono);font-size:var(--t-marke);letter-spacing:.12em;
text-transform:uppercase;
color:var(--white);background:transparent;
border:1px solid var(--feld-rand);border-radius:var(--radius,0);
min-height:var(--feld-h);padding:0 16px;margin-right:12px;cursor:pointer;
transition:border-color .12s linear,color .12s linear;
}
@media (hover:hover){
.afeld input[type=file]:hover::file-selector-button{
color:var(--akzent-text);border-color:var(--akzent-text);
}
}
.afeld input[type=file][disabled]::file-selector-button{
color:var(--feld-aus-text);border-color:var(--feld-aus-rand);cursor:not-allowed;
}
/* ---------- Das Farbfeld ----------
`input[type=color]` bringt in jedem Browser eine eigene Darstellung mit:
Chrome ein kleines Rechteck mit Rahmen, Firefox einen Knopf, Safari einen
runden Schalter. Gemeinsam ist allen, dass sie deutlich unter 44 Punkten
bleiben und dass die Farbe winzig ist, obwohl sie das Einzige ist, was
man sehen will.
Diese Regel ist die Grundform fuer die ganze Seite. Der Rand ist --rand
und nicht --line: ein Farbfeld ist nichts als eine Flaeche, und --line
gegen die eigene Flaeche misst 1,3:1 — das ist keine Begrenzung (WCAG
1.4.11 verlangt 3:1 fuer Bedienelemente). */
.afeld input[type=color],
.farbzeile input[type=color]{
inline-size:52px;block-size:var(--feld-h);padding:3px;
background:var(--feld-flaeche);
border:1px solid var(--feld-rand);border-radius:var(--radius,0);
cursor:pointer;
transition:border-color .12s linear;
}
@media (hover:hover){
.afeld input[type=color]:hover,
.farbzeile input[type=color]:hover{border-color:var(--feld-rand-zeige)}
}
.afeld input[type=color]:focus-visible,
.farbzeile input[type=color]:focus-visible{
outline:2px solid var(--feld-rand-fokus);outline-offset:2px;
}
.afeld input[type=color][disabled],
.farbzeile input[type=color][disabled]{
border-color:var(--feld-aus-rand);cursor:not-allowed;opacity:.6;
}
/* Der innere Farbfleck ohne eigenen Rand — sonst sitzt ein zweiter Rahmen
im ersten, und bei dunklen Farben ist nicht zu erkennen, welcher davon
das Feld begrenzt. */
.afeld input[type=color]::-webkit-color-swatch-wrapper,
.farbzeile input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.afeld input[type=color]::-webkit-color-swatch,
.farbzeile input[type=color]::-webkit-color-swatch{border:none}
.afeld input[type=color]::-moz-color-swatch,
.farbzeile input[type=color]::-moz-color-swatch{border:none}
.afeld__hint{
margin:0;font-family:var(--font-body);font-size:var(--t-klein);
line-height:1.45;color:var(--grey);
max-width:var(--mass-lese);
}
.ameldung{
margin:0 0 22px;padding:14px 16px;
font-family:var(--font-mono);font-size:12.5px;line-height:1.6;
border:1px solid var(--line);
}
.ameldung.is-ok{border-left:2px solid var(--akzent-text);color:var(--white)}
.ameldung.is-fehler{border-left:2px solid var(--warn);color:var(--warn-text)}
.aliste{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.aliste__item{
display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
background:var(--black);padding:16px 18px;
}
.aliste__item--block{display:block}
.aliste__act{display:flex;gap:8px;flex-wrap:wrap}
/* Dateizustand: das Wort trägt die Information, die Farbe verstärkt sie nur. */
.adatei{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;
letter-spacing:.1em;text-transform:uppercase}
.adatei .ja,.anfrage__kopf .ja{color:var(--akzent-text)}
.adatei .nein,.anfrage__kopf .nein{color:var(--grey-dim)}
.anfrage__kopf{
display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;margin:0 0 8px;
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--grey);
}
.anfrage__kopf strong{color:var(--white);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.anfrage__kopf a{color:var(--akzent-text)}
.anfrage__zeit{color:var(--grey-dim)}
/* Art der Anfrage und Link stehen seit dem 2026-09-07 in eigenen Spalten und
damit auch als eigene Zeilen — vorher klebte die Art als Klammer vorn im
Nachrichtentext, und den Link musste man dort suchen. */
.anfrage__art{
margin:0 0 6px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text);
}
.anfrage__link{margin:0 0 8px;font-family:var(--font-mono);font-size:13px;overflow-wrap:anywhere}
.anfrage__link a{color:var(--white)}
.anfrage__link a:hover{color:var(--akzent-text)}
.anfrage__text{
margin:0;font-family:var(--font-body);font-size:17px;line-height:1.55;color:var(--white);
white-space:pre-wrap;max-width:70ch;
}
/* Kanäle des Labels im Fussbereich. Nur Verweise nach aussen. */
.foot__plattform{
display:flex;flex-wrap:wrap;gap:16px;
margin-bottom:12px;padding-bottom:10px;
border-bottom:1px solid var(--line);
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.foot__plattform a{
color:var(--grey);text-decoration:none;
/* Die Kanalzeile kam erst nach der Runde, in der alle Klickflaechen auf
44 Pixel gezogen wurden — sie stand seitdem bei 17. Gleiches Mittel wie
bei .foot__link: der Kasten waechst, die Schrift bleibt. */
display:inline-flex;align-items:center;min-height:44px;
}
.foot__plattform a:hover,.foot__plattform a:focus-visible{color:var(--akzent-text)}
/* Die Stand-Angabe steht auch am Kopf des Rechtstextes — dort ohne
Trennlinie, die trennt ja nichts ab. */
.legal .stand--oben{margin:0 0 24px;padding-top:0;border-top:0}
/* ============================================================
Songliste auf schmalen Geräten
Die Tabelle hat 620px Mindestbreite; darunter lag der
Abspielknopf als sechste Spalte außerhalb des Bildschirms.
Abspielen verlangte dort eine Zwei-Achsen-Geste: horizontal
wischen innerhalb einer vertikal scrollenden Seite. Unter
720px wird daraus deshalb eine Liste aus zwei Zeilen je Track,
bei der Rang, Titel und Knopf gleichzeitig sichtbar sind.
============================================================ */
/* ============================================================
Songliste auf schmalen Geraeten — nur die oeffentliche
Der Umbruch galt bisher jeder Tabelle mit der Klasse .tracks,
also auch der in der Verwaltung. Deren Spalten sind andere
(Titel, Interpret, Klicks, Laenge, Dateien, Aktionen), ihre
Zellen landeten damit in Rasterbereichen, die fuer sie nie
gedacht waren. Deshalb haengt der Umbruch jetzt an einem
eigenen Modifikator.
============================================================ */
@media (max-width:719px){
.tracks-scroll:has(.tracks--reflow){overflow-x:visible}
.tracks--reflow{min-width:0;display:block}
/* Eine caption in einer Tabelle, die display:block traegt, bekommt keine
Tabellenbreite mehr und schrumpft auf ihren Inhalt: der Hinweis stand
als schmale, zerrissene Spalte von rund 110 Pixeln da, ein Wort je
Zeile. Als Block nimmt er wieder die volle Breite. */
.tracks--reflow caption{display:block;width:auto}
.tracks--reflow thead{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.tracks--reflow tbody{display:block}
.tracks--reflow tbody tr{
display:grid;
grid-template-columns:2.4rem 1fr auto 44px;
grid-template-areas:
"rang titel titel spiel"
"rang artist klicks spiel";
align-items:center;
column-gap:12px;row-gap:2px;
padding:12px 0;
border-bottom:1px solid var(--line);
}
.tracks--reflow td{
display:block;height:auto;padding:0;border:0;
min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.tracks--reflow .track__rank{grid-area:rang;align-self:center}
.tracks--reflow td:nth-child(2){grid-area:titel}
.tracks--reflow .track__artist{grid-area:artist}
.tracks--reflow .track__clicks{grid-area:klicks;text-align:right}
.tracks--reflow .track__act{grid-area:spiel;width:auto;align-self:center}
/* Die Länge steht im Player, sobald der Track läuft — auf dem
schmalen Raum ist sie die entbehrlichste der fünf Angaben. */
.tracks--reflow .track__len{display:none}
.tracks--reflow .track__cover{width:38px;height:38px}
.tracks--reflow .track__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracks--reflow .track__clicks::after{content:"× gehört";font-size:.85em;color:var(--grey-dim)}
}
/* ---------- Die ganze Zeile ist die Klickfläche ----------
Vorher versprach der Hover-Zustand, dass Zeile und Karte
klickbar sind, auslösen konnte aber nur der Knopf. */
.tracks tbody tr:has(.play:not([disabled])),
.top3__card:has(.play:not([disabled])){cursor:pointer}
/* ---------- Kurzfassung des Inhaltshinweises ----------
Steht ueber der Songliste, damit ihn auch sieht, wer ueber einen geteilten
Link direkt in der Ansicht "Inhalte" landet. */
.disclaimer--kurz{margin-top:0;margin-bottom:clamp(18px,3vh,28px)}
.disclaimer--kurz p:last-child{margin-bottom:0}
/* ---------- Zeichenzaehler am Nachrichtenfeld ---------- */
/* Der Zaehler ist ein Messwert und zaehlt waehrend des Tippens herunter.
Ohne gleich breite Ziffern wandert die Zahl dabei unter dem Blick;
`tabular-nums` steht an der gemeinsamen Regel ganz oben. */
.zeichen{
display:block;margin-top:6px;text-align:right;
font-family:var(--font-mono);font-size:var(--t-wert);letter-spacing:.04em;
color:var(--grey-dim);
}
.zeichen.is-knapp{color:var(--akzent-text)}
/* ============================================================
Belastbarkeit gegen echte Eingaben
Titel und Namen duerfen 120 Zeichen haben, Kurztexte 160,
Nachrichten 5000 — und nichts davon muss Leerzeichen
enthalten. An diesen Stellen fehlte die Bremse.
============================================================ */
/* Ein Flex-Kind schrumpft ohne min-width:0 nicht unter seinen Inhalt. Ein
langer Interpretenname in Anton hat die Karte deshalb aufgesprengt. */
.artists__item > *{min-width:0}
.artists__name,.artists__meta{overflow-wrap:anywhere}
/* Eine 5000 Zeichen lange Nachricht ohne ein einziges Leerzeichen ist
moeglich — pre-wrap allein bricht sie nicht um. */
.anfrage__text{overflow-wrap:anywhere}
.anfrage__kopf a,.anfrage__kopf strong{overflow-wrap:anywhere}
/* Auf breiten Schirmen hatte der Titel weder Umbruch noch Kuerzung: ein
120-Zeichen-Titel zog die Tabelle in die waagerechte Bildlaufleiste und
schob Klicks, Laenge und Abspielknopf aus dem Bild. Unter 720px kuerzt
die Listenansicht bereits. */
@media (min-width:720px){
.track__title{max-width:42ch;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* Gilt auch fuer die Verwaltung, wo dieselben Klassen in der Tabelle stehen. */
.aliste__item > *{min-width:0}
.leer,.note,.afeld__hint{overflow-wrap:break-word}
/* ============================================================
Die Tracktabelle der Verwaltung auf dem Telefon
Sie behielt die 620 Pixel Mindestbreite und lag damit in einem
waagerecht scrollenden Behaelter: bei 360 Pixel Bildbreite
begannen "Bearbeiten" und "Entfernen" erst bei 568 Pixel, also
gut 200 Pixel ausserhalb des Bildes. Wer unterwegs einen Track
aendern wollte, musste die Tabelle blind seitwaerts schieben —
dieselbe Zwei-Achsen-Geste, die fuer die oeffentliche Liste
schon behoben ist. Hier wird jeder Track zu einem Block:
Titel, Interpret, Zahlen, Dateizustand, dann die Schalter.
============================================================ */
@media (max-width:719px){
.tracks-scroll:has(.tracks--admin){overflow-x:visible}
.tracks--admin{min-width:0;display:block}
/* Der Kopf verschwindet aus dem Bild, bleibt aber im Baum: die
Spaltennamen tragen die Bedeutung fuer Hilfstechnik weiter. */
.tracks--admin thead{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.tracks--admin tbody{display:block}
.tracks--admin tbody tr{
display:grid;
grid-template-columns:auto auto 1fr;
grid-template-areas:
"titel titel titel"
"artist artist artist"
"hoert laenge ."
"datei datei datei"
"status status status"
"akt akt akt";
column-gap:16px;row-gap:4px;
padding:16px 0;
border-bottom:1px solid var(--line);
}
.tracks--admin td{display:block;height:auto;padding:0;border:0;min-width:0}
/* Ein 120 Zeichen langer Titel darf hier umbrechen statt zu kuerzen —
in der Verwaltung muss der ganze Titel lesbar sein. */
.tracks--admin .track__title{
grid-area:titel;white-space:normal;overflow-wrap:anywhere;
font-size:19px;
}
.tracks--admin .track__artist{grid-area:artist;white-space:normal;overflow-wrap:anywhere}
.tracks--admin .track__clicks{grid-area:hoert;text-align:left}
.tracks--admin td:nth-child(4){grid-area:laenge}
/* Ohne Kopfzeile sagen nackte Zahlen nichts. Die Beschriftung
kommt deshalb an die Zahl selbst. */
.tracks--admin .track__clicks::after{content:"× gehört";color:var(--grey-dim)}
.tracks--admin td:nth-child(4)::before{content:"Länge ";color:var(--grey-dim)}
.tracks--admin .adatei{grid-area:datei;margin-top:6px}
/* Der Freigabezustand steht seit den Interpreten-Zugaengen als eigene Spalte
daneben. Sie traegt dieselbe Klasse wie der Dateizustand und braucht
deshalb einen eigenen Bereich — sonst liegen auf dem Telefon zwei Zellen
uebereinander. */
.tracks--admin .track__status{grid-area:status;margin-top:2px}
.tracks--admin .track__act{
grid-area:akt;width:auto;text-align:left;
display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
}
/* Dateifelder der Verwaltung auf dem Telefon
iOS Safari zoomt beim Fokussieren jedes Formularfeld unter 16 Pixel —
dieselbe Falle, die bei den Auswahllisten schon geschlossen ist. Und der
Knopf im Feld war mit 8 Pixel Innenabstand rund 30 Pixel hoch. */
@media (max-width:719px){
.afeld input[type=file]{font-size:16px}
.afeld input[type=file]::file-selector-button{min-height:44px;padding:0 14px}
}
/* ============================================================
Shop
Dieselbe Sprache wie das Deck: Beton, harte Kanten, Cyan nur
dort, wo es etwas bedeutet. Die Kachel traegt das Produkt,
nicht umgekehrt — deshalb quadratisches Bild, Name in der
Displayschrift, Preis in Mono darunter.
============================================================ */
.shopfilter{
display:flex;flex-wrap:wrap;gap:8px;
margin-bottom:clamp(18px,3vh,28px);
}
.shopfilter__opt{
display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
border:1px solid var(--rand);background:var(--black-2);
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);text-decoration:none;
transition:border-color .12s linear,color .12s linear,background .12s linear;
}
.shopfilter__opt.is-aktiv{background:var(--cyan);border-color:var(--cyan);color:var(--black)}
@media (hover:hover){
.shopfilter__opt:not(.is-aktiv):hover{color:var(--white);border-color:var(--grey-dim)}
}
.shopliste{
display:grid;gap:clamp(14px,2.4vw,24px);
grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
}
/* Auf dem Telefon passte neben 240 px nichts mehr: vier Produkte ergaben bei
390 px Breite eine Seite von 4562 px Hoehe, weil jede Karte ein
quadratisches Bild ueber die volle Breite traegt. Zwei Spalten halbieren
den Weg und zeigen mehr als anderthalb Produkte auf einmal. Die 44 px
Mindesthoehe der Bedienelemente sind davon nicht betroffen — die ganze
Karte ist die Trefferflaeche. */
@media (max-width:560px){
.shopliste{grid-template-columns:repeat(2,minmax(0,1fr))}
.shopkarte__link{padding:10px}
.shopkarte__name{font-size:15px;margin-top:10px}
}
/* Der Bestellweg ist bis auf Weiteres eine Mail — der Knopf dafuer gehoert
nicht ins Kleingedruckte. */
.produkt__bestellen{display:grid;gap:10px;justify-items:start;margin-top:clamp(16px,3vh,24px)}
.produkt__bestellen .note{margin:0}
/* Die Karte fuellt ihre Rasterzelle, der Preis wird nach unten geschoben:
sonst steht er je nach Laenge des Namens (eine bis fuenf Zeilen) in jeder
Karte auf einer anderen Hoehe und springt in einer Reihe sichtbar. */
.shopkarte{border:1px solid var(--line);background:var(--black-2);height:100%}
.shopkarte__link{
display:flex;flex-direction:column;height:100%;
text-decoration:none;color:inherit;padding:14px;
}
@media (hover:hover){
.shopkarte:hover{border-color:var(--rand)}
}
.shopkarte:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
.shopkarte__bild{
position:relative;aspect-ratio:1/1;overflow:hidden;
background:var(--black-3);border:1px solid var(--line);
display:grid;place-items:center;
}
.shopkarte__bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
/* Der Platzhalter fuer ein fehlendes Bild war der hellste Fleck der ganzen
Uebersicht und zog damit mehr Blick auf sich als die Produkte, die wirklich
ein Bild haben. Er darf da sein, aber nicht rufen: kleiner und in der Farbe
der Bedienelementraender statt in der hellen Textfarbe. */
.shopkarte__leer{
font-family:var(--font-display);font-size:clamp(28px,5vw,44px);
text-transform:uppercase;color:var(--rand);line-height:1;
}
/* Auf der Produktseite fuellte derselbe Platzhalter einen ganzen Bildschirm.
Dort steht jetzt dabei, was Sache ist — ein Satz sagt mehr als ein grosser
Buchstabe, und er sagt es auch denen, die ihn nicht sehen. */
.produkt__ohnebild{display:grid;place-items:center;gap:12px;padding:20px;text-align:center}
.produkt__ohnetext{
margin:0;max-width:28ch;
font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
color:var(--grey-dim);line-height:1.5;
}
/* Ausverkauft ist eine Tatsache, kein Schmuck: Wort statt Farbe allein. */
.shopkarte__marke{
position:absolute;left:0;bottom:0;
padding:6px 10px;background:var(--black);border-top:1px solid var(--rand);
border-right:1px solid var(--rand);
font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--grey);
}
.shopkarte__name{
margin:12px 0 4px;font-family:var(--font-display);font-weight:400;
font-size:clamp(17px,1.6vw,22px);line-height:1.3;text-transform:uppercase;
color:var(--white);
}
.shopkarte__preis{
/* auto oben: schiebt den Preis an den unteren Rand der Karte. */
margin:auto 0 0;font-family:var(--font-mono);font-size:13px;
font-variant-numeric:tabular-nums;color:var(--cyan);
}
/* ---------- Produktseite ---------- */
.produkt{display:grid;gap:clamp(20px,4vw,44px)}
@media (min-width:820px){.produkt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.produkt__bild{
aspect-ratio:1/1;overflow:hidden;background:var(--black-3);
border:1px solid var(--line);display:grid;place-items:center;
}
.produkt__bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.produkt__preis{
margin:0 0 18px;font-family:var(--font-mono);font-size:20px;
font-variant-numeric:tabular-nums;color:var(--cyan);
}
.produkt__beschreibung{
margin:0 0 24px;font-size:17px;line-height:1.6;color:var(--grey);
max-width:62ch;white-space:pre-wrap;
}
.produkt__zwisch{
margin:0 0 10px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);font-weight:400;
}
.produkt__liste{margin:0 0 24px;padding:0;list-style:none}
.produkt__liste li{
padding:9px 0;border-bottom:1px solid var(--line);
font-family:var(--font-mono);font-size:13px;color:var(--white);
}
.produkt__liste li.ist-leer{color:var(--grey-dim)}
/* ---------- Varianten im Formular ---------- */
.varianten{display:grid;gap:8px}
.varianten__zeile{display:grid;grid-template-columns:1fr 120px;gap:8px}
.varianten__zeile input{
font-family:var(--font-body);font-size:16px;color:var(--white);
background:var(--black-2);border:1px solid var(--line);padding:10px 12px;width:100%;
}
.varianten__zeile input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
/* Das Beschreibungsfeld der Verwaltung stand bisher ohne Gestaltung da —
`.field textarea` griff nur im oeffentlichen Formular, und deshalb stand
hier eine zweite Fassung derselben Regel mit anderem Rand (--line statt
--rand, gemessen 1,3:1 gegen die eigene Flaeche) und anderer Groesse.
Seit dem 2026-10-24 deckt die gemeinsame Familie weiter oben beide
Formularwelten ab; diese Doppelung ist deshalb weg. */
/* ---------- Auszahlungsdaten ---------- */
/* Zwischentitel im Formular. Ohne sie stehen Bank- und PayPal-Felder als eine
lange Reihe da, und niemand sieht, welche Felder zusammengehoeren — bei
ausgeblendeten Feldern braeuchte es Skript, das der Bereich bewusst nicht
hat. */
.aform__zwisch{
margin:28px 0 4px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:400;
}
/* Die aufgedeckte Ansicht: bewusst schmucklos, damit man sie abtippen oder
kopieren kann, ohne dass Gestaltung dazwischenfunkt. */
.klar{margin:0 0 24px;border-top:1px solid var(--line)}
.klar__zeile{
display:grid;gap:2px 20px;padding:12px 0;border-bottom:1px solid var(--line);
}
@media (min-width:560px){.klar__zeile{grid-template-columns:180px minmax(0,1fr);align-items:baseline}}
.klar dt{
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);
}
.klar dd{
margin:0;font-family:var(--font-mono);font-size:15px;color:var(--white);
overflow-wrap:anywhere;
}
.klar__rolle{color:var(--grey);font-size:11px}
/* Datentabelle mit eigenem Verhalten auf schmalen Geraeten.
Die Tabellen der Verwaltung tragen ein festes Zeilenraster mit benannten
Feldern (Titel, Interpret, Länge, Zustand) — sinnvoll fuer Tracks, aber
fuer jede andere Tabelle falsch: zwei Zellen derselben Klasse landeten im
selben Feld und lagen uebereinander. Hier stattdessen ein allgemeiner Weg:
jede Zelle traegt ihre Spaltenueberschrift als `data-label` und zeigt sie
auf dem Telefon vor dem Wert an. */
.dtab{width:100%;border-collapse:collapse;font-size:14px}
.dtab th{
text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--rand);
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);font-weight:400;white-space:nowrap;
}
.dtab td{
padding:12px 14px 12px 0;border-bottom:1px solid var(--line);
color:var(--grey);vertical-align:top;overflow-wrap:anywhere;
}
.dtab__haupt{color:var(--white)}
.dtab__akt{padding-right:0}
.dtab__akt form{display:inline-flex}
@media (max-width:719px){
.dtab, .dtab tbody, .dtab tr, .dtab td{display:block;width:auto}
.dtab thead{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.dtab tr{padding:14px 0;border-bottom:1px solid var(--line)}
.dtab td{
display:grid;grid-template-columns:132px minmax(0,1fr);gap:4px 12px;
padding:2px 0;border:0;
}
.dtab td::before{
content:attr(data-label);
font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--grey-dim);
/* Die Werte duerfen ueberall umbrechen (IBAN, lange Namen), die
Beschriftung nicht — sonst stand dort "ERKENNUNGSZEICHE / N". */
overflow-wrap:normal;word-break:normal;
}
.dtab__haupt{font-size:16px}
.dtab__akt{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dtab__akt::before{content:none}
}
/* Das Loeschen steht in einem eigenen Formular direkt unter dem Speichern —
ohne Abstand stossen die beiden Knoepfe aneinander. */
.aform + .aform{margin-top:18px}
/* ============================================================
Kellerpult — Misch- und Mastering-Werkzeug im Bereich der
Interpreten. Zwei Spalten auf dem Rechner: links Datei,
Wiedergabe und Rueckmeldung, rechts die Kette und das
Speichern. Auf dem Telefon untereinander in derselben
Reihenfolge — zuerst hoeren, dann urteilen, dann drehen.
============================================================ */
/* Der Vorspann ist der einzige Satz, der die ganze Seite erklaert, und stand
in derselben Groesse wie jede Fussnote darunter. Jetzt traegt er den Rang,
den er hat: Lesegroesse plus zwei Punkt, volle Textfarbe, enge Zeile. */
.kp__einleitung{
max-width:var(--mass-lese);margin:0 0 var(--s-4);
font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:var(--white);
}
.kp{display:grid;grid-template-columns:1fr;gap:var(--s-5);margin-top:var(--s-5)}
@media (min-width:1000px){
.kp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6)}
}
.kp__spalte{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.kp__block{border:1px solid var(--line);background:var(--black-2);padding:clamp(16px,2.2vw,26px)}
/* Die Blockmarke bekommt eine Linie unter sich. Es gibt im Kellerpult zwei
Ordnungsebenen — Block (DATEI, SIGNALKETTE, EXPORT) und Gruppe (EINGANG,
KOMPRESSOR). Vorher sahen beide fast gleich aus: Mono, 11px, gesperrt,
grau beziehungsweise cyan. Jetzt trennt sie Farbe UND Form: der Block
traegt eine durchgehende Linie, die Gruppe nur einen Strich hinter dem
Wort (siehe .kp__gruppentitel). */
.kp__titel{
margin:0 0 var(--s-4);padding-bottom:9px;border-bottom:1px solid var(--line);
font-family:var(--font-mono);font-weight:700;
font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--akzent-text);
}
/* ---------- Datei ----------
Die Ablage ist der Einstieg in die ganze Seite: ohne Datei tut hier nichts
etwas. Sie stand bisher als gestrichelter Kasten auf derselben Flaeche wie
der Block darum (--black-2) und war damit kaum abgesetzt. Jetzt ist sie
eine Mulde: dunkler als der Block, mehr Luft, und der Ablegezustand
wechselt Rand UND Flaeche statt nur den Rand. */
.kp__ablage{
border:1px dashed var(--rand);background:var(--black);
padding:clamp(22px,3.4vw,34px) var(--s-4);text-align:center;
display:flex;flex-direction:column;align-items:center;gap:12px;
transition:border-color .12s linear,background-color .12s linear;
}
.kp__ablage:hover{border-color:var(--grey)}
/* Der Ablegezustand war ein Randwechsel auf --black-3 und auf einem Telefon
waehrend des Ziehens praktisch unsichtbar. Der innen liegende Umriss
kostet kein Umbrechen — er schiebt nichts, weil `outline` keinen Platz
belegt — und faerbt zusammen mit der Flaeche deutlich um. */
.kp__ablage.is-bereit{
border-color:var(--cyan);
background:color-mix(in srgb,var(--cyan) 12%,var(--black));
outline:2px solid var(--cyan);outline-offset:-5px;
}
.kp__ablage.is-bereit .kp__ablagetext,
.kp__ablage.is-bereit .kp__formate{color:var(--akzent-text)}
/* Sichtbar ist das Label, fokussierbar das dahinterliegende Dateifeld — und
das ist `sr-only`, also 1x1 Pixel und abgeschnitten. Der Fokusring landete
damit an einer Stelle, die niemand sieht: fuer Tastaturnutzer war der erste
Halt auf der Seite ein verschwundener Fokus (WCAG 2.4.7). Der Ring wird
deshalb an das Label weitergegeben. */
.kp__ablage:focus-within .abtn{outline:2px solid var(--akzent-text);outline-offset:3px}
.kp__ablage:focus-within{border-color:var(--akzent-text)}
/* Prosa in der Lesetype (Mono ist fuer Messwerte da), die Formatliste
darunter bleibt Mono: das sind Marken, keine Saetze. */
.kp__ablagetext{margin:0;font-size:16px;line-height:1.4;color:var(--grey)}
.kp__formate{
margin:0;font-family:var(--font-mono);font-size:11px;
letter-spacing:.14em;color:var(--grey-dim);
}
/* Die Statuszeile meldet in ganzen Saetzen („Datei gelesen", „Das Format
kennt dein Browser nicht") — also Lesetype statt Mono. */
.kp__status{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--grey)}
.kp__status:empty{margin:0}
.kp__status.is-fehler{color:var(--warn-text)}
.kp__analyse{
display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
margin:var(--s-4) 0 0;padding-top:var(--s-3);border-top:1px solid var(--line);
font-family:var(--font-mono);font-size:12px;
/* Messwerte: gleich breite Ziffern, damit die Spalte beim Neumessen nicht
unter den Augen zuckt. */
font-variant-numeric:tabular-nums;
}
/* `display:grid` oben schlaegt das `[hidden]{display:none}` des Browsers —
gleiche Spezifitaet, und das Autorenstylesheet gewinnt. Ohne diese Zeile
standen der Analyse- und der Export-Kasten von Anfang an als rund 45 Pixel
Leerraum mit Trennlinie darueber in der Seite. Dieselbe ausdrueckliche
Regel gibt es weiter oben schon fuer `.view` und `.overlay`. */
.kp__analyse[hidden]{display:none}
.kp__analyse dt{color:var(--grey-dim);min-width:0}
/* Der Wert der Zeile „Datei" ist der rohe Dateiname und damit als kleinste
unteilbare Einheit breiter als die Spalte: bei 320 Pixeln bleiben im Block
256 Pixel, ein Name wie `Intro_Fassung3_Master_2026-09-11.wav` braucht in
Space Mono allein schon rund 194 davon. Ohne Umbruch schob er die Seite
seitlich auf. Der vorige Browserdurchgang lief mit einer erzeugten
Testdatei und kurzem Namen und konnte das nicht sehen. */
.kp__analyse dd{margin:0;color:var(--white);min-width:0;overflow-wrap:anywhere}
/* ---------- Wiedergabe ----------
Knoepfe, Zeit, Spulleiste und der Satz „warum gerade nicht" sind EIN Geraet
und stehen jetzt auch in einem Kasten. Vorher lagen sie als vier Geschwister
flach im Block; ein leerer Spieler unterschied sich von einem geladenen nur
durch graue Knopfaufschriften.
Der gestrichelte Rand ist dieselbe Sprache wie an der Dateiablage darueber:
gestrichelt heisst „hier fehlt noch etwas". Er haengt an der gesperrten
Spulleiste, also an genau dem Zustand, den er meint. */
.kp__spieler{
display:grid;gap:10px;
border:1px solid var(--line);background:var(--black);
padding:var(--s-3) var(--s-3) 14px;
}
.kp__spieler:has(.kp__position[disabled]){border-style:dashed;border-color:var(--rand)}
.kp__transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Die laufende Zeit ist der einzige Wert, der sich zwanzigmal je Sekunde
aendert — ohne gleich breite Ziffern wandert sie beim Abspielen hin und
her. Groesser als vorher (12px), weil sie die Hauptanzeige des Spielers
ist und nicht eine Fussnote. */
.kp__zeit{
font-family:var(--font-mono);font-size:15px;letter-spacing:.04em;
font-variant-numeric:tabular-nums;color:var(--white);margin-left:auto;
}
.kp__spieler:has(.kp__position[disabled]) .kp__zeit{color:var(--grey-dim)}
/* Der Satz steht im Kasten und wird durch eine Linie von der Leiste
abgesetzt — er gehoert zum Spieler, nicht zum Block daneben. */
.kp__spieler .kp__warum{
margin:0;padding-top:10px;border-top:1px solid var(--line);
}
/* Der Satz ueber den Vergleich gehoert nicht mehr in den Kasten — ohne
Abstand klebte er an dessen Unterkante. */
.kp__spieler + .kp__hinweis{margin-top:var(--s-3)}
/* ---------- Rueckmeldung ----------
Die siebzehn Schalterzeilen sind das meistbenutzte Bedienelement der Seite.
Sie liefen vorher als Flexband mit Umbruch: jede Zeile war so breit wie ihr
Wort, „Weniger Präsenz" neben „Heller", und die Paare brachen willkuerlich
um. Man konnte sie weder ueberfliegen noch mit dem Finger treffen (25px
hohe Knoepfe, WCAG 2.5.8 verlangt 44).
Jetzt ein Raster gleich breiter Zeilen: links der Name in der Lesetype,
rechts zwei Felder gleicher Breite als Segmentschalter. Die Spalte der
Schalter liegt damit ueber alle Zeilen hinweg buendig untereinander — das
ist der ganze Trick am Ueberfliegen. */
.kp__tags{
display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
margin:var(--s-3) 0 var(--s-4);
}
.kp__tag{
display:grid;grid-template-columns:minmax(0,1fr) auto;
border:1px solid var(--line);background:var(--black);
}
.kp__tag.is-gewaehlt{border-color:var(--akzent-text);background:var(--black-3)}
.kp__tagname{
display:flex;align-items:center;min-height:44px;padding:4px 12px;
font-size:16px;line-height:1.2;color:var(--grey);
}
.kp__tag.is-gewaehlt .kp__tagname{color:var(--white)}
/* Zwei feste Spalten, damit „leicht" und „stark" in allen siebzehn Zeilen an
derselben Stelle stehen. „Passt so" hat nur einen Schalter („ja") — der
nimmt beide Spalten, sonst klaffte am rechten Rand ein halbes Feld. */
/* Der Rand der Schalterpaare traegt --rand, nicht --line: ein Schalter ist
ein Bedienelement, und WCAG 1.4.11 verlangt fuer dessen Begrenzung 3:1
(--rand auf --black-2: 3,43:1; --line kaeme auf 1,3:1 und waere damit kein
erkennbarer Rand, sondern eine Ahnung). Der NAME links bleibt bei --line:
er ist eine Beschriftung und kein Schalter. Der negative Aussenabstand legt
den Rand genau auf die Kante der Zeile, damit dort keine doppelte Linie
entsteht. */
.kp__tagwahl{
display:grid;grid-template-columns:repeat(2,62px);
margin:-1px;border:1px solid var(--rand);
}
.kp__stufe{
display:grid;place-items:center;min-height:44px;padding:0 4px;white-space:nowrap;
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
background:transparent;color:var(--grey-dim);
border:0;cursor:pointer;
}
.kp__stufe + .kp__stufe{border-left:1px solid var(--rand)}
.kp__stufe:only-child{grid-column:1 / -1}
.kp__stufe:hover{background:var(--black-3);color:var(--white)}
/* Der gewaehlte Zustand ist eine gefuellte Flaeche, kein Randwechsel: er muss
aus zwei Metern Abstand zu sehen sein, und er traegt die Aussage der
ganzen Zeile. */
.kp__stufe[aria-pressed="true"],
.kp__stufe[aria-pressed="true"]:hover{
background:var(--cyan);border-left-color:var(--cyan);color:var(--auf-akzent);
}
.kp__tag.is-gewaehlt .kp__tagwahl{border-color:var(--akzent-text)}
/* Der Ring nach innen: die Zeilen stossen im Raster dicht aneinander, ein
Ring nach aussen liefe unter die Nachbarzeile. */
.kp__stufe:focus-visible{outline:2px solid var(--akzent-text);outline-offset:-3px}
/* Die Reihe 1–5. Vorher fuenf 32px-Kaestchen mit Luecke dazwischen und einem
gewaehlten Zustand, der sich nur durch die Fuellung einer kleinen Flaeche
zeigte. Jetzt eine zusammenhaengende Skala aus 48x44-Feldern — dass es
eine Skala ist und nicht fuenf Knoepfe, sagt die Form. */
.kp__sterne{border:0;padding:0;margin:var(--s-4) 0;display:flex;align-items:center;flex-wrap:wrap}
.kp__sterne legend{
float:left;width:100%;padding:0;margin-bottom:10px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--grey-dim);
}
.kp__stern{position:relative;display:inline-flex}
/* Die Felder teilen sich ihre Kante — sonst steht zwischen jeder Ziffer eine
doppelte 1px-Linie. */
.kp__stern + .kp__stern{margin-left:-1px}
.kp__stern input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kp__stern span{
display:grid;place-items:center;min-width:48px;min-height:44px;
background:var(--black);border:1px solid var(--rand);
font-family:var(--font-mono);font-size:14px;font-variant-numeric:tabular-nums;
color:var(--grey);
}
.kp__stern:hover span{background:var(--black-3);color:var(--white)}
/* z-index, damit die cyanfarbene Kante des gewaehlten Feldes ueber den
geteilten Kanten der Nachbarn liegt und nicht halb verdeckt wird. */
.kp__stern input:checked + span{
background:var(--cyan);border-color:var(--cyan);color:var(--auf-akzent);
/* Das Gewicht und nicht nur die Fuellung: gemessen unterschied den
gewaehlten Stern vorher KEINE einzige Eigenschaft ausser Farben vom
ungewaehlten, und das native Radio ist durchsichtig. Dieselbe
Ueberlegung wie beim Kreuzchen weiter oben (WCAG 1.4.1), nur traegt
hier der Fettschnitt die Aussage, weil in dem Feld eine Ziffer steht.
Space Mono liegt in 700 vor, und die Ziffern laufen tabellarisch —
das Feld wird davon nicht breiter. */
font-weight:700;
position:relative;z-index:1;
}
.kp__stern input:focus-visible + span{
outline:2px solid var(--akzent-text);outline-offset:2px;position:relative;z-index:2;
}
.kp__text{
width:100%;background:var(--black);color:var(--white);
border:1px solid var(--rand);padding:10px 12px;font-family:var(--font-body);
font-size:16px;line-height:1.5;resize:vertical;
}
.kp__text:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
/* Enge Gruppe, weite Trennung: zwischen Beschriftung und Feld 6 Pixel,
zwischen Feld und naechster Gruppe --s-4. Vorher klebte das Feld ohne
jeden Abstand an seiner eigenen Beschriftung. */
.kp__text{margin-top:6px}
.kp__text + .kp__hinweis{margin-top:8px}
.kp__knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-4)}
.kp__bericht{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}
.kp__berichtkopf{
margin:0 0 6px;font-family:var(--font-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-text);
}
.kp__berichttext{margin:0 0 var(--s-3);font-size:15px;line-height:1.55;color:var(--grey)}
.kp__aenderungen,.kp__verlauf{list-style:none;margin:0;padding:0}
.kp__aenderungen li,.kp__verlauf li{
display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
padding:7px 0;border-top:1px solid var(--line);font-size:14px;
}
.kp__aenderungen b,.kp__verlauf b{color:var(--white);font-weight:400}
/* Die Spanne ist ein Messwert („-3.0 → +2.0 dB") und bleibt deshalb Mono,
jetzt mit gleich breiten Ziffern. */
.kp__spanne{
font-family:var(--font-mono);font-size:12px;
font-variant-numeric:tabular-nums;color:var(--akzent-text);
}
/* Die Begruendung des Assistenten ist ein ganzer Satz — Lesetype statt Mono. */
.kp__grund{font-size:14px;line-height:1.5;color:var(--grey-dim);flex:1 1 100%}
.kp__verlauf{margin-top:var(--s-4)}
/* ---------- Regler ----------
Die Kette als Liste: jede Station ist unteilbar, der Pfeil haengt an der
Station davor. Vorher war es ein Mono-Satz mit Pfeilen darin — bei 320
Punkten stand der Pfeil allein am Zeilenende, und das verbietet der
Gestaltungsvertrag ausdruecklich. Die Stationsnamen bleiben Mono: das sind
kurze Marken, keine Prosa. */
.kp__kette{
list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
margin:0 0 var(--s-5);padding:0;
font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--grey);
}
.kp__kette li{display:flex;align-items:center;gap:10px;white-space:nowrap}
.kp__kette li:not(:last-child)::after{content:"→";color:var(--rand)}
/* Die Abschnittsmarken gliedern eine Spalte aus vierzehn Reglern und waren
dafuer zu leise: 11px Mono in --grey-dim, also leiser als die Erklaersaetze
darunter. Jetzt in voller Textfarbe und fett, mit einem Strich, der bis zum
rechten Rand laeuft — der Strich ist die Gliederung, das Wort nur seine
Beschriftung. Ueber einer Marke steht mehr Luft als darunter (--s-5 gegen
--s-2), wie es der Vertrag fuer jede Ueberschrift verlangt. */
.kp__gruppe + .kp__gruppe{margin-top:var(--s-5)}
.kp__gruppentitel{
display:flex;align-items:center;gap:12px;
margin:0 0 var(--s-2);padding:0;border:0;
font-family:var(--font-mono);font-weight:700;font-size:11px;
letter-spacing:.18em;text-transform:uppercase;color:var(--white);
}
.kp__gruppentitel::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.kp__regel{padding:var(--s-2) 0}
/* Was der Assistent gerade bewegt hat, muss man unter vierzehn Reglern
wiederfinden. Vorher ein 2px breiter cyanfarbener border-left — den
verbietet der Vertrag (hoechstens 1px farbig), und er schob die Zeile
ausserdem um zwei Pixel. Jetzt eine getoente Flaeche plus eine 1px-Kante
als Innenschatten: faerbt um, verschiebt nichts. */
.kp__regel.is-geaendert{
margin:0 -10px;padding-left:10px;padding-right:10px;
background:color-mix(in srgb,var(--cyan) 7%,transparent);
box-shadow:inset 1px 0 0 var(--akzent-text);
}
.kp__regelkopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kp__label{font-family:var(--font-body);font-size:16px;color:var(--white)}
/* Der Messwert springt beim Ziehen vierzigmal je Sekunde um. Ohne gleich
breite Ziffern wandert dabei seine linke Kante, und vierzehn davon
zappeln gleichzeitig. */
.kp__wert{
font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;
font-variant-numeric:tabular-nums;color:var(--akzent-text);white-space:nowrap;
}
/* Der Erklaersatz unter jedem Regler lief in Space Mono — ein ganzer Satz in
einer Schrift fuer Messwerte, vierzehnmal untereinander. Jetzt Lesetype.
--grey-dim auf --black-2 misst 5,3:1 und liegt damit ueber den 4,5:1, die
WCAG 1.4.3 fuer Fliesstext verlangt. */
.kp__hinweis{
margin:0;font-size:15px;line-height:1.5;color:var(--grey-dim);max-width:62ch;
}
.kp__regel .kp__hinweis{font-size:14px;margin-top:2px}
/* ---------- Die Schieber ----------
Vorher: 24px hohe Box, 2px-Bahn, ein 14x14 grosser cyanfarbener Klotz. Das
war zu klein zum Treffen (WCAG 2.5.8 verlangt 44) und zeigte in keinem
Zustand, dass man es anfassen kann.
Jetzt ein Fader: 44px Trefferflaeche, eine 6px tiefe Mulde mit Rand und
eine aufrechte Kappe mit Kerbe. Die Kerbe ist keine Zierde — sie sagt, wo
der Wert genau steht; ein glatter Klotz hat keine Mitte.
Die Bahn traegt `--rand`, weil sie die Begrenzung eines Bedienelements ist
und WCAG 1.4.11 dafuer 3:1 verlangt (`--rand` auf `--black-2`: 3,39:1).
Alles doppelt: `::-webkit-slider-*` fuer Chrome und Safari,
`::-moz-range-*` fuer Firefox — die beiden Maschinen teilen keine Regel,
eine gemeinsame Selektorliste wirft in beiden den ganzen Block weg. */
.kp__schieber,
.kp__position{
-webkit-appearance:none;appearance:none;
width:100%;height:44px;margin:0;padding:0;
background:transparent;cursor:pointer;
}
.kp__schieber{margin-top:2px}
.kp__schieber::-webkit-slider-runnable-track,
.kp__position::-webkit-slider-runnable-track{
height:6px;background:var(--black);border:1px solid var(--rand);border-radius:0;
}
.kp__schieber::-moz-range-track,
.kp__position::-moz-range-track{
height:6px;background:var(--black);border:1px solid var(--rand);border-radius:0;
}
/* Firefox kann den zurueckgelegten Teil einfaerben — Chrome nicht, dort
bleibt es bei Mulde und Kappe. */
.kp__schieber::-moz-range-progress,
.kp__position::-moz-range-progress{
height:6px;background:var(--cyan);border:1px solid var(--cyan);
}
/* Die Kappe: 12 breit, 26 hoch, cyan, mit einer 2px-Kerbe in der Mitte. Die
Kerbe entsteht als zweite Hintergrundschicht — ein Pseudoelement gibt es
an einem Schieberknopf nicht. `margin-top` zentriert sie auf der 8px hohen
Mulde (6px Bahn + 2x1px Rand): (8-26)/2 = -9. */
.kp__schieber::-webkit-slider-thumb,
.kp__position::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:12px;height:26px;border:0;border-radius:0;margin-top:-9px;
background:linear-gradient(var(--black) 0 0) no-repeat center / 8px 2px,var(--cyan);
transition:box-shadow .1s linear;
}
.kp__schieber::-moz-range-thumb,
.kp__position::-moz-range-thumb{
width:12px;height:26px;border:0;border-radius:0;
background:linear-gradient(var(--black) 0 0) no-repeat center / 8px 2px,var(--cyan);
transition:box-shadow .1s linear;
}
/* Zeigen und Ziehen: ein Hof um die Kappe, der nichts verschiebt. Ziehen ist
deutlicher als Zeigen, damit man am Finger merkt, dass man gefasst hat. */
.kp__schieber:hover::-webkit-slider-thumb,
.kp__position:hover::-webkit-slider-thumb{
box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 22%,transparent);
}
.kp__schieber:hover::-moz-range-thumb,
.kp__position:hover::-moz-range-thumb{
box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 22%,transparent);
}
.kp__schieber:active::-webkit-slider-thumb,
.kp__position:active::-webkit-slider-thumb{
box-shadow:0 0 0 7px color-mix(in srgb,var(--cyan) 32%,transparent);
}
.kp__schieber:active::-moz-range-thumb,
.kp__position:active::-moz-range-thumb{
box-shadow:0 0 0 7px color-mix(in srgb,var(--cyan) 32%,transparent);
}
/* Der Fokusring liegt NACH INNEN: die Box ist 44 Pixel hoch und voll breit,
ein Ring mit dem Hausversatz von 3px liefe in die Zeile darueber und
darunter. Zusaetzlich bekommt die Kappe ihren Hof, damit auf einen Blick
zu sehen ist, welcher der vierzehn Regler am Zug ist. */
.kp__schieber:focus-visible,
.kp__position:focus-visible{outline:2px solid var(--akzent-text);outline-offset:-2px}
.kp__schieber:focus-visible::-webkit-slider-thumb,
.kp__position:focus-visible::-webkit-slider-thumb{
box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 28%,transparent);
}
.kp__schieber:focus-visible::-moz-range-thumb,
.kp__position:focus-visible::-moz-range-thumb{
box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 28%,transparent);
}
/* Ohne Datei ist die Spulleiste gesperrt. Eine cyanfarbene Kappe auf einer
gesperrten Leiste sieht aus wie ein laufender Spieler — sie wird grau. */
.kp__position[disabled]{cursor:not-allowed}
.kp__position[disabled]::-webkit-slider-thumb{background:var(--rand)}
.kp__position[disabled]::-moz-range-thumb{background:var(--rand)}
@media (prefers-reduced-motion:reduce){
.kp__ablage{transition:none}
.kp__schieber::-webkit-slider-thumb,
.kp__position::-webkit-slider-thumb{transition:none}
.kp__schieber::-moz-range-thumb,
.kp__position::-moz-range-thumb{transition:none}
}
/* ---------- Speichern ---------- */
.kp__speichern{margin-bottom:var(--s-4)}
.kp__staende{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kp__stand{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:10px;padding:10px 0;border-bottom:1px solid var(--line);
}
/* Standnamen duerfen 80 Zeichen lang sein; ohne Umbruch schiebt ein langer
Name die Zeile auf dem Telefon seitlich auf. Dasselbe Muster wie oben bei
der Analyse-Anzeige. */
.kp__stand b{font-weight:400;color:var(--white);display:block;overflow-wrap:anywhere}
.kp__stand > div{min-width:0}
.kp__standknoepfe{display:flex;gap:8px;align-items:center}
.kp__standknoepfe form{margin:0}
/* Liegt der Song zu diesem Stand auf DIESEM Geraet? Das weiss nur der
Browser — der Server kann es nicht wissen. Die Zeile wird deshalb erst
vom Skript gefuellt und ist bis dahin verborgen. */
.kp__geraet{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;
/* War Mono 11px — es steht aber ein Satz darin („Der Track liegt auf
diesem Geraet"), kein Messwert. */
font-size:14px;line-height:1.5;
}
.kp__geraetja{color:var(--akzent-text)}
.kp__geraetnein{color:var(--grey-dim)}
.kp__geraetweg{
background:none;border:0;padding:0;font:inherit;color:var(--grey-dim);
text-decoration:underline;text-underline-offset:3px;cursor:pointer;
/* 44 Pixel Hoehe waeren hier falsch: der Knopf steht in einer Textzeile.
Der Abstand nach aussen macht ihn trotzdem am Finger erreichbar. */
padding:6px 2px;
}
.kp__geraetweg:hover,.kp__geraetweg:focus-visible{color:var(--warn-text)}
.kp__geraetweg[disabled]{opacity:.6;cursor:not-allowed}
/* Warum der Abspielknopf gerade nicht geht. Steht im Spielerkasten, weil ein
gesperrter Knopf sich nie von allein erklaert. Lesetype statt Mono — es ist
ein Satz. */
.kp__warum{
margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--grey-dim);
}
/* Export: Auswahl der Aufloesung und die Kennwerte des Ergebnisses. */
.kp__exportzeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:var(--s-4) 0}
/* ZUSAMMENFUEHRUNG 2026-10-25: Diese Klappliste war die einzige im Haus,
die nicht in der Formularfamilie haengt — sie stand ohne den Pfeil da,
den jede andere traegt. Sie steht jetzt in der Hausregel der Klappliste
weiter oben mit drin; hier bleibt, was nur sie hat: die Flexverteilung
in der Exportzeile und der dunklere Grund, weil sie auf `--black-2`
liegt und nicht auf der Seitenflaeche. */
.kp__auswahl{
/* `background-color` und NICHT die Kurzform `background`: die Kurzform
loescht das `background-image` der Hausregel mit, und das ist hier der
Pfeil. Gemessen stand dieses Feld danach ohne Pfeil da — im hellen Modus
als weisser Kasten, der sich als Texteingabe liest. Derselbe Fehler wie
bei `padding` zwei Zeilen tiefer, nur eine Eigenschaft weiter oben. */
flex:1 1 240px;background-color:var(--black);color:var(--white);
border:1px solid var(--feld-rand);
transition:border-color .12s linear,background-color .12s linear;
/* Rechts 38 statt 12: die Kurzform `padding` steht SPAETER als die
Hausregel der Klappliste und wuerde deren `padding-right:38px` sonst
zuruecknehmen — der Optionstext liefe dann unter den Pfeil. */
padding:10px 38px 10px 12px;
/* 44 Pixel Trefferflaeche wie an jedem anderen Bedienelement (WCAG 2.5.8);
vorher kam das Feld auf rund 38. */
min-height:44px;
/* 16px, sonst zoomt iOS Safari beim Antippen die ganze Seite. */
font-family:var(--font-body);font-size:16px;
}
.kp__auswahl:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
/* Zeigen und Gesperrt fehlten: die Hausregeln dafuer zaehlen Nachfahren von
`.field`/`.afeld` auf, und dieses Feld haengt in keinem von beidem. Ohne
sie war ein gesperrtes Exportfeld von einem bedienbaren nicht zu
unterscheiden — gemessen gleicher Rand, gleiche Schriftfarbe und
`cursor:pointer` (WCAG 1.4.1). */
@media (hover:hover){
.kp__auswahl:hover:not([disabled]){
border-color:var(--feld-rand-zeige);background-color:var(--feld-flaeche-zeige);
}
}
.kp__auswahl[disabled]{
color:var(--feld-aus-text);border-color:var(--feld-aus-rand);cursor:not-allowed;
}
#kp-exportinfo{margin-top:var(--s-3)}
/* ============================================================
Kontakt
Das Formular hatte keinen Rang: eine ~700px schmale Lesespalte
in der Mitte eines 1760px breiten Satzspiegels, mit zwei leeren
Haelften daneben, und die Ueberschrift begann an einer Kante,
die sonst keine Seite der Website hat.
Jetzt zwei Spalten wie im Kellerpult: links das Formular, rechts
der Kasten mit dem, was man vor dem Absenden wissen will. Unter
1000 Punkten untereinander in derselben Reihenfolge wie im
Markup — der Tabulator laeuft damit in beiden Faellen gleich.
============================================================ */
.kt{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:start}
/* Die Formularspalte ist bei 44rem gedeckelt — Eingabefelder, die ueber eine
halbe Bildschirmbreite laufen, sehen aus, als erwarteten sie einen Aufsatz.
Der Deckel steht in der SPALTE und nicht am Formular: stuende er am
Formular, bliebe die Spalte 1fr breit, und zwischen Formular und Kasten
klaffte bei 1440 Punkten ein Loch von rund 240 Pixeln. `justify-content`
schiebt beide Spalten zusammen an den linken Rand. */
@media (min-width:1000px){
.kt{
grid-template-columns:minmax(0,44rem) minmax(250px,340px);
gap:var(--s-6);justify-content:start;
}
}
/* Ohne das sprengt ein langes Wort im Formular die Rasterspalte auf: ein
Rasterbereich ist von Haus aus `min-width:auto`. */
.kt__form{min-width:0}
.kt__neben{
border:1px solid var(--line);background:var(--black-2);
padding:clamp(16px,2.2vw,26px);
}
/* Bleibt beim Ausfuellen stehen — aber nur neben dem Formular. In der
einspaltigen Anordnung steht der Kasten UNTER dem Absendeknopf, und ein
klebendes letztes Element haette dort nichts, woran es kleben koennte.
76px = Hoehe der klebenden Kopfleiste plus etwas Luft. */
@media (min-width:1000px){
.kt__neben{position:sticky;top:76px}
}
/* Dieselbe Marke wie .kp__titel im Kellerpult — es ist dieselbe Ebene. */
.kt__kopf{
margin:var(--s-5) 0 var(--s-3);padding-bottom:9px;border-bottom:1px solid var(--line);
font-family:var(--font-mono);font-weight:700;font-size:12px;
letter-spacing:.2em;text-transform:uppercase;color:var(--akzent-text);
}
.kt__kopf:first-child{margin-top:0}
.kt__text{margin:0;font-size:15px;line-height:1.55;color:var(--grey)}
/* ==========================================================================
Aus dem Admin-Bereich gesteuert
--------------------------------------------------------------------------
--radius und --akzent-2 kommen aus /design.css, das nach dieser Datei
geladen wird. Die Ausweichwerte hier halten die Seite auch dann richtig,
wenn das erzeugte Stylesheet einmal nicht ankommt.
========================================================================== */
.abtn,.submit,
.afeld input[type=text],.afeld input[type=url],.afeld input[type=password],
.afeld input[type=number],.afeld textarea,.kp__auswahl,
.cover,.top3__card,.overlay__panel,.note,.formstate,.disclaimer{
border-radius:var(--radius,0);
}
/* Die zweite Auszeichnungsfarbe. Sie traegt das, was heraussticht, ohne
Bedienelement zu sein: das Etikett des Inhaltshinweises und die Platzierung
des gerade laufenden Titels.
Die Platzierungen der NICHT laufenden Titel bleiben bewusst gedaempft
(--grey-dim, weiter oben). Sonst leuchteten alle drei gleich, und die
Auszeichnung des laufenden Titels waere keine mehr. */
.disclaimer__label{color:var(--akzent-2-text,var(--akzent-text))}
.top3__card.is-active .top3__rank{color:var(--akzent-2-text,var(--akzent-text))}
/* Ein eigenes Titelbild legt sich hinter den Kopf der Startseite. Der
dunkle Verlauf darueber ist kein Schmuck: ohne ihn steht weisse Schrift
auf einem beliebigen Foto, und die Lesbarkeit haengt vom Zufall ab. */
.hero--bild{
background-image:linear-gradient(to bottom,
color-mix(in oklab,var(--black) 55%,transparent),
color-mix(in oklab,var(--black) 88%,transparent)),var(--hero-bild);
background-size:cover;background-position:center;
}
/* Logo statt Schriftzug in der Kopfzeile. */
.top__mark--bild{display:inline-flex;align-items:center;padding:4px 0}
.top__mark--bild img{display:block;height:32px;width:auto}
/* ---------- Seite „Aussehen und Inhalte" ---------- */
.views--admin{margin:var(--s-4) 0}
.section__head--klein{margin-top:var(--s-5)}
/* `.kp__auswahl` stammt aus der Exportzeile des Kellerpults, einer Flexbox
in Zeilenrichtung — dort ist `flex:1 1 240px` eine Mindestbreite. `.afeld`
ist eine Spalte, und in einer Spalte wird aus derselben Angabe eine
Mindest-HOEHE: jedes Auswahlfeld wurde damit rund 240 Pixel hoch, im
Reiter „Design" viermal untereinander. Hier zurueckgesetzt, statt die
gemeinsame Klasse anzufassen — das Kellerpult braucht sie unveraendert. */
.afeld .kp__auswahl{flex:0 0 auto;width:100%}
.farbzeile{display:flex;gap:10px;align-items:center}
.farbzeile input[type=text]{flex:1 1 auto;font-family:var(--font-mono);text-transform:lowercase}
.bildgitter{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bildkachel{
border:1px solid var(--line);padding:var(--s-4);
border-radius:var(--radius,0);background:var(--black-2);
}
.bildkachel .kp__titel{margin-top:0}
.bildprobe{
display:block;max-width:100%;height:auto;margin:var(--s-3) 0;
border:1px solid var(--line);border-radius:var(--radius,0);background:var(--black-3);
}
.bildprobe--symbol{width:90px;height:90px;object-fit:contain;padding:8px}
.designgitter{display:grid;gap:var(--s-5);align-items:start}
/* Unter 900px ist das Gitter einspaltig, und die Vorschau stand als zweites
Kind unter dem gesamten Formular — man aenderte eine Farbe und musste an
vier Auswahlfeldern und sechs Farbzeilen vorbeiscrollen, um die Wirkung zu
sehen. Eine Live-Vorschau, die man nicht gleichzeitig sieht, ist keine.
Deshalb nach oben und dort am oberen Rand haengend. `position:sticky` im
einspaltigen Gitter wirkt nur so: im eigenen Rasterbereich unten haette
das Element keinen Weg. */
@media (max-width:899px){
.vorschau{order:-1;position:sticky;top:0;z-index:5}
}
@media (min-width:900px){.designgitter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.vorschau{
border:1px solid var(--line);padding:var(--s-4);
border-radius:var(--radius,0);background:var(--black-2);
/* Bleibt beim Scrollen stehen: sonst sieht man beim Aendern der unteren
Felder nicht, was man aendert. */
position:sticky;top:var(--s-4);
}
.vorschau__karte{
border:1px solid var(--line);padding:var(--s-4);margin-top:var(--s-3);
border-radius:var(--radius,0);background:var(--black);
}
.vorschau__gross{
margin:0 0 var(--s-2);font-family:var(--font-display);font-size:clamp(22px,3vw,30px);
line-height:1.1;color:var(--white);text-transform:uppercase;letter-spacing:.01em;
}
.vorschau__text{margin:0 0 var(--s-3);font-family:var(--font-body);color:var(--white);line-height:1.6}
.vorschau__hinweis{margin:0 0 var(--s-3);font-family:var(--font-mono);font-size:12px;color:var(--grey)}
.vorschau__marke{
font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--akzent-2-text,var(--akzent-text));
}
.vorschau__werte{margin-top:var(--s-4)}
.vorschau__werte .gut{color:var(--akzent-text)}
.vorschau__werte .schwach{color:var(--warn-text)}
.aform--zurueck{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
/* ============================================================
Videowerk
Die Vorschau ist hier das Bedienelement: was auf der Leinwand
steht, ist das Versprechen für die Datei. Deshalb bekommt sie
den Platz und alles andere ordnet sich darunter.
============================================================ */
.vw{margin:var(--s-5) 0}
.vw__buehne{
position:relative;
display:flex;justify-content:center;
background:var(--black-2);border:1px solid var(--line);
padding:var(--s-4);
}
/* Die Leinwand traegt ihre Maße im Attribut, damit Vorschau und Export
dieselbe Geometrie rechnen. Hier wird nur die Darstellung begrenzt — sonst
ragt das Hochformat auf dem Telefon aus dem Bild. */
.vw__leinwand{
display:block;max-width:100%;height:auto;
max-height:min(70vh,620px);
background:var(--black);
}
.vw__laden{
position:absolute;left:50%;bottom:var(--s-4);transform:translateX(-50%);
margin:0;max-width:min(90%,46ch);text-align:center;
/* War Mono 11px — es ist ein Satz („Die Analyse der Audiodatei wird
geladen"), also Lesetype. --grey auf --flaeche-overlay liegt weit ueber
4,5:1. */
font-size:15px;line-height:1.5;
color:var(--grey);background:var(--flaeche-overlay);padding:8px 12px;
}
.vw__steuer{
display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-end;
margin-top:var(--s-4);
}
.vw__formatwahl{margin:0;flex:none}
/* Die eigenen Bedienelemente des Browsers: Spulleiste, Tastatur und Ansage
im Screenreader kommen damit umsonst. Sie duerfen nur nicht ueberlaufen. */
.vw__ton{flex:1;min-width:min(100%,260px);height:40px}
/* ---------- Wellenform mit Ausschnitt ---------- */
.vw__welle{margin-top:var(--s-4)}
/* Ein echter Knopf, wie .wavebtn in der Player-Leiste — fokussierbar und mit
den Pfeiltasten bedienbar. `touch-action` steht hier bewusst NICHT auf
`none`: dieses Band ist voll breit und 96 Pixel hoch, mitten in der Seite;
dauerhaft gesperrt ließe sich das Telefon darueber nicht mehr scrollen.
Das Skript sperrt es nur fuer die Dauer eines Zuges. */
.vw__wellenknopf{
position:relative;display:block;width:100%;
background:var(--black-2);border:1px solid var(--line);padding:0;
cursor:pointer;touch-action:pan-y;
}
.vw__wellenknopf:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.vw__wellenknopf:hover{border-color:var(--rand)}
.vw__wellenbild{display:block;width:100%;height:96px}
/* Der hellere Bereich ist der 15-Sekunden-Ausschnitt. Er liegt UEBER der
Wellenform und darf sie nicht verdecken, deshalb nur ein Hauch Flaeche und
zwei deutliche Kanten. */
.vw__fenster{
position:absolute;top:0;bottom:0;left:0;width:0;
background:color-mix(in srgb,var(--cyan) 14%,transparent);
border-left:2px solid var(--akzent-text);border-right:2px solid var(--akzent-text);
pointer-events:none;
}
/* ---------- Abschnitte ---------- */
.vw__titel{
font-family:var(--font-display);font-size:clamp(22px,3vw,30px);
letter-spacing:.02em;text-transform:uppercase;
margin:var(--takt-mittel) 0 var(--s-4);
padding-bottom:8px;border-bottom:1px solid var(--line);
}
.vw__untertitel{
font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);margin:0 0 8px;
}
/* Nebensatz unter einem Wert oder einer Beschriftung. Eigene Klasse statt
.afeld__hint an einem : .afeld__hint ist eine Absatzklasse, ihre
max-width und ihr Abstand wirken an einem Inline-Kasten gar nicht, und der
gemeinte Zeilenumbruch fiel weg. */
.vw__hinweis{
display:block;margin-top:4px;max-width:60ch;
font-family:var(--font-body);font-size:15px;line-height:1.5;
color:var(--grey-dim);text-transform:none;letter-spacing:0;
}
/* ---------- Karten je Format ---------- */
.vw__karten{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:760px){
.vw__karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.vw__karte{
border:1px solid var(--line);background:var(--black-2);
padding:var(--s-4);display:flex;flex-direction:column;
gap:10px;align-items:flex-start;
}
.vw__karte p{margin:0}
.vw__lauf{display:flex;align-items:center;gap:10px;width:100%}
.vw__balken{flex:1;min-width:0}
/* Ein Messwert, der sich alle zwei Sekunden aendert — gleich breite Ziffern,
sonst wandert er beim Rendern hin und her. */
.vw__prozent{
font-family:var(--font-mono);font-size:13px;
font-variant-numeric:tabular-nums;color:var(--white);
}
.vw__datei{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;width:100%}
/* Ein Dateiname wie Fuck_The_System_16x9_v2_2026-09-26.mp4 hat keine einzige
Umbruchstelle — ohne das Folgende schiebt er die ganze Seite auf dem
Telefon zur Seite. */
.vw__dateiname{
font-family:var(--font-mono);font-size:12px;color:var(--white);
overflow-wrap:anywhere;min-width:0;
}
.vw__alle{margin-top:var(--s-4)}
/* ---------- Zustandswort ---------- */
/* Wie in der Trackliste: das Wort sagt den Zustand, die Farbe unterstreicht
ihn nur. Wer Farben nicht unterscheidet, liest trotzdem, was los ist.
Vorher war es nackter Mono-Text in zwei Farben, und vier der fuenf
Zustaende teilten sich eine davon: „fertig" war cyan, alles andere — auch
„gescheitert" — dasselbe Grau. In einer Arbeitsmappe ist der Zustand aber
das, wonach man die Seite ueberhaupt aufruft. Jetzt ein umrandetes
Schildchen in fuenf Abstufungen, vom gefuellten Cyan („fertig") bis zum
roten Rahmen („gescheitert").
Lesetype statt Mono: „veraltet — nicht mehr der aktuelle Stand" ist ein
halber Satz und kein Messwert. */
.vw__marke{
display:inline-flex;align-items:center;
padding:4px 10px;border:1px solid currentColor;
font-family:var(--font-body);font-size:14px;line-height:1.3;letter-spacing:.02em;
}
.vw__marke.is-ja{
color:var(--akzent-text);background:color-mix(in srgb,var(--cyan) 12%,transparent);
}
/* Laeuft: volle Textfarbe, heller Rand — „hier passiert gerade etwas", aber
ohne die Fuellung, die „fertig" vorbehalten bleibt. */
.vw__marke.is-laeuft{color:var(--white);border-color:var(--rand)}
.vw__marke.is-wartet{color:var(--grey);border-color:var(--line)}
.vw__marke.is-nein{color:var(--grey-dim);border-color:var(--line)}
.vw__marke.is-warn{
color:var(--warn-text);background:color-mix(in srgb,var(--warn) 14%,transparent);
}
/* Der Fortschrittsbalken war der ungestaltete Balken des Browsers — hell,
rund, in der Systemfarbe. Jetzt dieselbe Mulde wie an den Schiebern des
Kellerpults: Rand in --rand (3,39:1 auf --black-2, WCAG 1.4.11), Fuellung
in Cyan. Auch hier zwei Maschinen, zwei Regeln. */
.vw__balken{
-webkit-appearance:none;appearance:none;
height:10px;border:1px solid var(--rand);border-radius:0;background:var(--black);
}
.vw__balken::-webkit-progress-bar{background:var(--black)}
.vw__balken::-webkit-progress-value{background:var(--cyan)}
.vw__balken::-moz-progress-bar{background:var(--cyan)}
/* ---------- Tabellen ---------- */
.vw__scroll{margin:0 0 var(--s-4)}
.vw__tab{width:100%;border-collapse:collapse;font-size:15px}
.vw__tab th,.vw__tab td{
text-align:left;vertical-align:top;
padding:10px 12px 10px 0;border-bottom:1px solid var(--line);
overflow-wrap:anywhere;
}
.vw__tab thead th{
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);white-space:nowrap;font-weight:400;
}
.vw__tab tbody th{color:var(--grey);font-weight:400;white-space:nowrap}
.vw__tab td{color:var(--grey)}
.vw__haupt{color:var(--white)}
.vw__tab tr.is-aktiv{background:color-mix(in srgb,var(--cyan) 6%,transparent)}
/* Kein display:flex auf der Zelle selbst: ein waere damit kein
Tabellenzellen-Kasten mehr, und die Trennlinie der letzten Spalte liefe
nicht mehr ueber die Zeilenhoehe. Auf dem Telefon, wo die Zellen ohnehin
Bloecke sind, darf es dann (siehe unten). */
.vw__tun form{display:inline-flex;margin:0}
.vw__tun>*{margin-right:8px}
/* Handy: dieselbe Auflösung wie bei .dtab und .tracks--admin — Kopfzeile weg,
jede Zelle eine Zeile mit ihrer Beschriftung davor. Waagerechtes Scrollen
in einem inneren Kasten hatte die Knoepfe der letzten Spalte bei 320 Pixel
unerreichbar gemacht; genau dieser Befund war hier schon einmal da. */
@media (max-width:719px){
.vw__tab,.vw__tab tbody,.vw__tab tr,.vw__tab td,.vw__tab tbody th{
display:block;width:auto;
}
.vw__tab thead{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.vw__tab tbody th{padding:0;border:0;font-family:var(--font-mono);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--grey-dim)}
.vw__tab tr{padding:14px 0;border-bottom:1px solid var(--line)}
.vw__tab td{
display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 12px;
padding:2px 0;border:0;
}
.vw__tab td::before{
content:attr(data-label);
font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--grey-dim);
/* Die Werte duerfen ueberall umbrechen, die Beschriftung nicht. */
overflow-wrap:normal;word-break:normal;
}
.vw__haupt{font-size:16px}
.vw__tun{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vw__tun::before{content:none}
.vw__tun>*{margin-right:0}
/* Die Wertetabelle oben hat keine Kopfzeile, sondern Zeilenkoepfe — dort
traegt schon das die Beschriftung, das data-label waere doppelt. */
.vw__tab--werte td::before{content:none}
.vw__tab--werte td{display:block}
}
/* ---------- Texte für die Plattformen ---------- */
/* `.afeld textarea` stand hier als zweite Fassung der Feldregel und schlug
die gemeinsame Familie weiter oben (anderer Rand, andere Groesse, keine
Mindesthoehe). Die Felder selbst kommen jetzt von dort; hier bleibt nur,
was der Tabelle eigen ist: ein niedrigeres Mindestmass, weil in einer
Zeile mehrere davon untereinander stehen. */
.vw__tab td textarea{
font-family:var(--font-body);font-size:var(--t-text);line-height:1.5;
color:var(--feld-text);
background:var(--feld-flaeche);border:1px solid var(--feld-rand);
padding:11px 13px;width:100%;resize:vertical;min-height:72px;
}
/* Zwischenkopf im Textabschnitt: die Plattformbloecke gehoeren erkennbar
zusammen, sind aber kein eigener Abschnitt der Seite. */
/* Der Aufklapper um die Plattformfelder. Die Zusammenfassung traegt dieselbe
Gestaltung wie ein Zwischenkopf, damit der Abschnitt nicht wie ein
Nebenschauplatz aussieht. */
/* Die Auswahl erzeugter Cover: quadratische Kacheln, die sich der Breite
anpassen. Auf einem Handy steht eine je Zeile, am Schreibtisch drei. */
.coverwahl{
display:grid;gap:var(--s-4, 16px);margin:var(--takt-mittel, 24px) 0;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.coverwahl__eins{display:flex;flex-direction:column;gap:8px}
.coverwahl__bild{
width:100%;height:auto;aspect-ratio:1/1;display:block;
border:1px solid var(--line);background:var(--black-3, #111);
}
.coverwahl__fuss{margin:0;font-size:13px;color:var(--grey)}
/* Das aktuelle Cover im Videowerk: Bild und Erklaerung nebeneinander, auf
schmalen Geraeten untereinander. `align-items:flex-start` haelt das Bild
oben, damit der Text daneben nicht mittig gegen eine 160px hohe Kachel
laeuft. */
.vw__coverjetzt{
display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
margin:0 0 var(--takt-eng);
}
.vw__coverbild{
width:160px;height:160px;flex:none;display:block;object-fit:contain;
border:1px solid var(--line);background:var(--black-3, #111);
}
.vw__coverjetzt .afeld__hint{flex:1 1 260px;min-width:0}
.vw__klapp{margin:0}
.vw__klapp > summary{cursor:pointer;list-style:none}
.vw__klapp > summary::-webkit-details-marker{display:none}
.vw__klapp > summary::after{content:" ▾";color:var(--grey)}
.vw__klapp[open] > summary::after{content:" ▴"}
.vw__unter{
margin:28px 0 4px;
font-size:1.05rem;
font-weight:700;
padding-top:18px;
border-top:1px solid var(--line);
}
.vw__zaehler{
display:inline-block;margin-left:6px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--grey-dim);
}
/* Über der Grenze schneidet die Plattform ab. Das sagt hier ein Wort UND eine
Farbe — Farbe allein wäre nach WCAG 1.4.1 kein Zustand. */
.vw__zaehler.is-zuviel{color:var(--warn-text)}
.vw__zaehler.is-zuviel::after{content:" — zu lang"}
.vw__vorschlag{
display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
margin:-14px 0 22px;
}
.vw__vorschlag-wort{
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey-dim);
}
.vw__vorschlag-text{
font-family:var(--font-mono);font-size:13px;color:var(--grey);
background:var(--black-2);padding:4px 8px;
overflow-wrap:anywhere;min-width:0;
}
.vw__vorschlag-block{margin-top:10px}
.vw__vorschlag-block summary{
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);cursor:pointer;
min-height:44px;display:flex;align-items:center;
}
.vw__vorschlag-block summary:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
/* Der Vorschlag ist vorformatierter Text mit Zeilenumbrüchen — er muss sie
behalten und darf trotzdem die Seite nicht seitwärts schieben. */
.vw__vorschlag-block pre{
margin:8px 0 0;padding:12px;background:var(--black-2);border:1px solid var(--line);
font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--grey);
white-space:pre-wrap;overflow-wrap:anywhere;
}
/* ============================================================
Die Seite eines einzelnen Tracks
Sie ist das, was ein geteilter Link zeigt. Deshalb steht hier
oben das, wofür jemand geklickt hat: Cover, Titel, Abspielen —
und alles Weitere darunter.
============================================================ */
.track__zurueck{margin-bottom:var(--s-4)}
.track__kopf{display:grid;gap:var(--s-5);grid-template-columns:1fr;align-items:start}
@media (min-width:760px){
/* Das Cover bekommt eine feste Spalte, damit der Text daneben nicht bei
jedem Titel anders umbricht. */
.track__kopf{grid-template-columns:minmax(220px,340px) minmax(0,1fr)}
}
/* Das grosse Cover auf der Seite EINES Tracks. Nicht `.track__cover`:
diesen Namen traegt schon die 44-Pixel-Kachel der Trackliste, und die
spaetere Regel haette sie ueberschrieben. */
.trackseite__cover{width:100%;aspect-ratio:1/1}
.track__titel{
font-family:var(--font-display);font-size:clamp(34px,7vw,64px);line-height:1.02;
text-transform:uppercase;letter-spacing:.01em;margin:0 0 6px;
/* Ein langer Titel ohne Leerzeichen darf die Seite nicht aufschieben. */
overflow-wrap:anywhere;
}
.track__interpret{
font-family:var(--font-body);font-size:clamp(18px,2.4vw,24px);
color:var(--grey);margin:0 0 var(--s-4);
}
.track__fakten{
display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 var(--s-4);
font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--grey-dim);
}
.track__spielen{display:flex;align-items:center;gap:14px;margin-bottom:var(--s-4)}
.track__spielenwort{font-family:var(--font-body);font-size:17px;color:var(--grey)}
.track__abschnitt{
font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);
margin:var(--takt-mittel) 0 var(--s-4);
padding-bottom:8px;border-bottom:1px solid var(--line);
}
/* Das Video liegt auf dem eigenen Server und laedt erst auf Klick — deshalb
braucht es hier keinen Platzhalter gegen Springen: `aspect-ratio` haelt
die Hoehe von Anfang an frei. */
.track__player{
display:block;width:100%;height:auto;aspect-ratio:16/9;
background:var(--black);border:1px solid var(--line);
}
.track__liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.track__liste li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.track__listeint{font-family:var(--font-mono);font-size:12px;color:var(--grey-dim)}
.track__interpretblock p{max-width:62ch}
/* ============================================================
Der Werkzeugkasten (seit 2026-10-10)
============================================================
Die oeffentliche Seite ist kein Deck mehr, sondern eine Liste von vier
Werkzeugen. Sie braucht wenig: eine Liste, ein Formular, eine Galerie.
Alles drei steht hier, und alles drei benutzt die vorhandenen Token —
damit wandert es mit, wenn der Betreiber unter „Design" etwas aendert.
Was es NICHT gibt: eigene Farben, eigene Schriftgroessen ausserhalb der
bestehenden Skala und eigene Abstaende. Jede Zahl hier kommt entweder aus
einem Token oder ist eine Kantenlaenge, fuer die es kein Token gibt. */
/* Der Kopf der Startseite
------------------------------------------------------------
DREI FASSUNGEN, und die dritte ist nicht die erste:
bis 2026-10-24 eine rund 480 px schmale Spalte links, ueber 800 Punkte
Leere rechts.
bis 2026-11-02 zweispaltig ab 1180 px: links vier Textzeilen, rechts
ZWEI gerechnete Bilder, das Cover ueber alle vier
Zeilen laufend.
bis 2026-11-03 eine Spalte, kein Bild (der schlichte Satz).
jetzt zweispaltig ab 1180 px, links der Text, rechts EIN
Cover - auf ausdruecklichen Wunsch des Betreibers.
Der Unterschied zur Fassung vom 24.10. ist nicht nur die Zahl der Bilder,
sondern die Spaltenbreite. Damals nahm die Textspalte `1fr` und war auf
1440 px rund 825 Punkte breit, waehrend die Zeile darin bei 460 endete -
der Text stand also in einer Spalte, die doppelt so breit war wie er.
Jetzt sind beide Spalten so breit wie ihr Inhalt (`auto` plus die Masse,
die die Elemente ohnehin tragen), und das Gitter steht links. Was rechts
uebrig bleibt, bleibt leer - sichtbar leer, nicht als auseinandergezogene
Spalte getarnt.
Der Seitentitel steht nicht auf der Plakatstufe und nicht in Versalien.
Das regelt nicht diese Stelle, sondern der Abschnitt "Die oeffentlichen
Seiten: schlicht" am Ende dieser Datei. */
.wk__kopf{margin-bottom:var(--takt-mittel)}
.wk__h1{margin:0 0 var(--s-3)}
/* Die Unterzeile der Ueberschrift. Sie war bis zum 2026-10-24 versales
Space Mono mit 11 px - eine Beschriftung, obwohl es ein Satz fuer
Menschen ist. Lesetype also, aber seit dem 2026-11-02 eine Spur kleiner:
sie stand bei 23 px dicht unter einer Ueberschrift, die selbst nur noch
38 px misst, und zwei fast gleich grosse Zeilen uebereinander sind keine
Rangordnung mehr. */
.wk__slogan{
margin:0 0 var(--takt-eng);max-width:52ch;
font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--grey);
}
/* Die drei Tatsachen.
------------------------------------------------------------
Sie standen ab 860 px als drei Spalten nebeneinander, jede mit einer
senkrechten Haarlinie davor, darunter auf dem Telefon mit einer
waagerechten. Das war die Loesung fuer einen Kopf, der die Breite fuellen
sollte. Mit dem Bild ist dieser Zweck weg, und drei Spalten mit sechs
Linien sind fuer drei kurze Saetze mehr Gestaltung als Inhalt.
Jetzt eine gewoehnliche Liste. Der Gedankenstrich steht als `::before`
und nicht als `list-style`, weil ein Aufzaehlungspunkt an dieser Stelle
eine Spur zu laut ist und sich die Einrueckung so genau setzen laesst. */
/* Der Gedankenstrich steht an `::marker` und NICHT an `::before`.
Der Unterschied ist nicht gestalterisch, sondern einer fuers Gehoer:
Chrome und Firefox nehmen den Inhalt eines `::before` in den
zugaenglichen Namen auf - jeder der drei Punkte waere als
"Gedankenstrich Kostenlos und ohne Anmeldung" angesagt worden. Der
Inhalt eines `::marker` gilt als Listenzeichen und wird nicht
mitgelesen. Wo `content` an `::marker` nicht unterstuetzt wird (Safari
vor 17), steht ein gewoehnlicher Punkt - deshalb `list-style:disc` und
nicht `none`. */
.wk__fakten{
list-style:disc;margin:0 0 var(--takt-eng);padding:0 0 0 18px;
display:grid;gap:8px;max-width:62ch;
font-size:15px;line-height:1.5;color:var(--grey);
}
.wk__fakten li::marker{content:"\2013\00a0";color:var(--grey-dim)}
/* `.wk__vorspann` steht nicht nur hier, sondern auch auf /musikvideo, in der
Arbeitsmappe und auf /kontakt. Die Grundregel bleibt deshalb genau, wie
sie war; was die Startseite anders braucht, steht darunter und greift nur
im Seitenkopf. */
.wk__vorspann{
max-width:68ch;color:var(--grey);
font-size:clamp(16px,1.6vw,19px);line-height:1.55;
margin:0 0 var(--takt-mittel);
}
/* Im Seitenkopf schliesst der Absatz den Block ab und traegt seinen Abstand
nicht selbst - den setzt `.wk__kopf`. Ein Grad kleiner als die Fassung
auf den anderen Seiten, damit er sich dem Slogan unterordnet. */
.wk__kopf .wk__vorspann{
max-width:62ch;font-size:clamp(16px,1.6vw,18px);margin:0;
}
/* Die Auslage: ein echtes Cover, keine Zierde.
------------------------------------------------------------
Das Bild kommt ueber dieselbe Adresse wie die Beispiele auf `/cover` und
wird beim Aufruf gerechnet. Deshalb MUSS der Kasten stehen, bevor das
Bild da ist: `aspect-ratio` hier plus `width`/`height` am `img` halten
die Hoehe von der ersten Zeichnung an. Ohne das springt der halbe
Seitenkopf, wenn das Bild nach ein paar hundert Millisekunden eintrifft.
Der Rahmen bleibt sichtbar, wenn das Bild NICHT kommt - ein Abruf kann an
der Bremse haengenbleiben: dann steht der Alternativtext in einem leeren
Feld und die Seite behaelt ihre Form. `--rand` statt `--line`, weil die
erzeugten Cover selbst dunkle Raender haben; mit `--line` saehe man
nicht, wo das Bild aufhoert. Dieselbe Entscheidung wie bei
`.coverwahl--werk`.
Das Mass von 420 px: so breit wie die Textspalte daneben. Die stand
einen Tag lang auf `auto` und war damit so breit wie die Ueberschrift
(gemessen 598 bis 840 px je nach Schriftpaar), waehrend der Text darin
bei 509 endete - zwischen Absatz und Bild klafften 137 bis 198 px statt
der gesetzten 47 bis 64. Ein frueherer Stand dieses Kommentars berief
sich auf `--mass-lese`; dieses Token wurde im Kopf von keinem einzigen
Element benutzt. Jetzt tut es das (siehe das Gitter weiter unten), und
die Zahl hier stimmt mit der Spalte ueberein.
Gleich gross heisst gleichwertig, und das ist hier richtig: der Text
sagt, was es gibt, das Bild zeigt es. */
.wk__auslage{margin:var(--takt-eng) 0 0;max-width:420px}
.wk__auslage-rahmen{
/* `--bild-grund` und nicht `--black-3`: das Cover wird IMMER mit
`design_grund` gerechnet, auch wenn die Seite im hellen Modus laeuft
(`farbenFuer()` kennt den hellen Grundton nicht - begruendet in
`lib/konfiguration.js`). Mit `--black-3` waere der leere Rahmen im
hellen Modus fast weiss und das Bild darin dunkel. `--bild-grund`
bleibt in beiden Paletten derselbe Wert, genau dafuer gibt es das
Token. Dieselbe Entscheidung wie bei der Hauswelt-Probe. */
border:1px solid var(--rand);background:var(--bild-grund,var(--black-3));
/* Das Verhaeltnis gehoert an den Rahmen und nicht nur ans Bild: faellt
das Bild ganz aus, steht hier trotzdem ein Quadrat. */
aspect-ratio:1/1;overflow:hidden;
}
/* `height:auto`: das Bild traegt sein Verhaeltnis selbst (600 x 600 am
Element), der Rahmen haelt das Quadrat unabhaengig davon.
Hier stand bis zur Pruefung noch `object-fit:cover` und `display:block`.
Beides war wirkungslos: mit `width:100%;height:auto` nimmt der Kasten
immer das Eigenverhaeltnis des Bildes an, es gibt also nichts zu
beschneiden (das besorgt `overflow:hidden` am Rahmen), und `display:block`
steht schon in der globalen `img`-Regel ganz oben in dieser Datei. */
.wk__auslage-bild{width:100%;height:auto}
/* Keine eigene Breitenbegrenzung: die Spalte begrenzt schon, und ein
zweites Mass liess die Bildunterschrift frueher deutlich vor dem Bild
enden - eine Schrift, die schmaler ist als ihr Bild, sieht aus wie ein
Rest. */
.wk__auslage-text{
margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--grey);
}
/* Ab 1180 px steht das Bild rechts neben dem Text.
------------------------------------------------------------
Die Zeilen sind einzeln ausgeschrieben und nicht der automatischen
Platzierung ueberlassen: so stimmt die Zuordnung auch dann, wenn der
Slogan des Betreibers leer ist und die zweite Zeile gar nicht entsteht.
Die vierte Zeile nimmt den Rest (`1fr`). Ohne das verteilt das Gitter die
Mehrhoehe des Bildes, das ueber alle vier Zeilen laeuft, gleichmaessig
auf sie - gemessen in der Fassung vom 24.10. auf 1760 px rund 100 Punkte
Luft zwischen Slogan und Tatsachen und noch einmal so viel darunter. Der
Text stand dann nicht gesetzt, sondern auseinandergezogen.
`justify-content:start` haelt die beiden Spalten beieinander. Ohne das
schoebe das Gitter sie auf 1760 px Breite auseinander, und zwischen Text
und Bild stuenden 800 Punkte nichts. */
@media (min-width:1180px){
.wk__kopf{
display:grid;
/* DIE LINKE SPALTE IST DAS LESEMASS, nicht `auto`.
Mit `auto` nahm die Spur die max-content-Breite, und die bestimmte
allein die Ueberschrift - als einziges Element des Kopfes traegt sie
kein Breitenmass. Gemessen: Spalte 642 px, breiteste Textzeile 509,
also 137 bis 198 px Loch zwischen Absatz und Bild statt der 47 bis
64, die `column-gap` setzt. Mit dem Schriftpaar „Magazin" waren es
840 gegen 685. Das war derselbe Mangel wie in der Fassung vom
2026-10-24, nur kleiner.
`--mass-lese` loest hier gegen die Schriftgroesse von `.wk__kopf`
auf - und `.wk` darunter gegen dieselbe, weil beide den Fliesstext
erben. Kopf und Werkzeugliste fluchten dadurch auf dieselbe Kante;
vorher hing der Vorspann 73 px ueber die Haarlinien hinaus.
Rechts eine feste Zahl und kein `minmax(300px,420px)`: die untere
Schranke wurde nie erreicht, weil die linke Spalte als erste
nachgibt. Eine Schranke, die nie greift, verspricht eine Reaktion,
die es nicht gibt. */
grid-template-columns:minmax(0,var(--mass-lese)) 420px;
grid-template-rows:auto auto auto 1fr;
column-gap:clamp(32px,4vw,64px);
justify-content:start;align-items:start;
}
/* Im Gitter bestimmt die SPALTE die Zeilenlaenge, nicht jedes Element
fuer sich. Ohne das traegt jedes sein eigenes Mass (52ch, 62ch, keines
an der Ueberschrift) und die rechte Kante des Textes ist bei jedem
Absatz eine andere. */
.wk__kopf > .wk__h1,
.wk__kopf > .wk__slogan,
.wk__kopf > .wk__fakten,
.wk__kopf > .wk__vorspann{max-width:none}
.wk__kopf > .wk__h1{grid-column:1;grid-row:1}
.wk__kopf > .wk__slogan{grid-column:1;grid-row:2}
.wk__kopf > .wk__fakten{grid-column:1;grid-row:3}
.wk__kopf > .wk__vorspann{grid-column:1;grid-row:4}
/* Ueber alle vier Zeilen, und ohne den eigenen Abstand nach oben: im
Gitter steht es neben der Ueberschrift, nicht unter dem Vorspann. */
.wk__kopf > .wk__auslage{grid-column:2;grid-row:1 / 5;margin:0;max-width:none}
}
/* Abschnitte der Startseite: mehr Abstand UEBER der Ueberschrift als
darunter. Vorher trennte die Seite ihre drei Teile gar nicht - Kacheln und
Datenschutzkasten folgten im selben Takt wie zwei Absaetze. */
.wk__teil{margin-top:var(--takt-weit)}
/* Die Ueberschrift eines Abschnitts der Startseite.
Sie war Anton, versal, gesperrt, bis 25 px. Seit dem 2026-11-02 laeuft
sie in der Lesetype und in gemischter Schreibweise - wie jede andere
Ueberschrift der oeffentlichen Seiten. Die Familie kommt ueber
`--font-display`, und genau dieses Token zeigt unter `body.oeffentlich`
auf die Lesetype; in der Verwaltung bleibt es die Plakatschrift. Deshalb
steht hier weiterhin `--font-display` und nicht `--font-body`: wer die
Regel liest, soll sehen, dass das eine Ueberschrift ist. */
.wk__ueberschrift{
margin:0 0 var(--s-4);font-family:var(--font-display);font-weight:400;
font-size:clamp(18px,1.5vw,21px);line-height:1.2;color:var(--white);
}
/* Die vier Werkzeuge - vier gleiche Eintraege untereinander.
------------------------------------------------------------
ES WAREN SCHON ZWEI ANDERE SACHEN: bis zum 2026-10-24 vier gleich grosse
Kacheln mit den Schmucknummern 01-04, danach zwei Raenge (zwei Tafeln mit
Farbverlauf, zwei leichte Eintraege darunter) in einem Gitter aus zwoelf
Spalten mit ungleicher Teilung.
JETZT eine Liste. Vier Eintraege, je eine Haarlinie darueber, kein
Kasten, keine Flaeche, kein Verlauf, keine zweite Spalte. Der Auftrag vom
2026-11-02 lautete, die oeffentlichen Seiten schlicht zu halten, und der
Rangunterschied war das lauteste Mittel, das diese Seite hatte.
Was damit NICHT verloren geht: die Gewichtung. Sie steht in der
Reihenfolge von `WERKZEUGE` - "Musik bearbeiten" und "Cover erstellen"
zuerst, "Musikvideo" zuletzt -, und eine Liste wird von oben gelesen.
Eine Spalte auch auf breiten Schirmen: die Eintraege tragen je zwei bis
drei Zeilen Satz, und zwei Spalten davon waeren wieder zwei Kacheln.
Begrenzt wird nicht die Liste, sondern die Zeile (siehe `.wk__satz`). */
.wk{
list-style:none;margin:0;padding:0;
display:grid;gap:0;grid-template-columns:1fr;
/* Die Haarlinien sind so breit wie die Zeilen, die sie trennen.
Ohne dieses Mass liefen sie ueber den ganzen Satzspiegel - gemessen
auf 1458 px rund 1390 px Linie ueber 470 px Text. Eine Linie, die
dreimal so lang ist wie das, was sie gliedert, gliedert nicht mehr,
sie zeigt ins Leere.
Es ist das Lesemass des Hauses und keine eigene Zahl: 66ch ergaben
gemessen rund 80 Zeichen je Zeile und lagen damit genau auf der
Obergrenze von WCAG 1.4.8. `--mass-lese` ist auf rund 70 Zeichen
gerechnet (Herleitung ganz oben in dieser Datei) und gilt fuer
laufenden Lesetext - und das sind diese vier Bloecke. */
max-width:var(--mass-lese);
}
.wk__eins{
position:relative;
display:flex;flex-direction:column;gap:6px;
padding:var(--s-4) 0;
border-top:1px solid var(--line);
}
/* Die letzte Linie schliesst die Liste ab. Ohne sie endet der vierte
Eintrag im Nichts, waehrend die drei darueber je eine Kante haben. */
.wk__eins:last-child{border-bottom:1px solid var(--line)}
.wk__name{
font-family:var(--font-display);font-weight:400;
font-size:clamp(20px,1.8vw,24px);line-height:1.2;margin:0;
}
/* Der ganze Eintrag ist anklickbar, aber der Link bleibt ein Link: das
`::after` legt die Flaeche darueber, der Text selbst traegt den Namen. So
liest eine Vorlesehilfe einen Verweis mit Namen vor und nicht einen Kasten
mit unbekanntem Ziel.
Im Ruhezustand traegt der Name KEINEN Akzent mehr, sondern die Textfarbe
und eine Unterstreichung in der Randfarbe. Vorher standen vier
cyanfarbene Namen untereinander und faerbten sich beim Zeigen weiss - ein
Akzent, der viermal gleichzeitig dasteht, ist keiner mehr. Die
Unterstreichung sagt dafuer auch ohne Farbe, dass es ein Verweis ist. */
.wk__link{
color:var(--white);text-decoration:underline;
text-decoration-color:var(--rand);text-underline-offset:4px;
}
.wk__link::after{content:"";position:absolute;inset:0}
.wk__eins:hover .wk__link{color:var(--akzent-text);text-decoration-color:var(--akzent-text)}
/* Der Ring liegt INNEN. Mit `gap:0` stossen die Eintraege aneinander;
ein Ring mit 4 px Abstand nach aussen (so stand es bis zur Pruefung)
griff in die Nachbareintraege und ueber deren Haarlinien. Der Eintrag
hat 20 px Polster, der Ring steht darin frei. */
.wk__eins:focus-within{outline:2px solid var(--akzent-text);outline-offset:-3px}
.wk__link:focus-visible{outline:none}
/* Kein eigenes Mass mehr: die Liste begrenzt schon (66ch), und ein zweites,
engeres Mass darin liess den Satz vor der Haarlinie enden, die zu ihm
gehoert. */
.wk__satz{margin:0;color:var(--grey);line-height:1.5}
/* Die Merkmalzeile schliesst den Eintrag ab.
Die Haarlinie darueber ist weg: der Eintrag traegt jetzt selbst eine, und
zwei Linien im Abstand von drei Zeilen teilen einen Block, der keine zwei
Teile hat. `margin-top:auto` ebenfalls - es schob die Zeile an den Boden
einer Kachel, und Kacheln gibt es hier nicht mehr. */
/* `--grey` und nicht `--grey-dim`: gemessen 7,84:1 gegen 5,58:1 - das
eine erfuellt AAA, das andere nur AA, und es ist der Satz, der das
Entscheidende ueber ein Werkzeug sagt. Die Unterscheidung zum vierten
Eintrag traegt deshalb nicht mehr die Farbe (siehe unten). */
.wk__merkmal{
margin:0;font-size:14px;line-height:1.5;color:var(--grey);
}
/* Das Mass.
Es stand in Space Mono - nach der bis dahin geltenden Regel "Mono traegt
die Zahl, der Satz drumherum die Lesetype". Seit dem 2026-11-02 gilt
oeffentlich die engere Fassung dieser Regel: Mono traegt nur noch Werte,
die LAUFEN oder die man ABSCHREIBT (Laufzeit, Zeichenzaehler, Hexwert,
E-Mail-Adresse). "3000 x 3000 Pixel" mitten in einem Satz ist keines von
beidem, und in der Monoschrift war es die breiteste und hellste Stelle
einer Zeile, die eine Fussnote ist.
`.wk__mass` gibt es nur auf der Startseite, deshalb steht die Aenderung
hier und nicht im Abschnitt "schlicht". `tabular-nums` bleibt: die vier
Masse stehen untereinander. */
.wk__mass{
font-size:.95em;font-variant-numeric:tabular-nums;
color:var(--grey);white-space:nowrap;
}
/* "Was mit deinen Dateien passiert": vier Saetze Prosa.
Sie standen in `.note` und damit in grauem Space Mono mit 11 px - das ist
die Schrift fuer Messwerte, nicht fuer den Absatz, der erklaert, wo die
Datei eines Besuchers bleibt.
Die zweispaltige Fassung ab 1180 px (Ueberschrift links neben dem Text)
ist am 2026-11-02 gefallen: sie war das Gegenstueck zum zweispaltigen
Seitenkopf. Ohne den steht sie als einziges Gitter auf einer Seite, die
sonst in einer Spalte laeuft. */
.wk__dateitext{
margin:0;max-width:72ch;color:var(--grey);
font-size:15px;line-height:1.6;
}
/* Das Eingabeformular der Bildwerkzeuge. Schmaler als der Satzspiegel: drei
Felder in 1700 Punkten Breite waeren drei Striche in einer Wueste. */
/* Die Breite des Werkzeugformulars.
============================================================
Bis zum 2026-10-16 standen hier 520 Punkte. Das war richtig, solange das
Formular drei Textfelder und zwei Klapplisten trug: ein Eingabefeld, das
ueber 500 Punkte breit ist, hilft niemandem beim Tippen eines Titels.
Gemessen auf 1440 Punkten blieben rechts aber zwei Drittel der Seite leer,
waehrend man eine schmale Spalte hinunterlas — und seit die Farbwahl aus
zwoelf Proben besteht, ist der Platz nicht mehr Zierde, sondern der
Unterschied zwischen zwoelf Zeilen und vier.
Deshalb: das FORMULAR darf breit werden, das einzelne FELD nicht. Die
Felder stehen dafuer in `.wkform__zeile` nebeneinander (jedes also wieder
rund 300 Punkte), und die Proben nutzen die Breite als Raster. */
.wkform{max-width:960px;margin-bottom:var(--takt-mittel)}
/* Titel, Name und Genre: untereinander auf dem Telefon, in einer Zeile ab
760 Punkten. `align-items:start`, weil zwei der drei Felder einen
Hinweissatz tragen und eines nicht — ohne das wuerden alle drei auf die
Hoehe des hoechsten aufgezogen und die Felder standen nicht mehr in einer
Linie. */
.wkform__zeile{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){
.wkform__zeile{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;align-items:start}
/* Platz fuer ZWEI Zeilen Beschriftung, auch wenn nur eine kommt.
Gemessen am 2026-10-17: „Name (Interpret, Projekt, Kanal)" bricht
zwischen 760 und 903 Punkten auf zwei Zeilen um und schob sein Feld
16,5 Punkte tiefer als die beiden daneben — genau in dem Band, in dem
Tablets hochkant stehen (768, 800, 820, 834, 884). `align-items:start`
konnte das nicht abfangen: die Felder standen nicht wegen ihrer Hoehe
schief, sondern wegen der Hoehe ihrer Beschriftung. */
.wkform__zeile > .afeld > label{display:block;min-height:2.6em}
}
/* Die drei Beispielbilder auf der noch leeren Werkzeugseite.
============================================================
Vorher stand hier ein gestrichelter Kasten mit einem Satz („Trag oben einen
Titel ein"). Eine Seite, die Bilder macht, zeigte damit kein einziges Bild,
bevor jemand getippt hatte. Die Klasse `.wk__leer` ist mit diesem Kasten
weggefallen. */
.wk__beispiel{margin:var(--takt-mittel) 0}
.wk__beispiel-satz{margin:0 0 var(--s-4, 20px);color:var(--grey);max-width:68ch}
/* Drei Bilder, also eine Reihe aus drei oder eine Spalte — niemals zwei und
ein Nachzuegler. Dieselbe Rechnung wie bei der Entwurfsgalerie, nur mit
drei statt zwoelf; deshalb liegt die Grenze hier hoeher als deren 640. */
.coverwahl--werk.coverwahl--beispiel{grid-template-columns:1fr}
@media (min-width:700px){
.coverwahl--werk.coverwahl--beispiel{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Aussehen waehlen: Farbwelt, Schrift, drei eigene Farben
============================================================
Steht in den Formularen von /cover, /thumbnail und im Cover-Abschnitt der
Arbeitsmappe (`stilBereich()` in views/werkzeuge.js). Das
braucht denselben Reset wie `.feld--wahl` weiter oben — ohne ihn setzt der
Browser einen eigenen Rahmen und Innenabstand dazu, und die Gruppe sieht
aus wie ein eingefuegter Kasten statt wie zwei weitere Felder im Formular.
Die Reihenfolge hier im Markup ist die der Wichtigkeit: zuerst die zwoelf
Farbproben (ein Griff, elf fertige Farbwelten und „eigene"), dann die
Schrift, darunter die drei Farbfelder fuer den, der wirklich eine eigene
Farbe will. Umgekehrt haette das Formular mit drei Farbfeldern begonnen,
die man meistens nicht braucht. */
/* `display:block` hebt das `display:flex` von `.afeld` wieder auf.
Die Klasse `.afeld` steht trotzdem am Element, und zwar absichtlich: sie
bringt die Beschriftungen (`.afeld label`) und die Klapplisten
(`.afeld select`) in genau die Form, die die Felder darueber haben. Was
sie NICHT bringen darf, ist ihre eigene Spaltenanordnung — ein `fieldset`
als Flex-Behaelter stellt die gerenderte Legende in mehreren Browsern an
eine andere Stelle, und die Gruppe faengt dann ohne Ueberschrift an. */
.afeld--stil{display:block;border:0;padding:0;min-width:0;
/* Mehr Abstand UEBER der Ueberschrift als darunter: „Aussehen" eroeffnet
einen neuen Gedanken, „Farbwelt" und „Eigene Farben" darunter gliedern
ihn nur. Vorher stand hier `margin:0 0 22px` — gleich viel Luft ueber
und unter jeder der drei Zeilen. */
margin:var(--takt-eng) 0 var(--s-5);
}
/* Der KIND-Kombinator ist der ganze Punkt dieser Regel.
----------------------------------------------------
Vorher stand hier `.afeld--stil legend`, also ein Nachfahren-Selektor
(Spezifitaet 0-1-1). Er traf damit auch die beiden Untergruppen-Legenden
darin und schlug deren eigene Klasse `.stil__gruppenname` (0-1-0) —
„AUSSEHEN", „FARBEN" und „SCHRIFT" standen in genau derselben Groesse,
Farbe und Laufweite direkt uebereinander. Drei gleich laute Zeilen sind
keine Rangordnung, sondern Mus. Jetzt gilt diese Regel nur noch fuer die
Legende des aeusseren Feldsatzes, und sie ist hoerbar lauter als die
Untergruppen: 13 statt 11 Punkt, `--white` statt `--grey-dim`. */
.afeld--stil > legend{
padding:0;font-family:var(--font-mono);font-size:13px;
letter-spacing:.2em;text-transform:uppercase;color:var(--white);
margin-bottom:var(--s-3);
}
/* Die Klappliste der Schrift. Eine Spalte, aber derselbe Behaelter wie
vorher: stand hier einmal ein zweites Feld daneben, bricht nichts. */
.stil{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.stil__spalte{display:flex;flex-direction:column;gap:7px;flex:1 1 230px;min-width:0}
/* Die Schriftzeile darf breit werden. Eine Klappliste waechst nicht in die
Breite, wenn ihr Behaelter sie bei 230 Punkten festhaelt — dort blieben
230 - 26 - 2 - 20 = 182 px fuer den Text, und die laengste Option braucht
210 px (Stand 2026-10-18; die Obergrenze und ihre Herleitung stehen ueber
`SCHRIFTPAARE` in `src/lib/konfiguration.js`). Genau daran ist die
Farbwahl gescheitert, bevor sie am 2026-10-16 zu Knoepfen wurde. */
@media (min-width:560px){ .stil__spalte{flex:1 1 100%;max-width:520px} }
/* Die Farbwahl: zwoelf Proben statt einer Klappliste
============================================================
Vorher eine Klappliste mit elf Zeilen der Form `Name — Halbsatz`. Gemessen
am 2026-10-12 bei 390 Punkten: das Feld zeigte rund 30 der bis zu 59
Zeichen, aus „Farben dieser Seite — Was der Betreiber eingestellt hat."
wurde „Farben dieser Seite — Was der Be". Auf einer Seite, deren Zweck
Bilder sind, stand damit die Farbwahl als halber Satz und ohne eine
einzige Farbe.
Jetzt eine Gruppe von Auswahlknoepfen, jeder mit den drei Farben, um die es
geht. Der Knopf WAECHST in die Hoehe, wenn der Satz laenger ist — damit ist
die Ursache des Befunds weg und nicht nur seine Wirkung gemildert.
Die Farben stehen weiter unten als Klassen (`.welt--neon` ...), weil die
Content-Security-Policy kein `style`-Attribut zulaesst. Damit sie nicht von
`FARBWELTEN` abweichen, haelt `werkzeuge/farbwelten-css-pruefen.mjs` beide
Listen gegeneinander. */
/* Zwei Untergruppen unter „Aussehen": die zwoelf fertigen Welten und die
drei eigenen Felder. Eng innen (8 Punkte unter der Ueberschrift), weit
aussen (32 Punkte zwischen den Gruppen) — damit liest sich der Block als
zwei Dinge und nicht als eine Liste aus fuenf Zeilen. */
.stil__gruppe{display:block;border:0;padding:0;margin:0 0 var(--s-5);min-width:0}
/* 0-2-0 — muss `.afeld--stil > legend` (0-1-1) schlagen; siehe dort. */
.afeld--stil .stil__gruppenname{
padding:0;font-family:var(--font-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);
margin-bottom:var(--s-2);
}
/* Eine Spalte auf dem Telefon, zwei ab 560, drei ab 980 Punkten.
Zwoelf geht durch alle drei Zahlen ohne Rest auf — dieselbe Rechnung wie
bei den Entwuerfen, und wieder ohne eine Zeile CSS fuer den Rest. */
.welten{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){ .welten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .welten{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Der einzelne Knopf.
-------------------
Der Auswahlknopf bleibt SICHTBAR und wird nicht durch die Probe ersetzt.
Ein versteckter `input[type=radio]` haette bedeutet, dass der gewaehlte
Zustand nur noch an der Umrandung des Knopfes haengt — und die braucht
`:has()`. Wo das fehlt, waere nicht zu sehen, was gewaehlt ist: wieder ein
Bedienelement, das aussieht wie eines und keines ist. So herum zeigt der
Browser den Zustand selbst, und `:has()` legt nur eine Hervorhebung
darueber. */
.welt{
display:grid;grid-template-columns:auto auto minmax(0,1fr);
grid-template-areas:"radio probe name" "radio probe hinweis";
column-gap:10px;row-gap:1px;align-items:center;
min-height:44px;padding:8px 10px;
/* `--rand` und nicht `--line`: ein Knopf braucht einen sichtbaren Umriss.
Gemessen am 2026-10-17 trug `--line` auf dem Seitengrund 1,38:1 und
gegen die eigene Flaeche 1,29:1 — die zwoelf Knoepfe lasen sich als
Textwand. `--rand` ist im Stylesheet genau dafuer angelegt (3:1,
WCAG 1.4.11) und steht schon auf der Probe und den drei Farbfeldern. */
border:1px solid var(--rand);background:var(--black-2);
cursor:pointer;
}
.welt:hover{border-color:var(--rand)}
.welt__radio{grid-area:radio;margin:0;width:18px;height:18px;accent-color:var(--akzent-text)}
/* Der gewaehlte Zustand war ein 1px-Rahmen in Cyan und sonst nichts — auf
zwoelf Kaesten, die alle einen 1px-Rahmen haben, der Unterschied zwischen
#6b6963 und #17f2ff auf einer Haarlinie. Gewaehlt ist jetzt: doppelte
Linie (der innere Schein ist kein Schlagschatten, sondern die zweite
Rahmenlinie — er aendert die Kastenhoehe nicht und laesst das Raster
stehen), hellere Flaeche und der Name in der Akzentfarbe. Drei Merkmale,
von denen keines allein Farbe ist (WCAG 1.4.1). */
.welt:has(.welt__radio:checked){
border-color:var(--akzent-text);background:var(--black-3);
box-shadow:inset 0 0 0 1px var(--akzent-text);
}
.welt:has(.welt__radio:checked) .welt__name{color:var(--akzent-text)}
.welt:has(.welt__radio:focus-visible){outline:2px solid var(--akzent-text);outline-offset:1px}
/* Die Probe: drei Flaechen in der Reihenfolge Akzent, zweite Farbe, Grund —
dieselbe Reihenfolge wie die drei Farbfelder darunter, damit man sieht,
welches Feld welche Flaeche ist. Der Rand ist `--rand` und nicht `--line`,
aus demselben Grund wie bei den Farbfeldern: eine Flaeche ohne Text braucht
eine Begrenzung, die 3:1 traegt (WCAG 1.4.11). */
/* 48 x 30 statt 38 x 26. Die Probe ist das Einzige am Knopf, was die Frage
beantwortet („wie sieht das aus?"), und sie war kleiner als der Auswahl-
knopf daneben zusammen mit seinem Abstand. Nachgerechnet gegen die engste
Stelle, an der das Raster noch drei Spalten hat (Satzspiegel 902 px bei
980 Punkten Fensterbreite, Karte 308 px): 308 - 2 Rahmen - 20 Innenabstand
- 18 Knopf - 20 Spalten - 48 Probe = 200 px fuer den Text, und die
laengste Hinweiszeile braucht 173. Passt ohne Umbruch. */
.welt__probe{
grid-area:probe;display:flex;width:48px;height:30px;
border:1px solid var(--rand);overflow:hidden;
}
/* Eine Trennlinie zwischen den drei Flaechen.
Gemessen am 2026-10-17: bei neun der elf Welten liegen Akzent und zweite
Farbe unter 2:1 auseinander, bei den Hausfarben sind sie sogar gleich
(`design_sekundaer` faellt auf `design_primaer` zurueck) — und die dritte
Flaeche, der dunkle Grund, steht mit 1,04 bis 1,09 gegen die Karte. Ohne
Trennlinie verspricht die Probe drei Farben und zeigt eine. `--rand` ist
genau die Marke, die das Stylesheet fuer Begrenzungen ohne Text haelt. */
.welt__probe i{flex:1 1 0;min-width:0}
.welt__probe i + i{border-left:1px solid var(--rand)}
/* Name und Hinweis in der HAUSSCHRIFT, nicht in der Monoschrift.
------------------------------------------------------------
Ohne diese drei Eigenschaften gewinnt `.afeld label` (Spezifitaet 0-1-1
gegen 0-1-0) und setzt beide Zeilen in gesperrte Versalien der
Monoschrift. Gemessen am 2026-10-17: „Messing auf Dunkelbraun. Ruhig und
teuer." braucht so 364 Punkte statt 173 — das 2,1-fache —, und der
HINWEIS (12px) stand groesser da als der NAME (11px), den er erklaert.
Das haette genau den Fehler zurueckgebracht, dessentwegen die Klappliste
abgeschafft wurde: ein Satz, der nicht in seine Flaeche passt.
`.stil__hex` zwei Regeln tiefer musste sich derselben Vererbung schon
einmal entziehen. */
.welt__name{
grid-area:name;color:var(--white);line-height:1.25;
font-family:var(--font-body);font-size:16px;letter-spacing:normal;text-transform:none;
}
.welt__hinweis{
grid-area:hinweis;color:var(--grey);line-height:1.35;
font-family:var(--font-body);font-size:14px;letter-spacing:normal;text-transform:none;
}
/* Die Farben der zehn Welten, dazu die der Seite selbst.
------------------------------------------------------
`haus` zeigt keine festen Werte, sondern die Token der Seite — damit stimmt
die Probe auch dann noch, wenn der Betreiber in der Verwaltung eine andere
Akzentfarbe einstellt. Genau das ist bei den uebrigen zehn nicht moeglich:
sie SIND feste Werte, und deshalb halten sie die Pruefung gegen
`FARBWELTEN` aus. */
.welt--haus .welt__probe i:nth-child(1){background:var(--cyan)}
.welt--haus .welt__probe i:nth-child(2){background:var(--akzent-2)}
.welt--haus .welt__probe i:nth-child(3){background:var(--bild-grund, var(--black))}
.welt--neon .welt__probe i:nth-child(1){background:#17f2ff}
.welt--neon .welt__probe i:nth-child(2){background:#ff2d95}
.welt--neon .welt__probe i:nth-child(3){background:#0a0a0a}
.welt--magma .welt__probe i:nth-child(1){background:#ff6a1a}
.welt--magma .welt__probe i:nth-child(2){background:#ffd166}
.welt--magma .welt__probe i:nth-child(3){background:#0c0705}
.welt--gift .welt__probe i:nth-child(1){background:#39ff88}
.welt--gift .welt__probe i:nth-child(2){background:#d4ff3f}
.welt--gift .welt__probe i:nth-child(3){background:#07100b}
.welt--nacht .welt__probe i:nth-child(1){background:#5b8cff}
.welt--nacht .welt__probe i:nth-child(2){background:#b388ff}
.welt--nacht .welt__probe i:nth-child(3){background:#06080f}
.welt--blut .welt__probe i:nth-child(1){background:#e01b3c}
.welt--blut .welt__probe i:nth-child(2){background:#ff8a5c}
.welt--blut .welt__probe i:nth-child(3){background:#0b0405}
.welt--gold .welt__probe i:nth-child(1){background:#e8b53c}
.welt--gold .welt__probe i:nth-child(2){background:#f0e0bd}
.welt--gold .welt__probe i:nth-child(3){background:#0a0806}
.welt--kalk .welt__probe i:nth-child(1){background:#1b1b1b}
.welt--kalk .welt__probe i:nth-child(2){background:#d6332f}
.welt--kalk .welt__probe i:nth-child(3){background:#f1efe9}
.welt--papier .welt__probe i:nth-child(1){background:#1f4ed8}
.welt--papier .welt__probe i:nth-child(2){background:#0f172a}
.welt--papier .welt__probe i:nth-child(3){background:#faf7f0}
.welt--eis .welt__probe i:nth-child(1){background:#0e7490}
.welt--eis .welt__probe i:nth-child(2){background:#164e63}
.welt--eis .welt__probe i:nth-child(3){background:#edf3f7}
.welt--kohle .welt__probe i:nth-child(1){background:#f2f2f2}
.welt--kohle .welt__probe i:nth-child(2){background:#8f8f8f}
.welt--kohle .welt__probe i:nth-child(3){background:#0a0a0a}
/* „Eigene Farben" kann keine Probe zeigen: die drei Werte stehen in den
Feldern darunter und wechseln mit jedem Griff. Eine Probe, die dann die
falschen Farben zeigte, waere schlechter als keine — also eine neutrale
Schraffur, die als „hier gilt, was du einstellst" zu lesen ist. */
.welt--eigen .welt__probe{
background:repeating-linear-gradient(45deg,
var(--black-3) 0 5px, var(--black-2) 5px 10px);
}
.welt--eigen .welt__probe i{background:none}
/* Die drei Farbfelder: EINS oder DREI je Zeile, niemals zwei.
----------------------------------------------------------
Der erste Anlauf war `flex:1 1 120px` mit Umbruch. Im Browser gemessen
ergab das bei 320 und bei 390 Punkten zwei Felder nebeneinander und das
dritte allein darunter — in DOPPELTER Breite, weil es die Zeile fuer sich
hatte. „Hintergrund" sah damit aus wie ein wichtigerer Regler als die
beiden darueber, und das ist er nicht. (Der Kommentar an dieser Stelle
behauptete sogar, sie stuenden bei 320 untereinander; gemessen stimmte das
nie.)
Jetzt entscheidet eine Grenze statt eines Umbruchs: unter 420 Punkten
nimmt jedes Feld die ganze Zeile, darueber teilen sich die drei den Platz
zu gleichen Teilen. 420 ist die Breite, ab der drei Felder zu 120 Punkten
samt Luecken in den Satzspiegel passen (3 x 120 + 2 x 12 = 384). */
/* Die Grenze ist am 2026-10-24 von 420 auf 560 Punkte gewandert. Grund: die
Beschriftung traegt jetzt den Hexwert in derselben Zeile rechts aussen
(„ZWEITE FARBE #17f2ff"), und das sind gemessen 146 Punkte. Bei 420
Punkten Fensterbreite war ein Drittel der Zeile 121 Punkte breit — der
Wert waere unter die Beschriftung gerutscht und die drei Felder haetten
unterschiedlich hohe Koepfe bekommen. Bei 560 sind es 168 und es passt.
320, 360, 390 und 414 liegen alle darunter und bekommen wie bisher ein
Feld je Zeile. */
.stil__farben{display:flex;flex-wrap:wrap;gap:12px}
.stil__farbe{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;min-width:0}
@media (min-width:560px){ .stil__farbe{flex:1 1 0;min-width:150px} }
/* Beschriftung links, Wert rechts, eine Grundlinie.
Vorher stand der Hexwert als Anhaengsel hinter dem Wort und in
`--grey` — er sah aus wie eine Fussnote, obwohl er bei fast schwarzen
Werten das Einzige ist, was ueberhaupt etwas aussagt. `flex-wrap` ist das
Netz fuer den Fall, dass eine Uebersetzung oder ein grosser Schriftgrad
die Zeile doch sprengt. `0-2-0` schlaegt `.afeld label` (0-1-1), dessen
`display:block` hier im Weg waere. */
.stil__farbe label{
display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:2px 10px;
}
/* Der Farbwaehler selbst.
----------------------
`input[type=color]` bringt in jedem Browser eine eigene Darstellung mit:
Chrome zeichnet ein kleines Rechteck mit Rahmen, Firefox einen Knopf,
Safari einen runden Schalter. Gemeinsam ist allen, dass die Vorgabegroesse
deutlich unter den 44 Punkten liegt, die jedes andere Bedienelement dieser
Seite hat — und dass die Farbe winzig ist, obwohl sie das Einzige ist, was
man sehen will.
Deshalb: volle Breite, 44 Punkte hoch, und der innere Farbfleck ohne
eigenen Rand. Die Huelle (`--line` auf `--black-2`) ist dieselbe wie bei
den Textfeldern daneben, damit die Gruppe eine Gruppe bleibt. */
/* Der Rand ist `--rand` und nicht `--line`.
Gemessen: `--line` gegen die eigene Flaeche ergibt 1,29:1 im dunklen und
1,43:1 im hellen Modus — also praktisch keine Begrenzung (WCAG 1.4.11
verlangt 3:1 fuer Bedienelemente). Bei den Textfeldern faellt das weniger
auf, weil sie Text tragen; ein Farbfeld ist nichts als eine Flaeche, und
`::-webkit-color-swatch{border:none}` unten nimmt ihm auch noch den
eigenen. Derselbe Ton, den die Entwurfsgalerie aus demselben Grund
benutzt. */
/* ZUSAMMENFUEHRUNG 2026-10-25: Flaeche, Rand, Zeiger, Zeige-, Fokus- und
Sperrzustand und das Abschalten der inneren Rahmen stehen jetzt EINMAL
unter „Das Farbfeld" und gelten ueber `.afeld input[type=color]` auch
hier — `.stil__farbe` liegt in `fieldset.afeld.afeld--stil`. Uebrig
bleibt nur, was auf dieser Seite wirklich anders ist: das Feld fuellt
seine Spalte, statt 52 Punkte breit zu sein, weil es hier die Farbe
selbst zeigt und nicht neben einem Textfeld steht. Die Hoehe kommt aus
`--feld-h` und liegt ueber 44 Punkten. */
.stil__farbe input[type=color]{inline-size:100%}
/* Der Hex-Wert in der Beschriftung.
---------------------------------
Der Hintergrund der Hausfarben ist `#0a0a0a`. Gemessen gegen die eigene
Flaeche (`--black-2`) sind das 1,1:1 — das Feld sah aus wie ein leeres
Feld und nicht wie eine Farbe, und es gab keine Stelle, an der stand,
welche Farbe gilt. Jetzt steht sie da, und zwar in der Schreibweise, mit
der man sie woanders wieder eintippen kann.
`font-variant-numeric` ist hier keine Zierde: Hexwerte liest man
zeichenweise, und in der Fliessschrift der Seite sind `0` und `O` sowie
`1` und `l` schwer zu unterscheiden. Die Monoschrift der Seite ist dafuer
da. */
.stil__hex{
font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
/* `--white` statt `--grey`: der Wert ist kein Beiwerk der Beschriftung,
sondern bei `#0a0a0a` auf `#131313` die einzige lesbare Auskunft
darueber, welche Farbe im Feld steht. 17:1 gegen den Seitengrund. */
color:var(--white);text-transform:none;
/* Hexwerte liest man zeichenweise und vergleicht sie untereinander —
dafuer muessen die Ziffern in einer Flucht stehen. */
font-variant-numeric:tabular-nums;
}
/* Welche der beiden Wahlen gerade gewinnt.
============================================================
„Was man anfasst, gilt" ist die Regel der Farbwahl: ein gedrehtes Farbfeld
schlaegt die Farbwelt (erkannt ueber die versteckte Zustandsmarke `z`).
Bis zum 2026-10-24 stand sie als Absatz unter dem Block und sagte nur,
DASS es sie gibt — welcher Fall gerade zutrifft, merkte man erst am
fertigen Bild.
Jetzt stehen zwei Saetze im Markup und `:has()` entscheidet am angehakten
Knopf, welcher sichtbar ist. Kennt ein Browser `:has()` nicht, sind die
beiden letzten Regeln ungueltig und fallen weg — dann bleibt der haeufigere
Fall stehen („die Farbwelt gilt"), und nicht etwa eine leere Zeile.
Die Akzentfarbe traegt hier Bedeutung und ist nicht Zierde: sie erscheint
genau dann, wenn der Zustand vom Normalfall abweicht. Der Text sagt es
zusaetzlich in Worten (WCAG 1.4.1). */
.stil__regel{
margin:var(--s-3) 0 0;font-family:var(--font-body);font-size:15px;
line-height:1.45;color:var(--grey);max-width:60ch;
}
.stil__regel-welt{display:block}
.stil__regel-eigen{display:none}
.afeld--stil:has(.welt--eigen .welt__radio:checked) .stil__regel-welt{display:none}
.afeld--stil:has(.welt--eigen .welt__radio:checked) .stil__regel-eigen{
display:block;color:var(--akzent-text);
}
/* Der Knopf unter dem Stilformular im Videowerk ist ein `.abtn` und kein
`.submit` — er ist nicht das Absenden des Formulars, in dem er steht,
sondern das Neurechnen einer Ansicht. Er soll trotzdem Abstand nach oben
haben. */
.wkform .afeld--stil + .abtn{margin-top:4px}
/* Die Entwurfsgalerie: ZWOELF Bilder, also vier Reihen mal drei.
--------------------------------------------------------------
`.coverwahl` rechnet mit `auto-fill` und 220px Mindestbreite — fuer die
Verwaltung richtig, wo ein Track beliebig viele Dateien haben kann. Fuer
ein Entwurfsblatt ist es falsch: im Satzspiegel von 1232px ergab das fuenf
Spalten, also fuenf Entwuerfe in Reihe eins und einer allein darunter
(beim Thumbnail vier und zwei). Der Waise unten links sieht aus wie ein
Nachzuegler, und ein Blatt, auf dem man Dinge vergleicht, braucht ein
geschlossenes Raster. Derselbe Gedanke wie bei den vier Kacheln weiter
oben: die Spaltenzahl muss ohne Rest aufgehen.
Seit dem 2026-10-12 sind es zwoelf Entwuerfe, und die Rechnung geht weiter
auf: zwoelf ist durch eins, zwei und drei ohne Rest teilbar — also auf
jeder der drei Breiten ein geschlossenes Raster, ohne eine einzige Zeile
CSS dafuer.
Nebenwirkung, die niemanden stoert: die Bilder werden von rund 250 auf
450 Punkte groesser — erst damit kann man einen Entwurf wirklich
beurteilen. */
.coverwahl--werk{grid-template-columns:1fr}
@media (min-width:640px){ .coverwahl--werk{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .coverwahl--werk{grid-template-columns:repeat(3,1fr)} }
/* `.coverwahl__bild` traegt `aspect-ratio:1/1` fuer das Cover; ein Thumbnail
ist 16:9, und ohne diese Zeile stuende das Bild in einem quadratischen
Kasten und die Seite spraenge beim Laden. */
.coverwahl--quer .coverwahl__bild{aspect-ratio:16/9}
/* Ein Rand, der traegt. `--line` (#2a2a2a) auf `--black` (#0a0a0a) ist fast
unsichtbar, und weil die erzeugten Cover selbst dunkle Raender haben,
verliefen Bild und Seite ineinander — man sah nicht, wo das Bild aufhoert.
Ausgerechnet dort, wo das Ergebnis gezeigt wird. */
.coverwahl--werk .coverwahl__bild{border-color:var(--rand)}
/* Im Werkzeug steht unter jedem Entwurf ein Knopf und keine Fusszeile in
Grau — er ist das, was man dort tut. */
.coverwahl--werk .coverwahl__fuss{display:flex}
.coverwahl--werk .coverwahl__fuss .abtn{flex:1;text-align:center}
/* Die Werkzeugleiste auf schmalen Geraeten.
============================================================
Vier Segmente passen nicht in eine Zeile neben die Wortmarke. Im Browser
bei 320 Punkten gemessen: die Leiste brauchte 305 px, die ganze Seite liess
sich seitlich schieben, und das vierte Werkzeug lag ausserhalb des
Sichtfelds. Dasselbe war 2026-09-07 schon einmal mit ZWEI Reitern passiert
— mit vier hilft kein Engerstellen mehr, sondern nur eine zweite Zeile.
Die Grenze liegt bei 720 px und nicht niedriger: knapp darueber steht die
Leiste zwar noch, aber mit Buchstabenabstaenden, die nichts mehr tragen.
Zwei mal zwei Segmente sind dort das ruhigere Bild — und jedes Segment wird
dabei GROESSER, nicht kleiner.
Die Trennlinien muessen im Raster neu gesetzt werden: `+ .views__btn` traegt
sie in einer Zeile links, im Raster brauchen sie links UND oben, und an den
Raendern keine. */
@media (max-width:720px){
.top__inner{flex-wrap:wrap;height:auto;row-gap:0;padding-bottom:10px}
.views--werk{
width:100%;display:grid;grid-template-columns:1fr 1fr;
/* Der eigene Rand der Leiste bleibt; die inneren Linien kommen von den
Segmenten, damit im Raster keine doppelten Striche entstehen. */
border:1px solid var(--rand);
/* Beide Reihen gleich hoch. „Musik bearbeiten" bricht bei 320 Punkten
auf zwei Zeilen um, „Cover" nicht — gemessen 58px gegen 44px, und die
vier Felder sahen deshalb aus wie zwei Paare statt wie eine Leiste.
`1fr` auf den Reihen macht aus der hoechsten Zelle das Mass fuer alle. */
grid-auto-rows:1fr;
}
.views--werk .views__btn{
text-align:center;padding:8px;line-height:1.25;
border-left:1px solid var(--line);border-top:1px solid var(--line);
}
/* Linke Spalte: keine Linie links. Erste Reihe: keine Linie oben. */
.views--werk .views__btn:nth-child(odd){border-left:0}
.views--werk .views__btn:nth-child(-n+2){border-top:0}
}
/* Unter 420 px wird die Wortmarke ohnehin schon kleiner (siehe oben). Hier
bekommt die Leiste noch etwas Luft zurueck, weil sie jetzt eine eigene
Zeile hat und nicht mehr um Platz konkurrieren muss. */
@media (max-width:420px){
.views--werk .views__btn{letter-spacing:.08em;padding:0 10px}
}
/* Nachzug aus dem Pruef- und Verbesserungslauf vom 2026-10-11
============================================================ */
/* Die Werkzeugtitel sind kurz, und `.section__head` schiebt mit
`justify-content:space-between` die Erklaerzeile an den rechten Rand —
gemessen 295 Punkte vom Titel entfernt. Ausgerechnet diese Zeile sagt, was
man bekommt („3000 × 3000 Pixel"), und sie ist die kleinste, dunkelste
Schrift der Seite. Auf der Startseite faellt es nicht auf, weil die lange
Ueberschrift die Zeile fuellt; bei kurzen Titeln fliegt der Hinweis weg.
Untereinander gehoert beides zusammen. */
.section--fuehrend .section__head{display:block}
.section--fuehrend .section__head .section__hint{margin-top:10px}
/* Die Werkzeugkacheln sehen jetzt anklickbar aus.
Vorher war der Name weiss wie Fliesstext und faerbte sich erst beim
Ueberfahren; die ganze Kachel war zwar Klickflaeche, aber das sah man
nicht. Gleichzeitig war das einzig knopfartige Element der Startseite die
11px-Leiste oben rechts — das Grosse passiv, das Kleine aktiv. */
.wk__eins{cursor:pointer}
/* DER PFEIL IST WEG (2026-11-02).
------------------------------------------------------------
An `.wk__name::after` hing ein cyanfarbener Pfeil hinter jedem der vier
Werkzeugnamen, und daran wiederum die einzige gestaltete Bewegung der
Seite: er rueckte beim Ueberfahren vier Punkte vor.
Beides faellt mit dem schlichten Satz. Der Grund ist nicht, dass der
Pfeil schlecht gemacht war - er war es nicht (das geschuetzte Leerzeichen
im `inline-block` loeste am 24.10. einen echten Umbruchfehler). Er sagt
nur nichts, was die Seite nicht schon sagt: der Name ist seit dem
2026-11-02 unterstrichen und damit auch ohne Farbe und ohne Zeichen als
Verweis zu erkennen.
Was NICHT weggefallen ist: die Klickflaeche des ganzen Eintrags. Sie kam
immer von `.wk__link::after` und kommt weiter von dort. */
/* Der vierte Eintrag tut etwas grundsaetzlich anderes: dort verlaesst eine
Datei das Geraet. Das stand bisher in genau demselben Grau, derselben
Groesse und derselben Position wie "Deine Datei bleibt auf deinem Geraet."
beim ersten - der einzige Unterschied, der rechtlich und gefuehlt zaehlt,
war rein textlich kodiert.
ERST MIT ZWEI GRAUTOENEN VERSUCHT, DANN VERWORFEN: die Zeile stand auf
`--grey`, die drei anderen auf `--grey-dim`. Gemessen stehen die beiden
Toene gegeneinander bei 1,41:1 - das ist keine Auszeichnung, das ist
eine Behauptung in einem Kommentar. Jetzt ein 2 px starker Strich im
Akzent vor der Zeile: eine FORM, kein Farbwechsel, und damit auch fuer
jemanden da, der die Farbe nicht sieht. Der Text sagt es weiterhin
selbst (WCAG 1.4.1), der Strich verstaerkt nur. */
.wk__eins:last-child .wk__merkmal{
border-left:2px solid var(--akzent-text);padding-left:10px;
}
/* Die Schrittliste in der Arbeitsmappe. Sie sagt, wo man steht — vorher gab
es keine Reihenfolge und keinen Hinweis darauf, dass das Cover Pflicht
ist. */
.vw__schritte{
list-style:none;margin:0 0 var(--takt-mittel);padding:0;
display:flex;flex-wrap:wrap;gap:8px 10px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--grey-dim);
counter-reset:schritt;
}
.vw__schritte li{
display:flex;align-items:center;gap:8px;
padding:7px 12px;border:1px solid var(--line);
counter-increment:schritt;
}
.vw__schritte li::before{content:counter(schritt);color:var(--akzent-text)}
.vw__schritte li.is-fertig{border-color:var(--rand);color:var(--grey)}
.vw__schritte li.is-fertig::before{content:"✓"}
/* Die Ueberschrift ueber der Entwurfsgalerie. Sie ist das Sprungziel des
Formulars und der einzige Weg, mit einer Vorlesehilfe von der Eingabe zum
Ergebnis zu kommen — vorher hatte die Seite genau eine Ueberschrift. */
.section__untertitel{
font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey);
margin:var(--takt-mittel) 0 var(--s-4);
padding-bottom:8px;border-bottom:1px solid var(--line);
/* Scrollziel: etwas Luft ueber der Ueberschrift, damit sie nach dem Sprung
nicht unter der klebenden Kopfleiste steht. */
scroll-margin-top:84px;
}
/* Was der Nutzer eingetippt hat, behaelt seine Schreibweise. Die Versalien
dieser Marke gelten fuer die Hausworte („ZWOELF ENTWUERFE FUER"), nicht
fuer einen Titel: „Nachts im Keller" als NACHTS IM KELLER zurueckzugeben
schreit ihn an und nimmt ihm die eigene Schreibung. Mono bleibt die
Marke, der Titel darin laeuft in der Lesetextschrift. */
.untertitel__eigen{
font-family:var(--font-body);text-transform:none;letter-spacing:.01em;
font-size:15px;color:var(--white);
}
/* ============================================================
Die Werkbank: Einstellungen links, Beweis rechts
(seit 2026-10-24)
============================================================
Befund vom 2026-10-24, im Browser bei 1440 Punkten gemessen: der
Satzspiegel ist 1328 Punkte breit, das Werkzeugformular 960 — rechts
daneben standen 368 Punkte leer, und zwar ueber die ganze Hoehe. Die drei
Beispielbilder, das Einzige auf der Seite, das zeigt, was herauskommt,
begannen bei rund 1270 Punkten Scrollhoehe und waren damit nie im ersten
Blick. Eine Seite, die Bilder macht und keins zeigt, verlangt Vertrauen,
bevor sie etwas liefert.
Ab 1180 Punkten stehen deshalb beide Spalten nebeneinander: links die
Einstellungen, rechts das Ergebnis. Darunter ist alles wieder eine Spalte,
und zwar in genau der Reihenfolge, in der es vorher stand — das Markup
wurde nicht umgestellt, nur die Zuweisung an die Rasterspalten.
1180 und nicht frueher: links braucht die Farbwahl zwei Spalten Proben
(2 x 266 Punkte bei 1180), rechts brauchen die Entwuerfe zwei Spalten
Bilder. Unter 1180 wird eine der beiden Seiten zu schmal, um ihre Aufgabe
zu erfuellen, und zwei schlechte Spalten sind schlechter als eine gute. */
/* Der Abstand nach unten sass vorher am Formular (`.wkform`). In der
Werkbank hat das Formular keinen mehr — er gehoert an die Bank, sonst
stiesse der Satz darunter bei 1440 Punkten gemessen auf 4 Punkte an den
Hauptknopf. */
.wkbank{display:block;margin-bottom:var(--takt-mittel)}
@media (min-width:1180px){
.wkbank{
display:grid;
/* Links etwas schmaler als rechts: die Einstellungen sind Text und
Bedienelemente und haben ein natuerliches Mass, die Bilder rechts
haben keines — jeder Punkt mehr macht den Entwurf beurteilbarer. */
grid-template-columns:minmax(0,0.95fr) minmax(0,1fr);
/* Zwei Zeilen, und die ERSTE darf nur so hoch werden wie das Formular.
Ohne diese Zeile verteilt das Raster die Hoehe der rechten Spalte (sie
geht ueber beide Zeilen) gleichmaessig auf beide Zeilen — gemessen am
2026-10-25 im Ergebniszustand: 513 Punkte Leerraum zwischen dem
Hauptknopf und dem Nachtrag darunter. `max-content` haelt die erste
Zeile am Formular fest, `1fr` nimmt den Rest auf. */
grid-template-rows:max-content 1fr;
gap:var(--s-6);
/* Ohne `start` zoege das Raster beide Spalten auf dieselbe Hoehe und
`position:sticky` haette keinen Weg, an dem es kleben koennte. */
align-items:start;
}
/* Ausdrueckliche Zuweisung statt Reihenfolge im Markup: auf /musikvideo
steht die Zusage VOR dem Formular (sie muss in einer Spalte vor dem
Hochladeknopf gelesen werden) und soll trotzdem rechts erscheinen. */
.wkbank__werkbank{grid-column:1;grid-row:1;max-width:none;margin-bottom:0}
/* Ueber BEIDE Zeilen: der Beweis ist die lange Spalte, links stehen
darunter Formular und Nachtrag. Ohne `span 2` stuende der Nachtrag erst
unter dem Entwurfsblatt und das Loch unter dem Formular bliebe. */
.wkbank__beweis{grid-column:2;grid-row:1 / span 2;min-width:0;margin-bottom:0}
.wkbank__nachtrag{grid-column:1;grid-row:2;min-width:0}
/* Der Beweis bleibt beim Scrollen stehen — aber nur, solange er in den
Bildschirm passt.
---------------------------------------------------------------
Das sind die drei Beispielbilder (Hoehe rund 580 Punkte, siehe unten)
und die Zusage auf /musikvideo. Beide bleiben neben dem Formular
stehen, waehrend man die Einstellungen durchgeht.
NICHT geklebt wird das Entwurfsblatt: zwoelf Bilder sind in dieser
Spalte rund 2400 Punkte hoch. Ein `sticky`-Element, das hoeher ist als
das Fenster, klebt mit seinem OBEREN Rand und laesst sich danach nicht
mehr weiterschieben — die unteren Entwuerfe waeren unerreichbar. Deshalb
traegt die Werkbank im Ergebniszustand die Klasse `wkbank--ergebnis`,
und diese Regel nimmt sie aus.
76 Punkte: die Kopfleiste ist 60 hoch, mit Linie 61, dazu 15 Luft —
dasselbe Mass, das `scroll-padding-top` fuer Sprungziele benutzt. */
.wkbank:not(.wkbank--ergebnis) .wkbank__beweis{
position:sticky;top:76px;
/* Gemessen am 2026-10-26: die Gruppe ist auf /thumbnail bei 1760 Punkten
Breite 923 Punkte hoch und bei 1440 noch 778 — die Bilder wachsen mit
der Spalte. In einem 900 Punkte hohen Fenster klebte sie damit
99 Punkte unter der Falz, und die beiden unteren Beispielbilder
blieben angeschnitten. Die Zahl „rund 580" oben galt nur fuer /cover
bei 1440. Also: nie hoeher als das Fenster, und was dann nicht passt,
laeuft innen. 92 = 76 geklebt + 16 Luft.
Seitlich 5 Punkte Polster gegen 5 Punkte negativen Rand: `overflow`
schneidet sonst den Fokusring der Verweise darin ab (derselbe Fall
wie beim Verzeichnis auf /datenschutz), und die Spalte soll trotzdem
an derselben Kante stehen wie vorher. */
max-block-size:calc(100vh - 92px);overflow-y:auto;
margin-inline:-5px;padding-inline:5px;
}
/* Die Ueberschrift der rechten Spalte steht ganz oben und braucht den
Abstand nicht, den sie sonst gegen den Absatz darueber haelt. */
.wkbank__beweis > .section__untertitel:first-child,
.wkbank__beweis .wk__beispiel{margin-top:0}
.wkbank__beweis .wk__beispiel .section__untertitel{margin-top:0}
/* Titel ueber die ganze Breite, Name und Genre daneben.
Drei Felder nebeneinander waeren in der linken Spalte je rund 200
Punkte breit — das ist kein Feld mehr, in das man einen Titel schreibt
(derselbe Grund, aus dem sie unter 760 Punkten untereinander stehen).
Der Titel ist das einzige Pflichtfeld und bekommt die ganze Zeile. */
.wkbank__werkbank .wkform__zeile{grid-template-columns:repeat(2,minmax(0,1fr))}
.wkbank__werkbank .wkform__zeile > .afeld:first-child{grid-column:1 / -1}
/* Der Platzhalter fuer eine zweite Beschriftungszeile gilt nur fuer die
beiden Felder, die nebeneinander stehen. Ueber dem Titel waere er
16 Punkte Leerraum ohne Aufgabe. */
.wkbank__werkbank .wkform__zeile > .afeld:first-child > label{min-height:0}
/* Zwei Spalten Farbproben statt drei: die linke Spalte ist zwischen rund
500 und 780 Punkten breit, drei Proben waeren dort 160 bis 250 Punkte
breit und der Hinweis („Messing auf Dunkelbraun. Ruhig und teuer.",
173 Punkte) braeuchte drei Zeilen. Zwoelf geht auch durch zwei ohne
Rest auf. */
.wkbank__werkbank .welten{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Das Entwurfsblatt in der rechten Spalte: zwei statt drei. Bei 1440
Punkten sind das rund 320 Punkte je Entwurf, bei 1760 rund 400 — gross
genug, um zwei Entwuerfe wirklich zu vergleichen. Zwoelf durch zwei
geht auf, es bleibt kein Nachzuegler stehen. */
.wkbank__beweis .coverwahl--werk{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Die drei Beispiele: eins gross, zwei klein daneben.
---------------------------------------------------
Drei gleich grosse Bilder untereinander waeren in dieser Spalte rund
1700 Punkte hoch und koennten nicht stehen bleiben; drei nebeneinander
waeren je rund 220 Punkte breit und zeigten nichts. Eins gross und zwei
klein ist beides nicht: das erste Beispiel ist gross genug, um die
gewaehlte Farbe zu beurteilen, und die Gruppe bleibt unter der
Fensterhoehe.
2fr/1fr ist dabei kein gerundeter Wert, sondern die Bedingung dafuer,
dass die beiden kleinen zusammen so hoch sind wie das grosse. */
.wkbank__beweis .coverwahl--beispiel{grid-template-columns:2fr 1fr;align-items:start}
.wkbank__beweis .coverwahl--beispiel .coverwahl__eins:first-child{grid-row:span 2}
/* Beim Thumbnail steht das grosse Beispiel OBEN und die beiden kleinen
darunter. Grund ist das Seitenverhaeltnis: ein 16:9-Bild in einem
Drittel der Spalte ist bei 1440 Punkten 212 breit und 119 hoch — darin
ist der Titel, um den es geht, nicht mehr zu lesen. Quer gelegt sind die
beiden kleinen 318 Punkte breit, und die Gruppe bleibt mit rund 570
Punkten trotzdem unter der Fensterhoehe. Beim quadratischen Cover geht
das nicht: dort waere dieselbe Anordnung 994 Punkte hoch und koennte
nicht mehr stehen bleiben. */
.wkbank__beweis .coverwahl--quer.coverwahl--beispiel{grid-template-columns:1fr 1fr}
.wkbank__beweis .coverwahl--quer.coverwahl--beispiel .coverwahl__eins:first-child{
grid-row:auto;grid-column:1 / -1;
}
}
/* Eine Trennlinie zwischen den Angaben und dem Aussehen.
Die beiden Bloecke beantworten zwei verschiedene Fragen („was steht im
Bild?" und „wie sieht es aus?") und standen bisher ohne jede Absetzung
untereinander. Die Linie ist dieselbe Haarlinie, die der Rest der Seite
zum Gliedern benutzt. */
.wkform__zeile{padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
/* Der Nachsatz unter dem Aussehen-Block gehoert zum ganzen Block darueber
und nicht zum Feld darunter. Gemessen am 2026-10-24 auf /musikvideo
standen zwischen ihm und der Beschriftung „Audiodatei" acht Punkte —
weniger als zwischen zwei Zeilen desselben Absatzes, und damit las sich
der Satz als Einleitung zum Dateifeld. */
.afeld--stil + .stil__nachsatz{margin-top:calc(-1 * var(--s-4));margin-bottom:var(--s-6)}
/* Zustimmung und Hauptknopf sind der Abschluss des Formulars und gehoeren
als Paar zusammen — vorher standen Dateifeld, Kreuzchen und Knopf in
gleichen Abstaenden untereinander, als waeren es drei weitere Felder. */
.wkform .wkform__consent{
margin-top:var(--s-5);padding-top:var(--s-4);
border-top:1px solid var(--line);
}
/* Dieselbe Regel wie bei `.note--lesen`: das ist ein Satz, den man liest und
dem man zustimmt, keine Messgroesse. In Space Mono brauchte er bei 1440
Punkten drei Zeilen und stand als gesperrter Fernschreiberblock neben
einem Kreuzchen. Nur in DIESEM Formular geaendert — `.consent` traegt
auch das Kontaktformular, und das gehoert nicht hierher. */
.wkform .wkform__consent label{
font-family:var(--font-body);font-size:16px;line-height:1.45;
letter-spacing:normal;color:var(--grey);
}
/* Prosa laeuft in der Leseschrift.
============================================================
`.note` ist die Hausklasse fuer das, was rechtlich und technisch dazu
gesagt werden muss, und sie setzt 11 Punkt Space Mono. Fuer eine
Dateigroesse ist das richtig, fuer sechs Zeilen Datenschutz nicht: auf
/musikvideo stand der wichtigste Text der Seite als grauer
Fernschreiberblock ueber dem Formular. Mono traegt ab jetzt Messwerte,
Prosa laeuft in Barlow Condensed.
`--grey` statt `--grey-dim`: die Zeile ist jetzt Fliesstext und nicht
mehr Kleingedrucktes (9,1:1 gegen den Seitengrund statt 4,8:1). */
.note--lesen{
font-family:var(--font-body);font-size:clamp(15px,1.2vw,17px);
letter-spacing:normal;line-height:1.55;color:var(--grey);
max-width:66ch;
}
/* Ein Messwert im Fliesstext: Groesse, Dauer, Kantenlaenge, Datenrate.
Genau dafuer ist die Monoschrift da — und nur dafuer. `.92em` statt eines
festen Grades, damit der Wert in jeder Umgebung dieselbe scheinbare
Groesse behaelt wie der Satz um ihn herum (Space Mono laeuft groesser als
Barlow Condensed). */
.mass{
font-family:var(--font-mono);font-size:.92em;letter-spacing:.02em;
font-variant-numeric:tabular-nums;color:var(--white);
}
/* Die Zusage auf /musikvideo — die rechte Spalte der Werkbank.
============================================================
Derselbe Inhalt wie vorher, nur lesbar: drei Absaetze Prosa und darunter
die drei Masse, an denen ein Upload scheitern kann, als Liste in
Monoschrift. Die Masse stehen zusaetzlich im Satz am Dateifeld — dort beim
Griff, hier in der Uebersicht. */
.wkzusage{margin:0 0 var(--takt-mittel)}
.wkzusage__satz{
margin:0 0 var(--s-4);font-size:clamp(15px,1.2vw,17px);line-height:1.55;
color:var(--grey);max-width:62ch;
}
.wkzusage__satz b{color:var(--white)}
.wkzusage__masse{
/* Dasselbe Mass wie die Absaetze darueber: sonst laufen die beiden Linien
bei 1760 Punkten 190 Punkte weiter nach rechts als der Text, den sie
einfassen. */
max-width:62ch;
margin:var(--s-4) 0;padding:var(--s-4) 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
display:grid;gap:var(--s-3);
}
.wkzusage__masse > div{
display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
}
.wkzusage__masse dt{
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--grey-dim);
}
.wkzusage__masse dd{margin:0;font-size:15px}
/* ============================================================
DIE OEFFENTLICHEN SEITEN: SCHLICHT (seit 2026-11-02)
============================================================
AUFTRAG. Der Betreiber am 2026-11-02: die Hauptseite schlicht halten, vom
Design her — auf Rueckfrage die schlichteste der drei vorgelegten
Fassungen und ausdruecklich fuer ALLE oeffentlichen Seiten, Kopfleiste und
Fusszeile eingeschlossen.
WO DAS GILT. An der Klasse `oeffentlich` am Rumpf. Sie setzt genau eine
Stelle: `werkRahmen()` in `src/server.js`, der Rahmen jeder oeffentlichen
Seite — Startseite, die vier Werkzeuge, die Arbeitsmappe, Kontakt, die
beiden Rechtstexte, die 404-Seite. Verwaltung (`/admin`), Studio
(`/studio`) und die Shopseiten rufen `seiteRahmen` unmittelbar auf und
sehen von diesem Abschnitt nichts.
WARUM NICHT AN DEN REGELN SELBST. Fast jede Regel, die hier
zurueckgenommen wird, steht auch in der Verwaltung: `.section__title`,
`.section__hint`, `.field label`, `.submit`, `.abtn`, `.top__mark`,
`.foot__link` und die ganze `.kp__`- und `.vw__`-Familie (Kellerpult und
Videowerk gibt es oeffentlich UND im Studio). Der Auftrag galt der
oeffentlichen Seite; die Verwaltung bleibt, wie sie ist.
DIE VIER MITTEL, DIE ZURUECKGENOMMEN WERDEN — und warum gerade diese:
1. Plakatschrift (Anton). Sie trug Seitentitel, Abschnittstitel,
Wortmarke oben und unten, Werkzeugnamen und den Absendeknopf.
2. Versalien und Sperrung. Gezaehlt am 2026-11-02 ueber die
oeffentlichen Klassen: 41 Regeln mit `text-transform:uppercase`,
61 mit `letter-spacing`.
3. Space Mono als BESCHRIFTUNG. Die Monoschrift bleibt — aber nur noch
fuer Werte, die laufen oder die man abschreibt: Laufzeit
(`.kp__zeit`), Zeichenzaehler (`.zeichen`), Hexwert (`.stil__hex`),
Bildzaehler (`.vw__zaehler`), Masse im Fliesstext (`.mass`) und die
E-Mail-Adresse im Fuss (`.foot__adresse`). Ein Wort wie „Titel" oder
„Cover" ueber einem Feld ist keines von beidem.
4. Flaechen, die nicht vom Inhalt kommen: das Korn ueber der ganzen
Seite und der cyanfarbene Block im Ansichtswechsel.
WAS BLEIBT, und das ist Absicht:
- die Farben des Betreibers. `design.css` setzt sie auf `:root`; dieser
Abschnitt fasst keine einzige Farbe an, die von dort kommt. Wer unter
„Design" etwas umstellt, sieht es weiterhin.
- der Akzent dort, wo er eine Aufgabe hat: Verweise, Fokusring,
Schreibcursor, die Regler des Kellerpults, die laufende Seite im
Ansichtswechsel.
- jede Trefferflaeche, jeder Kontrastwert, jede gemessene Breite. Dieser
Abschnitt aendert Schriftfamilie, Schreibweise, Sperrung, Schriftgrad
und vier Flaechen — keine Geometrie. Die Beschriftungen werden dabei
SCHMALER, nicht breiter: Space Mono mit 11 px und .16em Sperrung
braucht rund 8,4 px je Versalzeichen, Barlow Condensed mit 14 px rund
5,1 px je Zeichen. Die gemessenen Engstellen der Kopfleiste (320 px)
werden dadurch nicht enger.
============================================================ */
/* --- 1. Was ueber die Token schon erledigt ist ---------------
`--font-display` zeigt hier auf die Lesetype. Damit laufen alle zehn
Regeln, die eine Plakatschrift setzen, ohne weiteres Zutun in der
Hausschrift — und zwar in der, die der Betreiber unter „Design" gewaehlt
hat. Haette hier `'Barlow Condensed'` gestanden, waere die Schriftwahl der
Verwaltung fuer die oeffentlichen Seiten tot gewesen.
Die drei Ueberschriftenstufen ruecken zusammen. Der Seitentitel stand auf
bis zu 68 px in Versalien; gemessen auf 1166 px Fensterbreite lief er
ueber die volle Zeile und war das Lauteste auf dem Schirm. 38 px in
gemischter Schreibweise ist immer noch die groesste Schrift der Seite,
aber keine Plakatwand mehr.
`--zh-plakat` war .92 — ein Zeilenabstand fuer eng gesetzte Versalien.
Gemischte Schreibweise hat Unter- und Oberlaengen; bei .92 stiessen sie
bei einem zweizeiligen Titel aneinander.
`--t-marke` ist die Stufe der Beschriftungen und steckt in 13 Regeln.
11 px waren richtig fuer gesperrte Mono-Versalien; in einer schmalen
Lesetype in gemischter Schreibweise sind sie zu klein. Zwei dieser 13
Regeln sind die Nummer eines Abschnitts der Rechtstexte (`.legal h2 b`,
`.legal__index a b`): sie bleiben in Space Mono und wachsen mit auf
14 px - gewollt, weil sie neben einer 22-px-Ueberschrift stehen und bei
11 px wie ein Druckfehler aussaehen.
`--t-untertitel` steht hier NICHT. Es wird in dieser Datei nur von
`.statement blockquote` (Klasse gibt es nirgends mehr) und
`.overlay__title` gelesen, und Overlays entstehen nur bei `player:true` -
was keine oeffentliche Route mehr setzt. Ein Wert ohne Abnehmer sieht
aus wie eine Regel und ist eine Behauptung. */
body.oeffentlich{
--font-display:var(--font-body);
--t-plakat:clamp(27px,3vw,38px);
--t-titel:clamp(22px,2.2vw,28px);
--zh-plakat:1.15;
--t-marke:14px;
}
/* --- 2. Kein Korn ------------------------------------------
Ueber der ganzen Seite lag eine Rauschtextur (`body::after`, Deckung .22,
`mix-blend-mode:overlay`). Sie ist das Kennzeichen der Richtung
„Kellerdeck" und auf einer Seite, die schlicht sein soll, das erste, was
geht: sie faerbt JEDEN Buchstaben und jede Flaeche an, ohne dass man sie
benennen kann.
`content:none` und nicht `display:none`: ohne Inhalt entsteht das
Pseudoelement gar nicht erst. Die Verwaltung behaelt es. */
body.oeffentlich::after{content:none}
/* --- 3. Keine Versalien, keine Sperrung ---------------------
Eine Liste und keine 40 Einzelregeln, damit man an einer Stelle sieht,
was betroffen ist. `:is()` traegt die Spezifitaet seines staerksten
Arguments: `body.oeffentlich` ist 0-1-1, das staerkste Argument dieser
Liste ist 0-2-0 (`.afeld--stil .stil__gruppenname`, `.legal .stand`) —
die ganze Regel steht also bei 0-3-1. Nachgerechnet ueber die ganze
Datei: ausserhalb dieses Abschnitts setzt kein Selektor ueber 0-3-0
Schreibweise, Sperrung oder Familie, und auf keine der drei gibt es ein
`!important`. Bei Gleichstand gewinnt dieser Abschnitt, weil er am
Dateiende steht.
Die Pseudoelemente stehen unten getrennt: in `:is()` ist ein
Pseudoelement kein gueltiges Argument. */
body.oeffentlich :is(
.skip,.top__mark,.top__mark span,.views__btn,
.section__title,.section__hint,.section__hint--satz,
.section__untertitel,.untertitel__eigen,
.field label,.field__opt,.feld--wahl legend,.wahl__opt span,
.submit,.abtn,.note,.note--lesen,
.afeld label,.afeld--stil > legend,.afeld--stil .stil__gruppenname,.afeld__hint,
.welt__name,.welt__hinweis,
.kp__titel,.kp__formate,.kp__kette,.kp__sterne legend,.kt__kopf,
.vw__titel,.vw__untertitel,.vw__schritte,.vw__marke,.vw__hinweis,
.vw__tab thead th,.vw__tab tbody th,
.vw__vorschlag-wort,.vw__vorschlag-block summary,
.wkzusage__masse dt,
.legal .stand,.legal__index h2,
.foot__mark,.foot__link
){text-transform:none;letter-spacing:normal}
/* `.foot__plattform` stand hier und ist wieder draussen. Die Leiste haengt
an `shopAktiv`, und `werkRahmen` uebergibt immer `false` — sie entsteht
auf einer oeffentlichen Seite also nie. Ein Eintrag, der nichts trifft,
ist schlimmer als keiner: er haette bei einer Wiederbelebung des Shops
halb gegriffen (Schreibweise ja, Familie nein, weil die Grad-Liste
weiter unten ihn nicht kennt). */
/* Dieselbe Ruecknahme fuer die beiden Pseudoelemente — und zwar in ZWEI
Regeln, nicht in einer.
Eine Selektorliste ist nicht nachsichtig: kennt ein Browser eines ihrer
Glieder nicht, verwirft er die GANZE Regel. `::file-selector-button`
gibt es erst ab Chrome 89, Firefox 82 und Safari 14.1 — gekoppelt haette
ein aelterer Browser auch die Ruecknahme fuer `.vw__tab td::before`
verloren, und das ist auf dem Telefon die Spaltenbeschriftung der
Tabelle in der Arbeitsmappe (`content:attr(data-label)`, versal). Die
Dateiwahl faellt dort ohnehin aus, die Tabelle nicht. */
body.oeffentlich .vw__tab td::before{
text-transform:none;letter-spacing:normal;
}
body.oeffentlich .afeld input[type=file]::file-selector-button{
text-transform:none;letter-spacing:normal;
}
/* --- 4. Beschriftungen in der Lesetype ----------------------
Space Mono traegt oeffentlich nur noch Werte (siehe Kopf dieses
Abschnitts). Alles, was ein Wort ueber einem Feld, ein Reiter oder eine
Blockmarke ist, laeuft in der Hausschrift.
Der Grad: 14 px fuer alles, was fuer sich steht. Die Regeln, die
`--t-marke` benutzen, sind damit schon versorgt (Token oben); hier stehen
die mit fest eingetragenen 11 bis 13 px. */
body.oeffentlich :is(
.skip,.section__untertitel,.wahl__opt span,
.afeld--stil > legend,.afeld--stil .stil__gruppenname,
.kp__titel,.kp__formate,.kp__kette,.kp__sterne legend,.kt__kopf,
.vw__untertitel,.vw__schritte,.vw__vorschlag-wort,.vw__vorschlag-block summary,
.wkzusage__masse dt,.foot__link
){font-family:var(--font-body);font-size:14px}
/* `.field__opt` ist das Woertchen „optional" NEBEN einer Beschriftung und
steht deshalb nicht in der Gruppe darueber: es soll kleiner bleiben als
das Wort, zu dem es gehoert. 10 px waren es, solange es gesperrt war;
ohne Sperrung in einer schmallaufenden Lesetype war es der kleinste Text
aller oeffentlichen Seiten. 12 px neben 16 px Beschriftung. */
body.oeffentlich .field__opt{font-size:12px}
/* Die Dateiwahl: ihre Schaltflaeche zeichnet der Browser, beschriftet wird
sie von hier. */
body.oeffentlich .afeld input[type=file]::file-selector-button{
font-family:var(--font-body);font-size:14px;
}
/* Die Tabelle der Arbeitsmappe bleibt eine Spur kleiner als die uebrigen
Beschriftungen: ihre Kopfzeile steht in einer Zeile mit bis zu fuenf
Spalten, und 14 px haetten dort einen Umbruch erzwungen, den es vorher
nicht gab. 13 px sind immer noch groesser als die 11 px von vorher. */
body.oeffentlich :is(.vw__tab thead th,.vw__tab tbody th){
font-family:var(--font-body);font-size:13px;
}
body.oeffentlich .vw__tab td::before{font-family:var(--font-body);font-size:13px}
/* Die Plakette neben der Wortmarke (`seite_zusatz`). Sie bleibt klein — sie
ist ein Zusatz zur Marke und nicht ihr zweiter Teil —, aber sie laeuft
nicht mehr in gesperrtem Mono und traegt nicht mehr den Akzent: in einer
Kopfleiste, die sonst nur Schwarz, Weiss und Grau zeigt, war das einzige
farbige Element ausgerechnet das unwichtigste. */
body.oeffentlich .top__mark span{
font-family:var(--font-body);font-size:11px;color:var(--grey);
}
/* --- 5. Kopfleiste und Fusszeile ---------------------------
Die Wortmarke: Hausschrift statt Anton, gemischte Schreibweise, fester
Grad. Das `clamp()` reichte bis 19 px und war auf die Versalhoehe von
Anton gerechnet.
Die Milchglasflaeche faellt mit: `backdrop-filter:blur(6px)` ueber einer
zu 94 Prozent deckenden Flaeche ist ein Effekt, den man nur bemerkt, wenn
gerade Text darunter durchlaeuft. Die undurchsichtige Flaeche dafuer gibt
es bereits — sie wird unter 900 px ohnehin benutzt (siehe `.top` dort). */
body.oeffentlich .top{
backdrop-filter:none;background:var(--flaeche-oben-fest);
}
body.oeffentlich .top__mark{font-size:17px}
body.oeffentlich .foot__mark{font-size:17px}
/* Die beiden Engerstellungen fuer schmale Geraete mussten mitgezogen
werden. `.top__mark` in einem @media-Block steht bei 0-1-0, die Regel
eine Zeile hoeher bei 0-2-1 — ein Media-Block erhoeht die Spezifitaet
nicht. Ohne diese zwei Regeln stuende die Wortmarke oeffentlich bei
320 px auf denselben 17 px wie bei 1760 px; gemessen wuchs die klebende
Kopfleiste dadurch von 144 auf 152 px, waehrend `--kopf-h` weiter mit
118 px rechnet und jedes Sprungziel entsprechend tiefer unter der Leiste
landete. Die Grade sind die alten plus zwei: Barlow Condensed laeuft
schmaler als Anton und traegt bei gleicher Hoehe mehr Zeichen. */
@media (max-width:560px){
body.oeffentlich .top__mark{font-size:15px}
}
@media (max-width:420px){
body.oeffentlich .top__mark{font-size:14px}
}
/* Der Ansichtswechsel.
------------------------------------------------------------
Die Leiste BLEIBT eine Leiste aus Segmenten mit Rand: ihre Masse sind auf
320 px gemessen (vier Werkzeuge, ab 720 px abwaerts ein Raster aus zwei
mal zwei), und daran soll dieser Abschnitt nichts aendern.
Was geht, ist die Flaeche der laufenden Seite. Sie war der Akzent in
voller Saettigung — ein cyanfarbener Block in der Kopfleiste jeder
oeffentlichen Seite, das groesste farbige Feld, das die Seite hatte.
ERSTER ANLAUF, VERWORFEN: gedeckte Flaeche plus Linie im Akzent. Die
gedeckte Flaeche ist dieselbe, die `:hover` schon traegt (#212121 gegen
#131313 der Leiste: 1,15:1, also praktisch keine) — beim Zeigen auf
einen Nachbarn sahen zwei Segmente bis auf 2 px gleich aus, und im Fokus
war der Unterschied ganz weg.
JETZT drei Merkmale, von denen zwei keine Farbe sind: die Flaeche, die
2-px-Linie am unteren Rand im Akzent UND der halbfette Schnitt. Der
Schnitt ist der entscheidende: er unterscheidet die laufende Seite auch
dann vom ueberfahrenen Nachbarn, wenn beide dieselbe Flaeche tragen, und
auch im Fokus, wo beide denselben Ring haben. Der 600er-Schnitt der
Lesetype liegt im Schriftenordner und wird ohnehin ausgeliefert. */
body.oeffentlich .views__btn[aria-current="page"],
body.oeffentlich .views__btn[aria-selected="true"],
body.oeffentlich .views__btn[aria-current="page"]:hover,
body.oeffentlich .views__btn[aria-selected="true"]:hover{
background:var(--feld-flaeche-zeige);color:var(--white);
font-weight:600;
box-shadow:inset 0 -2px 0 var(--akzent-text);
}
/* Der Fokusring des laufenden Segments stand auf `--auf-akzent` — dem
Gegenton der Akzentflaeche, also im dunklen Modus Schwarz. Das war
richtig, solange die Flaeche cyan war; auf der gedeckten Flaeche von
eben waere ein schwarzer Ring unsichtbar (gemessen 1,1:1). Zurueck auf
den gewoehnlichen Ring, und wie bei jedem anderen Segment INNERHALB
(`-3px`, siehe `.views__btn:focus-visible` weiter oben): die Segmente
stossen aneinander, ein Ring nach aussen liefe ueber den Nachbarn.
Welches Segment das laufende ist, sagt im Fokus der halbfette Schnitt.
0-4-1 gegen 0-3-0 der Regel weiter oben. */
body.oeffentlich .views__btn[aria-current="page"]:focus-visible,
body.oeffentlich .views__btn[aria-selected="true"]:focus-visible{
outline-color:var(--akzent-text);outline-offset:-3px;
}
/* --- 6. Der Absendeknopf -----------------------------------
Er bleibt die volle helle Flaeche — er ist das, was die Seite tut, und
davon gibt es genau einen je Formular. Was geht, ist die Plakatschrift in
Versalien: aus „COVER ERSTELLEN" in Anton mit 22 px wird „Cover
erstellen" in der Hausschrift mit bis zu 19 px. Die Trefferflaeche
(`--feld-h`, Polster) ist unberuehrt. */
body.oeffentlich .submit{font-size:clamp(16px,1.4vw,19px)}
/* --- 7. Beschriftungen, deren Grad schon ueber `--t-marke` kommt ---
Abschnitt 1 setzt das Token;
hier fehlt nur noch die Familie. Getrennt von der Gruppe darueber, damit
niemand einen festen Grad hineinschreibt, der die Stufe aushebelt.
NICHT dabei und bewusst in Space Mono geblieben: `.legal h2 b` und
`.legal__index a b` — die Nummer eines Abschnitts der Rechtstexte. Sie ist
eine Marke mit gleich breiten Ziffern, und darunter steht eine Spalte von
sechzehn Nummern, die fluchten soll. */
body.oeffentlich :is(
.views__btn,.section__hint,.field label,.feld--wahl legend,
.afeld label,.abtn,.legal .stand,.legal__index h2
){font-family:var(--font-body)}
/* --- 8. Nachtrag: was erst das Browser-Skript erzeugt ------
Die Liste in Abschnitt 3 ist aus dem MARKUP der Vorlagen gewonnen. Drei
Beschriftungen des Kellerpults stehen dort nicht, weil sie erst im
Browser entstehen (`public/kellerpult.js` setzt `className`) - und genau
deshalb standen sie nach dem ersten Durchgang noch in gesperrten
Mono-Versalien, waehrend alles um sie herum schon schlicht war. Gesehen
in der oertlichen Vorschau, nicht erschlossen.
Wer hier etwas ergaenzt: die Klassen der oeffentlichen Seiten stehen
NICHT nur in `src/views/` - `public/kellerpult.js` und
`public/videowerk.js` bauen Oberflaeche nach.
.kp__gruppentitel Gruppe innerhalb eines Blocks ("Eingang",
"Kompressor"). Der Strich dahinter bleibt - er ist
die Gliederung, nicht die Schreibweise.
.kp__berichtkopf Ueberschrift der Rueckmeldung des Assistenten.
Verliert zugleich den Akzent als Textfarbe: eine
Ueberschrift ist kein Verweis.
.kp__stufe Die beiden Schalter je Zeile ("etwas", "viel").
Ihr gewaehlter Zustand bleibt die volle Akzent-
flaeche - er muss aus zwei Metern zu sehen sein,
und ein Bedienelement ist kein Schmuck. */
body.oeffentlich :is(.kp__gruppentitel,.kp__berichtkopf,.kp__stufe){
font-family:var(--font-body);font-size:13px;
text-transform:none;letter-spacing:normal;
}
body.oeffentlich .kp__gruppentitel{font-size:14px}
body.oeffentlich .kp__berichtkopf{font-size:14px;color:var(--white)}
/* Die Blockmarken des Kellerpults und der Kontaktseite ("Datei",
"Signalkette", "Export") trugen den Akzent als Textfarbe. Auf einer
Werkzeugseite sind das bis zu fuenf cyanfarbene Zeilen untereinander -
dieselbe Ueberlegung wie bei den vier Werkzeugnamen auf der Startseite:
ein Akzent, der fuenfmal gleichzeitig dasteht, ist keiner mehr. Die Linie
unter der Marke bleibt und traegt die Gliederung weiter. */
body.oeffentlich :is(.kp__titel,.kt__kopf){color:var(--white)}
/* Die Rueckmeldung ueber der Dateiwahl ist ein SATZ ("Datei gelesen,
3:12 lang") und lief in Space Mono mit 12,5 px. Dieselbe Entscheidung wie
am 2026-10-24 bei `.formstate`: eine Rueckmeldung ist Prosa. */
body.oeffentlich .ameldung{
font-family:var(--font-body);font-size:var(--t-klein);
}
/* --- 9. Die Beschriftungen der Messlisten -------------------
`.kp__analyse` ist die Liste unter der Dateiwahl („Spitze zwischen den
Abtastwerten: -0.4 dBTP") und dieselbe Klasse noch einmal unter dem
Export („Format", „Groesse", „Ziel war"). Die Monoschrift sitzt dort am
BEHAELTER, also am `dl` — und damit erbten die `dt` sie weiter, obwohl
der ganze Abschnitt hier genau das zuruecknehmen soll. Die Klasse selbst
steht im Markup, nur die Beschriftungen entstehen erst im Browser
(`public/kellerpult.js`, `createElement('dt')`), weshalb sie beim ersten
Durchgang durchs Raster gefallen sind.
Die `dd` bleiben unberuehrt: das sind Messwerte, und sie brauchen die
gleich breiten Ziffern, die `.kp__analyse` mitbringt.
14 px gegen 12 px am Wert ist kein Versehen: Barlow Condensed laeuft
schmaler als Space Mono, bei gleichem Grad saehe die Beschriftung
kleiner aus als ihr Wert. */
body.oeffentlich .kp__analyse dt{
font-family:var(--font-body);font-size:14px;
}
/* --- 10. Ein Schnitt fuer die Ueberschriften ----------------
Mit der Plakatschrift ist auch ihr einziger Schnitt gegangen. Anton,
Archivo Black und Bebas Neue gibt es nur in 400 — eine Ueberschrift
unterschied sich dort durch die FAMILIE vom Text, und `font-weight:400`
an `.section__title` war deshalb richtig. Oeffentlich ist die Familie
jetzt dieselbe wie im Fliesstext, und damit trug die Hierarchie allein
die Groesse: `.wk__ueberschrift` mit 21 px gegen 16,5 px Fliesstext, ein
Schritt von 1,27 — zu wenig fuer eine Ueberschrift.
600 und nicht fett: die Lesetype jedes der sechs Schriftpaare bringt
einen halbfetten Schnitt mit, der ohnehin ausgeliefert wird (Barlow
Condensed 600, Inter 600, Lora 600, Work Sans 600, Space Grotesk 700 —
der Browser nimmt den naechstliegenden, es wird also nichts gerechnet
gefettet). `.legal h2` benutzt 600 seit jeher, das ist dieselbe Stufe.
NICHT dabei: `.wk__name`. Der Werkzeugname ist ein Verweis und traegt
schon eine Unterstreichung; halbfett dazu waere die dritte Auszeichnung
an derselben Zeile. */
body.oeffentlich :is(.section__title,.section__untertitel,.wk__ueberschrift,.vw__titel){
font-weight:600;
}