/* ============================================================ design.css – ALLE Gestaltungswerte der App an einer Stelle (Nutzer-Vorgabe 2026-10-05) Hier stehen Farben, Schrift (Art, Größen, Stärken, Zeilenhöhen), Abstände, Rundungen, Schatten, Maße und Ebenen. app.css (App) und scanner.css (Lieferschein-Scanner) verwenden ausschließlich diese Werte über var(--…). Wer das Aussehen ändern will, ändert es hier – z. B. --blue für die Hauptfarbe oder --fs-karte-titel für die Titel der Kacheln. Aufbau 1. Farben (hell) 4. Abstände 7. Ebenen (z-index) 2. Farben (dunkel) 5. Rundungen 8. Bewegung 3. Schrift 6. Maße und Raster Nicht hier: das Papierformular (Hintergrundbild, Feldpositionen und -schriftgrößen stehen in js/config.js, weil sie dem gedruckten Vordruck entsprechen). ============================================================ */ /* ---------- 1. Farben (hell) ---------- */ :root{ /* Grundflächen */ --bg:#f2f6fb; /* Seitenhintergrund */ --card:#ffffff; /* Karten, Fenster, Leisten */ --kopf-bg:rgba(242,246,251,.9); /* feste Kopfleiste der Übersicht (mit Unschärfe) */ --tabbar-bg:rgba(255,255,255,.92); /* Bereiche-Leiste unten */ --overlay:rgba(12,20,34,.42); /* abgedunkelter Hintergrund hinter Fenstern */ --toast-bg:#14213a; /* Hinweise am unteren Rand */ --viewer-bg:#000; /* Lieferschein-Bildansicht */ /* Text */ --text:#13233d; --muted:#66748a; /* Nebentexte, Symbole */ --gray-line:#9aa5b5; /* gedämpfte Linien und Tage (Kalender) */ --text-auf-farbe:#ffffff; /* Text auf farbigen Knöpfen */ /* Linien und Flächen (halbtransparent, wirken auf hell und dunkel) */ --line:rgba(19,35,61,.08); --line-strong:rgba(19,35,61,.16); --soft:rgba(19,35,61,.055); --soft-hover:rgba(19,35,61,.095); --soft-stark:rgba(19,35,61,.13); /* Marke und Bedeutung */ --blue:#1f6fe5; --blue-dark:#165bc4; /* Hauptfarbe (Knöpfe, Auswahl, Fokus) */ --service:#1f6fe5; /* Art „Servicebericht“ (Streifen, Etikett) */ --projekt:#25a35f; /* Art „Projekt“ */ --success:#21995a; --success-dark:#1a7d49; --danger:#d6453a; --danger-dark:#8f2d23; --warn:#b26a00; /* Etiketten (Text- und Flächenfarbe) */ --chip-blue-bg:rgba(31,111,229,.10); --chip-blue:#1a5fd0; --chip-green-bg:rgba(33,153,90,.12); --chip-green:#167a46; --chip-amber-bg:rgba(178,106,0,.15); --chip-amber:#8a5200; --chip-red-bg:rgba(179,57,44,.13); --chip-red:#9c2f24; --chip-gray-bg:rgba(128,128,128,.16); --chip-gray:#4d535b; --chip-purple-bg:rgba(83,74,183,.10); --chip-purple:#4a3fa8; --chip-aktiv-bg:#173c73; --chip-aktiv:#ffffff; /* gewählter Schnellfilter */ /* Verläufe der Knöpfe */ --verlauf-primaer:linear-gradient(180deg, #2f80f2, #1c66da); --verlauf-primaer-hover:linear-gradient(180deg, #2a78ea, #1659c6); --verlauf-erfolg:linear-gradient(180deg, #2bb069, #1e9456); --verlauf-erfolg-hover:linear-gradient(180deg, #26a25f, #1a834b); --verlauf-gefahr:linear-gradient(180deg, #e2554a, #c93b30); --verlauf-loeschen:linear-gradient(90deg, #ef6a5f, #d6453a); /* Wischen zum Löschen */ /* Schatten */ --shadow-sm:0 1px 2px rgba(19,35,61,.04), 0 4px 16px rgba(19,35,61,.06); --shadow-md:0 2px 4px rgba(19,35,61,.05), 0 10px 28px rgba(19,35,61,.10); --shadow-lg:0 24px 64px rgba(19,35,61,.22); --shadow-primaer:0 4px 12px rgba(31,111,229,.25); --shadow-erfolg:0 4px 12px rgba(33,153,90,.22); --shadow-leiste:0 -6px 24px rgba(19,35,61,.08); /* Leisten am unteren Rand */ --shadow-blatt:0 2px 14px rgba(0,0,0,.25); /* Papierformular */ --focus:0 0 0 3px rgba(31,111,229,.28); --shadow-knopf:0 2px 8px rgba(0,0,0,.35); /* schwebender Knopf am Feld */ --shadow-gehoben:0 6px 18px rgba(0,0,0,.18); /* angehobene Zeile beim Umsortieren */ /* Weiß bleibende Flächen (Papier, Unterschrift) und Bildansicht/Hinweise auf dunklem Grund */ --papier:#ffffff; --papier-rand:rgba(128,128,128,.3); --text-auf-farbe-leise:rgba(255,255,255,.85); --viewer-text:#ffffff; --viewer-knopf:rgba(255,255,255,.2); --viewer-loeschen:rgba(220,70,60,.55); --toast-text:#ffffff; --toast-knopf:rgba(255,255,255,.18); /* Papierformular: Füllung der Felder (ruhend / Maus darüber / bearbeitet) und Schrift auf dem Blatt */ --field-idle:rgba(202,235,250,.3); --field-hover:rgba(136,170,216,.3); --field-active:rgba(202,235,250,.3); --blatt-text:#111; --blatt-fokus:rgba(27,79,143,.75); --blatt-auto-bg:rgba(0,0,0,.04); --blatt-platzhalter:#9aa3ab; --blatt-notiz:#6b7280; --blatt-unterschrift-rand:rgba(0,80,180,.5); /* Lieferschein-Scanner: Markierungen auf dem Foto */ --scan-mark:rgba(255,212,0,.5); --scan-mark-edge:#d6a600; --scan-done:rgba(38,166,110,.34); --scan-done-edge:rgba(38,166,110,.8); --scan-gruen:#26a66e; --scan-sent:rgba(27,79,143,.30); --scan-blk:rgba(27,79,143,.45); --scan-blk-bg:rgba(27,79,143,.05); --scan-offen:rgba(27,79,143,.28); --scan-offen-edge:rgba(27,79,143,.7); --scan-desk:rgba(19,35,61,.07); /* Fläche hinter dem Foto */ --scan-field:rgba(202,235,250,.3); --scan-lift:0 -6px 24px rgba(19,35,61,.12); } /* ---------- 2. Farben (dunkel) – gilt, wenn das Gerät dunkel eingestellt ist (oder data-theme="dark") ---------- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0e131a; --card:#171e27; --kopf-bg:rgba(14,19,26,.9); --tabbar-bg:rgba(23,30,39,.92); --text:#e7edf5; --muted:#97a3b4; --gray-line:#5d6878; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); --soft:rgba(255,255,255,.06); --soft-hover:rgba(255,255,255,.10); --soft-stark:rgba(255,255,255,.14); --blue:#4b8ef5; --blue-dark:#3a7be0; --service:#5b9bf7; --projekt:#3fc07a; --chip-blue-bg:rgba(110,160,230,.18); --chip-blue:#9cc0f0; --chip-green-bg:rgba(90,190,130,.18); --chip-green:#8fd4a8; --chip-amber-bg:rgba(230,160,60,.18); --chip-amber:#f0c27a; --chip-red-bg:rgba(230,100,90,.18); --chip-red:#f2a39a; --chip-gray-bg:rgba(160,160,160,.18); --chip-gray:#c4c9cf; --chip-purple-bg:rgba(150,140,240,.16); --chip-purple:#bcb4f5; --chip-aktiv-bg:#4b8ef5; --chip-aktiv:#0e131a; --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.25); --shadow-md:0 10px 28px rgba(0,0,0,.45); --shadow-lg:0 24px 64px rgba(0,0,0,.6); --focus:0 0 0 3px rgba(120,165,240,.45); --scan-mark:rgba(255,212,0,.42); --scan-desk:rgba(0,0,0,.3); --scan-field:rgba(136,170,216,.16); --scan-lift:0 -6px 24px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --bg:#0e131a; --card:#171e27; --kopf-bg:rgba(14,19,26,.9); --tabbar-bg:rgba(23,30,39,.92); --text:#e7edf5; --muted:#97a3b4; --gray-line:#5d6878; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); --soft:rgba(255,255,255,.06); --soft-hover:rgba(255,255,255,.10); --soft-stark:rgba(255,255,255,.14); --blue:#4b8ef5; --blue-dark:#3a7be0; --service:#5b9bf7; --projekt:#3fc07a; --chip-blue-bg:rgba(110,160,230,.18); --chip-blue:#9cc0f0; --chip-green-bg:rgba(90,190,130,.18); --chip-green:#8fd4a8; --chip-amber-bg:rgba(230,160,60,.18); --chip-amber:#f0c27a; --chip-red-bg:rgba(230,100,90,.18); --chip-red:#f2a39a; --chip-gray-bg:rgba(160,160,160,.18); --chip-gray:#c4c9cf; --chip-purple-bg:rgba(150,140,240,.16); --chip-purple:#bcb4f5; --chip-aktiv-bg:#4b8ef5; --chip-aktiv:#0e131a; --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.25); --shadow-md:0 10px 28px rgba(0,0,0,.45); --shadow-lg:0 24px 64px rgba(0,0,0,.6); --focus:0 0 0 3px rgba(120,165,240,.45); --scan-mark:rgba(255,212,0,.42); --scan-desk:rgba(0,0,0,.3); --scan-field:rgba(136,170,216,.16); --scan-lift:0 -6px 24px rgba(0,0,0,.5); } /* ---------- 3. Schrift ---------- */ :root{ --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Systemschrift (iPhone: SF Pro) */ --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-blatt:"Helvetica Neue", Arial, sans-serif; /* Papierformular */ /* Größenstufen */ --fs-3xs:10.5px; --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:20px; --fs-3xl:22px; --fs-4xl:28px; /* Größen nach Verwendung (hier anpassen, wirkt überall, wo das Element vorkommt) */ --fs-seitentitel:32px; /* „Berichte“ oben in der Übersicht */ --fs-dialogtitel:21px; /* Titel von Fenstern und Rückfragen */ --fs-gruppe:var(--fs-lg); /* Kundenname über einer Gruppe */ --fs-karte-titel:17px; /* Titel einer Kachel */ --fs-karte-text:var(--fs-base); /* Unterzeilen einer Kachel */ --fs-karte-klein:13px; /* Fußzeile einer Kachel (Datum, Bearbeiter, Unterlagen) */ --fs-karte-ref:12.5px; /* Referenzen auf der Kachel */ --fs-etikett:var(--fs-3xs); /* SERVICE / PROJEKT */ --fs-status:12px; /* Offen, Abgeschlossen … */ --fs-abschnitt:11.5px; /* Abschnittsüberschriften in Großbuchstaben */ --fs-tab:var(--fs-sm); /* Bereiche-Leiste */ --fs-ende:clamp(22px, 5vw, 36px); /* Abschlussmeldung nach der Kundenunterschrift */ --fs-symbol-gross:64px; /* großes Symbol der Abschlussmeldung */ --fs-blatt-notiz:6.5px; /* Notiz hinter dem Namen auf dem Blatt */ --fs-blatt-zeichen:9px; /* ✕ zum Leeren eines Felds auf dem Blatt */ /* Stärken */ --fw-normal:400; --fw-mittel:500; --fw-halbfett:600; --fw-fett:700; --fw-extra:800; /* Zeilenhöhen und Laufweiten */ --lh-eng:1.2; --lh-normal:1.4; --lh-weit:1.5; --ls-titel:-.025em; /* große Titel enger */ --ls-eng:-.01em; --ls-kapitel:.07em; /* Großbuchstaben-Überschriften und Etiketten */ } /* ---------- 4. Abstände ---------- */ :root{ --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px; --sp-7:14px; --sp-8:16px; --sp-9:18px; --sp-10:20px; --sp-11:24px; --sp-12:28px; --sp-13:32px; --sp-14:40px; --sp-15:56px; --rand:16px; /* seitlicher Abstand der Inhalte am Handy */ --sheet-oben:26px; /* Abstand oben im Einblendfenster (Platz für die Griffleiste) */ } /* ---------- 5. Rundungen ---------- */ :root{ --r-xs:8px; --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:18px; --r-2xl:20px; --r-4xl:24px; --r-sheet:26px; --r-pill:999px; --r-karte:20px; /* Kacheln der Übersicht */ --r-fenster:24px; /* Fenster (Rechner); am Handy oben --r-sheet */ } /* ---------- 6. Maße und Raster ---------- Bildschirmbreiten (in app.css als @media-Abfragen, dort sind keine Variablen möglich): Handy ≤ 600 px (Fenster als Einblendfenster von unten), ≤ 899 px (Leiste unten, „Neu“ blendet beim Scrollen aus), ab 900 px Rechner (Leiste links), ab 1100 px Rechnungen als Tabelle. */ :root{ --content-max:960px; /* größte Breite von Übersicht und Listen */ --h-control:46px; /* Eingabefelder, große Knöpfe */ --h-control-sm:38px; /* kleine Knöpfe */ --h-knopf:40px; /* Standardknopf */ --h-such:46px; /* Suchleiste und „Neu“-Knopf */ --h-rund:46px; /* runde Symbolknöpfe (Konto, Filter) */ --h-filterchip:36px; /* Schnellfilter */ --h-etikett:24px; /* SERVICE/PROJEKT und Stand auf der Kachel */ --h-tab:60px; /* Knopf der Bereiche-Leiste */ --h-tabbar-platz:76px; /* Platz unter dem Inhalt für die Bereiche-Leiste */ --w-tabbar-seite:84px; /* Bereiche-Leiste links (Rechner) */ --w-band:6px; /* Farbstreifen links an der Kachel */ --ic:1.2em; /* Symbolgröße im Text */ --ic-sm:15px; --ic-md:19px; --ic-lg:22px; --ic-xl:26px; } /* ---------- 7. Ebenen (z-index) ---------- */ :root{ --z-blattmenu:30; --z-formleiste:40; --z-kopf:50; --z-leiste:55; --z-auswahlleiste:60; --z-menu:60; --z-leistenmenu:70; --z-kundenansicht:450; --z-fenster:500; --z-scanner:800; --z-bildansicht:850; --z-rueckfrage:870; --z-hinweis:900; --z-kalender:1000; } /* ---------- 8. Bewegung ---------- --anim ist der Faktor aus der Einstellung „Animationen“ (⋯ → Einstellungen, nur Admin): 0 aus, .5 schnell, 1 normal, 2 langsam, 3 sehr langsam. js/animation.js setzt ihn beim Start und nach jeder Änderung; „Bewegung reduzieren“ → 0. Alle Übergänge und Einblendungen verwenden die Dauern unten und folgen damit der Einstellung. */ :root{ --anim:1; --dauer-kurz:calc(.15s * var(--anim)); --dauer:calc(.22s * var(--anim)); --dauer-lang:calc(.3s * var(--anim)); --kurve:cubic-bezier(.2,.8,.2,1); /* weich auslaufend */ --dauer-kreisel:.8s; --dauer-schimmer:1.2s; --dauer-hinweis:1.6s; /* Endlos-Anzeigen: fest, damit sie auch bei „Aus“ laufen */ --unschaerfe:blur(14px); }