/* Franky – zentrales Stylesheet (ausgelagert aus base.html, Etappe „Mobil & Stimme"). * * Farbsystem: ausschließlich semantische Token. Das helle Thema steht in * :root, das dunkle in html[data-thema="dunkel"] – umgeschaltet FOUC-frei * durch das Inline-Skript im (localStorage "franky-thema"). * Außerhalb der beiden Token-Blöcke sind KEINE Hexfarben erlaubt. */ /* ---------- Farbtoken: hell ---------- */ :root { color-scheme: light dark; --bg:#f5f7fb; --karte:#ffffff; --karte-hover:#fafbfe; --text:#1b2230; --text-sekundaer:#6b7280; --text-leise:#c2c7d0; --rand:#e6e8ee; --akzent:#2d6cdf; --akzent-dunkel:#1d4ed8; --akzent-weich:#eef4ff; --akzent-weich-rand:#cfe0ff; --gefahr:#dc2626; --gefahr-dunkel:#b91c1c; --gefahr-weich:#fef2f2; --gefahr-weich-rand:#fecaca; --erfolg:#15803d; --erfolg-weich:#ecfdf3; --eingabe-bg:#ffffff; --code-bg:#f3f4f6; --thead-bg:#f3f5f9; --zeile-hover:#fafbfd; --sek-bg:#eef0f4; --sek-text:#374151; --sek-hover:#e2e6ee; --fokus-ring:#bfd3ff; --badge:#ef4444; --sidebar:#0f172a; --sidebar-text:#cbd5e1; --sidebar-rand:transparent; --roh-bg:#0f172a; --roh-text:#e2e8f0; --auf-akzent:#ffffff; --sidebar-hover:rgba(255,255,255,.08); --sidebar-hairline:rgba(255,255,255,.15); --schatten:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --schatten-stark:0 4px 12px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06); --deck:rgba(0,0,0,.45); --safe-unten:env(safe-area-inset-bottom,0px); } /* ---------- Farbtoken: dunkel ---------- */ html[data-thema="dunkel"] { --bg:#0b1120; --karte:#151e31; --karte-hover:#1a2439; --text:#e6eaf2; --text-sekundaer:#94a3b8; --text-leise:#475569; --rand:#243047; --akzent:#4d8dff; --akzent-dunkel:#3b7bf0; --akzent-weich:#17233d; --akzent-weich-rand:#2a3d63; --gefahr:#f87171; --gefahr-dunkel:#ef4444; --gefahr-weich:#2b1a1e; --gefahr-weich-rand:#57282e; --erfolg:#4ade80; --erfolg-weich:#12271b; --eingabe-bg:#0f1729; --code-bg:#1c2740; --thead-bg:#1a2439; --zeile-hover:#1a2439; --sek-bg:#233046; --sek-text:#cbd5e1; --sek-hover:#2b3a55; --fokus-ring:#2a4a80; --badge:#ef4444; --sidebar:#0b1120; --sidebar-text:#94a3b8; --sidebar-rand:#1e293f; --roh-bg:#060b16; --roh-text:#cbd5e1; --auf-akzent:#ffffff; --sidebar-hover:rgba(255,255,255,.06); --sidebar-hairline:rgba(255,255,255,.12); --schatten:0 1px 2px rgba(0,0,0,.35); --schatten-stark:0 6px 16px rgba(0,0,0,.45); --deck:rgba(0,0,0,.6); } /* ---------- Grundlagen ---------- */ * { box-sizing:border-box; } html, body { margin:0; } body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--bg); line-height:1.5; -webkit-text-size-adjust:100%; } /* ---------- Grundgerüst ---------- */ .app { display:flex; min-height:100vh; } .sidebar { display:none; } /* mobil aus, Desktop an */ .content { flex:1; min-width:0; } .inhalt { max-width:780px; margin:0 auto; padding:1rem; } /* ---------- Mobile Kopfzeile ---------- */ .topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.5rem; background:var(--karte); border-bottom:1px solid var(--rand); padding:.7rem 1rem; padding-top:calc(.7rem + env(safe-area-inset-top,0px)); } .topbar .marke { font-weight:800; color:var(--akzent); font-size:1.2rem; letter-spacing:-.02em; } .topbar .platz { margin-left:auto; } .topbar a.abmelden { color:var(--text-sekundaer); text-decoration:none; font-size:.9rem; } /* ---------- Mobile Tab-Leiste ---------- */ .tabbar { position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; background:var(--karte); border-top:1px solid var(--rand); padding-bottom:var(--safe-unten); } .tabbar a { flex:1; text-align:center; text-decoration:none; color:var(--text-sekundaer); font-size:.68rem; padding:.5rem 0 .55rem; position:relative; } .tabbar a .icon { display:block; font-size:1.3rem; line-height:1.1; } .tabbar a.aktiv { color:var(--akzent); font-weight:600; } .tabbar a.aktiv::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2rem; height:3px; border-radius:0 0 3px 3px; background:var(--akzent); } .tabbar .badge { position:absolute; top:.25rem; left:50%; margin-left:.35rem; background:var(--badge); color:var(--auf-akzent); font-size:.6rem; line-height:1; padding:.12rem .3rem; border-radius:1rem; } /* ---------- Karten & Meldungen ---------- */ .karte { background:var(--karte); border:1px solid var(--rand); border-radius:1rem; padding:1.2rem 1.25rem; margin-bottom:1rem; box-shadow:var(--schatten); } .meldung { background:var(--akzent-weich); border:1px solid var(--akzent-weich-rand); color:var(--akzent-dunkel); padding:.7rem .9rem; border-radius:.6rem; margin-bottom:1rem; } .fehler { background:var(--gefahr-weich); border:1px solid var(--gefahr-weich-rand); color:var(--gefahr-dunkel); padding:.7rem .9rem; border-radius:.6rem; margin-bottom:1rem; } h1 { font-size:1.5rem; letter-spacing:-.02em; margin:.2rem 0 .9rem; } h2 { font-size:1.08rem; margin:0 0 .6rem; } /* ---------- Formulare & Knöpfe ---------- */ input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], input[type=time], input[type=search], textarea, select { width:100%; padding:.6rem .7rem; border:1px solid var(--rand); border-radius:.55rem; font-size:1rem; font-family:inherit; background:var(--eingabe-bg); color:var(--text); } input:focus, textarea:focus, select:focus { outline:2px solid var(--fokus-ring); border-color:var(--akzent); } textarea { min-height:5rem; resize:vertical; } button, .knopf { background:var(--akzent); color:var(--auf-akzent); border:0; padding:.6rem 1rem; border-radius:.55rem; font-size:.95rem; cursor:pointer; font-weight:600; min-height:2.5rem; transition:background .12s ease; } button:hover { background:var(--akzent-dunkel); } button.sekundaer, .knopf.sekundaer { background:var(--sek-bg); color:var(--sek-text); } button.sekundaer:hover, .knopf.sekundaer:hover { background:var(--sek-hover); } button.warnung { background:var(--gefahr); } button.warnung:hover { background:var(--gefahr-dunkel); } button.mini, .knopf.mini { padding:.32rem .6rem; min-height:0; font-size:.8rem; font-weight:600; line-height:1.2; } label { display:block; font-size:.82rem; color:var(--text-sekundaer); margin:.6rem 0 .2rem; font-weight:500; } .reihe { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; } .reihe label { margin-top:0; } .reihe .feld-wachsen { flex:1 1 10rem; min-width:9rem; } .reihe .feld-schmal { flex:0 1 6rem; min-width:5rem; } .reihe .feld-mittel { flex:0 1 9rem; min-width:7rem; } .reihe .feld-mini { flex:0 1 4.5rem; min-width:4rem; } .reihe .aktionen { display:flex; gap:.4rem; align-items:center; } /* ---------- Text-Utilities & Listen ---------- */ .grau { color:var(--text-sekundaer); font-size:.85rem; } .liste { list-style:none; padding:0; margin:0; } .liste li { padding:.7rem 0; border-bottom:1px solid var(--rand); } .liste li:last-child { border-bottom:0; } .pill { display:inline-block; background:var(--sek-bg); border-radius:1rem; padding:.1rem .6rem; font-size:.75rem; color:var(--sek-text); margin-right:.2rem; } code, .kopier { background:var(--code-bg); border-radius:.35rem; padding:.12rem .4rem; font-size:.9em; } .erledigt-text { text-decoration:line-through; color:var(--text-leise); } table { width:100%; border-collapse:collapse; } td, th { text-align:left; padding:.45rem .4rem; border-bottom:1px solid var(--rand); font-size:.92rem; } /* Leerer Zustand (freundlich statt nüchtern) */ .leer-zustand { text-align:center; padding:1.6rem 1rem; color:var(--text-sekundaer); } .leer-zustand .icon { font-size:2.2rem; display:block; margin-bottom:.4rem; } .leer-zustand p { margin:.2rem 0; } /* ---------- Kennzahlen-Kacheln ---------- */ .kpi-raster { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-bottom:1rem; } .kpi { background:var(--karte); border:1px solid var(--rand); border-radius:1rem; padding:1rem 1.1rem; box-shadow:var(--schatten); transition:transform .12s ease, box-shadow .12s ease; } a.kpi:hover { transform:translateY(-2px); box-shadow:var(--schatten-stark); } .kpi .zahl { font-size:2rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; } .kpi .label { color:var(--text-sekundaer); font-size:.85rem; margin-top:.15rem; } .kpi.akzent .zahl { color:var(--akzent); } .kpi.warn .zahl { color:var(--gefahr); } /* ---------- Datentabellen ---------- */ table.daten { border:1px solid var(--rand); border-radius:.6rem; overflow:hidden; } table.daten thead th { background:var(--thead-bg); color:var(--text-sekundaer); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; font-weight:600; } table.daten tbody tr:hover { background:var(--zeile-hover); } table.daten td.zeit { white-space:nowrap; color:var(--text-sekundaer); } .tab-scroll { overflow-x:auto; } .raster-2 { display:grid; grid-template-columns:1fr; gap:1rem; } a { color:var(--akzent); } a.quelle { cursor:pointer; font-size:.8rem; text-decoration:none; } a.quelle:hover { text-decoration:underline; } a.quelle.knopf { text-decoration:none; } dialog { border:0; border-radius:.9rem; padding:1.3rem; max-width:640px; width:92%; background:var(--karte); color:var(--text); box-shadow:var(--schatten-stark); } dialog::backdrop { background:var(--deck); } pre.rohdaten { background:var(--roh-bg); color:var(--roh-text); padding:.9rem; border-radius:.6rem; overflow:auto; max-height:45vh; white-space:pre-wrap; word-break:break-word; font-size:.85rem; line-height:1.5; } /* ---------- Einträge als saubere Zeilen (To-Dos, Notizen) ---------- */ .eintraege { display:flex; flex-direction:column; } .e-kopf { display:none; } .eintrag { padding:.7rem 0; border-bottom:1px solid var(--rand); } .eintrag:last-child { border-bottom:0; } .e-zeile { display:grid; grid-template-columns:1fr; gap:.3rem .9rem; align-items:baseline; } .e-inhalt { min-width:0; word-break:break-word; } .e-inhalt strong { font-weight:600; } .e-feld { font-size:.9rem; color:var(--text); min-width:0; } .e-feld .lab { color:var(--text-sekundaer); font-weight:500; } .e-feld .leer, .e-feld:empty::after { color:var(--text-leise); } .e-aktion { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-top:.15rem; } .e-aktion form { margin:0; display:inline; } .e-bearbeiten { margin-top:.5rem; } .e-bearbeiten > summary { cursor:pointer; color:var(--text-sekundaer); font-size:.85rem; list-style:none; display:inline-flex; align-items:center; gap:.25rem; } .e-bearbeiten > summary::before { content:"✏️"; font-size:.85em; } /* ---------- Abhak-Liste (Einkauf, große Touch-Ziele) ---------- */ .abhak-kopf { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.6rem; } .abhak-kopf .zaehler { color:var(--text-sekundaer); font-variant-numeric:tabular-nums; } .abhak-liste { list-style:none; padding:0; margin:0; } .abhak-liste li { border-bottom:1px solid var(--rand); } .abhak-liste li:last-child { border-bottom:0; } .abhak { display:flex; align-items:center; gap:.9rem; width:100%; min-height:3.5rem; padding:.55rem .3rem; background:none; border:0; border-radius:.6rem; color:var(--text); font-size:1.05rem; text-align:left; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .abhak:hover { background:var(--karte-hover); } .abhak:disabled { cursor:default; } .abhak .kreis { flex-shrink:0; width:1.6rem; height:1.6rem; border-radius:50%; border:2px solid var(--rand); display:flex; align-items:center; justify-content:center; color:transparent; font-size:.95rem; transition:background .15s ease, border-color .15s ease, color .15s ease; } .abhak .txt { transition:color .2s ease; } .abhak.abgehakt .kreis { background:var(--erfolg); border-color:var(--erfolg); color:var(--auf-akzent); } .abhak.abgehakt .txt { text-decoration:line-through; color:var(--text-leise); } /* ---------- Toasts ---------- */ #toasts { position:fixed; z-index:60; left:50%; transform:translateX(-50%); bottom:calc(4.5rem + var(--safe-unten)); display:flex; flex-direction:column; gap:.5rem; width:min(92vw, 26rem); pointer-events:none; } .toast { background:var(--karte); color:var(--text); border:1px solid var(--rand); border-left:4px solid var(--akzent); border-radius:.7rem; padding:.7rem .9rem; box-shadow:var(--schatten-stark); font-size:.92rem; cursor:pointer; pointer-events:auto; animation:toast-rein .25s ease; } .toast.fehler-art { border-left-color:var(--gefahr); margin-bottom:0; background:var(--karte); } .toast.erfolg-art { border-left-color:var(--erfolg); } .toast.weg { opacity:0; transform:translateY(.4rem); transition:opacity .3s, transform .3s; } @keyframes toast-rein { from { opacity:0; transform:translateY(.6rem); } } /* ---------- Thema-Umschalter ---------- */ .thema-knopf { background:none; border:1px solid var(--rand); color:var(--text-sekundaer); border-radius:.55rem; padding:.3rem .6rem; min-height:0; font-size:.85rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; } .thema-knopf:hover { background:var(--sek-bg); color:var(--text); } /* ---------- Desktop (Laptop): Seitenleiste ---------- */ @media (min-width:860px) { .topbar { display:none; } .tabbar { display:none; } .sidebar { display:flex; flex-direction:column; width:240px; flex-shrink:0; background:var(--sidebar); color:var(--sidebar-text); position:sticky; top:0; height:100vh; padding:1.2rem .8rem; border-right:1px solid var(--sidebar-rand); } .sidebar .marke { color:var(--auf-akzent); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; padding:.3rem .8rem 1.2rem; } .sidebar nav { display:flex; flex-direction:column; gap:.15rem; } .sidebar nav a { display:flex; align-items:center; gap:.7rem; color:var(--sidebar-text); text-decoration:none; padding:.6rem .8rem; border-radius:.55rem; font-size:.96rem; position:relative; } .sidebar nav a .icon { font-size:1.15rem; width:1.4rem; text-align:center; } .sidebar nav a:hover { background:var(--sidebar-hover); color:var(--auf-akzent); } .sidebar nav a.aktiv { background:var(--akzent); color:var(--auf-akzent); font-weight:600; } .sidebar nav a.aktiv::before { content:""; position:absolute; left:-.8rem; top:20%; bottom:20%; width:3px; border-radius:0 3px 3px 0; background:var(--akzent); } .sidebar nav a .badge { margin-left:auto; background:var(--badge); color:var(--auf-akzent); font-size:.7rem; padding:.1rem .45rem; border-radius:1rem; } .sidebar .fuss { margin-top:auto; display:flex; flex-direction:column; gap:.4rem; } .sidebar .fuss .thema-knopf { margin:0 .8rem; border-color:var(--sidebar-hairline); color:var(--sidebar-text); } .sidebar .fuss .thema-knopf:hover { background:var(--sidebar-hover); color:var(--auf-akzent); } .inhalt { padding:1.8rem 2.2rem; max-width:1500px; } /* füllt das Fenster */ h1 { font-size:1.85rem; } .kpi-raster { grid-template-columns:repeat(4,1fr); gap:1rem; } .kpi .zahl { font-size:2.4rem; } .raster-2 { grid-template-columns:1.05fr .95fr; gap:1.4rem; align-items:start; } /* Einträge: echte, ausgerichtete Spalten. Kopf und Zeilen teilen sich per Subgrid dieselben Spuren – sonst berechnet jede Zeile ihre auto-Spalte (Aktionen) selbst und Kopf & Inhalt verrutschen gegeneinander. */ .eintraege { display:grid; grid-template-columns:var(--spalten); column-gap:.9rem; } .eintraege > * { grid-column:1 / -1; } .e-kopf { display:grid; grid-template-columns:subgrid; padding:.2rem 0 .5rem; border-bottom:1px solid var(--rand); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-sekundaer); font-weight:600; } .eintrag { display:grid; grid-template-columns:subgrid; } .eintrag > * { grid-column:1 / -1; } .e-zeile { grid-template-columns:subgrid; align-items:center; } .e-feld .lab { display:none; } .e-aktion { justify-content:flex-end; margin-top:0; flex-wrap:nowrap; } /* Toasts: oben rechts statt über der Tab-Leiste */ #toasts { left:auto; right:1.2rem; bottom:auto; top:1.2rem; transform:none; } } @media (min-width:1300px) { .raster-2 { grid-template-columns:1.2fr .8fr; } } @media (min-width:860px) { .nur-mobil { display:none; } } @media (max-width:859px) { .nur-desktop { display:none; } .content { padding-bottom:4.5rem; } /* Platz für Tab-Leiste */ } /* ---------- Start-Cockpit ---------- */ .cockpit-gruss { margin-bottom:1rem; } .cockpit-gruss h1 { margin-bottom:.15rem; } .cockpit-gruss .untertitel { margin:0; color:var(--text-sekundaer); font-size:1rem; } .knopf-link { display:inline-block; background:var(--akzent); color:var(--auf-akzent); text-decoration:none; padding:.65rem 1.2rem; border-radius:.55rem; font-weight:600; font-size:.95rem; transition:background .12s ease; } .knopf-link:hover { background:var(--akzent-dunkel); } .frist-ueberfaellig { color:var(--gefahr); font-weight:600; } .frist-heute { color:var(--akzent); font-weight:600; } /* hidden-Attribut gewinnt immer – auch gegen display-setzende Klassen (z. B. der 🔔-Push-Knopf, der erst nach Server-Check erscheint). */ [hidden] { display: none !important; }