/* ============================================================================ HomeBee + ImmoBee — gemeinsame Design-Basis ============================================================================ Eine Schicht für beide Apps. Erst die Werte als Variablen, dann die Bausteine. Ein Thema aus themen/ überschreibt nur Variablen, niemals Bausteine — so bleibt die Form in jedem Thema gleich. Die Masse sind aus beiden Apps zusammengeführt, nicht aus einer übernommen: Baustein ThomysHomeBee ImmoBee hier -------- -------------------- -------------------- -------------- Knopf r 10, p 8/12, 14px — r 10, p 8/13 Kachel r 11, p 11/10, Rand 1 r 18, p 14/15, Rand 2 r 14, p 12/13, Rand 1 Raster min 130, Abstand 7 min 126, Abstand 12 min 128, Abstand 10 Karte r 12, p 10/12 r 10 bis 16, p 16/18 r 13, p 14 Marke r 10 (eckig gerundet) r 999 (Pille) r 999 (Pille) Kennzahl — 1.6rem, 700, tabular 1.5rem, 700, tabular Einbinden: (optional) Thema wählen: — ohne Angabe gilt die neutrale Basis ============================================================================ */ :root { /* ---- Flächen, von hinten nach vorn. Bewusst neutrales Anthrazit ohne Farbstich, damit kein Thema schon in der Basis vorweggenommen wird. */ --grund: #121316; --flaeche: #1a1c20; --flaeche-hoch: #23262c; --linie: #2e3138; /* ---- Schrift ---- */ --text: #e9eaed; --text-leise: #9096a0; /* ---- Akzente. Zurückhaltend; Themen dürfen laut werden. ---- */ --akzent: #5b8dbe; --akzent-2: #7fa9d0; --gut: #4ca97a; --warnung: #c8913f; --fehler: #c96a63; /* ---- Masse ---- */ --r-karte: 13px; --r-kachel: 14px; --r-knopf: 10px; --luft: 14px; --raster-min: 128px; --raster-gap: 10px; --schrift: 15px/1.45 system-ui, Roboto, Arial, sans-serif; /* ---- Wirkung ---- */ --schatten: 0 1px 3px rgba(0,0,0,.35); --glanz: none; /* Themen mit Leuchten setzen hier etwas ein */ } /* ===================== Grundgerüst ===================== */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; background: var(--grund); color: var(--text); font: var(--schrift); } a { color: var(--akzent); } /* ===================== Kopfzeile ===================== */ .ha-kopf { position: sticky; top: 0; z-index: 10; display: flex; gap: .6em; align-items: center; flex-wrap: wrap; padding: .6em .9em; background: var(--flaeche); border-bottom: 1px solid var(--linie); } .ha-kopf .titel { font-weight: 600; } .ha-kopf .rechts { margin-left: auto; display: flex; gap: .5em; } /* ===================== Karte ===================== */ .ha-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: var(--luft); box-shadow: var(--schatten); } .ha-karte + .ha-karte { margin-top: var(--luft); } .ha-karte > h2, .ha-karte > .karte-titel { margin: 0 0 .6em; font-size: 15px; font-weight: 600; } /* ===================== Kachel ===================== */ /* Klickbare Fläche für Szenen, Räume, Kennzahlen. Als