File: approaches/C/index.html (fragment:
<title>, viewport meta, <style>,
markup, <script>; opens as file:// and publishes as
an artifact). Scope: Motorspritze panel (MS 4) and Tanklöschfahrzeug
panel (TLF 2), side by side on desktop, stacked on phone, light and
dark. Status 2026-10-10: static mockup, every number hard-coded from the
screenshots; no engine, no maths. QA round 1 fixes applied: comparison
bar redrawn as a labelled scale and hidden in state «none» (A6 / A9);
Pendelbetrieb card delivered expanded (B21 + card).
font-variant-numeric: tabular-nums on every numeral.:root, dark set
under prefers-color-scheme: dark and
[data-theme="dark"]): --accent teal = selected
/ active control; --ok green = ok; --warn
orange = attention (required > set); --crit red =
critical (reserved: null read-out, empty tank); --neutral
grey = off / no state. State colours never double as accent.| # | Element (verbatim label) | Original format | Spielbrett control | Range · step · precision · unit | Touch | Keyboard | State colours |
|---|---|---|---|---|---|---|---|
| C1 | Panel title «Löschwasser» · × | bold title, × at right, hairline | Title row of the panel head; × as a 44 pt key | — | tap × closes the panel | Esc (when the panel has focus) | — |
| C2 | Tabs Details · Werkzeuge · Netzwerk · Warnungen (red count badge) | text tab strip, teal underline, red circle badge | Mode cards: 2 × 2 grid of icon + sentence-case label cards; selected card teal outline + teal tint; the Warnungen card prints the count as a plain 20 pt numeral beside its icon and takes the orange outline (red when a critical warning exists). No underline, no circle. | count = live warning count (3 in the 8-bar state, 2 in the 12-bar state) | tap selects a view | arrows move between cards, Enter selects, Ctrl+1…4 | outline orange / red by severity; selected = accent |
| C3 | Section headers (small-caps grey uppercase) | letter-spaced uppercase labels | Card titles: each section is a card; title 16 pt bold sentence case top-left, state chip top-right where one exists (Pendelbetrieb: «inaktiv (stationär)») | verbatim text | — | — | — |
| C6 / A1 / B1 | Header: glyph tile · «MS 4» · «Motorspritze | 559 m ü. M.» | coloured square/rect tile, bold name, grey subtitle | Header card: bubble (92 pt) with the 3-D piece (Motorspritze on its frame / red TLF, one isometric family), the standard symbol stamped small at the bubble's foot, a 4 pt state ring; name 26 pt; type and altitude as chips («Motorspritze» · «559 m ü. M.»); on the TLF a third chip «100 %» (tank) with a green dot | altitude whole m ü. M. | — | — | ring green = Pumpe in Betrieb and no attention · orange = required > set (TLF 8-bar state) · grey = pump off · red = critical (null read-out) |
| A2 / B2 | Pumpentyp | native <select>, caret, text truncated |
Picker row (deviation from the map's [K] card rail, see §3): full-width row, label left, current value right-aligned 18 pt bold (wraps to two lines, never truncated), «›» disclosure. Tap/Enter expands the list in place (radio mark on the current row, two-line rows: class name / «1600 l/min, 8 bar»); on phone the same list as a bottom sheet. Narrow panels (< 500 pt) stack label above value. | one of ~6 classes (list from the engine) | tap row opens, tap an option selects and closes | Enter opens, ↑/↓ move, Enter selects, Esc closes, typing a letter jumps | selected row accent radio |
| A3 / B3 | Pumpe in Betrieb | iOS-style pill toggle | Two-button pair «In Betrieb» · «Aus» (wording of the off side: owner): two adjoining outlined 56 pt buttons; the active one filled accent with a check glyph. The header bubble's ring follows (grey when off). | on / off | 1 tap | ←/→ moves, Space/Enter sets | active = accent fill; ring green / grey |
| A4 / B4 | Ausgangsdruck (input) | horizontal range slider, round thumb, «8.0 bar» text | Stepper with preset chips: 32 pt value «8.0 bar» between 56 pt «−» / «+» keys (0.1 per tap, long-press accelerates), chip row «6 · 8 · 10 · 12 bar» beneath; the chip matching the set value is highlighted. Tap the value for typed entry. | 0–16 bar · 0.1 · one decimal · bar; presets 6 / 8 / 10 / 12 | 10 bar = 1 tap on chip «10»; fine-tune 0.1 per tap | ←/→ ±0.1, Shift ±1.0, Home/End 0/16, PgUp/PgDn next/previous chip, digits = typed entry | selected chip accent outline + tint |
| A5 / B5 | Eingangsdruck · 7.5 bar / 0.0 bar | grey KPI tile, green number | Instrument chip «Eingangsdruck 7.5 bar» with a green dot; a negative value keeps the minus and gets an orange dot | bar · 0.1 · may be negative | — | — | dot green ok / orange negative |
| A6 / B6 | Ausgangsdruck (read-out) · 8.0 / 12.0 bar | KPI tile, green | Comparison chip (left) «Ausgangsdruck 8.0 bar», 28 pt numeral, green left rule; this is the engine read-out (max(set, inlet)). When read-out ≠ set, the set pointer on the comparison scale (A9) sits apart from the read-out and the chip prints the read-out. Null (KEIN_ZULAUF): chip prints «–», rule red, header ring red. | bar · 0.1 | — | — | rule green / red |
| A9 / B9 | Erforderliche Einstellung · – / 8.8 bar / 12.0 bar | KPI tile; tofu dash; orange or green number | Comparison chip (right) «Erforderliche Einstellung 8.8 bar», 28 pt; left rule orange when required > set, green when ≤ set (prints the clamped 12.0), grey with «–» when the pump governs no nozzle. Comparison scale between the two chips (beside them in a wide panel, beneath them in a narrow one): a 2 pt hairline rail drawn as a ruler, labelled stops «0 · 4 · 8 · 12 · 16» each with a 12 pt tick crossing the rail (numerals 13 pt muted, no unit on the stops: both chips and the delta print «bar»); a filled triangular gauge pointer above the rail at the required value (orange, green when ok), a filled accent gauge pointer below the rail at the set value, a 6 pt orange band on the rail from set to required when required > set, and the delta «+0.8 bar» printed above the required pointer (green «+0.0 bar» when ok; the two pointers then face each other at the same stop). State none (the pump governs no nozzle): the scale is not drawn at all, the row shows only the two chips and the right chip prints «–» with a grey rule. Not a slider: no thumb on the track, no fill from zero, no drag, nothing to grab; the rail only exists while there is a required value to compare against. | bar · 0.1; delta = required − set | read-only | read-only | orange attention / green ok / grey none |
| A7 / B7 | Ist-Durchfluss · 400 / 800 l/min | KPI tile, green | Instrument chip «Ist-Durchfluss 400 l/min», green dot | whole l/min | — | — | dot green |
| A8 / B8 | Max. Leistung · 1'600 / 2'366 / 1'549 l/min | KPI tile, black, no grouping | Instrument chip «Max. Leistung 1'600 l/min», no dot | whole l/min; follows class and set pressure | — | — | neutral |
| A10 / B10 | Leistungsreserve · 1'200 / 1'566 / 749 l/min | KPI tile | Instrument chip «Leistungsreserve 1'200 l/min», no dot | whole l/min = Max − Ist | — | — | neutral |
| B11 | Wasserbezug der Pumpe | native <select>, truncated |
Picker row, same component as A2 (deviation from the map's segmented control, see §3); value «aus eigenem Tank (Zulauf …)» | list of ≥ 2 sources (texts from the engine) | 1–2 taps | as A2 | — |
| B12 | Tankinhalt · 2'400 l | borderless number, unit «l» floated far right | Stepper «2'400 l» with «−100» / «+100» keys and chips «1'800 l · 2'400 l» (observed sizes; full chip list from the owner); typed entry unbounded above | whole l · ≥ Füllstand · unbounded above | 1 tap chip or typed | ↑/↓ ±100, Shift ±1'000, digits typed | selected chip accent |
| B13 | Füllstand · 2'400 l | as B12 | Stepper ±100 l with chips «0 % · 50 % · 100 %» computed from Tankinhalt; the fill ring (B15) follows | whole l · 0 … Tankinhalt | 1 tap | as B12 | selected chip accent |
| B14 | Befüllung max. · 400 l/min | as B12, unit «l/min» | Stepper ±50 l/min with chips «400 · 800 l/min» (observed; list from the owner); typed entry unbounded | whole l/min · unbounded above | 1 tap | ↑/↓ ±50, Shift ±500 | selected chip accent |
| B15 | Tank fill «2400 / 2400 l (100%)» | flat teal progress bar with compound string | Fill ring: 176 pt donut, 14 pt stroke, «Füllstand» label, «100 %» at 32 pt inside; the litre values are the two steppers directly beneath (B12, B13), so the compound string is never printed and no duplicate chips are needed. Ring colour green; orange ≤ 25 %, red ≤ 10 % (thresholds for the owner). | Füllstand / Tankinhalt, whole % | read-only | read-only | green / orange / red |
| B16 | Leer in · 06:00 | grey text at the right end of the bar | Countdown inside the ring: «Leer in 06:00» under a hairline beneath the %. State rule: net < 0 → mm:ss · Füllstand 0 and net < 0 → «00:00» · net ≥ 0 → «–» (optionally «Voll in mm:ss», wording: owner) · pump off → «–». The ring empties with the simulation. | mm:ss | read-only | read-only | text follows the ring colour |
| B17 / C5 | Simulation «▶ Start» · «Tempo: 1x» · «11:18» (inside the tank card) | outlined button, native select, boxed clock, in-panel | One floating simulation bar at the bottom centre (global for the module, never per object): Start / Pause as a two-segment control (active segment = current mode), Tempo as a cycling chip (tap = next value, long-press = list sheet; values from the engine, only «1x» observed), clock chip «11:18». Bottom padding on the page keeps the last card clear of the bar. | Start/Pause toggle · Tempo list · mm:ss | 1 tap | Space = Start/Pause, ←/→ = Tempo | active segment accent |
| B18 | Pendelbetrieb aktiv | pill toggle, off | Two-button pair «Aktiv» · «Aus» (wording: owner) inside the Pendelbetrieb card; the card's status chip follows | on / off | 1 tap | ←/→, Space | active = accent |
| B19 | Umlaufzeit · 15 min | number, unit far right | Stepper ±1 min with chips «10 · 15 · 20 · 30 min» (15 observed; the other three are a proposal for the owner's list); floor 1 (0 refused), unbounded above; typed entry | whole min · ≥ 1 | 1–2 taps | ↑/↓ ±1, Shift ±5 | selected chip accent |
| B20 | Abladeleistung max. · 800 l/min | number, unit far right | Stepper ±50 l/min with chips «400 · 800 l/min», component of B14 | whole l/min · unbounded above | 1 tap | as B14 | selected chip accent |
| B21 | Status «PENDELBETRIEB AKTIV» · «inaktiv (stationär)» | grey status card, small-caps label | State chip in the Pendelbetrieb card's title row: grey «inaktiv (stationär)»; green when active (active text from the engine) | two states | — | — | grey off / green on |
| B21 + card | Section «Pendelbetrieb (Wassertransport im Kreisverkehr)» | section header + rows | Collapsed card that expands
(<details>): collapsed it shows the title, the state
chip and two summary chips «Umlaufzeit 15 min» · «Abladeleistung max.
800 l/min», so every number stays visible; expanded it shows the pair
(B18) and the two steppers (B19, B20) and hides the summary chips (the
steppers print the same numbers). Product rule: collapsed by
default while Pendelbetrieb is off, expanded while it is on.
The mockup renders it expanded (open
attribute) so the pair and both steppers can be judged at rest without a
click. |
— | tap the title row | Enter/Space toggles | — |
| A11 / B22 / C4 | Entfernen | pale-red button bottom-left | Overflow menu: «…» key (44 pt) at the right of the header card opens a small menu whose last row is «Entfernen» in red with a trash glyph; nothing red is visible at rest. Two taps by design; on phone additionally swipe-left on the object's card in the Netzwerk strip. | removes the object | 2 taps | Enter opens, ↓ to the row, Enter, Esc cancels | menu row red text |
data-theme).open) so that B18, B19 and B20 render at rest
(page contract: all content visible on load); the coder implements the
collapsed-while-off rule, not the mockup's open.