Rename Sommer/Winter to Sommerräder/Winterräder, reflow Reifen tile headline

The tile headline now reads "Sommerräder"/"Winterräder" and renders as an
actual headline (new .tile-headline class, 20px/var(--fg)) instead of the
small muted .label styling used for other in-tile section titles.

Headline + km now sit above "Montiert" instead of the wheel photo
overlaying it: new .radkopf-row (flex) puts headline/km and the photo
side by side at the tile's top; Montiert dropped position:absolute (no
longer needed once the photo stopped sharing its space) and is now a
normal-flow pill below the headline block.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-08-16 21:00:47 +02:00
co-authored by Claude Opus 5
parent ec55e5808e
commit 8b3e5b2b8f
5 changed files with 88 additions and 32 deletions
@@ -2330,9 +2330,16 @@ function vReifen() {
const t = r[k], aktiv = r.aktiv.toLowerCase() === k;
const radDatei = `rad-${k}.webp`;
const radLabel = k === "sommer" ? "Sommerrad" : "Winterrad";
const satzLabel = k === "sommer" ? "Sommerräder" : "Winterräder";
return `<div class="tile">
<div data-bildklick="${radDatei}">
${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")}
<div class="radkopf-row">
<div class="radkopf">
<span class="tile-headline">${satzLabel}</span>
<div class="fig" style="font-size:32px;margin-top:14px">${t.km != null ? de(t.km) : ""}<span class="unit">km</span></div>
</div>
<div data-bildklick="${radDatei}">
${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")}
</div>
</div>
<input type="file" accept="image/*" hidden data-bildupload="${radDatei}">
${bildMenuOffen === radDatei ? `
@@ -2342,10 +2349,6 @@ function vReifen() {
<button type="button" class="loeschen" data-bildloeschen="${radDatei}">Löschen</button>
</div>` : ""}
<button data-satz="${k === "sommer" ? "Sommer" : "Winter"}" class="montiert ${aktiv ? "on" : ""}">Montiert</button>
<div class="radkopf">
<span class="label">${k === "sommer" ? "Sommer" : "Winter"}</span>
<div class="fig" style="font-size:32px;margin-top:14px">${t.km != null ? de(t.km) : ""}<span class="unit">km</span></div>
</div>
<div style="margin-top:22px">
${feld(k, "marke", "Hersteller")}
${feld(k, "modell", "Modell")}