/* KOPIE – nicht hier ändern. Quelle: GRAVITY APP SERVICES/gestaltung/gravity.css, Gestaltung 1.1, sha256 8cce2bd028820a5257ea7a059dfd84be7366e5715eda6f4abc724985885bd844 Ändern: Quelle bearbeiten, dann python3 "GRAVITY APP SERVICES/gestaltung/verteilen.py" und die App bauen/ausliefern (GRAVITY APP SERVICES/gestaltung/GESTALTUNG.md). */ /* ============================================================================ GRAVITY · Gestaltung 1.1 · 03.10.2026 ---------------------------------------------------------------------------- DIE QUELLE. Alle GRAVITY-Oberflaechen (GRAVITY OS, Mediathek, Render Cluster) tragen eine KOPIE dieser Datei mit Versionsnummer - keine laedt sie zur Laufzeit von hier. Die Apps laufen auf verschiedenen Rechnern und werden auf verschiedenen Wegen ausgeliefert (OS ueber die JOBS-Freigabe auf den Server, die Mediathek direkt auf dem Mac Mini, der Render Cluster per SSH); eine gemeinsame Datei zur Laufzeit wuerde sie aneinanderketten. Eine Quelle mit Kopien haelt sie gleich, ohne dass eine von der anderen abhaengt. Aendern: HIER, dann python3 "GRAVITY APP SERVICES/gestaltung/verteilen.py" und jede App bauen/ausliefern. Regelwerk und Werte: GESTALTUNG.md daneben. Was hier steht: Werte (Variablen auf :root) und die Touch-Grundlage, die in JEDER App sicher passt. Was hier NICHT steht: Klassen einer App, Layout, Eigenschaften am Dokument (color-scheme, body) - die setzt jede App selbst. Die Mediathek hat noch ihren hellen klassischen Modus; ein color-scheme:dark von hier faerbte dort Felder und Bildlaufleisten dunkel. Version: kleine Aenderung (Wert angepasst, Variable dazu) = 1.x, Bruch (Variable umbenannt oder entfernt, Bedeutung geaendert) = 2.0. ========================================================================== */ :root{ /* ---- Flaechen: vom Grund nach oben. Dunkel ist kein Modus, sondern das Haus. */ --ground:#070707; --ground-2:#0B0B0B; --panel:#0D0D0D; --raised:#141414; --raised-2:#1B1B1B; /* ---- Linien: Weiss mit Deckkraft statt grauer Volltoene - so liegen sie auf jeder Flaeche gleich fein. */ --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.2); /* ---- Schrift: vier Stufen. ink = lesen, -2 = Beilage, -3 = Beschriftung, -4 = Rest (Platzhalter, abgeschaltet). Kein reines Weiss fuer Text. */ --ink:#EDEDED; --ink-2:#A1A1A1; --ink-3:#6B6B6B; --ink-4:#3A3A3A; /* ---- Der EINE Akzent: markiert, was aktiv ist. Im OS ist er eine Einstellung (Settings > Look) - hier steht sein Ausgangswert. */ --accent:#FF7A45; --accent-soft:rgb(var(--accent-rgb) / .12); /* ---- Signal: Weiss fuer Fokus, Auswahl und Regler - neutral, damit der Akzent etwas bedeutet. */ --signal:#FFFFFF; --signal-soft:rgba(255,255,255,.07); /* ---- Bedeutung. Keine Geschmacksfrage: gruen laeuft, rot ist kaputt, orange heisst Achtung. --warn hat denselben Ton wie der Grund-Akzent, haengt aber NICHT an ihm - stellt jemand den Akzent um, bleibt eine Warnung orange. */ --ok:#4CC38A; --warn:#FF7A45; --crit:#F2555A; --info:#A1A1A1; /* ---- Kanaele: dieselben Farben als nackte Zahlen "R G B" mit Leerzeichen. Gebrauch: rgb(var(--accent-rgb) / .35) - so behaelt jede Stelle ihre Deckkraft und haengt trotzdem an der Masterfarbe. Tailwind braucht genau diese Form fuer bg-zinc-800/50 (rgb(var(--x) / )). NICHT rgba(var(--accent-rgb), .35) - das braucht Kommas und geht hier nicht. Wer eine Farbe oben aendert, aendert ihren Kanal hier mit. */ --ground-rgb:7 7 7; --ground-2-rgb:11 11 11; --panel-rgb:13 13 13; --raised-rgb:20 20 20; --raised-2-rgb:27 27 27; --ink-rgb:237 237 237; --ink-2-rgb:161 161 161; --ink-3-rgb:107 107 107; --ink-4-rgb:58 58 58; --accent-rgb:255 122 69; --ok-rgb:76 195 138; --warn-rgb:255 122 69; --crit-rgb:242 85 90; /* ---- Rundungen. Pillen (Knoepfe, Chips) sind 99px - die stehen nicht hier. */ --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px; /* ---- Schriftarten: Geist + Geist Mono. Die Dateien liefert jede App selbst aus (das OS eingebettet, die Mediathek aus ./fonts/) - nie von einem fremden Server. */ --f-ui:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-disp:'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --f-mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---- Schriftgroessen. Ausgezaehlt im OS am 03.10.2026 (rund 770 Angaben in px, Zahlen in GESTALTUNG.md) und gegen die Mediathek im OS-Look gelegt, die dieselben Stufen schon traegt (xs 11, sm 12,5, base 13, lg 15 ...). Bewusst KEINE Stufe: die halben Pixel 10,5 und 11,5 (im OS haeufig, rund 220-mal). Sie sind Feinschliff des OS zwischen zwei Stufen, den keine andere App braucht; zwoelf Stufen statt zehn machten jede Wahl unklarer. Im OS bleiben sie, wo sie sind (sie zu aendern waere sichtbar). Neu wird eine Stufe genommen. */ --t-2xs:10px; /* Versal-Etiketten in Mono, Zaehler */ --t-xs:11px; /* Beilage, Metadaten, Zeit */ --t-s:12px; /* dichte Listen, Segmente */ --t-m:12.5px; /* Arbeitsgroesse: Knopf, Feld, Listenzeile */ --t-base:13px; /* Grundschrift */ --t-l:15px; /* Titel eines Blatts, Fensters, Abschnitts */ --t-xl:17px; /* Zwischentitel */ --t-2xl:20px; /* Kennzahl */ --t-3xl:26px; /* Seitentitel */ --t-4xl:30px; /* grosse Zahl, Startbild */ /* ---- Abstaende: 4er-Raster. Neues baut darauf; was im Bestand 10, 14, 18 oder 22 px hat, wird beim naechsten Anfassen auf die Stufe gezogen, nicht aus Prinzip. */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; /* ---- Bewegung und Tiefe */ --ease:cubic-bezier(.2,.7,.2,1); --blur:14px; /* Milchglas hinter Leisten (OS: Settings > Look) */ /* ---- Finger: Apple verlangt 44 pt je Ziel; Felder unter 16 px laesst Safari beim Antippen hineinzoomen und dort stehen. */ --touch:44px; --touch-sm:36px; /* sichtbare Hoehe, wo eine Leiste kompakt bleibt */ --touch-gap:8px; /* Luft zwischen zwei Zielen in einer Reihe */ --input-touch:16px; /* ---- Sichere Zonen (Notch, Statusleiste, Home-Strich). Am Schreibtisch 0. Wirken nur mit viewport-fit=cover im viewport-Meta der App. */ --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); /* Was dem Fenster bis zum Boden fehlt (seit 1.1). iOS 26 legt eine Seite vom Home-Bildschirm (black-translucent) um die Statusleiste zu KURZ an: 100dvh, 100% und innerHeight enden dort, der Rest des Glases bleibt leer. Nur ein Skript kann das messen (GESTALTUNG.md, "Bis zum Boden"); hier steht der Ausgangswert. */ --rest-unten:0px; /* ---- Telefon-Rand (seit 1.1): der seitliche Rand einer Seite auf dem Telefon - innerhalb der sicheren Zone gemessen, die Zone legt die Huelle dazu, nie die Seite. */ --rand-telefon:16px; } /* ============================================================================ Im Rahmen (seit 1.1) ---------------------------------------------------------------------------- Steckt eine App im Rahmen einer anderen (Mediathek und Render Cluster im GRAVITY OS), rueckt NUR der Rahmen-Geber um Statusleiste, Notch und Home-Strich ein. iOS liefert die sicheren Zonen auch an den Rahmen - wer sie dort noch einmal addiert, rueckt doppelt ein (03.10.2026: 60 pt schwarz ueber der Mediathek, eine Filterleiste, die "in der Mitte stehen bleibt"). Jede App setzt dafuer beim Start im : if (self !== top) document.documentElement.classList.add('im-rahmen') Wirkt nur, wo die App var(--safe-*) benutzt - nie env() direkt. ========================================================================== */ html.im-rahmen{--safe-t:0px;--safe-r:0px;--safe-b:0px;--safe-l:0px;--rest-unten:0px} /* ============================================================================ Touch-Grundlage ---------------------------------------------------------------------------- Nur, was in JEDER App sicher passt: Felder. Knoepfe stehen bewusst nicht hier - "jeder button 44 px" zerreisst kompakte Leisten, und ein Knopf mit eigenem ::after oder klickbaren Teilen darin darf keine Decke bekommen. Welche Knoepfe wachsen, zaehlt jede App in ihrer mobil.css selbst aus (oder setzt .g-ziel). Am Schreibtisch greift hier nichts: die Maus ist fein (pointer:fine). ========================================================================== */ @media (pointer:coarse){ /* 16 px Schrift in Feldern - die eine Regel, die nie verlieren darf: Apps setzen ihre Felder oft mit staerkeren Selektoren auf 12 px. Darum !important. */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select,textarea{font-size:var(--input-touch)!important} /* Felder echt 44 px hoch. Ein Feld in einer Huelle (Lupe + Feld) setzt die App auf min-height:0 und laesst die Huelle das Ziel sein. */ select,input[type=text],input[type=search],input[type=number],input[type=email], input[type=password],input[type=url],input[type=date],input[type=time]{min-height:var(--touch)} input[type=range]{min-height:var(--touch)} input[type=color]{min-width:var(--touch);min-height:var(--touch)} /* .g-ziel: unsichtbar groessere Trefferflaeche, wo der Knopf sichtbar klein bleiben soll (Sinnbilder in einer Leiste). Ein ::after von mindestens 44 x 44 um die Mitte; min() sorgt dafuer, dass es nie kleiner als der Knopf ist. Nur an Elementen ohne eigenes ::after. position:relative steht in :where(), also ohne Gewicht - ein absolut gesetzter Knopf bleibt, wo er ist. */ :where(.g-ziel){position:relative} .g-ziel::after{content:"";position:absolute; top:min(0px,calc(50% - var(--touch) / 2));bottom:min(0px,calc(50% - var(--touch) / 2)); left:min(0px,calc(50% - var(--touch) / 2));right:min(0px,calc(50% - var(--touch) / 2))} }