@charset "UTF-8"; /* Driver-OS - Fahrer-App -- Mobile-First * * THEME-TOKEN-SYSTEM (Light Default + Dark Toggle) * ------------------------------------------------ * Eigene --ds-*-Namespace. Bestehende --ink-* / --bone-*-Tokens aus * shared/fahrora-design-tokens.css werden hier auf die --ds-*-Tokens * REMAPPED, damit alle vorhandenen CSS-Regeln automatisch das aktive * Theme erben. Theme-Wechsel ueber [data-theme="dark"] auf . * * TODO Vertikalisierung: bei Cockpit-/Office-Migration nach * shared/ ziehen und dort als gemeinsames Light/Dark-System anlegen. * Aktuell fahrer-portal-spezifisch, aber bewusst portable designt. */ /* Light/Dark-Remap ist jetzt in shared/theme-light-dark.css (extrahiert 2026-05-18 für Multi-Portal-Wiederverwendung) */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ds-bg); color: var(--ds-text); font-family: var(--font-body); transition: background-color 0.18s ease, color 0.18s ease; } body.driver-os { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-height: 100vh; } /* App-Shell: zentrierter Container für Mobile-First-Layout auf jedem Viewport. Tab-Bar bekommt ihren eigenen inneren Shell für identische horizontale Begrenzung. */ .app-shell { max-width: 480px; margin: 0 auto; padding: 0 16px; } /* Topbar — schmaler Streifen mit Logo links, LKW + Logout rechts */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--ds-card); border-bottom: 1px solid var(--ds-border); box-shadow: 0 2px 4px rgba(0,0,0,0.04); } .topbar-inner { max-width: 480px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 10px; } .brand-logo { height: 26px; background: #ffffff; padding: 3px 6px; border-radius: 5px; display: block; } .topbar-vehicle { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: #ffffff; color: #1a1a1a; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--ds-border-strong); letter-spacing: 0.04em; } .topbar-vehicle.empty { background: transparent; color: var(--ds-text-muted); font-family: var(--font-body); border-style: dashed; font-weight: 400; } .topbar-logout { background: transparent; color: var(--ds-text-muted); border: 1px solid var(--ds-border); padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; } .topbar-logout:hover { color: var(--ds-accent); border-color: var(--ds-accent); } /* Bottom-Tabs — 6 Items mit Icon + Label, max-width-Shell */ .bottom-tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--ds-tab-bg); border-top: 1px solid var(--ds-border); box-shadow: var(--ds-tab-shadow); padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-tabs-inner { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); } .bottom-tabs .tab { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ds-text-muted); font-family: var(--font-body); font-size: 10px; padding: 8px 2px 6px; cursor: pointer; border-top: 2px solid transparent; line-height: 1.2; } .bottom-tabs .tab svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; } .bottom-tabs .tab[aria-current="true"] { color: var(--ds-accent); border-top-color: var(--ds-accent); } /* Main */ main { max-width: 480px; margin: 0 auto; padding: 16px; } .view-title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 14px 0; letter-spacing: var(--tracking-tight); } .section-title { font-size: var(--text-md); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--bone-soft); margin: 22px 0 10px 0; } .muted { color: var(--bone-soft); font-size: var(--text-sm); } .back-btn { background: none; border: none; color: var(--accent); font-size: var(--text-base); padding: 0 0 12px 0; cursor: pointer; } /* Cards */ .card-list { display: flex; flex-direction: column; gap: 10px; } .card { background: var(--ink-rise); border: 1px solid var(--ds-border-strong); border-radius: var(--radius-lg); padding: 14px; } .card h2 { font-size: var(--text-lg); margin: 0 0 8px 0; } .card .meta { color: var(--bone-soft); font-size: var(--text-sm); } .card-row { display: flex; align-items: center; gap: 10px; } .card-row .grow { flex: 1; } .card-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; letter-spacing: var(--tracking-wider); text-transform: uppercase; border: 1px solid var(--ink-line-2); } .card-tag.ok { color: var(--ok); border-color: var(--ok-line); } .card-tag.warn { color: var(--warn); border-color: var(--warn-line); } .card-tag.err { color: var(--err); border-color: var(--err-line); } .card-tag.accent{ color: var(--accent); border-color: var(--accent-line); } /* Buttons */ .primary-action { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .btn-primary { background: var(--accent); color: var(--accent-ink); border: none; padding: 14px 18px; font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); border-radius: var(--radius-md); cursor: pointer; min-height: 50px; } .btn-primary:hover { background: var(--accent-hi); } .btn-secondary { background: transparent; color: var(--bone); border: 1px solid var(--ink-line-3); padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-base); cursor: pointer; min-height: 50px; } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-danger { background: transparent; color: var(--err); border: 1px solid var(--err-line); padding: 10px 14px; border-radius: var(--radius-md); cursor: pointer; } /* Forms */ .form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 22px 0; } .form .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .form .row label { min-width: 0; } @media (max-width: 480px) { .form .row { grid-template-columns: 1fr 1fr; } } .form label { display: flex; flex-direction: column; color: var(--bone-soft); font-size: var(--text-sm); gap: 4px; } .form input, .form select, .form textarea { background: var(--ink-soft); color: var(--bone); border: 1px solid var(--ink-line-2); border-radius: var(--radius-md); padding: 12px 14px; font-family: var(--font-body); font-size: var(--text-base); } .form input:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; } .form-banner { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-md); padding: 10px 14px; color: var(--bone); font-size: var(--text-sm); } /* Signature Canvas */ .signature-block { margin-top: 18px; } #signature-canvas { width: 100%; max-width: 600px; height: 280px; background: var(--bone); border-radius: var(--radius-md); touch-action: none; } /* Toast — lesbarer Default-Hintergrund, farbige Akzent-Leiste statt farbigem Vollflächen-Background. Textfarbe bleibt --ds-text damit die Botschaft auch bei langem Inhalt klar lesbar bleibt. */ .toast { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%); max-width: 448px; width: calc(100% - 32px); background: var(--ds-card); color: var(--ds-text); border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-text-muted); border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px; line-height: 1.4; z-index: 100; box-shadow: var(--ds-toast-shadow); } .toast.error { border-left-color: var(--err); } .toast.ok { border-left-color: var(--ds-success); } .toast.info { border-left-color: var(--ds-accent); } /* Dashboard-Begrüßung */ .greeting { margin: 18px 0 4px; } .greeting h1 { font-family: var(--font-display); font-size: 28px; margin: 0; letter-spacing: -0.02em; color: var(--ds-text); } .greeting .date { color: var(--ds-text-muted); font-size: 14px; margin-top: 2px; } /* Pflicht-Alert Box */ .alert-box { display: flex; gap: 12px; align-items: flex-start; background: var(--ds-warn-bg); border: 1px solid var(--ds-warn-border); border-radius: var(--radius-lg); padding: 14px; margin-top: 18px; } .alert-box .alert-icon { flex: 0 0 24px; color: var(--ds-warn-text); width: 24px; height: 24px; } .alert-box .alert-body { flex: 1; } .alert-box .alert-title { font-weight: 600; color: var(--ds-warn-text); font-size: 15px; line-height: 1.3; } .alert-box .alert-sub { color: var(--ds-warn-text); opacity: 0.85; font-size: 12px; margin-top: 4px; line-height: 1.4; } .alert-box .btn-primary { margin-top: 10px; } .success-box { display: flex; gap: 12px; align-items: center; background: var(--ds-success-bg); border: 1px solid var(--ds-success-border); border-radius: var(--radius-lg); padding: 12px 14px; margin-top: 18px; } .success-box .alert-icon { color: var(--ds-success); width: 22px; height: 22px; flex: 0 0 22px; } .success-box .alert-title { color: var(--ds-success); font-weight: 600; font-size: 14px; } .success-box .alert-sub { color: var(--ds-text-muted); font-size: 12px; margin-top: 2px; } /* Tour-Card (Dashboard-Variante) */ .tour-card { display: flex; align-items: center; gap: 12px; background: var(--ds-card); border: 1px solid var(--ds-border-strong); border-radius: var(--radius-lg); padding: 12px 14px; cursor: pointer; transition: border-color 0.12s; } .tour-card:hover { border-color: var(--ds-border-strong); } .tour-card-time { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--ds-text); min-width: 52px; } .tour-card-body { flex: 1; min-width: 0; } .tour-card-line1 { display: flex; align-items: baseline; gap: 8px; font-size: 14px; } .tour-card-number { font-family: var(--font-mono); color: var(--ds-text-muted); font-size: 12px; } .tour-card-dest { color: var(--ds-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tour-card-meta { color: var(--ds-text-muted); font-size: 12px; margin-top: 2px; } .tour-card-chev { color: var(--ds-text-dim); width: 16px; height: 16px; } /* Receipt-Card (Dashboard-Variante) */ .receipt-card { display: flex; align-items: center; gap: 12px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--radius-lg); padding: 12px 14px; } .receipt-card-body { flex: 1; min-width: 0; } .receipt-card-vendor { font-size: 14px; font-weight: 500; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .receipt-card-meta { color: var(--ds-text-muted); font-size: 12px; margin-top: 2px; } .receipt-card-amount { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--ds-text); } .receipt-photo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--ds-card); color: var(--ds-text); border: 1px solid var(--ds-border-strong); border-radius: var(--radius-lg); padding: 14px; margin-top: 10px; font-size: 14px; font-weight: 500; cursor: pointer; } .receipt-photo-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent); } .receipt-photo-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; } /* Schnellaktionen-Grid */ .quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .quick-action { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--ds-card); border: 1px solid var(--ds-border-strong); border-radius: var(--radius-lg); padding: 14px 8px; color: var(--ds-text); font-size: 13px; font-weight: 500; cursor: pointer; } .quick-action:hover { border-color: var(--ds-border-strong); } .quick-action svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; color: var(--ds-text-muted); } /* Section Title Variante für Dashboard (mehr Luft) */ .dashboard-section-title { font-size: 13px; font-weight: 600; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 10px; } /* Lenkzeit-Banner (entfernt inline-Styles) */ .hours-banner { display: flex; align-items: center; gap: 10px; background: var(--ds-warn-bg); color: var(--ds-warn-text); padding: 10px 16px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--ds-warn-border); } .hours-banner-icon { font-size: 18px; } .hours-banner-text { flex: 1; } .hours-banner-rest { opacity: 0.8; font-size: 11px; font-weight: 400; } /* Theme-Toggle im Profil */ .theme-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ds-border); border-radius: var(--radius-md); overflow: hidden; margin-top: 8px; } .theme-toggle button { background: var(--ds-card); color: var(--ds-text-muted); border: none; padding: 12px 8px; font-size: 14px; cursor: pointer; font-family: var(--font-body); border-right: 1px solid var(--ds-border); } .theme-toggle button:last-child { border-right: none; } .theme-toggle button.active { background: var(--ds-accent); color: #ffffff; } .theme-card-icon, .card-heading-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; } /* Tour-Stops */ .stop-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .stop { display: flex; align-items: center; gap: 10px; background: var(--ink-rise-2); padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--ink-line); } .stop .stop-order { width: 28px; height: 28px; background: var(--accent); color: var(--accent-ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; } .stop[data-status="completed"] { opacity: 0.55; } .stop .stop-action { background: transparent; border: 1px solid var(--ink-line-3); color: var(--bone-soft); padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); } .stop .stop-action.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Tour-Abschluss-Wizard-Modal */ .close-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 200; display: grid; place-items: stretch; padding: 0; overflow-y: auto; } .close-modal[hidden] { display: none; } .close-modal-card { width: 100%; max-width: 720px; margin: 0 auto; background: var(--ink-soft); min-height: 100vh; display: flex; flex-direction: column; } .close-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--brand-red); color: white; position: sticky; top: 0; z-index: 5; } .close-modal-header h2 { font-size: 1.1rem; margin: 0; } .close-modal-x { background: rgba(255,255,255,0.15); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; cursor: pointer; line-height: 1; } .close-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 12px 18px; background: var(--ink-rise); border-bottom: 1px solid var(--ink-line); } .close-step { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--bone-muted); text-align: center; line-height: 1.4; } .close-step span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-line-2); color: var(--bone-soft); font-weight: 700; margin-bottom: 4px; } .close-step.active { color: var(--accent); } .close-step.active span { background: var(--accent); color: var(--accent-ink); } .close-step.done span { background: var(--ok); color: var(--accent-ink); } .close-step.done { color: var(--ok); } .close-step-body { padding: 18px 18px 80px 18px; display: flex; flex-direction: column; gap: 12px; } .close-step-body h3 { margin: 0; font-size: 1.1rem; } .close-step-body label { display: flex; flex-direction: column; color: var(--bone-soft); font-size: var(--text-sm); gap: 4px; } .close-step-body input, .close-step-body select { background: var(--ink-deep); color: var(--bone); border: 1px solid var(--ink-line-2); border-radius: var(--radius-md); padding: 12px 14px; font-family: var(--font-body); font-size: var(--text-base); } .close-step-body .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 480px) { .close-step-body .row { grid-template-columns: 1fr 1fr; } } #tc-sig-canvas { width: 100%; max-width: 600px; height: 220px; background: white; border-radius: var(--radius-md); touch-action: none; } #tc-summary { font-size: var(--text-sm); padding: 14px; } #tc-summary strong { color: var(--bone); } /* Schein-Status */ .schein-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--ink-line); } .schein-row:last-child { border-bottom: none; } .schein-row .label { flex: 1; color: var(--bone-soft); } .schein-row .date { font-family: var(--font-mono); } .schein-row.warn { color: var(--warn); } .schein-row.err { color: var(--err); } /* ─── Voice-Alert / Police-Mode UI ─── */ .chip { display: inline-flex; align-items: center; padding: 8px 14px; font-size: 14px; font-weight: 500; background: var(--ink-rise); color: var(--bone); border: 1px solid var(--ink-line-2); border-radius: 999px; cursor: pointer; transition: all 0.15s; } .chip:hover { border-color: var(--accent-line); } .chip.active { background: var(--accent); color: white; border-color: var(--accent); } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--bone-soft); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 14px; } .btn-link { background: none; border: none; color: var(--bone-soft); font-size: 18px; cursor: pointer; padding: 4px 10px; } .btn-link:hover { color: var(--bone); } .police-tab.active { border-bottom-color: #0f3a8a !important; background: white !important; color: #0f3a8a !important; } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(227, 6, 19, 0); } } #voice-record-btn.recording { animation: pulse 1.4s infinite; background: var(--accent) !important; } .alert-card { border-left: 4px solid var(--accent); background: var(--ink-rise); padding: 10px 14px; margin-bottom: 8px; border-radius: 6px; font-size: 13px; } .alert-card.critical { border-left-color: #d32; background: rgba(211,51,34,0.06); } .alert-card.warning { border-left-color: #fa3; } .alert-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .alert-card .kind { font-weight: 700; } .alert-card .age { margin-left: auto; opacity: 0.6; font-size: 11px; } /* HTML5 hidden-Attribut durchsetzen — schlägt inline style="display:..." */ [hidden] { display: none !important; }