/* Design-Variablen der Hellhub-Oberflaeche -- EINE Quelle fuer die alte Oberflaeche (index.html, login.html, register.html laden sie vor style.css) und die neue unter /neu (web/src/index.css importiert sie). Bis 2026-10-29 standen sie oben in style.css; herausgeloest, weil die neue Oberflaeche genau so aussehen soll wie die alte (Nutzerwunsch: "es soll schon sehr sehr so aussehen wie es jetzt aussieht") und zwei Kopien auseinanderlaufen wuerden. Der helle Modus haengt an data-theme="hell" am , in beiden Oberflaechen. */ :root { /* ===== Design-Variablen ===== Eingefuehrt als Schritt 1 der Design-Ueberarbeitung (2026-09-10): zuerst wertgleich (nichts sah anders aus), danach wurden die Werte zwischen den Stufen auf die naechste Stufe gezogen (Schrift und Radius bei Gleichstand kleiner, Abstaende groesser). Bewusst fest geblieben: 50%-Kreise, der 68px-Platzhalterbuchstabe, Farben einzelner Komponenten (Bongo-Cat-Blase, Kategoriefarben, Video-Schwarz), Ringe per box-shadow, Endlos-Animationen und Hairlines (1px). Neue Regeln nehmen ihre Werte von hier. Braucht man einen Wert, den es hier nicht gibt, erst pruefen, ob eine vorhandene Stufe reicht -- genau so sind die 40 Schriftgroessen entstanden. Breakpoints koennen keine Variablen sein (@media kennt kein var()). Es gibt fuenf Stufen, und neue Regeln nehmen eine davon: 560px (kleines Handy), 720px (Handy: Dialoge, Event-Ansicht), 880px (Tablet -- ab hier Handy-Leiste statt Hauptnavigation, auch isMobileViewport() in app.js), 1300px (Laptop: Dashboard einspaltig, Reiter nur als Icon), 1440px (Desktop). Dazu 2560/3840px fuer 4K-Bildschirme. Bis 2026-09 waren es 17 verschiedene Grenzen (480 bis 1400px). */ /* --- Flaechen und Text, von hinten nach vorn --- */ /* Seit 2026-09-13 liegen die Flaechen TIEFER als der Grund (Nutzerwunsch: "mache die backgrounds der kacheln und leisten auch etwas dunkler damit sie sich bisschen besser vom background an sich abheben") -- wie in der Vorlage in _Uploads, wo die Karten fast schwarz auf einem helleren Grund stehen. Der Grund selbst ist dafuer eine Spur heller geworden. */ /* Die dunklen Standardfarben sind die vom Nutzer eingestellte Palette (2026-09-16 als Screenshot seiner Konfiguration geliefert: "kannst du die als default machen?") -- Flaeche #121317, Grund #0b0c0f, Kachel #1f2024, Kachel 2 #1a1b1e, Hover #2b2d33, Aktiv #3a3d55, Muster #151c29. Sie stehen als feste Werte da, nicht als Mischung: eine Mischung kaeme nie genau auf diese Toene (Kachel 2 liegt zum Beispiel DUNKLER als die Kachel). Waehlt eine Organisation eine eigene Flaechenfarbe, leitet wendeOrgFarbenAn() die Stufen wieder ab. Neutral statt blaustichig (2026-09-16: "bitte mache die dark defaults eher in richtung schwarz anstatt blau") -- die ganze dunkle Leiter laeuft jetzt ueber Grautoene mit nur einem Hauch Kaelte, der Grund liegt am dunklen Ende. Der Grund liegt UNTER den Flaechen -- er ist die Unterlage, nicht die Buehne. Bis 2026-09-16 war er heller als --panel (#1c1f26 gegen #151a23): die Flaechen sassen wie dunkle Loecher auf einem hellen Grund, und dieselbe Umkehrung machte auch die Fenster flach. Jetzt eine deutliche Stufe darunter, der Verlauf mit ihm (gleiche Ordnung wie im hellen Modus, wo der Grund ebenfalls unter der weissen Flaeche liegt). Geprueft in TEST=vorschlagfarben. */ --bg: #0b0c0f; --zone-bg: #0d0e11; /* Deckend. Die Flaechen waren kurzzeitig zu 92 % durchsichtig mit Weichzeichner darunter -- auf Nutzerwunsch wieder zurueckgenommen ("entferne die durchsichtigkeit"). Halbdurchsichtig bleibt nur, was ein Titelbild durchscheinen lassen MUSS (siehe .agenda-item-mit-bild und die Kacheln der Event-Ansicht). */ /* Neue Standardflaeche seit 2026-09-16 (Nutzerwunsch: "mache 151a23 als die neue default farbe") -- Kachel- und Hover-Ton wandern eine Stufe mit, damit der Abstand zwischen Flaeche, Karte und Hover derselbe bleibt. */ --panel: #121317; --panel-2: #1a1b20; /* Hover auf --panel/--panel-2; ein paar Kopfleisten (Agenda, Raumliste) nutzen denselben Ton */ --panel-hover: #2b2d33; /* Der gerade geoeffnete Eintrag (Album, Notiz, Raum): eine Stufe HELLER als seine Nachbarn plus ein Hauch Akzent. Vorher lag dort --accent-soft, also eine Toenung der Akzentfarbe -- je nach Akzent war der aktive Eintrag damit dunkler als die uebrigen (2026-09-16 gemeldet: "in den alben ist irgendwie das aktive dunkler als das nicht ausgewaehlte album"). */ --aktiv-kachel: #3a3d55; /* Schrift auf dem aktiven Eintrag -- normalerweise die uebliche Textfarbe, aber eigens einstellbar: eine kraeftige Aktiv-Flaeche braucht oft eine andere Schrift (2026-09-16). */ --aktiv-text: var(--text); /* Die INHALTSKACHELN: was auf einer Flaeche liegt -- Events ohne Titelbild (auch in der Agenda-Spalte und in den Widget-Listen), Bongo-Cat-Koerper, Countdown-Zeile. Das ist der einzige Ton, den die Kachelfarbe der Organisation setzt; Flaechen (Widgets, Spalten, Fenster) und Zwischentoene (--panel-2: Chips, Eingabefelder, Raumzeilen) haengen an der Flaechenfarbe. Ohne eigene Kachelfarbe wird der Ton aus --panel-2 gemischt, damit die Inhaltskachel immer eine sichtbare Stufe ueber ihrer Unterlage liegt. */ /* Aufgehellt wird mit einem BLAUGRAU, nicht mit reinem Weiss: Weiss entsaettigt, die Karten wirkten dadurch grau statt wie eine hellere Stufe derselben Farbe (2026-09-16 mit Bild gemeldet). Derselbe Ton nimmt auch der Kopfbalken. */ --aufhellung: #8e9199; --inhalt-kachel: #1f2024; /* Kopfbalken/Hover der Inhaltskachel: ein HELLERER Akzent ihrer eigenen Farbe, aber nur eine halbe Stufe (2026-09-16: "mache das zwar heller als die gewaehlte farbe aber dunkler als es jetzt ist") -- vorher sprang der Kopfbalken so weit auf, dass er wie eine eigene Farbe wirkte. */ --inhalt-kachel-hover: #1a1b1e; /* Flaeche einer Inhaltskachel unter dem Mauszeiger. Standard: derselbe Ton wie der Kopfbalken, also eine Stufe ueber der Kachel. Setzt die Organisation eine Hover-Farbe, gilt DIESE (siehe wendeOrgFarbenAn) -- vorher hing der Karten-Hover als einziger nicht am Regler (2026-09-16: "die hover farbe greift noch nicht bei agenda eintraegen"). */ --kachel-hover: var(--inhalt-kachel-hover); --border: #24262b; --text: #e9eaee; --text-dim: #9ea1a8; /* Text auf farbigen Flaechen oder Bildern: Badges, aktive Knoepfe, Schrift ueber dem Titelbild */ --text-on-color: #fff; /* Echte weisse Flaechen: der 2FA-QR-Code muss weiss sein, die Bongo-Cat-Sprechblase ist es */ --white: #fff; /* --accent ueberschreibt applyAccentColor() (settings.js) mit der Akzentfarbe der Organisation. Alles Indigo leitet sich davon ab: die Toenungen darunter stehen hier auf :root, und weil applyAccentColor() --accent auf demselben Element (html) setzt, rechnen sie mit der Farbe der Organisation. Bis 2026-09 standen feste Indigo-Toene im Code, die bei eigener Akzentfarbe indigo blieben (Hover der Links, aktive Reaktion, Suchfeld-Fokus). */ /* Verlauf statt einer flachen Flaeche (2026-09-13, Nutzerwunsch "mache den hintergrund der gesamten seite in einem dunklen oder hellen gradient je nach light oder dark mode"). Liegt fest im Sichtfenster (background-attachment), damit er beim Scrollen nicht mitwandert und die Kopfzeile denselben Ausschnitt zeigt wie die Seite darunter. */ --bg-verlauf: linear-gradient(157deg, #131418 0%, #0e0f13 50%, #08090b 100%); /* Widgets liegen eine Spur dunkler als der Grund (2026-09-14, Nutzerwunsch) -- als Schleier ueber demselben Verlauf, damit sie das Raster weiterhin luecklenlos abdecken. */ --widget-schleier: rgba(0, 0, 0, 0.22); /* Glaskante und -schatten der Kacheln (siehe .widget) */ --glas-kante: rgba(255, 255, 255, 0.07); --glas-schatten: rgba(0, 0, 0, 0.35); /* EINE Definition der Flaeche fuer die ganze App (2026-09-14, Nutzerwunsch: "mache zusaetzlich die anderen seiten angepasst an das dashboard ... desweiteren fehlt ueberall dieser glass look ... das alles gleich ist und das als default festlegen"). Jede Inhaltsflaeche -- Kachel, Notiz-Spalte, Raumliste, Tools-Panel, Album -- nimmt diese drei Werte, nichts setzt seine Flaeche mehr selbst (siehe Abschnitt "Einheitliche Flaechen" am Ende der Datei). */ /* 78% statt 58%: seit der Seitengrund unter den Flaechen liegt (2026-09-16), zog eine stark durchsichtige Flaeche den dunklen Grund mit hoch -- die Spalten wirkten fast schwarz, und alles darauf (Listenzeilen, Info-Kaesten) stand als heller Kasten davor statt als leichte Stufe (gemeldet mit Bild: "diese zwei bereiche wirken irgendwie noch falsch"). */ --flaeche-fuellung: color-mix(in srgb, var(--panel) 78%, transparent); /* Fenster tragen dieselbe Glasflaeche, nur dichter (2026-09-15: "mache alle fenster die sich oeffnen weniger durchsichtig") -- hinter einem Fenster steht Inhalt, der sonst durchliest. */ --flaeche-fuellung-fenster: color-mix(in srgb, var(--panel) 88%, transparent); /* ---- Die vier einstellbaren Farben einer Organisation (2026-09-16) ---- Flaeche = --panel : Menuespalten, Fenster, Leisten, Hauptflaechen Kachel = --inhalt-kachel : NUR die Inhaltskacheln, die auf einer Flaeche liegen -- Events ohne Titelbild, Bongo-Cat-Koerper, Countdown-Zeile, die Zeilen der Widgets. Widgets selbst gehoeren zur FLAECHE (2026-09-16: "wir brauchen einen regler fuer hintergruende von flaechen wie widgets ... dann einen regler fuer inhaltskacheln wie die events die kein titelbild haben + bongo cat + countdown") --panel-2 : Zwischenton der Flaeche -- Chips, Eingabefelder, Raum-/Listenzeilen. Haengt an der Flaechenfarbe, NICHT an der Kachelfarbe Knopf = --knopf : Knoepfe (bleibt bewusst UNABHAENGIG von der Kachelfarbe -- sonst faerbt eine helle Kachelfarbe auch alle Knoepfe um) Hintergrund = --bg : der Grund hinter allem Gesetzt werden sie in wendeOrgFarbenAn() (settings.js); ohne Wahl gelten diese Vorgaben. */ --knopf: #232529; --knopf-hover: var(--panel-hover); /* Knoepfe im Glas-Stil (2026-10-02: "die buttons sollten an den glass style angepasst werden"): leicht durchscheinende Fuellung, feine Lichtkante oben, weicher Schatten. Bewusst OHNE backdrop-filter -- Dutzende weichgezeichnete Knoepfe kosten Grafikleistung (siehe "Vorberechnetes Glas"); durch die Durchsicht nehmen sie trotzdem die Glasflaeche darunter auf. */ /* Seit 2026-10-02 wie die "+"-Knoepfe (Verlauf von oben hell, sichtbarer Rand, Lichtkante, weicher Schatten), nur neutral in der Knopffarbe statt in der Akzentfarbe ("alle buttons ... so wie die neuen + buttons nur nicht in der selben farbe damit sich das noch abhebt"). Der Rand mischt die Schriftfarbe ein -- damit ist er im hellen wie im dunklen Modus zu sehen. */ --knopf-glas: linear-gradient(180deg, color-mix(in srgb, var(--knopf) 90%, white) 0%, var(--knopf) 100%); --knopf-glas-hover: linear-gradient(180deg, color-mix(in srgb, var(--knopf-hover) 84%, white) 0%, var(--knopf-hover) 100%); --knopf-kante: color-mix(in srgb, var(--text) 16%, var(--knopf)); --knopf-licht: inset 0 1px 0 rgb(255 255 255 / 0.08); --knopf-schatten: 0 2px 6px rgb(0 0 0 / 0.22); --flaeche-unschaerfe: blur(20px) saturate(1.5); /* Flaechen, hinter denen NUR der Seitengrund liegt (Menuespalten, Statusleiste, Widgets, Seitenflaechen), nehmen diese beiden statt --flaeche-fuellung/--flaeche-unschaerfe. Im Normalfall dasselbe; mit Grafikkarte tauscht "Vorberechnetes Glas" (Ende der Datei) die lebendige Unschaerfe gegen ein einmal weichgezeichnetes Bild des Seitengrunds. Fenster und Menues ueber Inhalt bleiben bei den --flaeche-*-Werten -- hinter ihnen steht Inhalt, den kein Bild vorwegnimmt. */ --grund-flaeche: var(--flaeche-fuellung); --grund-unschaerfe: var(--flaeche-unschaerfe); --flaeche-schatten: inset 0 1px 0 var(--glas-kante), 0 6px 20px var(--glas-schatten); /* Feines Raster hinter der Inhaltsflaeche (2026-09-14, Nutzerwunsch: "die haupt area mit so einem kleinen gestrichelten grid hinterlegen ... nur ganz leicht sichtbar"). Es liegt unter dem Inhalt; wo ein Widget steht, deckt dessen Flaeche es ab -- so braucht kein Widget eine eigene Farbe und man sieht trotzdem, wo eines ist. */ /* Farben des Wellen-Musters hinter der ganzen Seite (siehe body::before). Seit 2026-09-16 aus dem Seitengrund gemischt statt in festem Blaugruen (Nutzerwunsch: "koennen wir die hintergrundpattern an der farbe des hintergrundes anpassen nur immer dunkler damit man sie noch sieht?") -- immer DUNKLER als der Grund, in beiden Modi und bei jeder gewaehlten Hintergrundfarbe. Zwei Stufen, damit der Verlauf im Muster erhalten bleibt. */ --wellen-a: #151c29; --wellen-b: color-mix(in srgb, #151c29 70%, var(--bg)); /* Im Dunkeln voll deckend: zwischen einem dunklen Grund und Schwarz liegen wenige Stufen, eine halbdurchsichtige Schicht davon waere schlicht nicht mehr zu sehen. */ --wellen-deckkraft: 1; --gitter-schritt: 56px; /* ---- Kachelraster des Dashboards (2026-09-14) ---- Nutzerwunsch: "ein komplett funktionierendes grid an kacheln die groessentechnisch gleich sind". Eine Kachel ist ein Vielfaches EINER Einheit; zwischen zwei Kacheln liegt genau ein Rasterschritt. Damit endet jede Kachel wieder auf einer Rasterlinie, egal wie viele Einheiten sie hoch ist: Hoehe(n) = n * (Einheit + Abstand) - Abstand. Einheit = 2 Schritte, Abstand = 1 Schritt -> 1 Einheit = 2, 2 = 5, 3 = 8 Schritte. Wer eine neue Kachelgroesse braucht, setzt --kachel-einheiten auf dem Widget -- nie eine feste Pixelhoehe, sonst bricht die Ausrichtung der Nachbarspalten. */ /* Der Abstand zwischen zwei Kacheln ist klein, die Kachel dafuer hoch (2026-09-14: "die abstaende der widgets deutlich verringern indem man sie groesser macht"). Wichtig ist nur, dass Zeilenhoehe + Abstand ein Vielfaches des Rasterschritts ergeben -- hier 3 Schritte: 144 + 24 = 168 = 3 x 56. Damit sitzt jede Kachelunterkante weiter auf einer Rasterlinie. */ /* Kleinerer Abstand zwischen den Kacheln = breitere Kacheln (2026-09-16: "koennen wir bitte auf dem dashboard die widgets einen ticken breiter machen, so dass sich die abstaende etwas verringern"). Die Zeilenhoehe rechnet mit diesem Wert, das Raster bleibt also stimmig. */ --kachel-abstand: 16px; --kachel-einheit: calc(var(--gitter-schritt) * 3 - var(--kachel-abstand)); /* Daempfung des Titelbilds hinter Agenda-Karten (siehe .agenda-item-mit-bild) */ --agenda-bild-filter: blur(2px) brightness(0.5) saturate(1.1); --accent: #6366f1; --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); /* Hover, leichte Markierung */ --accent-tint: color-mix(in srgb, var(--accent) 20%, transparent); /* gewaehlt, aktiv */ --accent-strong: color-mix(in srgb, var(--accent) 35%, transparent); /* Rand, deutliche Flaeche */ --accent-light: color-mix(in srgb, var(--accent) 65%, white); /* Akzent als Schrift auf dunkel */ /* --- Toenungen und Abdunklung. Weiss auf dunklem Grund hebt an (Hover, leichte Flaeche); --scrim liegt hinter Dialogen und Seitenleisten; --on-image-bg traegt Knoepfe und Badges, die auf einem Bild liegen, wo keine Panel-Farbe lesbar waere. --- */ --tint-subtle: rgba(255,255,255,0.04); --tint: rgba(255,255,255,0.06); --tint-hover: rgba(255,255,255,0.1); /* Abdunkelnde Toenung fuer den Hover der Widgets -- Weiss waere dort aufhellend, gewuenscht ist "etwas dunkler" (2026-09-13). */ --tint-dunkel: rgba(0,0,0,0.3); --scrim: rgba(0,0,0,0.6); --scrim-strong: rgba(0,0,0,0.9); /* Lightbox, aufgeklapptes Watch-Together */ --on-image-bg: rgba(0,0,0,0.6); --on-image-bg-hover: rgba(0,0,0,0.8); /* --- Statusfarben. "on-..." ist die Schrift auf einer Flaeche dieser Farbe --- */ --success: #22c55e; --success-hover: #16a34a; --success-text: #4ade80; /* heller, fuer gruene Schrift auf dunklem Grund */ --on-success: #05230f; --warning: #f59e0b; --warning-hover: #d97706; --on-warning: #2b1900; --danger: #ef4444; --danger-hover: #dc2626; --highlight: #fbbf24; /* angeheftet, "bald", aktueller Suchtreffer */ --heart: #ef4676; /* Herz / "will ich spielen" */ --youtube: #ff0000; /* Markenfarbe im Watch-Together */ /* --- Radien. --radius ist die Karte; 50% (Kreis) bleibt als Wert stehen --- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius: 16px; --radius-xl: 20px; --radius-full: 999px; /* --- Schriftgroessen, klein nach gross. --fs-md ist die gewoehnliche Oberflaechenschrift --- */ --fs-2xs: 0.7rem; /* kleinste Schrift (11.2px): Badges, Versal-Labels. Bis 2026-09 gab es noch 0.62rem */ --fs-xs: 0.72rem; --fs-sm: 0.78rem; --fs-md: 0.85rem; --fs-lg: 0.9rem; --fs-body: 1rem; --fs-xl: 1.1rem; --fs-2xl: 1.3rem; --fs-3xl: 1.6rem; --fs-4xl: 2rem; /* grosses Datum der Event-Ansicht; die Luecke 1.6 -> 2.4 war zu gross */ --fs-display: 2.4rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- Abstaende fuer padding, margin und gap: --space-N = N x 2px. Der Bestand liegt auf einem 2px-Raster (6px und 10px sind haeufig), darum keine 4px-Stufen. Ungerade Werte stehen noch fest. */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-16: 32px; /* --- Bausteine: gemeinsame Hoehe fuer Knoepfe und Felder (Schritt 2). Knoepfe und Felder, die nebeneinander stehen, sind damit gleich hoch -- Speichern und Loeschen waren es frueher nicht. */ --control-h: 32px; --control-h-sm: 28px; /* Icon-Knoepfe, Pillen */ /* Auf Touch-Geraeten gelten groessere Werte, siehe @media (pointer: coarse) direkt nach :root. */ /* --- Schatten --- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 6px 20px rgba(0,0,0,0.35); --shadow-popover: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 10px 30px rgba(0,0,0,0.5); /* --- Ebenen (z-index), von unten nach oben. Werte 0-5 bleiben fest: sie ordnen nur innerhalb einer Komponente. Was knapp ueber einer Ebene liegen muss, rechnet von ihr aus (Suchleiste = --z-modal + 1), damit die Reihenfolge beim Verschieben erhalten bleibt. --- */ --z-header: 10; --z-sticky: 90; /* Kalender-Kopfzeilen, Tages-Vorschau, Menue-Hintergrund */ --z-banner: 150; /* PWA-Hinweis */ --z-tab-bar: 160; /* Handy-Leiste unten */ --z-modal: 200; --z-over-modal: 250; /* Bestaetigungsdialog, offener Raum auf dem Handy */ --z-popover: 300; --z-menu: 310; /* Erstellen-Menue, Icon-Auswahl, Wikilinks */ --z-hover-preview: 320; --z-theater: 450; /* aufgeklapptes Watch-Together */ --z-overlay: 500; /* Lightbox, Erinnerungsbanner */ --z-toast: 600; /* --- Bewegung --- */ --duration-fast: 0.15s; --duration-base: 0.2s; --duration-slow: 0.3s; --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-artiges Einfahren von unten */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* leichtes Ueberschwingen (Toast) */ /* ===== Layout ===== */ /* Einheitliche feste Maximalhoehe fuer die Haupt-Inhaltsflaeche jeder Seite (Dashboard-Agenda + Widget-Bereich, Kalender, Compendium, Medien, Notizen, Dateien, Links) -- bewusst ein einziger fester Wert statt an der Fensterhoehe (100vh) oder dynamisch pro Seite/Tab-Inhalt berechnet (beides gab es zwischenzeitlich, wirkte aber unvorhersehbar -- je nach Browserfenster bzw. Tagesinhalt sprang die Hoehe). Inhalt, der ueberlaeuft, scrollt intern statt die Seite zu strecken. Beide Spalten einer Seite nutzen dieselbe Variable, sind also garantiert gleich lang. Der Wert ist auf Nutzerwunsch groesszuegiger als die zuvor exakt austarierten 916px (bei denen das Widgets-Ein/Aus-Symbol pixelgenau die untere rechte Ecke bildete) -- bei 1010px bleibt noch mehr Luft unter dem Symbol. */ --fixed-content-height: 1010px; /* Hoehe JEDER Inhaltsflaeche (2026-09-14: "bitte mache alle main areas so gross wie bei rooms oder notizen, medien z.b. ist groesser"). Gerechnet wie bisher bei Notizen/Dateien: alles unter der Kopfzeile minus dem Abstand nach unten. Wer eine neue Ansicht baut, nimmt diese Variable -- eigene calc()-Formeln waren genau der Grund, warum Rooms 100px kuerzer und das Album groesser als der Rest war. */ /* Genauso hoch wie die zweite Menuespalte links (2026-09-14: "wenn es keine suchleiste gibt mache den inhalt rechts genauso hoch wie die leiste 2 links") -- dieselbe Rechnung wie dort: Fensterhoehe minus Kopfzeile und oberem Abstand, minus dem unteren Rand der Spalten. */ /* Wo der Inhalt beginnt (oberer Abstand von main plus die Kopfzeile der Seite) -- daran haengen die Linien des Rasters, siehe main::before. */ --gitter-anker: calc(var(--space-10) + var(--gitter-schritt)); --inhalt-hoehe: calc(100vh - var(--sticky-header-height, 78px) - var(--space-10) - var(--schale-gap) - var(--hub-titel-hoehe)); /* "vh" schrumpft unter CSS-zoom NICHT mit (siehe die zoom-Regeln bei main{...}) -- auf sehr breiten Bildschirmen muss die Hoehe deshalb durch denselben Faktor geteilt werden, sonst laeuft jede Ansicht unten aus dem Bild. Stand bisher nur bei Rooms, jetzt an der Variablen und damit fuer alle. */ /* Breiten der beiden Menuespalten links (2026-09-13, siehe .app-nav). Die erste ist seit der Ueberarbeitung nach der Vorlage in _Uploads eine reine Icon-Leiste ("links eine kleine icon leiste"): 64px fassen den 44px-Knopf samt Luft, der Name klappt beim Ueberfahren daneben auf, ohne die Leiste zu verbreitern. Die Kontextspalte steht auf jeder Seite offen. */ --nav-breite: 64px; --kontext-breite: 380px; /* Hoehe der Kopfzeile: links der ausgeschriebene Hub-Name, rechts die Statusleiste. Die Kontextspalte beginnt darunter (und endet unten um denselben Betrag frueher, damit sie gleichmaessig im Bild steht). */ --hub-titel-hoehe: 40px; /* Abstand der schwebenden Flaechen zum Fensterrand und zueinander (2026-09-13, Vorlage in _Uploads): Icon-Leiste, Kontextmenue und Inhalt stehen als eigene Karten nebeneinander, nichts klebt an der Kante. Eine Variable, damit body-Padding und beide Leisten synchron bleiben. */ --schale-gap: 12px; /* Nutzer-Feedback: "mache den dashboard bereich von der höhe ruhig bis zum ende vom bildschirm, gerade ist da noch ein gap unten" -- nur das Dashboard (nicht die anderen ~8 Seiten, die bewusst die feste --fixed-content-height oben nutzen, siehe deren Kommentar) bekommt eine echte, an die tatsaechliche Fensterhoehe gekoppelte Hoehe. 90px = Abstand zwischen Header- Unterkante und Grid-Oberkante (35px Luecke + 21px .dashboard-toolbar + 10px Luecke) plus 24px Luft am unteren Rand, per Messung im Chromium-Sandkasten ermittelt. */ --dashboard-content-height: calc(100vh - var(--sticky-header-height, 78px) - 90px); /* Hoehe der iOS-artigen Bottom-Tab-Bar (nur Mobile, siehe .mobile-tab-bar) -- eigene Variable, damit Seiteninhalt (body padding-bottom) und die PWA-/Push-Hinweisleiste (.pwa-banner) sich zuverlaessig danach richten koennen, statt zwei Stellen mit demselben Zahlenwert von Hand synchron zu halten. */ --mobile-tab-bar-height: 58px; /* Nutzer-Feedback: "die mobile bar unten bitte floating und nicht bis zu den rändern und weiter oben" -- Abstand der schwebenden Bar zum Bildschirmrand (unten/links/rechts), auch fuer body-Padding und den PWA-Banner-Abstand mitverwendet, damit alle drei synchron bleiben. */ --mobile-tab-bar-gap: 14px; /* Breite der Inhaltsflaeche. Die schwebende Statusleiste rechnet mit demselben Wert, damit sie auf breiten Bildschirmen exakt so breit ist wie main darunter (Nutzerwunsch 2026-09-13: "mache mir die menueleiste oben genauso breit wie den inhalt") -- main zieht sein Padding von dieser Breite ab, die Leiste muss es deshalb ebenfalls abziehen. */ --inhalt-max: 1680px; } /* ===== Heller Modus (2026-09-13) ===== Nutzerwunsch: "wir machen einen umschalter dazu von dark mode und light mode. wobei light mode eher wie ein papier nicht 100% white ist" -- die Flaechen sind warme Papiertoene (#f1eee8 als Grund, #fbfaf7 als Karte), nicht Reinweiss. Es wird NUR die Farbliste getauscht: Abstaende, Radien, Schrift und alle Regeln weiter unten bleiben, weil sie ueber diese Variablen laufen. applyTheme() (app.js) setzt data-theme am ; ohne Attribut gilt der dunkle Modus von oben. --accent steht bewusst nicht hier: die Akzentfarbe gehoert der Organisation und wird von applyAccentColor() als Inline-Stil auf demselben Element gesetzt (schlaegt beide Bloecke). */ :root { color-scheme: dark; } html[data-theme="hell"] { color-scheme: light; --bg: #e7e2d8; --bg-verlauf: linear-gradient(157deg, #efebe2 0%, #e7e2d8 48%, #ddd7ca 100%); /* Auf Papier reicht ein kleinerer Schritt: dieselbe Mischung wie im Dunkeln wuerde als grauer Balken ueber dem hellen Grund liegen. Die Richtung bleibt dieselbe -- dunkler als der Grund. */ --wellen-a: color-mix(in srgb, var(--bg) 80%, #000); --wellen-b: color-mix(in srgb, var(--bg) 90%, #000); --wellen-deckkraft: 0.6; --widget-schleier: rgba(35, 32, 25, 0.05); --glas-kante: rgba(255, 255, 255, 0.65); --glas-schatten: rgba(35, 32, 25, 0.07); /* Auf Papier wird das Bild aufgehellt statt abgedunkelt -- die Schrift darueber ist dunkel. */ --agenda-bild-filter: blur(2px) brightness(1.45) saturate(0.75) opacity(0.55); --zone-bg: #ddd8cd; --panel: #fdfcf9; --panel-2: #f6f3ec; --panel-hover: #eeeae1; /* Auf Papier liegt die Flaeche schon fast auf Weiss -- aufhellen bringt dort nichts sichtbares, die Inhaltskachel muss also eine Spur DUNKLER liegen. Richtung umgedreht, Schritt gleich gross wie im dunklen Modus. */ /* Auf Papier wird abgedunkelt -- mit einem warmen Braungrau statt reinem Schwarz, sonst kippt der warme Ton der Flaeche ins Graue. */ /* Gegenstuecke zu den festen dunklen Werten (2026-09-16): Knopf und Aktiv-Flaeche stehen im dunklen Block als feste Toene, ohne diese Zeilen zoege der helle Modus sie mit. */ --knopf: #f6f3ec; --knopf-licht: inset 0 1px 0 rgb(255 255 255 / 0.8); --knopf-schatten: 0 2px 6px rgb(70 55 30 / 0.14); --knopf-glas: linear-gradient(180deg, color-mix(in srgb, var(--knopf) 70%, white) 0%, color-mix(in srgb, var(--knopf) 96%, var(--aufhellung)) 100%); --knopf-glas-hover: linear-gradient(180deg, color-mix(in srgb, var(--knopf) 85%, white) 0%, color-mix(in srgb, var(--knopf) 90%, var(--aufhellung)) 100%); --aktiv-kachel: #dcd9ef; --aufhellung: #6b6254; --inhalt-kachel: color-mix(in srgb, var(--panel-2) 92%, var(--aufhellung)); --inhalt-kachel-hover: color-mix(in srgb, var(--panel-2) 88%, var(--aufhellung)); --border: #e0dbd0; --text: #232019; --text-dim: #736d63; /* Akzent als SCHRIFT: auf hellem Grund muss er abgedunkelt werden statt aufgehellt. */ --accent-light: color-mix(in srgb, var(--accent) 78%, black); /* Toenungen kommen auf hellem Grund von Schwarz, nicht von Weiss. */ --tint-subtle: rgba(35,32,25,0.035); --tint: rgba(35,32,25,0.055); --tint-hover: rgba(35,32,25,0.09); --tint-dunkel: rgba(35,32,25,0.09); --scrim: rgba(35,32,25,0.32); --success-text: #15803d; --highlight: #a9700a; /* Bernstein als SCHRIFT ist auf Papier praktisch unlesbar (Kontrast 1,5 gegen eine helle Kachel, 2026-09-16 im Kontrastlauf gefunden: "morgen" in der Agenda). Derselbe dunklere Ton wie --highlight; als Flaeche bleibt er kraeftig genug, die Schrift darauf ist ohnehin weiss. */ --warning: #a9700a; --warning-hover: #8a5a08; /* Schatten duerfen auf Papier nur andeuten -- die dunklen Werte von oben wirken hier wie Russ. */ --shadow-sm: 0 1px 2px rgba(35,32,25,0.07); --shadow-md: 0 6px 20px rgba(35,32,25,0.10); --shadow-popover: 0 8px 24px rgba(35,32,25,0.14); --shadow-lg: 0 10px 30px rgba(35,32,25,0.16); }