/* ========================================================================== CFF DESIGN SYSTEM CoinFlow Finance · Learning OS ========================================================================== Geltungsbereich --------------- Diese Datei enthält ausschließlich das, was ALLE Lektionstypen teilen: Tokens, Basis-Reset, geteilte Primitive, Shell-Reservierungen. Sie enthält bewusst KEINE Komponenten einzelner Lektionen. Layout-spezifische Bausteine (Learning Cycle, Systemtopologie, Analyseebenen, Enter-Module usw.) gehören in die jeweilige Layout-Datei und bauen auf den Tokens hier auf. Ladereihenfolge --------------- 1. cff-design-system.css ← diese Datei 2. cff-layout-a0.css Onboarding (A0) 3. cff-layout-text.css A1 – A6, ohne Video 4. cff-layout-video.css A7, B0 – C14, CK-Module 5. cff-shell.css Kursoberfläche außen herum Referenzimplementierung: Lektion A0 (Status FINAL). Alle Werte hier sind aus A0 extrahiert und dort visuell abgenommen. ========================================================================== */ /* ========================================================================== 1 — TOKENS ========================================================================== */ .cff-a0-root{ /* --- Flächen: von tief nach hoch -------------------------------------- --bg Seitenhintergrund --l0 tiefste Fläche, z. B. Objekte in Visualisierungen --l1 Standardfläche für Panels und Stages --l2 erhöhte Fläche, Metaleisten --l3 Hover- und Aktivzustand --l4 höchste Fläche, aktiver Knoten */ --bg:#050806; --l0:#070B08; --l1:#0A0F0C; --l2:#0E1411; --l3:#131B16; --l4:#18211C; /* --- Linien ----------------------------------------------------------- */ --ln:#141C17; /* Trennlinien im Fließtext, Rasterfugen */ --ln2:#1C2721; /* Standardrahmen */ --ln3:#26342C; /* betonter Rahmen, Hover */ /* --- Text: von hell nach gedämpft -------------------------------------- */ --tx:#F3F5F2; /* Primärtext, Überschriften */ --tx2:#8A968F; /* Fließtext, Sekundärinformation */ --tx3:#59655E; /* Interface-Labels */ --tx4:#3C4842; /* inaktive Zustände, Hilfsangaben */ /* --- Akzent: Emerald / Mint ------------------------------------------- Ausschließlich für aktive Zustände, Standort und Systemhinweise. Niemals dekorativ und niemals großflächig. */ --em:#3DDC97; --em2:#2BB47B; --em-ln:rgba(61,220,151,.32); --em-sf:rgba(61,220,151,.06); --em-sf2:rgba(61,220,151,.12); /* --- Marktsemantik ----------------------------------------------------- Rot ist reserviert für bearishe bzw. negative Marktinformation. In Interface-Zuständen (Fehler, Warnung, Sperre) NICHT verwenden, sonst verliert es in Modul C seine Bedeutung. */ --red:#E5484D; /* --- Typografie -------------------------------------------------------- Eine Sans für alles Gelesene, Mono für Zahlen und Interface-Labels. Keine Webfont-Abhängigkeit: Inter wird genutzt, wenn vorhanden. */ --sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace; --f-lbl:.6875rem; /* Interface-Label, Mono, Versalien */ --f-sm:.8125rem; /* Sekundärtext, Listen */ --f-bd:1rem; /* Fließtext */ --f-ld:1.1875rem; /* Lead / Subline */ --f-h3:1.0625rem; --f-h2:clamp(1.375rem,2.2vw,1.75rem); --f-h1:clamp(2.25rem,5.2vw,3.875rem); /* --- Raster ------------------------------------------------------------ */ --wrap:1400px; --gut:clamp(1rem,3.4vw,2.75rem); /* --- Abstände ---------------------------------------------------------- */ --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:clamp(4rem,8vw,6.75rem); /* Sektionsabstand */ /* --- Radien ------------------------------------------------------------ Klein und abgestuft. Keine großflächigen Rundungen. */ --r1:2px; --r2:4px; --r3:6px; /* --- Motion ------------------------------------------------------------ Bewegung muss Zustandswechsel erklären. Kein Bounce, kein Parallax, keine Bewegung ohne Lernfunktion. */ --e:cubic-bezier(.22,.61,.28,1); --t-fast:200ms; --t:300ms; --t-slow:450ms; /* --- Shell-Reservierungen --------------------------------------------- Platzhalter für die feste CFF-Kursoberfläche. Solange sie 0px sind, rendert die Lektion in voller Breite. Sobald cff-shell.css geladen wird, setzt sie diese Werte — der Lektionsinhalt rückt automatisch ein, ohne dass Layout-CSS angefasst werden muss. */ --shell-nav:0px; /* Modulnavigation links */ --shell-topbar:0px; /* Standort, Fortschritt, Suche */ --shell-aside:0px; /* Materialien der Lektion rechts */ } /* ========================================================================== 2 — BASIS ========================================================================== */ .cff-a0-root *, .cff-a0-root *::before, .cff-a0-root *::after{ box-sizing:border-box; } .cff-a0-root{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } .cff-a0-root{ margin:0; background:var(--bg); color:var(--tx); font-family:var(--sans); font-size:var(--f-bd); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .cff-a0-root h1, .cff-a0-root h2, .cff-a0-root h3, .cff-a0-root h4, .cff-a0-root p, .cff-a0-root ul, .cff-a0-root ol, .cff-a0-root figure{ margin:0; } .cff-a0-root ul, .cff-a0-root ol{ padding:0; list-style:none; } .cff-a0-root button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; } .cff-a0-root svg{ display:block; } .cff-a0-root :focus-visible{ outline:2px solid var(--em); outline-offset:2px; } /* Nur für Screenreader */ .cff-a0-root .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ========================================================================== 3 — TYPOGRAFISCHE PRIMITIVE ========================================================================== */ /* Interface-Label. Mono, Versalien, weite Laufweite. Für Kennzeichnungen, Statusangaben und Achsenbeschriftungen — nicht für Fließtext und nicht als Überschrift-Eyebrow-Massenware. */ .cff-a0-root .lbl{ font-family:var(--mono); font-size:var(--f-lbl); letter-spacing:.14em; text-transform:uppercase; color:var(--tx3); } .cff-a0-root .lbl-em{ color:var(--em); } /* Zahlen. Immer tabellarisch, damit Werte untereinander stehen. */ .cff-a0-root .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; } /* ========================================================================== 4 — TERMINAL-TIEFE Ausschließlich auf Visualisierungsflächen. Niemals auf Textbereiche, niemals seitenweit. Deckkraft bleibt unter 3 %. ========================================================================== */ /* Feines Koordinatenraster — Stages, Maps, Diagrammflächen */ .cff-a0-root .grid-bg{ position:relative; } .cff-a0-root .grid-bg::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right, rgba(243,245,242,.022) 1px, transparent 1px), linear-gradient(to bottom, rgba(243,245,242,.016) 1px, transparent 1px); background-size:34px 34px; } /* Horizontale Chart-Linien — Readouts, Datenpanels */ .cff-a0-root .rule-bg{ position:relative; } .cff-a0-root .rule-bg::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:repeating-linear-gradient(to bottom, rgba(243,245,242,.026) 0 1px, transparent 1px 28px); } /* Inhalt muss über der Struktur liegen */ .cff-a0-root .grid-bg > *, .cff-a0-root .rule-bg > *{ position:relative; } /* ========================================================================== 5 — LEKTIONSRAHMEN .cff-lesson ist die verbindliche Grenze des Lektionsinhalts. Alles außerhalb gehört der Shell. ========================================================================== */ .cff-a0-root .cff-lesson{ margin-left:var(--shell-nav); margin-right:var(--shell-aside); padding-top:var(--shell-topbar); } /* Inhaltsspalte innerhalb der Lektion */ .cff-a0-root .os{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); padding-block:clamp(3rem,7vw,5rem) var(--s7); } /* ========================================================================== 6 — SEKTIONEN Einheitlicher Sektionskopf für alle Lektionstypen. ========================================================================== */ .cff-a0-root .sec{ margin-top:var(--s7); } .cff-a0-root .sec-head{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; padding-bottom:var(--s3); border-bottom:1px solid var(--ln); margin-bottom:var(--s5); } .cff-a0-root .sec-head h2{ font-size:var(--f-h2); font-weight:600; letter-spacing:-.024em; line-height:1.15; } .cff-a0-root .sec-head .lbl{ margin-left:auto; } /* Kurzer Kontextsatz unter dem Sektionskopf */ .cff-a0-root .sec-note{ flex-basis:100%; font-size:var(--f-sm); color:var(--tx2); max-width:62ch; } /* ========================================================================== 7 — GETEILTE KEYFRAMES ========================================================================== */ /* Balken oder Linie baut sich von links auf */ @keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } /* Ruhiges Einblenden */ @keyframes fadein{ from{ opacity:0; } to{ opacity:1; } } /* Pfad zeichnet sich — Voraussetzung: stroke-dasharray und stroke-dashoffset sind auf dem Element gesetzt */ @keyframes stroke{ to{ stroke-dashoffset:0; } } /* ========================================================================== 8 — RESPONSIV-GRUNDLAGE Layout-spezifische Breakpoints gehören in die jeweilige Layout-Datei. ========================================================================== */ @media (max-width:1080px){ .cff-a0-root{ --shell-nav:0px; --shell-aside:0px; } } /* Bewegung reduzieren. Zustände bleiben erhalten, nur die Übergänge entfallen — es darf keine Information verloren gehen. */ @media (prefers-reduced-motion:reduce){ .cff-a0-root *{ transition-duration:1ms !important; animation-duration:1ms !important; animation-iteration-count:1 !important; } .cff-a0-root{ scroll-behavior:auto; } }