/* ============================================================================ leitstand-v2.css — Designsystem «1b Leitstand», Stand v2 Gemeinsame Grundlage aller Apps auf *.bfbern.app: Grundwerte, Kopfleiste, Seitenkopf, Abschnitte, Kacheln. QUELLE UND VERÖFFENTLICHUNG --------------------------- Quelle: assets/leitstand-v2.css (diese Datei) Kopie: Login/public/css/leitstand-v2.css (wird mit dem Login ausgerollt) Adresse: https://bfbern.app/css/leitstand-v2.css Nach jeder Änderung hier: cp assets/leitstand-v2.css Login/public/css/ WIRKT NUR MIT DER KLASSE `lv2` ------------------------------ Eine App übernimmt v2, indem sie die Datei verlinkt UND dem die Klasse `lv2` gibt. Ohne Klasse greift keine Regel. Die Versionsnummer im Namen ist Absicht (Entscheid Christoph 24.09.2026): eine spätere v3 wird eine neue Datei und verändert keine App ungefragt — dieselbe Vorsicht wie beim Entscheid vom 27.08.2026 zum Theme-Master. ZWEI TEILE ---------- Grundwerte und Kopfleiste gelten mit `lv2` am überall. Seitenkopf, Abschnitte und Kacheln (die Bausteine der Übersicht) greifen nur innerhalb eines Behälters mit der Klasse `lv2-inhalt`. Grund: Apps wie die Drohne haben eigene Klassen gleichen Namens (.kachel, .abschnitt-kopf) — ohne diese Grenze schlügen die Regeln dort durch. WAS DIE APP SELBST MACHT ------------------------ Rechts in der Kopfleiste steht, was die App braucht (Umschalter, Uhr, Werkzeug-Symbole). Das Gerüst — Höhe, Farben, Knopfform, Handy-Verhalten — kommt von hier. Eigene Elemente stylt die App in ihrer eigenen CSS-Datei. Werte aus: assets/Übersicht v2 Design-Anpassung.zip → «Uebersicht v2.dc.html» Kopfleiste Variante «Weich-dunkel». Abweichungen von der Vorlage (Entscheide Christoph 24.09.2026): - Rot bleibt Fahrzeugrot #A72920 (Vorlage: #c8352b) - Kennzeile der Kacheln in Helvetica Neue statt IBM Plex Mono (kein Google-Abruf) - Kacheln ohne Schatten und ohne Anheben; Hover nur über den Rahmen, matt ========================================================================= */ .lv2 { /* --- Farben --- */ --lv2-akzent: #A72920; /* Fahrzeugrot */ --lv2-akzent-hover: #84201A; --lv2-grund: #F3F2EF; /* Seitenhintergrund, warmes Grau */ --lv2-kopf-grund: #FBFAF8; /* Seitenkopf unter der Kopfleiste */ --lv2-karte: #FFFFFF; --lv2-text: #1F2126; --lv2-text-leise: #50535B; /* Beschreibungen */ --lv2-text-hinweis: #555861; /* Untertitel im Seitenkopf */ --lv2-text-still: #6B6E76; /* Nebeninformation */ --lv2-pfeil: #9A9CA3; --lv2-rand: #E3E0DA; /* Kachelrahmen */ --lv2-rand-hover: #BDB8B0; /* Kachelrahmen beim Überfahren, matt */ --lv2-linie: #EFECE7; /* Trennlinie in der Kachel */ --lv2-kopf-linie: #E7E4DF; /* Linie unter dem Seitenkopf */ /* --- Kopfleiste «Weich-dunkel» --- */ --lv2-hut: #3F434B; --lv2-hut-trenner: #5A5D64; --lv2-hut-bereich: #D8D9DC; --lv2-hut-person: #C9CACD; --lv2-hut-knopf-rand:#6A6D74; --lv2-hut-knopf-hover:#4C5059; /* --- Form --- */ --lv2-radius-karte: 12px; --lv2-radius-knopf: 8px; --lv2-breite: 1440px; /* --- Schrift: Systemschriften, kein externer Abruf --- */ --lv2-schrift: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Apps mit der Vorgänger-Ebene (--ld-*) erben so die neue Schrift, ohne dass jede Regel dort angepasst werden muss. */ --ld-schrift: var(--lv2-schrift); --ld-akzent: var(--lv2-akzent); --ld-akzent-hover: var(--lv2-akzent-hover); } body.lv2 { margin: 0; background: var(--lv2-grund); font-family: var(--lv2-schrift); color: var(--lv2-text); -webkit-font-smoothing: antialiased; } /* =========================================================================== Kopfleiste Aufbau: Start (Logo + bfbern.app, verlinkt auf die Übersicht) · Trenner · Bereich · Lücke · Aktionen ======================================================================== */ .lv2 .hut { display: flex; align-items: center; gap: 20px; padding: 18px 32px; background: var(--lv2-hut); border-bottom: 3px solid var(--lv2-akzent); font-family: var(--lv2-schrift); } /* Logo und Marke als ein Link auf die Übersicht (Wunsch Christoph 24.09.2026). In den Offline-Einsatz-Apps steht hier ein statt — ein versehentlicher Tipp soll mitten im Einsatz die Seite nicht verlassen. */ .lv2 .hut-start { display: flex; align-items: center; gap: 14px; color: #FFFFFF; text-decoration: none; border-radius: var(--lv2-radius-knopf); } .lv2 a.hut-start:hover { color: #FFFFFF; text-decoration: none; } .lv2 a.hut-start:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; } .lv2 .hut-logo { width: 40px; height: 40px; object-fit: contain; display: block; flex: 0 0 auto; } .lv2 .hut-marke { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #FFFFFF; white-space: nowrap; } .lv2 .hut-trenner { width: 1px; height: 26px; background: var(--lv2-hut-trenner); flex: 0 0 auto; } .lv2 .hut-bereich { font-size: 16px; color: var(--lv2-hut-bereich); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .lv2 .hut-luecke { flex: 1; } .lv2 .hut-aktionen { display: flex; align-items: center; gap: 12px; } .lv2 .hut-person { font-size: 15px; color: var(--lv2-hut-person); margin-right: 8px; white-space: nowrap; } /* Knöpfe: mit Text, durchsichtig, heller Rand. Element im Selektor, damit allgemeine Knopfregeln einer App nicht durchschlagen. */ .lv2 .hut a.hut-knopf, .lv2 .hut button.hut-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0; padding: 9px 18px; border: 1px solid var(--lv2-hut-knopf-rand); border-radius: var(--lv2-radius-knopf); background: transparent; color: #FFFFFF; font-family: var(--lv2-schrift); font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; } .lv2 .hut a.hut-knopf:hover, .lv2 .hut button.hut-knopf:hover { background: var(--lv2-hut-knopf-hover); color: #FFFFFF; text-decoration: none; } .lv2 .hut .hut-knopf:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } /* Werkzeug-Symbol einer App (Dunkelmodus, Zurücksetzen …): gleiche Form, quadratisch. «Übersicht» und «Abmelden» sind immer Text-Knöpfe. */ .lv2 .hut a.hut-knopf--symbol, .lv2 .hut button.hut-knopf--symbol { padding: 0; width: 40px; height: 40px; } .lv2 .hut form { margin: 0; display: contents; } /* =========================================================================== Seitenkopf und Inhalt ======================================================================== */ .lv2-inhalt .inhalt-kopf { background: var(--lv2-kopf-grund); border-bottom: 1px solid var(--lv2-kopf-linie); padding: 38px 32px 34px; } .lv2-inhalt .inhalt-kopf > * { max-width: var(--lv2-breite); } .lv2-inhalt .inhalt-kopf h1 { margin: 0; font-family: var(--lv2-schrift); font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--lv2-text); text-align: left; } .lv2-inhalt .inhalt-kopf .hinweis { margin: 12px 0 0; font-size: 17px; color: var(--lv2-text-hinweis); text-align: left; text-wrap: pretty; } .lv2-inhalt .inhalt-koerper { max-width: var(--lv2-breite); padding: 40px 32px 64px; } /* =========================================================================== Abschnitte ======================================================================== */ .lv2-inhalt .abschnitt + .abschnitt { margin-top: 44px; } .lv2-inhalt .abschnitt-kopf { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; padding-left: 14px; border-left: 3px solid var(--lv2-akzent); line-height: 1.2; } .lv2-inhalt .abschnitt-titel { font-family: var(--lv2-schrift); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lv2-text); } .lv2-inhalt .abschnitt-anzahl { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--lv2-text-still); } /* =========================================================================== Kacheln ======================================================================== */ .lv2-inhalt .kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; } .lv2-inhalt .kachel { display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 22px 22px 18px; background: var(--lv2-karte); border: 1px solid var(--lv2-rand); border-radius: var(--lv2-radius-karte); color: inherit; font-weight: 400; /* Kachel kann ein sein — allgemeine Link-Regeln einer App setzen sonst fett */ text-decoration: none; cursor: pointer; transition: border-color .15s; } /* Matt: nur der Rahmen dunkelt ab — kein Schatten, kein Anheben. */ .lv2-inhalt .kachel:hover, .lv2-inhalt .kachel:focus-visible { border-color: var(--lv2-rand-hover); box-shadow: none; outline: none; color: inherit; text-decoration: none; } .lv2-inhalt .kachel:focus-visible { outline: 2px solid var(--lv2-akzent); outline-offset: 2px; } .lv2-inhalt .kachel-titel { font-family: var(--lv2-schrift); font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--lv2-text); } .lv2-inhalt .kachel-text { margin: 0; font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--lv2-text-leise); text-wrap: pretty; } .lv2-inhalt .kachel-fueller { flex: 1; } /* Kennzeile unten: «Einzelanwendung» oder «N Anwendungen ›» */ .lv2-inhalt .kachel-kenn { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--lv2-linie); font-family: var(--lv2-schrift); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--lv2-text-still); } .lv2-inhalt .gruppe-pfeil { margin-left: auto; font-size: 20px; line-height: 1; color: var(--lv2-pfeil); } /* =========================================================================== Handy (unter 640 px): die Marke weicht, der Bereichsname bleibt. Der Name der Person blendet aus, damit die Leiste einzeilig bleibt. ======================================================================== */ @media (max-width: 640px) { .lv2 .hut { gap: 10px; padding: 12px; } .lv2 .hut-marke, .lv2 .hut-person { display: none; } .lv2 .hut-logo { width: 36px; height: 36px; } .lv2 .hut-trenner { height: 22px; } .lv2 .hut-bereich { font-size: 15px; flex: 0 1 auto; } .lv2 .hut-aktionen { gap: 6px; } .lv2 .hut a.hut-knopf, .lv2 .hut button.hut-knopf { padding: 7px 10px; font-size: 14px; } .lv2 .hut a.hut-knopf--symbol, .lv2 .hut button.hut-knopf--symbol { padding: 0; width: 36px; height: 36px; } .lv2-inhalt .inhalt-kopf { padding: 24px 16px 22px; } .lv2-inhalt .inhalt-kopf h1 { font-size: 28px; } .lv2-inhalt .inhalt-kopf .hinweis { font-size: 15px; } .lv2-inhalt .inhalt-koerper { padding: 24px 16px 40px; } .lv2-inhalt .abschnitt + .abschnitt { margin-top: 32px; } .lv2-inhalt .kachel-raster { grid-template-columns: 1fr; gap: 12px; } .lv2-inhalt .kachel { min-height: 0; } }