/* ================================================================== 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}