/* ============================================================================= restodesk.css — Design-System (Handoff „Restodesk — Digitale Fahrzeugakte") Palette „Schiefer" (Slate-Blau & Kreide) · Typo „Manufaktur" (Newsreader + Spectral) Tokens zentral in :root — späterer Palettenwechsel = nur diese Werte tauschen. Fonts werden im der Templates geladen (siehe base_app.html). ============================================================================= */ :root { /* — Farbwelt „schiefer" (verbindlich) — */ --paper: #E9E8E3; /* App-Hintergrund */ --surface: #F4F3EF; /* Karten, Sidebar */ --surface-2: #E4E3DD; /* Hover, Tabellenkopf, Wells */ --ink: #20242A; /* Haupttext, Headlines */ --ink-soft: #5C636C; /* Sekundärtext */ --ink-faint: #8A909A; /* Tertiär, Meta, Eyebrows */ --line: #D7D8D0; /* Rahmen, Trennlinien */ --line-soft: #E3E2DB; /* Track-/Balkenhintergrund */ --accent: #3A536E; /* Slate-Blau — Akzent, sparsam */ --accent-soft:#DADFE6; /* Akzent-Hintergrund (Banner) */ --accent-ink: #F4F3EF; /* Text auf Akzent */ --positive: #436B55; /* grün — Wert deckt Investition */ --warn: #9C7A2A; /* bernstein — Fälligkeit bald */ --danger: #9A3B30; /* rot — überfällig */ /* — Chart-Farbreihe (nach Kategorie, in dieser Reihenfolge) — */ --chart-1:#3A536E; --chart-2:#5E7790; --chart-3:#6F8366; --chart-4:#A8843A; --chart-5:#8A3F38; --chart-6:#7C6E5E; --chart-7:#46707A; --chart-8:#8E8E84; /* — Typografie „manufaktur" — */ --font-display: "Newsreader", Georgia, serif; --font-body: "Spectral", Georgia, serif; --font-figure: "Newsreader", Georgia, serif; /* Zahlen/Beträge */ --font-eyebrow: "Spectral", Georgia, serif; --display-weight: 500; --figure-weight: 500; --head-transform: none; --head-tracking: 0; --display-lh: 1.08; --eyebrow-transform: uppercase; --eyebrow-tracking: 0.2em; } /* — Reset / Basis — */ * { box-sizing: border-box; } html, body { margin: 0; } body { min-height: 100vh; font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--paper); } ::selection { background: var(--accent); color: var(--accent-ink); } /* — Typo-Bausteine — */ .rd-eyebrow { font-family: var(--font-eyebrow); text-transform: var(--eyebrow-transform); letter-spacing: var(--eyebrow-tracking); font-size: 11px; font-weight: 600; color: var(--ink-faint); line-height: 1.25; white-space: nowrap; } .rd-display { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--head-transform); letter-spacing: var(--head-tracking); line-height: var(--display-lh); color: var(--ink); margin: 0; text-wrap: balance; } .rd-figure { font-family: var(--font-figure); font-weight: var(--figure-weight); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); } .rd-serif { font-family: var(--font-display); } .rd-soft { color: var(--ink-soft); } .rd-faint { color: var(--ink-faint); } .rd-pos { color: var(--positive); } .rd-warn-c { color: var(--warn); } .rd-neg { color: var(--danger); } /* — Flächen / Linien / Links — */ .rd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; } .rd-hair { border: 0; border-top: 1px solid var(--line); margin: 0; } .rd-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; cursor: pointer; transition: border-color .15s; } .rd-link:hover { border-bottom-color: var(--accent); } /* — Foto-Platzhalter (diagonale Streifen + Monospace-Label) — */ .rd-photo { position: relative; overflow: hidden; background: var(--surface-2); background-image: repeating-linear-gradient(135deg, transparent 0 13px, var(--line-soft) 13px 14px); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); } .rd-photo .rd-photo-tag { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line); padding: 5px 9px; border-radius: 2px; text-align: center; line-height: 1.3; max-width: 80%; } /* Nutzergeladenes Foto füllt den Platzhalter-Rahmen (beschnitten) */ .rd-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* — Navigation (Sidebar) — */ .rd-navitem { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 3px; cursor: pointer; color: var(--ink-soft); transition: background .12s, color .12s; border: 1px solid transparent; text-decoration: none; } .rd-navitem:hover { background: var(--surface-2); color: var(--ink); } .rd-navitem.active { background: var(--surface); border-color: var(--line); color: var(--ink); } .rd-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } /* — Tabs (Unterstrich) — */ .rd-tab { position: relative; padding: 7px 2px; cursor: pointer; color: var(--ink-soft); font-size: 13.5px; letter-spacing: .01em; background: none; border: 0; font-family: inherit; text-decoration: none; transition: color .12s; } .rd-tab:hover { color: var(--ink); } .rd-tab.active { color: var(--ink); } .rd-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); } /* — Chips (Filter) — */ .rd-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); background: var(--surface); cursor: pointer; transition: all .12s; white-space: nowrap; font-family: inherit; text-decoration: none; } .rd-chip:hover { border-color: var(--ink-faint); color: var(--ink); } .rd-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* — Buttons — */ .rd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 3px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); transition: opacity .12s; text-decoration: none; } .rd-btn:hover { opacity: .86; } .rd-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); } .rd-btn.ghost:hover { border-color: var(--ink-faint); opacity: 1; } .rd-btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* — Badges / Pillen — */ .rd-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); white-space: nowrap; } /* — Tabellen-Zeilen-Hover — */ .rd-row-hover { transition: background .12s; } .rd-row-hover:hover { background: var(--surface-2); } /* — Scroll — */ .rd-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .rd-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .rd-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid var(--paper); background-clip: content-box; } /* — App-Shell (Sidebar + Hauptbereich) — */ .rd-app { display: flex; min-height: 100vh; } .rd-sidebar { width: 264px; flex: none; border-right: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .rd-main { flex: 1; min-width: 0; background: var(--paper); } .rd-container { max-width: 1200px; margin: 0 auto; padding: 40px; } .rd-container.narrow { max-width: 1080px; } /* — Logo (Monogramm „RD" + Wortmarke „Resto·desk") — */ .rd-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .rd-logo-mono { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.4px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; position: relative; } .rd-logo-mono::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: .8px solid var(--accent); opacity: .4; } .rd-logo-mono b { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: .01em; line-height: 1; } .rd-logo-text { display: inline-flex; flex-direction: column; gap: 3px; } .rd-logo-word { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.012em; line-height: 1; color: var(--ink); white-space: nowrap; } .rd-logo-word i { color: var(--accent); font-style: italic; font-weight: 500; } .rd-logo-sub { font-family: var(--font-eyebrow); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); line-height: 1; } /* — Icons (1.5-px-Strich) — */ .rd-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* — Zähler-Badge (Belegeingang) — */ .rd-count { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); } /* — Sidebar-Bausteine — */ .rd-sidebar-logo { display: block; padding: 26px 22px 22px; border-bottom: 1px solid var(--line); } .rd-sidebar-user { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center; gap: 11px; } .rd-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink); } /* — Fahrzeug-Karte (Garage): Hover ohne JS — */ .rd-vcard { overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; display: block; transition: box-shadow .18s, transform .18s; } .rd-vcard:hover { box-shadow: 0 14px 38px rgba(0,0,0,.10); transform: translateY(-2px); } /* — Status-Badge (Punkt + Versalien-Label) — */ .rd-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-eyebrow); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } /* — Seitentitel (responsiv skalierbar) — */ .rd-pagetitle { font-size: 44px; } /* — Garage-Grids (responsiv über Klassen statt Inline) — */ .rd-garage-sums { display: grid; grid-template-columns: 1fr 1fr 1fr; } .rd-garage-sums > div { padding: 24px 28px; } .rd-garage-sums > div + div { border-left: 1px solid var(--line); } .rd-garage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } /* — Karten-Kopf/-Körper (Card-Helfer, pad = 26) — */ .rd-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 26px 0; } .rd-card-body { padding: 26px; } /* — Balken-Spur (Bilanz/Kategorie/Fortschritt) — */ .rd-track { background: var(--line-soft); border-radius: 999px; overflow: hidden; } /* — Fahrzeug-Topbar (Breadcrumb + Tabs, sticky) — */ .rd-vtopbar { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); padding: 16px 40px 0; display: flex; flex-direction: column; gap: 14px; } .rd-vtopbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .rd-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-faint); } .rd-vtabs { display: flex; gap: 26px; } .rd-duebadge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--ink-soft); white-space: nowrap; } /* — Fahrzeug-Titel + Hero-Kennzahl (responsiv) — */ .rd-vehicle-title { font-size: 40px; line-height: 1.1; } .rd-hero-figure { font-size: 66px; line-height: 1; white-space: nowrap; } .rd-dash-head { margin-bottom: 22px; } /* — Hero-Karte: Foto | Inhalt — */ .rd-hero { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; overflow: hidden; margin-bottom: 22px; } .rd-hero-photo { min-height: 290px; border: 0; border-right: 1px solid var(--line); border-radius: 0; } .rd-hero-body { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; } /* — Dashboard-Hauptraster: links breit, rechts Schiene — */ .rd-dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; } /* — Donut + Kategorie-Balken — */ .rd-donut-row { display: grid; grid-template-columns: 210px 1fr; gap: 36px; align-items: center; } .rd-donut { position: relative; width: 210px; height: 210px; flex: none; } .rd-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; } /* — Formular-Bausteine (neuer Stil) — */ .rd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rd-field { display: flex; flex-direction: column; margin-bottom: 14px; } .rd-label { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; } .rd-input { font-family: inherit; font-size: 14px; color: var(--ink); width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); transition: border-color .12s; } .rd-input:focus { outline: none; border-color: var(--accent); } .rd-select { appearance: auto; } /* — Tabelle (km-Stände u. a.) — */ .rd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .rd-table th { font-family: var(--font-eyebrow); text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } .rd-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); } .rd-table td.num, .rd-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .rd-tablewrap { overflow-x: auto; } /* — Belege: Banner (Hinweis/Warnung) — */ .rd-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 4px; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--line); background: var(--surface); } .rd-banner.info { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); } .rd-banner.warn { background: #F3ECD9; border-color: #E6D8B4; color: var(--ink); } .rd-banner a { color: var(--accent); } /* — Beleg-Miniatur (PDF/Original) — */ .rd-thumb { width: 62px; height: 76px; border-radius: 2px; flex: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.5px; letter-spacing: .06em; color: var(--ink-faint); background: var(--surface-2); background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--line-soft) 9px 10px); border: 1px solid var(--line); } /* — Kategorie-Tag (Punkt + Name) + Quellen-Punkt — */ .rd-cattag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); white-space: nowrap; } .rd-cattag-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; } .rd-srcdot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: var(--ink-faint); } .rd-srcdot.mail { background: var(--accent); } /* — Status-Pille (offen / bestätigt) — */ .rd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 11px; color: var(--ink-soft); white-space: nowrap; } .rd-pill.ok { color: var(--positive); } /* — Review-Karte (Belegeingang) — */ .rd-reviewcard { display: grid; grid-template-columns: 62px 1fr auto; gap: 22px; align-items: center; padding: 18px 22px; } .rd-reviewcard-side { display: flex; align-items: center; gap: 22px; } /* — Filterleiste (kompakte Felder nebeneinander) — */ .rd-filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .rd-filterbar .rd-field { margin-bottom: 0; } .rd-input.sm { padding: 7px 9px; font-size: 13px; } .rd-file { font-size: 13px; color: var(--ink-soft); } .rd-textarea { min-height: 96px; resize: vertical; line-height: 1.55; } /* — Logbuch: Fahrzeug-Karteikarte — */ .rd-kartei { display: grid; grid-template-columns: 300px 1fr; overflow: hidden; } .rd-kartei-photo { min-height: 260px; border: 0; border-right: 1px solid var(--line); border-radius: 0; } .rd-kartei-body { padding: 30px 36px; } .rd-kartei-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; margin-top: 24px; } .rd-kartei-cell { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 11px; } /* — Logbuch: Chronik-Zeitstrahl — */ .rd-timeline { position: relative; padding-left: 34px; } .rd-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line); } .rd-logentry { position: relative; padding-bottom: 40px; } .rd-logentry:last-child { padding-bottom: 0; } .rd-logdot { position: absolute; left: -34px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink-faint); box-shadow: 0 0 0 4px var(--paper); } .rd-logdot.ms { background: var(--accent); border-color: var(--accent); } /* — Mobile-Chrome (Topbar + Bottom-Nav) — nur < 768px sichtbar — */ .rd-topbar-m, .rd-bottomnav { display: none; } @media (max-width: 768px) { .rd-app { display: block; } .rd-sidebar { display: none; } .rd-main { padding-bottom: 80px; } /* Platz für die fixe Bottom-Nav */ .rd-container { padding: 18px; } .rd-pagetitle { font-size: 30px; } .rd-topbar-m { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 18px; } .rd-topbar-m .rd-logo-sub { display: none; } .rd-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); } .rd-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--ink-faint); font-size: 10.5px; position: relative; } .rd-bottomnav a.active { color: var(--accent); } .rd-bottomnav .rd-count { position: absolute; top: -3px; left: 50%; margin-left: 6px; } /* Garage stapelt einspaltig */ .rd-garage-sums { grid-template-columns: 1fr; } .rd-garage-sums > div { padding: 18px; } .rd-garage-sums > div + div { border-left: 0; border-top: 1px solid var(--line); } .rd-garage-grid { grid-template-columns: 1fr; gap: 16px; } /* Fahrzeug-Dashboard stapelt einspaltig */ .rd-vtopbar { padding: 14px 18px 0; } .rd-vtabs { gap: 20px; } .rd-vehicle-title { font-size: 27px; } .rd-hero-figure { font-size: 38px; } .rd-hero { grid-template-columns: 1fr; } .rd-hero-photo { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--line); } .rd-hero-body { padding: 24px 22px; } .rd-dash-grid { grid-template-columns: 1fr; gap: 16px; } .rd-donut-row { grid-template-columns: 1fr; gap: 24px; justify-items: center; } .rd-donut-row > div:last-child { width: 100%; } .rd-form-grid { grid-template-columns: 1fr; gap: 0; } /* Belege: Review-Karte stapelt, Tabelle scrollt horizontal */ .rd-reviewcard { grid-template-columns: 1fr; gap: 16px; } .rd-reviewcard .rd-thumb { display: none; } .rd-reviewcard-side { justify-content: space-between; } .rd-filterbar .rd-field { flex: 1 1 130px; } /* Logbuch: Karteikarte stapelt */ .rd-kartei { grid-template-columns: 1fr; } .rd-kartei-photo { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--line); } .rd-kartei-body { padding: 24px 20px; } .rd-kartei-grid { gap: 12px 20px; } } /* — Dezenter Fade beim Laden (progressive enhancement) — */ @media (prefers-reduced-motion: no-preference) { .rd-fade { animation: rdfade .45s ease both; } } @keyframes rdfade { from { transform: translateY(8px); opacity: .4; } to { transform: none; opacity: 1; } }