/* * Gestaltung uebernommen aus ~/laut-jetzt/src/pages/Home.css, damit sich das * Dashboard wie die App anfuehlt. Die Schriften Fraunces und Plus Jakarta Sans * liegen hier nicht vor; es greifen die Fallbacks, die die App selbst in ihren * Tokens angibt. */ :root { --lj-accent: #C41E3A; --lj-accent-rgb: 196, 30, 58; --lj-bg: #FAF8F5; --lj-surface: rgba(250, 248, 245, 0.96); --lj-ink: #1C1917; --lj-ink-muted: #78716C; --lj-border: rgba(28, 25, 23, 0.10); --lj-radius: 18px; --lj-font-head: 'Fraunces', Georgia, serif; --lj-font-body: 'Plus Jakarta Sans', system-ui, sans-serif; /* * Farben der Tageszeiten. EINZIGE Quelle - app.js liest sie mit * getComputedStyle aus, statt eine zweite Liste zu fuehren. * * Bis 2026-09-04 standen hier #E8A33D (Vormittag) und #E2662C * (Nachmittag): 30 Grad Farbtonabstand, beide warm. Gemessen ergab das * einen Abstand von 14,0 (OKLab dE x100, normalsichtig) - unterhalb von * 15, ab dem zwei Flaechen auch mit voller Farbsicht sicher zu trennen * sind. Genau dieses Paar wurde als zu aehnlich gemeldet. * * Die vier Farbtoene liegen jetzt bei 269, 167, 74 und 6 Grad und laufen * mit der Tageszeit: blaue Nacht, gruener Vormittag, goldener * Nachmittag, roter Abend. Schlechtestes Paar ueber ALLE sechs * Kombinationen: 24,8 normalsichtig, 10,0 bei Deuteranopie (Ziel >= 8). */ --pc-nacht: #3D5AFE; --pc-vormittag: #00A67D; --pc-nachmittag: #F0A202; --pc-abend: #C2185B; } /* Drei Zustaende: Systemeinstellung (kein Attribut), ausdruecklich hell, * ausdruecklich dunkel. Die Systemregel wird gegen [data-theme="light"] * abgesichert, damit eine bewusste Wahl das Betriebssystem schlaegt. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lj-bg: #141210; --lj-surface: rgba(24, 22, 20, 0.94); --lj-ink: #F0EDE8; --lj-ink-muted: #8C8480; --lj-border: rgba(240, 237, 232, 0.10); /* Gold bei OKLCH L 0,77 leuchtet auf der dunklen Karte. Das dunkle * Band liegt bei L 0,48-0,67, deshalb hier L 0,66. Die anderen drei * liegen in beiden Baendern und bleiben unveraendert. */ --pc-nachmittag: #C08512; } } :root[data-theme="dark"] { --lj-bg: #141210; --lj-surface: rgba(24, 22, 20, 0.94); --lj-ink: #F0EDE8; --lj-ink-muted: #8C8480; --lj-border: rgba(240, 237, 232, 0.10); --pc-nachmittag: #C08512; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--lj-font-body); background: var(--lj-bg); color: var(--lj-ink); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--lj-font-head); font-weight: 600; margin: 0; } h1 { font-size: 1.4rem; } h2 { font-size: 1.05rem; } h3 { font-size: .9rem; } button { font-family: var(--lj-font-body); font-size: .85rem; border: 1px solid var(--lj-border); background: transparent; color: var(--lj-ink); border-radius: 100px; padding: .5rem 1rem; cursor: pointer; transition: background .15s; } button:hover:not(:disabled) { background: rgba(var(--lj-accent-rgb), .08); } button:disabled { opacity: .45; cursor: default; } button.primary { background: var(--lj-accent); color: #fff; border-color: transparent; } button.primary:hover:not(:disabled) { filter: brightness(1.08); } button.danger { color: var(--lj-accent); } input, select { font-family: var(--lj-font-body); font-size: .85rem; padding: .45rem .6rem; border: 1px solid var(--lj-border); border-radius: 10px; background: var(--lj-bg); color: var(--lj-ink); } /* ── Login ─────────────────────────────────────────────────────────────── */ #login { min-height: 100vh; display: grid; place-items: center; padding: 2rem; } /* * Solange der Server noch nicht gesagt hat, ob eine Sitzung besteht, wird * gar nichts gezeigt (siehe Skript im von index.html). Bewusst ohne * Ladeanzeige: der Normalfall ist ein gueltiges Cookie, und dann dauert das * wenige Millisekunden - ein Spinner waere dann selbst das Flackern, das * hier gerade abgestellt wird. */ html.booting #login { display: none; } #login .card { width: min(380px, 100%); background: var(--lj-surface); border: 1px solid var(--lj-border); border-radius: var(--lj-radius); padding: 2rem; box-shadow: 0 2px 16px rgba(0,0,0,.12); } #login .card > * + * { margin-top: 1rem; } #login input { width: 100%; } #login button { width: 100%; } .brand-mark { color: var(--lj-accent); } .sub { color: var(--lj-ink-muted); font-size: .82rem; line-height: 1.5; } /* ── Layout ────────────────────────────────────────────────────────────── */ /* 360 px: etwas Luft fuer Sprach- und Darstellungsschalter neben dem Titel. */ #app { display: none; height: 100vh; grid-template-columns: 360px 1fr; } #app.on { display: grid; } aside { border-right: 1px solid var(--lj-border); background: var(--lj-surface); overflow-y: auto; padding: 1.25rem; } aside > section + section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lj-border); } main { position: relative; } #map { position: absolute; inset: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; /* Umbrechen statt abschneiden, falls doch einmal etwas dazukommt. */ flex-wrap: wrap; gap: .4rem; } /* ── ROI-Liste ─────────────────────────────────────────────────────────── */ .roi { border: 1px solid var(--lj-border); border-radius: 12px; padding: .7rem .8rem; cursor: pointer; margin-bottom: .5rem; } .roi:hover { background: rgba(var(--lj-accent-rgb), .05); } .roi.active { border-color: var(--lj-accent); background: rgba(var(--lj-accent-rgb), .07); } .roi .name { font-weight: 500; font-size: .9rem; } .roi .meta { color: var(--lj-ink-muted); font-size: .75rem; margin-top: .15rem; } /* ── Zahlen ────────────────────────────────────────────────────────────── */ .big { font-family: var(--lj-font-head); font-size: 2.4rem; line-height: 1; } /* Die Kennzahl steht seit 2026-09-03 ganz oben, direkt unter der * Gebietswahl. Der Abstand nach unten trennt sie von den Filtern, die sie * veraendern - ohne ihn kleben Zahl und "Tagesteil" aneinander. */ #statsSection > .headline { margin-bottom: 1.2rem; } .rowline { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; padding: .28rem 0; } .rowline + .rowline { border-top: 1px solid var(--lj-border); } .rowline .k { color: var(--lj-ink-muted); } .rowline .v { font-variant-numeric: tabular-nums; } .bar { height: 4px; border-radius: 2px; background: var(--lj-accent); opacity: .8; } .note { font-size: .74rem; line-height: 1.45; color: var(--lj-ink-muted); border-left: 2px solid var(--lj-accent); padding-left: .6rem; margin-top: .6rem; } .controls { display: grid; gap: .5rem; } .controls .pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } label.tiny { font-size: .72rem; color: var(--lj-ink-muted); display: block; margin-bottom: .2rem; } #spark { display: flex; align-items: flex-end; gap: 2px; height: 54px; margin-top: .5rem; } #spark div { flex: 1; background: var(--lj-accent); opacity: .75; border-radius: 2px 2px 0 0; min-height: 1px; } .toast { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--lj-surface); border: 1px solid var(--lj-border); border-radius: 100px; padding: .5rem 1.1rem; font-size: .82rem; box-shadow: 0 2px 16px rgba(0,0,0,.16); z-index: 5; } .legend { position: absolute; bottom: 1rem; right: 1rem; z-index: 4; background: var(--lj-surface); border: 1px solid var(--lj-border); border-radius: 12px; padding: .6rem .75rem; font-size: .74rem; color: var(--lj-ink-muted); line-height: 1.6; } .legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; } /* ── Unterdrueckte Werte ───────────────────────────────────────────────── * * Eigene Behandlung, weil "zu wenige Daten" NICHT wie eine Null aussehen darf. * Eine ausgegraute 0 wuerde genau die Aussage treffen, die die Schwelle * verhindern soll - dass hier naemlich nichts passiert ist. */ .insufficient { margin-top: 1.25rem; padding: .9rem 1rem; border: 1px dashed var(--lj-border); border-radius: calc(var(--lj-radius) - 6px); background: rgba(var(--lj-accent-rgb), .04); color: var(--lj-ink-muted); font-size: .84rem; line-height: 1.5; } .rowline.suppressed .k { opacity: .55; } .rowline.suppressed .v { color: var(--lj-ink-muted); font-size: .78rem; font-style: italic; font-variant-numeric: normal; } /* Unterdrueckter Zeitabschnitt: schraffiert und niedrig, damit er als Luecke * lesbar ist und nicht als kleiner Messwert. */ #spark div.sup { background: repeating-linear-gradient( 45deg, var(--lj-ink-muted) 0 2px, transparent 2px 4px ); opacity: .38; } .tiny { color: var(--lj-ink-muted); font-size: .72rem; line-height: 1.45; display: block; } label.tiny { margin-bottom: .15rem; } .disclaimer { margin-top: 1.75rem; padding-top: .9rem; border-top: 1px solid var(--lj-border); } #servedPeriod:empty, #sparkNote:empty, #privacyNote:empty { display: none; } #privacyNote { margin-top: .9rem; } .maplibregl-popup-content { font-family: var(--lj-font-body); font-size: .82rem; border-radius: calc(var(--lj-radius) - 8px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .insufficient { background: rgba(var(--lj-accent-rgb), .07); } :root:not([data-theme="light"]) .maplibregl-popup-content { background: #1C1917; color: #FAF8F5; } :root:not([data-theme="light"]) .maplibregl-popup-tip { border-top-color: #1C1917; } } :root[data-theme="dark"] .insufficient { background: rgba(var(--lj-accent-rgb), .07); } :root[data-theme="dark"] .maplibregl-popup-content { background: #1C1917; color: #FAF8F5; } :root[data-theme="dark"] .maplibregl-popup-tip { border-top-color: #1C1917; } /* Legende: gestrichelte Kontur statt gefuelltem Kaestchen - das Gebiet ist * jetzt Rahmen, nicht Flaeche. */ .legend .dash { display: inline-block; width: 14px; height: 0; border-top: 1.5px dashed #57534E; opacity: .7; margin-right: .45rem; vertical-align: middle; } /* Interpretation. Bewusst ruhig gesetzt: es sind Beobachtungen, keine * Kennzahlen - sie sollen nicht mit der grossen Zahl konkurrieren. */ .readout-item { margin-top: .9rem; padding-left: .7rem; border-left: 2px solid rgba(var(--lj-accent-rgb), .35); } .readout-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lj-ink-muted); margin-bottom: .15rem; } .readout-b { font-size: .86rem; line-height: 1.5; } /* Einstellungen: eingeklappt, damit der API-Zugang nicht als Einladung wirkt, * Daten abzugreifen. Das Produkt ist die Auswertung, nicht die Schnittstelle. */ .settings { margin-top: 1.5rem; border-top: 1px solid var(--lj-border); padding-top: .9rem; } .settings > summary { cursor: pointer; font-size: .82rem; color: var(--lj-ink-muted); list-style: none; user-select: none; } .settings > summary::-webkit-details-marker { display: none; } .settings > summary::before { content: '▸ '; } .settings[open] > summary::before { content: '▾ '; } .assignment { margin-top: .5rem; opacity: .85; } #totalScope { margin-top: .1rem; } .method p { margin: 0 0 .7rem; } .method p:last-child { margin-bottom: 0; } .method strong { color: var(--lj-ink); font-weight: 600; } /* Vergleiche. Der Balken zeigt die Angabe PRO TAG - nicht die Gesamtzahl. * Sonst waere die Laenge des Zeitfensters die auffaelligste Aussage. */ .modes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; } .mode { font-size: .76rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--lj-border); background: transparent; color: var(--lj-ink-muted); cursor: pointer; } .mode:hover { border-color: var(--lj-accent); } .mode.on { border-color: var(--lj-accent); color: var(--lj-accent); background: rgba(var(--lj-accent-rgb), .08); } .cmp-row { margin-top: .9rem; } .cmp-label { font-size: .82rem; font-weight: 500; } .cmp-bar-wrap { height: 6px; background: var(--lj-border); border-radius: 3px; margin: .3rem 0; } .cmp-bar { height: 100%; border-radius: 3px; background: var(--lj-accent); opacity: .8; } .cmp-val { font-size: .82rem; font-variant-numeric: tabular-nums; } .cmp-sub { font-size: .72rem; color: var(--lj-ink-muted); margin-top: .1rem; } .suppressed-text { color: var(--lj-ink-muted); font-style: italic; font-size: .78rem; } /* ── Vergleichsmodul ───────────────────────────────────────────────────── * * Die drei Modi sind die Analysefunktionen des Dashboards, nicht Filter - * deshalb Karten mit Untertitel statt kleiner Pillen. */ .section-lead { margin: -.2rem 0 .7rem; } .modes { display: grid; gap: .4rem; margin-top: .6rem; } .mode { display: block; width: 100%; text-align: left; padding: .55rem .7rem; border-radius: calc(var(--lj-radius) - 8px); border: 1px solid var(--lj-border); background: transparent; cursor: pointer; } .mode:hover { border-color: var(--lj-accent); } .mode.on { border-color: var(--lj-accent); background: rgba(var(--lj-accent-rgb), .07); } .mode-t { display: block; font-size: .85rem; font-weight: 500; color: var(--lj-ink); } .mode.on .mode-t { color: var(--lj-accent); } .mode-s { display: block; font-size: .71rem; color: var(--lj-ink-muted); margin-top: .1rem; } .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; } .cmp-card { padding: .7rem; border-radius: calc(var(--lj-radius) - 8px); border: 1px solid var(--lj-border); } .cmp-card.partial { border-style: dashed; } .cmp-h { font-size: .75rem; color: var(--lj-ink-muted); } .cmp-rate { font-family: var(--lj-font-head); font-size: 1.5rem; line-height: 1.1; margin-top: .2rem; font-variant-numeric: tabular-nums; } .cmp-unit { font-family: var(--lj-font-body); font-size: .72rem; color: var(--lj-ink-muted); } .cmp-flag { font-size: .68rem; color: var(--lj-ink-muted); margin-top: .3rem; font-style: italic; } /* Event ist eine Abfolge, keine Gegenüberstellung - der Pfeil macht das * sichtbar, sonst liest sich die Dreierreihe wie drei gleichrangige Gruppen. */ .timeline { display: flex; align-items: stretch; gap: .3rem; margin-top: 1rem; } .timeline .cmp-card { flex: 1; min-width: 0; } .timeline .cmp-rate { font-size: 1.15rem; } .tl-arrow { align-self: center; color: var(--lj-ink-muted); font-size: .9rem; } .finding { margin-top: 1.1rem; padding: .8rem .9rem; border-radius: calc(var(--lj-radius) - 8px); background: rgba(var(--lj-accent-rgb), .06); border: 1px solid rgba(var(--lj-accent-rgb), .18); } .finding-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lj-accent); margin-bottom: .25rem; } .finding-b { font-size: .88rem; line-height: 1.5; } .finding-c { font-size: .68rem; color: var(--lj-ink-muted); margin-top: .4rem; line-height: 1.4; } /* Kartenumschalter */ .map-switch { /* z-index 5, nicht 2: MapLibre legt seinen eigenen Control-Container * darueber, und die Schalter waren dadurch nicht anklickbar. Die Legende * liegt aus demselben Grund auf 4. */ position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; align-items: center; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--lj-surface); border: 1px solid var(--lj-border); backdrop-filter: blur(6px); } .sw { font-size: .75rem; padding: .25rem .65rem; border-radius: 999px; border: none; background: transparent; color: var(--lj-ink-muted); cursor: pointer; } .sw.on { background: var(--lj-accent); color: #fff; } .sw-note { font-size: .66rem; color: var(--lj-ink-muted); padding-right: .5rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sw.on { color: #1C1917; } } :root[data-theme="dark"] .sw.on { color: #1C1917; } /* „Was fällt auf?“ — Rechnung oben, Deutung darunter, sichtbar getrennt. * Der Leser soll erkennen, welches von beidem er gerade vor sich hat. */ .finding-headline { font-size: .82rem; font-weight: 500; margin-bottom: .5rem; } .finding-rows { margin-bottom: .6rem; } .fr { display: flex; justify-content: space-between; align-items: baseline; padding: .18rem 0; } .fr-k { font-size: .78rem; color: var(--lj-ink-muted); } .fr-v { font-size: .95rem; font-variant-numeric: tabular-nums; font-weight: 500; } .fr-u { font-size: .68rem; color: var(--lj-ink-muted); font-weight: 400; } .fr-delta { border-top: 1px solid rgba(var(--lj-accent-rgb), .2); margin-top: .2rem; padding-top: .3rem; } .fr-delta .fr-v { color: var(--lj-accent); } .finding-b { font-size: .86rem; line-height: 1.5; padding-top: .55rem; border-top: 1px solid rgba(var(--lj-accent-rgb), .18); } .finding-basis { font-size: .7rem; color: var(--lj-ink-muted); margin-top: .5rem; } .finding-c { margin-top: .25rem; } /* `not_assessable`: keine Akzentfarbe, keine hervorgehobene Veränderung. * Wo keine Aussage möglich ist, soll die Oberfläche keine erzeugen. */ .finding.unsure { background: transparent; border-color: var(--lj-border); border-style: dashed; } .finding.unsure .finding-h { color: var(--lj-ink-muted); } .finding.unsure .finding-b { border-top-color: var(--lj-border); } /* Darstellungsumschalter: unten links, damit er nicht mit dem * Gruppenumschalter oben links kollidiert. */ .map-style { top: auto; bottom: 12px; left: 12px; } .st { font-size: .75rem; padding: .25rem .65rem; border-radius: 999px; border: none; background: transparent; color: var(--lj-ink-muted); cursor: pointer; } .st.on { background: var(--lj-accent); color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st.on { color: #1C1917; } } :root[data-theme="dark"] .st.on { color: #1C1917; } /* ── Kompakte Seitenleiste ─────────────────────────────────────────────── * * Ziel: alles ohne Scrollen. Die Erklärtexte standen vorher als Dauertext * unter den Zahlen und kosteten zusammen über zehn Zeilen — man liest sie * einmal und danach nie wieder. Sie liegen jetzt hinter einem ⓘ. */ .info { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: .25rem; border: 1px solid var(--lj-ink-muted); border-radius: 50%; font-size: 9px; font-style: italic; font-weight: 600; line-height: 1; color: var(--lj-ink-muted); cursor: help; vertical-align: middle; position: relative; flex: none; } .info:hover, .info:focus { border-color: var(--lj-accent); color: var(--lj-accent); outline: none; } /* Der Hinweis haengt an , nicht am Icon. * * Als ::after am Icon wurde er von aside{overflow-y:auto} abgeschnitten - die * Seitenleiste ist 340px breit, der Hinweis 250px, und sobald er ueber den * Rand ragte, war die Haelfte weg. Ein Element an mit position:fixed * kennt diese Grenze nicht und darf ueber die Karte laufen. */ #tip { position: fixed; z-index: 60; max-width: 280px; padding: .6rem .7rem; border-radius: 8px; background: var(--lj-ink); color: var(--lj-bg); font: 400 .74rem/1.5 var(--lj-font-body); box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none; opacity: 0; transition: opacity .12s; } #tip.on { opacity: 1; } .pick select { width: 100%; } #roiMeta { margin-top: .3rem; } /* Kennzahl und Verlauf nebeneinander statt untereinander. */ .headline-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .headline-row #spark { flex: 1; margin: 0; height: 42px; } .headline-row .big { font-size: 2rem; } /* Reiter statt drei Blöcke untereinander. */ .tabs { display: flex; gap: .25rem; margin-top: 1.1rem; border-bottom: 1px solid var(--lj-border); } .tab { border: none; background: transparent; cursor: pointer; padding: .35rem .5rem; font-size: .78rem; color: var(--lj-ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--lj-ink); } .tab.on { color: var(--lj-accent); border-bottom-color: var(--lj-accent); } .panel { padding-top: .5rem; } .panel[hidden] { display: none; } aside section + section { margin-top: 1.1rem; } aside h2 { display: flex; align-items: center; } /* Kopfzeilen-Schalter fuer Sprache und Darstellung. */ .head-tools { display: flex; align-items: center; gap: .3rem; flex: none; } /* Der Titel darf schrumpfen, die Schalter nicht - sonst wandert "Abmelden" * wieder aus der Leiste. */ .topbar h1 { min-width: 0; flex: 1; } .head-tools select, .head-tools button { font-size: .72rem; padding: .2rem .4rem; border-radius: 6px; white-space: nowrap; border: 1px solid var(--lj-border); background: transparent; color: var(--lj-ink-muted); cursor: pointer; } /* NUR das Darstellungssymbol ist quadratisch. Als `.head-tools button` traf * die Regel auch "Abmelden" und quetschte es auf 26 px - der Text wurde * abgeschnitten, und die Seitenleiste sah zu schmal aus, obwohl sie es nicht * war. */ #theme { width: 26px; padding-left: 0; padding-right: 0; text-align: center; } .head-tools select:hover, .head-tools button:hover { border-color: var(--lj-accent); } /* Zeitverlauf als Reiter statt als Streifen neben der grossen Zahl. */ #p-time .tl-row { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; align-items: center; gap: .5rem; padding: .12rem 0; font-size: .74rem; } #p-time .tl-bar { height: 6px; border-radius: 3px; background: var(--lj-accent); opacity: .75; } #p-time .tl-bar.sup { background: repeating-linear-gradient(45deg, var(--lj-ink-muted) 0 2px, transparent 2px 4px); opacity: .38; } #p-time .tl-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--lj-ink-muted); } /* ── Ansichtswahl und Tagesteile (Modus B) ──────────────────────────────── */ /* Die Variablen heissen --lj-*. Beim ersten Versuch standen hier --line, --card und --accent - undefinierte Variablen machen die ganze Deklaration ungueltig, also fielen Rahmen UND Hintergrund weg, und das weisse .on-Schriftbild stand unsichtbar auf hellem Grund. */ .views { display: flex; gap: 8px; margin-bottom: 16px; } .views .view { flex: 1; padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--lj-border); background: transparent; color: var(--lj-ink-muted); border-radius: 10px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .views .view:hover { border-color: rgba(var(--lj-accent-rgb), .45); color: var(--lj-ink); } .views .view.on { background: var(--lj-accent); border-color: var(--lj-accent); color: #fff; } .parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .parts .part, .parts .ctx { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--lj-border); background: transparent; color: var(--lj-ink-muted); border-radius: 999px; } /* Der Farbpunkt erklaert die Karte: dieselbe Farbe wie die Flaechen. * * NUR bei den Tageszeiten. Die Kontext-Knoepfe trugen bis 2026-09-04 * ebenfalls einen Punkt - grau bzw. als Ring -, aber der Kontext faerbt * auf der Karte nichts: die Kreise kennen allein `part`. Ein Punkt, der * auf nichts zeigt, behauptet eine Legende, die es nicht gibt. */ .parts .part::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--pc); opacity: .35; } .parts .part.on, .parts .ctx.on { color: var(--lj-ink); border-color: rgba(var(--lj-accent-rgb), .55); } .parts .part.on::before { opacity: 1; } .parts .part[data-part="nacht"] { --pc: var(--pc-nacht); } .parts .part[data-part="vormittag"] { --pc: var(--pc-vormittag); } .parts .part[data-part="nachmittag"] { --pc: var(--pc-nachmittag); } .parts .part[data-part="abend"] { --pc: var(--pc-abend); } /* Berichtsknopf. Umriss statt Fuellung: er ist eine Ausgabe, keine * Auswahl - die Akzentfarbe gehoert im Dashboard dem, was gerade gilt. */ .pdf-btn { display: block; width: 100%; margin-top: 14px; padding: 9px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--lj-ink); background: transparent; border: 1px solid rgba(var(--lj-accent-rgb), .45); border-radius: 999px; cursor: pointer; } .pdf-btn:hover:not(:disabled) { background: rgba(var(--lj-accent-rgb), .08); border-color: var(--lj-accent); } .pdf-btn:disabled { opacity: .55; cursor: default; } .spans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .spans .span { padding: 6px 11px; font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--lj-border); background: transparent; color: var(--lj-ink-muted); border-radius: 999px; } .spans .span:hover { color: var(--lj-ink); } .spans .span.on { background: var(--lj-accent); border-color: var(--lj-accent); color: #fff; }