/* Fassung 24.09.2026 · Nr. 295 · Haut glas + dunkel (FR29301 = A, FR13811) Vorfassung: ALT-renty-haut-20260924-295.css (daneben). Neu: data-haut="glas" (Skizze A) und data-haut="dunkel" (Skizze C) — reine Token-Umschaltung; ohne data-haut sieht jede Seite aus wie vorher. */ /* ========================================================================== X36 · renty-haut.css — die EINE Haut-Token-Datei des RentyAICommander (K-51) ========================================================================== Herkunft (INVENTAR Teil D, Empfehlung 1): CSS-Grundgerüst von nav-vorschau-v3_3 (dunkel) behalten, um helle Zweitwerte ergänzt (nav-vorschau-v4_1-Tagesstimmung), als EINE Datei — kein zweites Gehäuse für Hell/Dunkel (F-034). Regel (Spec § 4, Stempel § 1c Nr. 15): Schriftgröße läuft NUR über die eine Stellschraube --schrift. Kein Bauteil setzt hier oder im Gehäuse eine feste Pixelgröße für Schrift. Umschaltung: (Grundstellung), oder — Papier ist seit 18.09.2026 (FR25710 = A) der Standard für personennahe Seiten; dunkel/hell bleiben fürs Arbeitsgerät. Kein @media(prefers-color-scheme) — RentyDATA lehrt: die Haut ist ein bewusster Schalter, keine Geräte-Erbschaft (INVENTAR Teil D/C). Herausgelöst NIE kopiert: dieses Blatt ist der EINE Ort für Farbe/Maß/Rundung des Commander-Gehäuses. Module bringen nur Werte aus diesem Blatt ein (§ 3c). ========================================================================== */ :root{ /* ---- Schrift: die eine Stellschraube ---------------------------------- */ --schrift: 1; /* Stufe 0.8–1.5, Schritt 0.08 (RENTYDATA-Muster) */ --schrift-basis: 13px; /* Grundgröße vor Skalierung, wie v3_3/v4_1 */ --s: calc(var(--schrift-basis) * var(--schrift)); /* ---- Maße (v3_3, feste Bereiche laut INVENTAR Teil D) ------------------ */ --top-h: 48px; --top-h2: 40px; /* zweite Kopfzeile (RentyMulti-Leiste, v4_1) */ --foot-h: 30px; --icon-w: 44px; /* Seitenleiste eingeklappt (Stempel P4/X23-Nachbarn) */ --mitte-w: 44px; /* Mittelleiste X1, senkrecht */ --rad: 5px; /* EIN Rundungswert (Empfehlung 1, gegen v4_1s 6–20px-Wildwuchs) */ --rad-panel: 10px; /* AIHelp-Panel, Legende, Karten — etwas weicher als --rad */ /* ---- Rollenfarben (v3_3, Grundstellung dunkel) -------------------------- */ --bg: #18181b; --surf: #1f1f23; --surf2: #27272c; --surf3: #2d2d34; --bord: #303036; --text: #d4d4d8; --text-hoch: #f4f4f5; --dim: #71717a; --c-root: #60a5fa; /* ⌂ Root */ --c-ast: #f87171; /* ● Ast-Spitze */ --c-up: #ffffff; /* ▲ eine Ebene hoch */ --c-dn: #34d399; /* ▼ eine Ebene runter */ --c-act: #6366f1; /* aktive Auswahl / Schnell-Aktion */ --c-warn: #f59e0b; --c-fehler: #ef4444; --ai-grad: linear-gradient(135deg,#4f46e5,#7c3aed,#a21caf); /* ---- RentyMulti-Einheiten: 7 Themenfarben (v4_1), unabhängig von Hell/Dunkel */ --e-teal: #14b8a6; --e-teal-l: #99f6e4; --e-teal-t: #042f2c; --e-blue: #3b82f6; --e-blue-l: #bfdbfe; --e-blue-t: #172554; --e-amber:#f59e0b; --e-amber-l:#fde68a; --e-amber-t:#451a03; --e-green:#22c55e; --e-green-l:#bbf7d0; --e-green-t:#052e16; --e-violet:#8b5cf6; --e-violet-l:#ddd6fe; --e-violet-t:#2e1065; --e-coral:#fb7185; --e-coral-l:#fecdd3; --e-coral-t:#4c0519; --e-gray: #94a3b8; --e-gray-l: #e2e8f0; --e-gray-t: #0f172a; /* ---- Lämpchen X5: Farbe + Zeichen (Fragezeichen-Regel gilt für beides) -- */ --lampe-gut: #34d399; --lampe-gut-z: "●"; --lampe-warn:#f59e0b; --lampe-warn-z:"▲"; --lampe-schlecht:#ef4444; --lampe-schlecht-z:"■"; --lampe-aus: #52525b; --lampe-aus-z: "○"; /* ---- Schatten / Ebenen -------------------------------------------------- */ --schatten-1: 0 1px 2px rgba(0,0,0,.35); --schatten-2: 0 8px 24px rgba(0,0,0,.45); --schatten-3: 0 16px 48px rgba(0,0,0,.55); --z-splitter: 20; --z-overlay: 60; --z-legende: 70; --z-aihelp: 80; --z-menue: 90; --z-toast: 100; --dauer-kurz: 120ms; --dauer-mittel: 200ms; } /* ---- Helle Zweitwerte (v4_1-Tagesstimmung, Empfehlung 1) ------------------ */ html[data-thema="hell"]{ --bg: #f0f2f0; --surf: #ffffff; --surf2: #f7f7f8; --surf3: #eceef0; --bord: #dcdfe3; --text: #27272a; --text-hoch: #0f0f11; --dim: #6b6f76; --c-root: #2563eb; --c-ast: #dc2626; --c-up: #18181b; --c-dn: #059669; --c-act: #4f46e5; --c-warn: #b45309; --c-fehler: #b91c1c; --schatten-1: 0 1px 2px rgba(15,15,17,.08); --schatten-2: 0 8px 24px rgba(15,15,17,.12); --schatten-3: 0 16px 48px rgba(15,15,17,.16); } /* ========================================================================== PAPIER — die Haut für personennahe Seiten (Alex, 18.09.2026, FR25710 = A) ========================================================================== Wörtlich entschieden: „Papier-Haut wird der Standard für personennahe Seiten." Dashboard-Haut (Grundstellung dunkel / data-thema="hell") bleibt für Cockpit, Kompass und AICommander — dort wird gearbeitet. Papier gilt für alles, was ein Mensch liest und schreibt: Jules Werkstatt und Wissensseite, Briefe, Handbücher, Familienseiten. Herkunft: Jules eigene Werte aus jule-werkstatt.html und start-jule.html (--paper #EFEDE6 · --ink #23211C · --accent #1F5A66). Sie stehen jetzt HIER, damit AC-51 gewahrt bleibt: kein Bauteil bringt einen eigenen Farbwert mit. Neue personennahe Seiten setzen und definieren nichts Eigenes mehr. Bestehende Seiten mit eigenem Token-Satz werden nachgezogen (Bauauftrag aus Sitzung 257). Merksatz: dunkel zum Arbeiten, Papier zum Lesen. ========================================================================== */ html[data-thema="papier"]{ /* Rollenfarben — warm, kontrastarm genug für lange Lesestrecken */ --bg: #efede6; /* Papier */ --surf: #f8f7f2; /* aufliegendes Blatt */ --surf2: #edeae1; --surf3: #e3dfd4; --bord: #d7d3c7; /* Linie */ --text: #23211c; /* Tinte */ --text-hoch: #141310; --dim: #5f5b52; /* zweite Tinte */ --c-root: #1f5a66; /* Akzent (Petrol) — ersetzt das Dashboard-Blau */ --c-ast: #9c3b32; /* Block/Sperre */ --c-up: #23211c; --c-dn: #3b7a4e; /* fertig */ --c-act: #1f5a66; --c-warn: #a97b1e; /* offen */ --c-fehler: #9c3b32; /* Lämpchen in derselben Sprache (X5) */ --lampe-gut: #3b7a4e; --lampe-warn: #a97b1e; --lampe-schlecht: #9c3b32; --lampe-aus: #8b857a; /* Themenfarben gedämpft — auf Papier blenden die Neon-Werte */ --e-teal: #2a6f6a; --e-teal-l: #cfe3e0; --e-teal-t: #0f2f2c; --e-blue: #1f5a66; --e-blue-l: #dce8ea; --e-blue-t: #0d2a30; --e-amber:#a97b1e; --e-amber-l:#f3e9d2; --e-amber-t:#3d2c07; --e-green:#3b7a4e; --e-green-l:#e2ede4; --e-green-t:#12301d; --e-violet:#5b4b86; --e-violet-l:#e2ddef; --e-violet-t:#241c3a; --e-coral:#9c3b32; --e-coral-l:#f2dedb; --e-coral-t:#3a130f; --e-gray: #8b857a; --e-gray-l: #e6e3d9; --e-gray-t: #2a2720; /* Schatten weich — Papier wirft keine harten Kanten */ --schatten-1: 0 1px 2px rgba(35,33,28,.07); --schatten-2: 0 8px 24px rgba(35,33,28,.12); --schatten-3: 0 16px 48px rgba(35,33,28,.16); /* Lesen statt Bedienen: etwas größer, etwas runder */ --schrift-basis: 14px; --rad: 6px; --rad-panel: 10px; /* Serifen für Überschriften — Bauteile greifen sie über --schriftfamilie-titel ab */ --schriftfamilie-titel: Georgia, "Times New Roman", serif; } /* Grundstellung für Bauteile, die den Titel-Stapel abfragen: wie der Fließtext. Nur Papier setzt ihn auf Serifen (siehe oben). */ :root{ --schriftfamilie-titel: var(--schriftfamilie, system-ui, sans-serif); } /* ---- Schriftfamilie: v3_3-Muster (Apple-Systemstapel) -------------------- */ :root{ --schriftfamilie: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } /* ---- ERGÄNZT 05.09.2026 (Nr. 132, AC-51 Reserve-Token + Abstände) ---------------------- Semantische Abstände und Reserve-Variablen: definiert, unbenutzt, kommentiert — damit ein späteres systemweites Design-Upgrade nur DIESE Datei anfasst (Alex: „Module die alle im Nachhinein systemweit auf einmal verbessert werden können"). Kein Bauteil setzt eigene Werte. */ :root{ --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 40px; --flaeche-1: var(--bg); --flaeche-2: var(--surf); --flaeche-3: var(--surf2); --flaeche-4: var(--surf3); --akzent-1: var(--c-act); --akzent-2: var(--c-root); --akzent-3: var(--c-fehler); --linie-1: var(--bord); --linie-2: var(--dim); --radius-s: var(--rad); --radius-m: var(--rad-panel); --radius-l: 16px; --reserve-farbe-1: #0000; --reserve-farbe-2: #0000; --reserve-farbe-3: #0000; --reserve-farbe-4: #0000; --reserve-farbe-5: #0000; --reserve-farbe-6: #0000; --reserve-farbe-7: #0000; --reserve-farbe-8: #0000; --reserve-mass-1: 0px; --reserve-mass-2: 0px; --reserve-mass-3: 0px; --reserve-mass-4: 0px; --reserve-schrift-1: var(--schriftfamilie); --reserve-schrift-2: ui-monospace, Consolas, monospace; --haut-fassung: "3 (24.09.2026 · Nr. 295)"; } /* Dichte-Schalter (RentyData X9): — Grundstellung normal */ html[data-dichte="eng"]{ --abstand-2: 6px; --abstand-3: 8px; --abstand-4: 12px; --schrift-basis: 12px; } html[data-dichte="weit"]{ --abstand-2: 10px; --abstand-3: 16px; --abstand-4: 24px; --schrift-basis: 14px; } /* Haut-Schalter (RentyData): — heute nur Schriftstapel */ html[data-haut="windows"]{ --schriftfamilie: "Segoe UI", system-ui, sans-serif; --rad: 3px; } html[data-haut="android"]{ --schriftfamilie: Roboto, system-ui, sans-serif; --rad: 8px; } /* ========================================================================== Nr. 295 · 24.09.2026 · Haut A „Glas" + Haut C „Dunkel" (FR29301 = A, Skizzen FR13811) ========================================================================== Alex (Zwischenruf 24.09.2026 12:20 Panama): „A · GlasApple-Translucency, 10 px, SF-Schrift". Herkunft der Werte: claude/archiv/ARTIFACT-renty-haut-skizzen-FR13811-20260924.html (.glas, .dunkel), Kontrast auf WCAG ≥ 4.5:1 nachgeschärft (Belege: claude/a295/HAUT-295-BERICHT.md). Schalter: hell, halbdurchsichtige Flächen, Unschärfe 10 px, Rundung 10 px Schwarz/Weiß „Dunkel-Edel", Akzent Grafit statt Farbe Ohne data-haut bleibt alles wie bisher (data-thema dunkel/hell/papier). Die Haut schlägt das Thema, weil sie weiter unten steht (gleiche Spezifität) — wer glas/dunkel setzt, wählt das Ganze. Kein @media(prefers-color-scheme): die Haut bleibt ein bewusster Schalter (siehe Kopf). Neue Token (in jeder Haut definiert, Grundstellung wirkungslos): --glas-filter backdrop-filter der Glasflächen (Grundstellung none) --grund-bild Hintergrundbild des Grunds (Grundstellung none) --auf-akzent Schriftfarbe auf --c-act (Grundstellung #fff) — für Bauteile, die heute noch „color:#fff" auf dem Akzent fest verdrahten (Gehäuse-Nachzug, AC-51) ========================================================================== */ :root{ --glas-filter: none; --grund-bild: none; --auf-akzent: #fff; --schriftfamilie-sf: -apple-system, "SF Pro Text", "SF Pro Display", BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } /* ---- A · Glas ------------------------------------------------------------ */ html[data-haut="glas"]{ --schriftfamilie: var(--schriftfamilie-sf); --schriftfamilie-titel: var(--schriftfamilie-sf); --rad: 10px; --rad-panel: 14px; --radius-l: 18px; --bg: #eef0f3; --surf: rgba(255,255,255,.72); /* Kopf, Fuß, Leisten, Karten: Inhalt scheint durch */ --surf2: rgba(255,255,255,.90); --surf3: rgba(255,255,255,.55); --bord: rgba(0,0,0,.08); --text: #1d1d1f; --text-hoch: #000000; --dim: #5f5f64; /* Skizze #6e6e73 = 4.44:1 auf dem Grund → nachgeschärft */ --c-root: #0a66ff; --c-ast: #d70015; --c-up: #1d1d1f; --c-dn: #1f7a36; --c-act: #0a66ff; /* iOS-Blau; #fff darauf 4.82:1 */ --c-warn: #b45309; --c-fehler: #c42b1c; --auf-akzent: #fff; --lampe-gut: #30b46c; --lampe-warn: #d98a00; --lampe-schlecht: #e5484d; --lampe-aus: #a1a1a6; --schatten-1: 0 1px 2px rgba(0,0,0,.05); --schatten-2: 0 6px 18px rgba(0,0,0,.06); --schatten-3: 0 16px 40px rgba(0,0,0,.10); --glas-filter: saturate(180%) blur(10px); --grund-bild: radial-gradient(circle at 20% 10%, #dfe6ff 0, transparent 40%), radial-gradient(circle at 90% 90%, #d9f3ea 0, transparent 40%); } /* Glas braucht Fläche + Unschärfe am Gehäuse. Einziger Strukturteil der Haut: er setzt keine eigenen Werte, sondern reicht nur die Token an die Gehäuse-Bereiche durch. Neue Bauteile melden sich mit data-glas an, statt hier Selektoren nachzutragen. */ html[data-haut="glas"] body{ background-image: var(--grund-bild); background-attachment: fixed; } html[data-haut="glas"] :is(header, footer, nav, aside, [data-glas]){ -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); } /* Alte Geräte ohne backdrop-filter (altes iPad, Stempel § 1a): deckende Rückfallflächen */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ html[data-haut="glas"]{ --surf: #f8f9fb; --surf2: #ffffff; --surf3: #f2f3f6; --bord: #e2e4e8; --grund-bild: none; } } /* ---- C · Dunkel („Dunkel-Edel", Britta-Stil, kein Rosa) --------------------- Skizze: Akzent Weiß (#f5f5f7). Das Gehäuse schreibt auf dem Akzent heute noch fest #fff — Weiß auf Weiß wäre unlesbar. Darum Akzent Grafit #636366 (#fff darauf 5.99:1), bis das Gehäuse --auf-akzent nutzt; dann hier --c-act:#f5f5f7 + --auf-akzent:#000 (Frage an Fable, Nr. 295). */ html[data-haut="dunkel"]{ --schriftfamilie: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --schriftfamilie-titel: var(--schriftfamilie); --rad: 12px; --rad-panel: 16px; --radius-l: 20px; --bg: #000000; --surf: #131315; --surf2: #1e1e21; --surf3: #26262a; --bord: #2c2c30; --text: #e5e5ea; --text-hoch: #ffffff; --dim: #8e8e93; --c-root: #0a84ff; --c-ast: #ff453a; --c-up: #ffffff; --c-dn: #30d158; --c-act: #636366; --c-warn: #ff9f0a; --c-fehler: #ff453a; --auf-akzent: #fff; --lampe-gut: #30d158; --lampe-warn: #ff9f0a; --lampe-schlecht: #ff453a; --lampe-aus: #48484a; --schatten-1: 0 1px 2px rgba(0,0,0,.6); --schatten-2: 0 12px 30px rgba(0,0,0,.6); --schatten-3: 0 20px 56px rgba(0,0,0,.7); --ai-grad: linear-gradient(135deg,#3a3a3c,#636366,#8e8e93); }