diff --git a/design/DataMetric360 Board.dc.html b/design/DataMetric360 Board.dc.html new file mode 100644 index 0000000..74938ac --- /dev/null +++ b/design/DataMetric360 Board.dc.html @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + +
+ +
+
+
Audi CI · Smartphone und großer Bildschirm
+
Dieselbe App, zwei Größen
+
+
+ + + +
+ + + +
+
+ +
+
+
+ Smartphone + 402 px · Tab-Leiste unten +
+ + + +
+ +
+
+ Großer Bildschirm + 1280 px · Navigation seitlich ab 860 px +
+
+ +
+
+
+
+ + + + + diff --git a/design/README.md b/design/README.md index b4c9fe7..4d521f0 100644 --- a/design/README.md +++ b/design/README.md @@ -13,6 +13,11 @@ Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später i |---|---| | `DataMetric360.dc.html` | Einstiegsdatei des Entwurfs | | `DM360.dc.html` | Die eigentlichen Bildschirme und Zustände | +| `DataMetric360 Board.dc.html` | Vergleichsansicht: dieselbe App gleichzeitig als Smartphone- und Großbildschirm-Rahmen nebeneinander, mit Bildschirm-/Theme-Umschalter. Steuert beide Rahmen per `postMessage`. | +| `dm360-host.html` | Lädt `audi-dashboard-app.js` in einem eigenen ``, hängt danach `audi-dashboard-ios.css` in dessen Shadow-Root - der eigentliche Träger hinter dem Board. | +| `ios-frame.jsx` | iOS-26-Gerätekachel (Statusleiste, Dynamic Island, Home-Indikator) - reine Optik, keine App-Logik. | +| `audi-dashboard-ios.css` | **Die eigentliche Neuerung dieses Exports.** Optik-Auflage über `audi-dashboard.css`: iOS-natives Erscheinungsbild (44-px-Zeilen, transluzente Tab-Leiste, iOS-Schalter) plus - wichtig - die responsive Großbildschirm-Umsetzung per `@container (min-width:860px)` (Tab-Leiste wird zur seitlichen Navigation). Nach eigener Aussage der Datei rein additiv, rührt `audi-dashboard.css` und die App-Logik nicht an. **Nicht verifiziert, ob das zutrifft** - noch nicht in `homeassistant/www/` scharf geschaltet. | +| `datametric360-ios.css` | Dieselbe Optik-Auflage, aber für die `@audi-dash/ui`-Komponentenklassen (`.ads-*`) statt für die Panel-eigenen Klassen - für später, wenn `companion-app/` eine UI bekommt. | | `support.js` | Hilfsfunktionen des Entwurfs | | `assets/` | Icons, Logos, Typenschilder und Schriften, die der Entwurf verwendet | | `uploads/` | Rohdateien, die ins Design-Projekt hochgeladen wurden (Schriften, Ringe, alle RS-/S-Typenschilder) | @@ -20,8 +25,9 @@ Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später i ## Stand dieses Exports -Heruntergeladen am 2026-08-11. Zwei bekannte Abweichungen, die im Design-Projekt bereits als Korrektur -beauftragt, in *diesem* Export aber noch nicht enthalten sind: +Heruntergeladen am 2026-08-11 direkt per Claude-Design-MCP (nicht per ZIP). Zwei bekannte Abweichungen, +die im Design-Projekt bereits als Korrektur beauftragt, in *diesem* Export aber noch nicht enthalten +sind: 1. **Falsches Modell:** zeigt „Audi RS 6 Avant" mit RS-6-Typenschild. Richtig ist der **RS 4 Avant competition** (siehe `../SPECIFICATION.md` §1). @@ -31,6 +37,16 @@ beauftragt, in *diesem* Export aber noch nicht enthalten sind: Kfz-Steuer, Reifen, Fahrt-Detail, Tankvorgang-Detail sowie deutlich umfangreichere Einstellungen) - vollständige Liste in `../SPECIFICATION.md` §3. +**Drittens, neu und wichtig:** das im Board-Entwurf verwendete `audi-dashboard-app.js` weicht vom +tatsächlich in `../homeassistant/www/` laufenden Stand ab (641 Zeilen Unterschied im Diff). Der +Design-Entwurf scheint auf einem älteren Stand aufzusetzen und enthält nicht alle seither gemachten +Anpassungen - u. a. fehlen die Vier-Kacheln-Kurzwahl auf der Übersicht (Fahrzeugstatus/Service/ +Reifen/Tanken), die füllstandsabhängige Balkenfarbe und die Resttank-in-Liter-Angabe. **Deshalb wurde +nur `audi-dashboard-ios.css` übernommen (reine CSS-Auflage, keine Logik) - `audi-dashboard-app.js` +selbst wurde NICHT aus diesem Export übernommen**, um diese bereits fertigen Funktionen nicht zu +verlieren. Bevor diese Auflage produktiv geschaltet wird, muss geklärt werden, ob/wie sie mit dem +aktuellen `audi-dashboard-app.js` zusammenpasst. + Dieser Ordner wird beim nächsten Export komplett ersetzt. ## Markenrechtlicher Hinweis diff --git a/design/datametric360-ios.css b/design/datametric360-ios.css new file mode 100644 index 0000000..fa52b28 --- /dev/null +++ b/design/datametric360-ios.css @@ -0,0 +1,105 @@ +/* ================================================================== + iOS-Auflage für die Design-System-Komponenten (AudiDashUI) im Board. + Gleiche Sprache wie audi-dashboard-ios.css für die echte App: Audi CI in + iOS-Form — 44-px-Zeilen, gruppierte Kacheln, transluente Tab-Leiste, + iOS-Schalter und -Segmente, gefüllte Aktionsknöpfe. + Wird nach dem Design-System-Bundle geladen, ändert dieses nicht. + ================================================================== */ + +.ads-root{ + --ios-tint:#F50537; + --ios-grau:#8E8E93; + --ios-fill:rgba(120,120,128,.24); + --ios-sep:rgba(255,255,255,.13); + --r-tile:16px; + --canvas:#0C1014; + --tile:rgba(255,255,255,.055); + --tile-2:rgba(255,255,255,.10); + --tile-deckend:#171B21; + --line:rgba(255,255,255,.13); + --line-strong:rgba(255,255,255,.24); + --fg:#FFFFFF; --fg2:#BFC4CC; --fg3:#8E8E93; + --ok:#30D158; --warn:#FFD60A; --bad:#FF453A; +} +.ads-root[data-theme="tag"]{ + --ios-sep:rgba(60,60,67,.16); + --ios-fill:rgba(120,120,128,.16); + --canvas:#F2F2F7; + --tile:#FFFFFF; + --tile-2:#EFEFF4; + --tile-deckend:#FFFFFF; + --line:rgba(60,60,67,.13); + --line-strong:rgba(60,60,67,.24); + --fg:#000000; --fg2:#3C3C43; --fg3:#8E8E93; + --ok:#34C759; --warn:#FF9F0A; --bad:#FF3B30; +} + +/* Beschriftungen: iOS-Gruppenüberschrift statt Sperrschrift */ +.ads-eyebrow,.ads-label{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--fg3)} +.ads-title{font-size:22px;letter-spacing:-.01em} + +/* Kacheln und Listen */ +.ads-tile{padding:16px 18px;margin-bottom:14px} +.ads-tile--flat{padding:0} +.ads-row{min-height:44px;padding:11px 0;border-bottom:1px solid var(--ios-sep)} +.ads-row dt,.ads-row__k{font-size:16px;color:var(--fg)} +.ads-row dd,.ads-row__v{font-size:16px;color:var(--fg2)} +.ads-leaf{border-bottom:1px solid var(--ios-sep)} +.ads-leaf__k{font-size:16px} +.ads-leaf__v{font-size:15px} +.ads-acc-h{border-bottom:1px solid var(--ios-sep)} +.ads-acc-h__k{font-size:16px} +.ads-acc-h__v{font-size:12.5px} +.ads-chev,.ads-tile__go{stroke:var(--ios-grau);stroke-width:1.6} +.ads-feld{min-height:44px;border-bottom:1px solid var(--ios-sep)} +.ads-feld input,.ads-feld select{background:transparent;border:0;font-size:16px} +.ads-feld input:focus,.ads-feld select:focus{background:var(--ios-fill)} +/* Die Wischzeile muss das Löschen-Feld darunter verdecken */ +.ads-swipe-content{background:var(--tile-deckend)} + +/* Bedienelemente */ +.ads-action{border:0;border-radius:14px;padding:15px;background:var(--ios-tint);color:#fff; + font-size:16px;font-weight:400;letter-spacing:0;text-transform:none} +.ads-action:hover:not(:disabled){border-color:transparent;filter:brightness(1.08)} +.ads-action--destructive{background:var(--ios-fill);color:var(--bad);border:0} +.ads-action--destructive:hover:not(:disabled){background:var(--bad);color:#fff;filter:none} + +.ads-seg{gap:0;padding:2px;background:var(--ios-fill);border-radius:9px} +.ads-seg button{border:0;border-radius:7px;padding:7px 10px;font-size:13px;letter-spacing:0; + text-transform:none;color:var(--fg2)} +.ads-seg button.ads-seg__on{background:var(--tile-2);color:var(--fg);border-color:transparent} + +.ads-switch{width:51px;height:31px} +.ads-switch__track{background:var(--ios-fill);border:0} +.ads-switch__track::before{left:2px;top:2px;width:27px;height:27px} +.ads-switch input:checked+.ads-switch__track{background:var(--ios-tint);border-color:transparent} +.ads-switch input:checked+.ads-switch__track::before{transform:translateX(20px)} + +.ads-pill{border:0;background:var(--ios-fill);color:var(--fg2);font-size:12px; + letter-spacing:.01em;text-transform:none;padding:5px 11px} +.ads-pill--work{background:rgba(245,5,55,.16);color:var(--ios-tint);border-color:transparent} + +.ads-dot{width:10px;height:10px} +.ads-status__t{font-size:16px} +.ads-balken{height:6px;background:var(--ios-fill)} +.ads-balken__fill,.ads-balken>i,.ads-balken>div{background:var(--ok)} +.ads-quad__l{font-size:11px;letter-spacing:.01em;text-transform:none} + +/* Der Platzhalterrahmen muss in seine Bildfläche passen */ +.ads-platzhalter{box-sizing:border-box} + +/* Menüs, Popups */ +.ads-popup{border:0;border-radius:14px;background:rgba(40,44,52,.94); + -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)} +.ads-root[data-theme="tag"] .ads-popup{background:rgba(250,250,252,.94)} +.ads-popup-item{font-size:16px;padding:13px 16px;border-bottom:1px solid var(--ios-sep)} + +/* Tab-Leiste */ +.ads-tabbar{border-top:1px solid var(--ios-sep);padding-bottom:6px; + background:rgba(12,16,20,.72); + -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)} +.ads-root[data-theme="tag"] .ads-tabbar{background:rgba(242,242,247,.78)} +.ads-tab{border-top:0;padding:9px 2px 7px;gap:3px;color:var(--ios-grau)} +.ads-tab svg{width:26px;height:26px} +.ads-tab--on{color:var(--ios-tint);border-top-color:transparent} +.ads-tab__label{font-size:10px;letter-spacing:0;text-transform:none} diff --git a/design/dm360-host.html b/design/dm360-host.html new file mode 100644 index 0000000..84101b8 --- /dev/null +++ b/design/dm360-host.html @@ -0,0 +1,73 @@ + + + + + +DataMetric360 Panel + + + + + + + diff --git a/design/ios-frame.jsx b/design/ios-frame.jsx new file mode 100644 index 0000000..d6f5686 --- /dev/null +++ b/design/ios-frame.jsx @@ -0,0 +1,352 @@ +// @ds-adherence-ignore -- omelette starter scaffold (raw elements/hex/px by design) +// Copied omelette starter. Re-running copy_starter_component with this kind overwrites this file with the latest version (page content is unaffected). + +/* BEGIN USAGE */ +// iOS.jsx — Simplified iOS 26 (Liquid Glass) device frame +// Based on the iOS 26 UI Kit + Figma status bar spec. No assets, no deps. +// Exports (to window): IOSDevice, IOSStatusBar, IOSNavBar, IOSGlassPill, IOSList, IOSListRow, IOSKeyboard +// +// Usage — wrap your screen content in to get the bezel, status bar +// and home indicator (props: title, dark, keyboard): +// +// +// ...your screen content... +// +// … +/* END USAGE */ + +// ───────────────────────────────────────────────────────────── +// Status bar +// ───────────────────────────────────────────────────────────── +function IOSStatusBar({ dark = false, time = '9:41' }) { + const c = dark ? '#fff' : '#000'; + return ( +
+
+ {time} +
+
+ + + + + + + + + + + + + + + + +
+
+ ); +} + +// ───────────────────────────────────────────────────────────── +// Liquid glass pill — blur + tint + shine +// ───────────────────────────────────────────────────────────── +function IOSGlassPill({ children, dark = false, style = {} }) { + return ( +
+ {/* blur + tint */} +
+ {/* shine */} +
+
+ {children} +
+
+ ); +} + +// ───────────────────────────────────────────────────────────── +// Navigation bar — glass pills + large title +// ───────────────────────────────────────────────────────────── +function IOSNavBar({ title = 'Title', dark = false, trailingIcon = true }) { + const muted = dark ? 'rgba(255,255,255,0.6)' : '#404040'; + const text = dark ? '#fff' : '#000'; + const pillIcon = (content) => ( + +
+ {content} +
+ + ); + return ( +
+
+ {/* back chevron */} + {pillIcon( + + + + )} + {/* trailing ellipsis */} + {trailingIcon && pillIcon( + + + + + + )} +
+ {/* large title */} +
{title}
+
+ ); +} + +// ───────────────────────────────────────────────────────────── +// Grouped list (inset card, r:26) + row (52px) +// ───────────────────────────────────────────────────────────── +function IOSListRow({ title, detail, icon, chevron = true, isLast = false, dark = false }) { + const text = dark ? '#fff' : '#000'; + const sec = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)'; + const ter = dark ? 'rgba(235,235,245,0.3)' : 'rgba(60,60,67,0.3)'; + const sep = dark ? 'rgba(84,84,88,0.65)' : 'rgba(60,60,67,0.12)'; + return ( +
+ {icon && ( +
+ )} +
{title}
+ {detail && {detail}} + {chevron && ( + + + + )} + {!isLast && ( +
+ )} +
+ ); +} + +function IOSList({ header, children, dark = false }) { + const hc = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)'; + const bg = dark ? '#1C1C1E' : '#fff'; + return ( +
+ {header && ( +
{header}
+ )} +
{children}
+
+ ); +} + +// ───────────────────────────────────────────────────────────── +// Device frame +// ───────────────────────────────────────────────────────────── +function IOSDevice({ + children, width = 402, height = 874, dark = false, + title, keyboard = false, +}) { + return ( + // data-om-starter: inert presence marker — Claude Design's starter-usage + // probe reads it; it renders nothing. Keep it on this root element. +
+ {/* dynamic island */} +
+ {/* status bar (absolute) */} +
+ +
+ {/* nav + content */} +
+ {title !== undefined && } +
{children}
+ {keyboard && } +
+ {/* home indicator — always on top */} +
+
+
+
+ ); +} + +// ───────────────────────────────────────────────────────────── +// Keyboard — iOS 26 liquid glass +// ───────────────────────────────────────────────────────────── +function IOSKeyboard({ dark = false }) { + const glyph = dark ? 'rgba(255,255,255,0.7)' : '#595959'; + const sugg = dark ? 'rgba(255,255,255,0.6)' : '#333'; + const keyBg = dark ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.85)'; + + // special-key icons + const icons = { + shift: , + del: , + ret: , + }; + + const key = (content, { w, flex, ret, fs = 25, k } = {}) => ( +
{content}
+ ); + + const row = (keys, pad = 0) => ( +
+ {keys.map(l => key(l, { flex: true, k: l }))} +
+ ); + + return ( +
+ {/* liquid glass bg — same recipe as nav pills */} +
+
+ + {/* autocorrect bar */} +
+ {['"The"', 'the', 'to'].map((w, i) => ( + + {i > 0 &&
} +
{w}
+ + ))} +
+ + {/* key layout */} +
+ {row(['q','w','e','r','t','y','u','i','o','p'])} + {row(['a','s','d','f','g','h','j','k','l'], 20)} +
+ {key(icons.shift, { w: 45, k: 'shift' })} +
+ {['z','x','c','v','b','n','m'].map(l => key(l, { flex: true, k: l }))} +
+ {key(icons.del, { w: 45, k: 'del' })} +
+
+ {key('ABC', { w: 92.25, fs: 18, k: 'abc' })} + {key('', { flex: true, k: 'space' })} + {key(icons.ret, { w: 92.25, ret: true, k: 'ret' })} +
+
+ + {/* bottom spacer (emoji+mic area, icons omitted) */} +
+
+ ); +} + +Object.assign(window, { + IOSDevice, IOSStatusBar, IOSNavBar, IOSGlassPill, IOSList, IOSListRow, IOSKeyboard, +}); diff --git a/homeassistant/www/audi-dashboard-ios.css b/homeassistant/www/audi-dashboard-ios.css new file mode 100644 index 0000000..767a53f --- /dev/null +++ b/homeassistant/www/audi-dashboard-ios.css @@ -0,0 +1,209 @@ +/* ================================================================== + iOS-Auflage über audi-dashboard.css — Audi CI (Rot F50537, Audi Type, + dunkle Fläche) in der Formensprache einer modernen iOS-App: + Große Titel, gruppierte Listen mit 44-px-Zeilen, transluente Tab-Leiste, + iOS-Schalter und -Segmente, gefüllte Aktionsknöpfe. + Reine Auflage: audi-dashboard.css und die App-Logik bleiben unberührt. + ================================================================== */ + +:host{ + display:block;height:100%;container-type:inline-size; + font-family:"Audi Type",Helvetica,Arial,sans-serif; + --ios-tint:#F50537; + --ios-sep:rgba(255,255,255,.13); + --ios-grau:#8E8E93; + --ios-fill:rgba(120,120,128,.24); + --r-tile:16px; + /* deckende Kachelfarbe fuer Flaechen, die etwas verdecken muessen + (Wischzeile ueber dem Loeschen-Feld, Kartenfeld) */ + --tile-deckend:#171B21; +} +:host([data-theme="nacht"]){ + --canvas:#0C1014; + --tile:rgba(255,255,255,.055); + --tile-2:rgba(255,255,255,.10); + --line:rgba(255,255,255,.13); + --line-strong:rgba(255,255,255,.24); + --fg:#FFFFFF; --fg2:#BFC4CC; --fg3:#8E8E93; + --ok:#30D158; --warn:#FFD60A; --bad:#FF453A; +} +:host([data-theme="tag"]){ + --canvas:#F2F2F7; + --tile:#FFFFFF; + --tile-2:#EFEFF4; + --line:rgba(60,60,67,.13); + --line-strong:rgba(60,60,67,.24); + --fg:#000000; --fg2:#3C3C43; --fg3:#8E8E93; + --ok:#34C759; --warn:#FF9F0A; --bad:#FF3B30; + --ios-sep:rgba(60,60,67,.16); + --ios-fill:rgba(120,120,128,.16); + --tile-deckend:#FFFFFF; +} + +body{padding:0;background:var(--canvas)} +html,body{height:100%} +/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone */ +:host > div{height:100%} +.phone{width:100%;max-width:none;height:100%;border-radius:0; + font-family:"Audi Type",Helvetica,Arial,sans-serif; + -webkit-font-smoothing:antialiased;letter-spacing:0} + +/* ---------------- Navigationsleiste ---------------- */ +/* Sichere Bereiche des Geräterahmens: Statusleiste oben, Home-Indikator unten */ +.topbar{align-items:center;gap:4px;padding:56px 20px 4px} +.head{display:flex;flex-direction:column} +.eyebrow{display:none} +.title{font-size:22px;font-weight:400;letter-spacing:-.01em;line-height:1.2} +.back{width:34px;height:34px;margin-left:-8px;justify-content:center} +.back svg{width:22px;height:22px;color:var(--ios-tint)} +.sync{margin-top:3px;font-size:12.5px;color:var(--fg3)} +.sync svg{width:13px;height:13px} +.themebtn{width:36px;height:36px;border:0;background:var(--ios-fill);color:var(--fg2)} +.themebtn:hover{background:var(--tile-2);color:var(--fg)} +.rings svg{height:17px} +/* Unterseite: kompakter, zentrierter Titel wie in einer iOS-Navigationsleiste */ +.phone:has(.back.on) .topbar{padding:54px 16px 6px;gap:8px} +.phone:has(.back.on) .head{align-items:center} +.phone:has(.back.on) .title{font-size:17px;font-weight:400;letter-spacing:-.01em;text-align:center} +.phone:has(.back.on) .sync{margin-top:2px;font-size:11.5px} + +main{padding:0 16px 30px;scroll-behavior:smooth} + +/* ---------------- Karten und Listen ---------------- */ +.tile{padding:16px 18px;margin-bottom:14px;border-radius:var(--r-tile)} +.tile.flat{padding:0} +.tilebtn:hover{background:var(--tile-2)} +.tilebtn .go{top:50%;margin-top:-5px;right:18px;stroke:var(--ios-grau);stroke-width:1.6} +.label{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--fg3)} +.row{min-height:44px;padding:11px 0;border-bottom:1px solid var(--ios-sep)} +.row dt{font-size:16px;color:var(--fg)} +.row dd{font-size:16px;color:var(--fg2)} +.row dd small{font-size:12.5px;margin-top:2px} +.rows-fest dt{flex:0 0 150px} +.chev{stroke:var(--ios-grau);stroke-width:1.6} + +.acc-h{padding:13px 0;border-bottom:1px solid var(--ios-sep)} +.acc-h .k{font-size:16px} +.acc-h .v{font-size:12.5px} +.leaf{padding:12px 0 12px 40px;border-bottom:1px solid var(--ios-sep)} +.leaf .k{font-size:16px} +.leaf .v{font-size:15px} +.leaf .k small,.leaf .v small{font-size:12.5px} +.mark::before,.mark::after{background:var(--ios-grau)} + +/* ---------------- Bedienelemente ---------------- */ +.seg{gap:0;padding:2px;background:var(--ios-fill);border-radius:9px;margin-top:14px} +.seg button{border:0;border-radius:7px;padding:7px 8px;font-size:13px;font-weight:400; + letter-spacing:0;text-transform:none;color:var(--fg2)} +.seg button.on{background:var(--tile-2);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.25)} + +.aktion{margin-top:18px;padding:15px;border:0;border-radius:14px; + background:var(--ios-tint);color:#fff;font-size:16px;font-weight:400; + letter-spacing:0;text-transform:none} +.aktion:hover{filter:brightness(1.08)} +.aktion.loeschen{background:var(--ios-fill);color:var(--bad);border:0} +.aktion.loeschen:hover{background:var(--bad);color:#fff;filter:none} + +.feld{min-height:44px;padding:9px 0;border-bottom:1px solid var(--ios-sep)} +.feld label{font-size:16px;color:var(--fg)} +.feld input,.feld select{background:transparent;border:0;border-radius:8px;font-size:16px; + padding:8px 4px;color:var(--fg2)} +.feld input:focus,.feld select:focus{background:var(--ios-fill);color:var(--fg)} +.mitEinheit input{background:var(--ios-fill);padding:8px 10px} +.notiz{background:var(--ios-fill);border:0;border-radius:12px;font-size:16px} + +.switch{width:51px;height:31px} +.switch .track{background:var(--ios-fill);border:0} +.switch .track::before{left:2px;top:2px;width:27px;height:27px;box-shadow:0 2px 6px rgba(0,0,0,.3)} +.switch input:checked+.track{background:var(--ios-tint)} +.switch input:checked+.track::before{transform:translateX(20px)} + +.pill{font-size:12px;letter-spacing:.01em;text-transform:none;padding:5px 11px; + border:0;background:var(--ios-fill);color:var(--fg2)} +.pill.work{background:rgba(245,5,55,.16);color:var(--ios-tint)} + +.status{padding:14px 0 2px} +.status .t{font-size:16px} +.dot{width:10px;height:10px} + +/* ---------------- Zahlen (Audi CI bleibt führend) ---------------- */ +.fig{letter-spacing:-.03em} +.unit{color:var(--fg3)} +.balken{height:6px;background:var(--ios-fill)} +.balken i{background:var(--ok)} +.quad .l{font-size:11px;letter-spacing:.01em;text-transform:none} +.legend span{font-size:12.5px} + +/* ---------------- Menüs und Popups ---------------- */ +.bildmenu,.sdpopup{border:0;border-radius:14px;background:rgba(40,44,52,.92); + -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px); + box-shadow:0 12px 40px rgba(0,0,0,.5)} +:host([data-theme="tag"]) .bildmenu,:host([data-theme="tag"]) .sdpopup{background:rgba(250,250,252,.92)} +.bildmenu button{padding:13px 16px;font-size:16px;border-bottom:1px solid var(--ios-sep)} + +/* ---------------- Tab-Leiste ---------------- */ +.tabbar{border-top:1px solid var(--ios-sep);padding-bottom:26px; + background:rgba(12,16,20,.72); + -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)} +:host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)} +.tab{border-top:0;margin-top:0;padding:9px 2px 7px;gap:3px; + font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)} +/* Beschriftung folgt weiter dem Schalter in den Einstellungen */ +.tabbar.ohne .tab span{display:none} +.tab svg{width:26px;height:26px;stroke-width:1.5} +.tab.on{color:var(--ios-tint);border-top-color:transparent} +.tab.on svg polygon{fill:var(--ios-tint);stroke:var(--ios-tint)} +.tabbar.ohne .tab{padding:14px 2px 12px} + +:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px} + +/* Die Wischzeile muss das darunterliegende Loeschen-Feld verdecken - das + halbtransparente --tile der Auflage liess es durchscheinen. */ +.swipe-wrap .swipe-content{background:var(--tile-deckend)} +.mapbox,.mapbox .leaflet-container{background:var(--tile-deckend)} + +/* ================================================================== + Große Bildschirme (Tablet, Desktop): dieselbe App, aber die Tab-Leiste + wird zur seitlichen Navigation und der Inhalt bekommt eine ruhige, + begrenzte Spalte. Container-Abfrage statt @media, weil die App in einem + eigenen Rahmen sitzt und nicht die Fensterbreite messen darf. Schwelle 860 px. + ================================================================== */ +@container (min-width:860px){ + .phone{display:grid;grid-template-columns:264px minmax(0,1fr); + grid-template-rows:auto auto minmax(0,1fr)} + .topbar{grid-column:2;grid-row:1;padding:38px 44px 8px} + .phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start} + .phone:has(.back.on) .head{align-items:flex-start} + .phone:has(.back.on) .title{font-size:26px;text-align:left} + .title{font-size:34px} + .ptr{grid-column:2;grid-row:2} + main{grid-column:2;grid-row:3;padding:8px 44px 48px;max-width:860px} + + .tabbar{grid-column:1;grid-row:1 / 4;display:flex;flex-direction:column;gap:4px; + align-content:start;width:264px;padding:38px 14px 20px; + border-top:0;border-right:1px solid var(--ios-sep);background:none; + -webkit-backdrop-filter:none;backdrop-filter:none} + .tab{flex-direction:row;justify-content:flex-start;align-items:center;gap:14px; + padding:12px 14px;border-radius:12px;font-size:15px;letter-spacing:0} + .tab span{display:block} + .tab svg{width:22px;height:22px} + .tab:hover{background:var(--tile)} + .tab.on{background:rgba(245,5,55,.14);color:var(--ios-tint)} + .tabbar.ohne .tab span{display:block} + .tabbar.ohne .tab{padding:12px 14px} + + .duo{grid-template-columns:repeat(3,minmax(0,1fr))} + .carfix,.bildbox.carfix{height:260px} + .carfix.klein,.bildbox.carfix.klein{height:220px} + .bildgrid{grid-template-columns:repeat(4,1fr)} + .quad{gap:14px} +} + +/* Fahrzeugbild randlos wie in einer Fahrzeug-App: der Platzhalter bleibt + sichtbar, aber ohne technischen Strichrahmen. */ +.szene{margin-bottom:20px} +.bildbox.bild-fehlt .platzhalter{border:0;background:var(--tile);border-radius:var(--r-tile)} +.platzhalter-datei{display:none} + +/* Zeilen mit Wert plus Statuspunkt rechts (Sicherheitscheck) ruhiger setzen */ +.row dd .dot{width:8px;height:8px}