/* ============================================================================= SYNERGY DESIGN TOKENS — Fundament der Synergy-Linie und der Hülle Synergy360 Herausgeber: Aetheris GmbH i. G. Stand: 10.08.2026 ----------------------------------------------------------------------------- HERKUNFT: abgeleitet aus den BESTEHENDEN Synergy-Produkten, nicht neu erfunden und ausdrücklich NICHT von nova-brand abgeschrieben (Vorgabe Sascha 10.08.2026 — Nova ist eine andere Linie: kühles Blaugrau, Cyan, englische Token-Namen). Akzentgold #DEA51C = Logos (Contacts/Projects/Plan) UND SynergyProjects `--akzent` in hell und dunkel → gelebter Standard Markennavy #032360 = Logo-Navy aus den Dateinamen Token-Namen deutsch = Konvention aus SynergyProjects (--linie, --akzent) Hell+Dunkel beides = SynergyProjects (`:root.hell`) Schrift Manrope = SynergyProjects, Fallback Inter (Synergy-Time) Radien 7/8/14/99 px = SynergyProjects Warmes Weiß #f6f5f2 = Synergy-Time, dort bewusst „kuschelig, statt kaltem Blaugrau" kommentiert ⚠️ PREFIX IST PFLICHT. Alle Namen tragen `--s360-`. SynergyProjects definiert `--bg`, `--panel`, `--akzent`, `--text` UNPRÄFIXIERT auf `:root`. Die Suite-Leiste wird in genau diese Seite injiziert — ohne Prefix überschreiben sich beide Token-Sätze gegenseitig. Das ist kein Stilproblem, sondern der Unterschied zwischen „Leiste funktioniert" und „Produkt sieht kaputt aus". ⚠️ GOLD IST NIE FLIESSTEXT. Nachgerechnet (WCAG, Kontrastverhältnis): #DEA51C auf Weiß = 2,2:1 ✗ unlesbar → nur Fläche, Rahmen, Symbol #DEA51C auf Navy = 6,9:1 ✓ als Text erlaubt (Fußzeile, Leiste) #241a06 auf Gold = 7,9:1 ✓ das ist die CTA-Paarung (aus Synergy-Time) Weiß auf Navy = 15,2:1 ✓ ============================================================================= */ :root { /* --------------------------------------------------------------------------- EBENE 1 — PRIMITIVE (rohe Werte, nie direkt in Komponenten verwenden) --------------------------------------------------------------------------- */ /* Navy — Anker ist 900 = das Logo-Navy. Nach unten dunkler (Leiste, Fußzeile), nach oben die aufgehellten Stufen für Rahmen und Flächen auf Dunkelgrund. */ --s360-navy-950: #010f2c; /* dunkelste Fläche: Fußzeile, Leistenrand */ --s360-navy-900: #032360; /* ★ LOGO-NAVY — der Markenwert, nie ändern */ --s360-navy-800: #0a3179; --s360-navy-700: #14418f; --s360-navy-600: #1e3a6e; /* = SynergyProjects --marke-blau */ --s360-navy-500: #3a5a92; --s360-navy-400: #6d87b4; --s360-navy-300: #a3b5d1; --s360-navy-200: #cdd8e8; --s360-navy-100: #e6ecf5; /* Gold — Anker ist 500 = Logo/SynergyProjects. „ink" ist die einzige Schrift- farbe, die auf Gold zugelassen ist. */ --s360-gold-600: #b8860f; /* gedrückt / aktiv */ --s360-gold-500: #dea51c; /* ★ AKZENTGOLD — der Markenwert, nie ändern */ --s360-gold-400: #e9bb4d; /* Hover (entspricht ST --gold-soft) */ --s360-gold-200: #f6e3ac; --s360-gold-100: #fdf6e3; --s360-gold-ink: #241a06; /* Schrift AUF Gold, 7,9:1 — aus Synergy-Time */ /* Neutrale — warmes Off-White als Seitengrund ist ein Erkennungsmerkmal der Linie (Synergy-Time). Die Grautöne bleiben leicht warm, nie blaustichig. */ --s360-weiss: #ffffff; --s360-sand-50: #faf9f7; --s360-sand-100: #f6f5f2; /* ★ Seitengrund (Synergy-Time) */ --s360-sand-200: #ebe9e4; --s360-grau-300: #d7d5cf; --s360-grau-400: #a8a59d; --s360-grau-500: #6f6d67; --s360-grau-700: #3f4652; /* = Synergy-Time Navigationsschrift */ --s360-grau-900: #1c2430; /* = SynergyProjects --text (hell) */ /* Status — übernommen aus SynergyProjects (hell-Zweig), damit Suite und Produkt dieselbe Sprache sprechen. */ --s360-gruen-500: #15803d; --s360-gruen-100: #dcfce7; --s360-warn-500: #d97706; --s360-warn-100: #fef3c7; --s360-rot-500: #dc2626; --s360-rot-100: #fee2e2; /* --------------------------------------------------------------------------- EBENE 2 — SEMANTISCH, HELL (Standard). Diese Namen benutzt man im Code. --------------------------------------------------------------------------- */ /* Flächen */ --s360-flaeche: var(--s360-sand-100); /* Seitengrund */ --s360-flaeche-karte: var(--s360-weiss); /* Karten, Kacheln, Dialoge */ --s360-flaeche-tief: var(--s360-sand-200); /* eingesenkt, Hover-Zeile */ --s360-linie: var(--s360-grau-300); --s360-linie-stark: var(--s360-grau-400); /* Schrift */ --s360-text: var(--s360-grau-900); --s360-text-leise: var(--s360-grau-500); --s360-text-zart: var(--s360-grau-400); --s360-text-auf-navy: var(--s360-weiss); --s360-text-auf-gold: var(--s360-gold-ink); /* Marke + Interaktion */ --s360-marke: var(--s360-navy-900); --s360-akzent: var(--s360-gold-500); --s360-akzent-hover: var(--s360-gold-400); --s360-akzent-leise: var(--s360-gold-100); /* Die Suite-Leiste: navy mit goldener Unterkante — die Geste der Linie (Synergy-Time setzt sie als 2px-Goldrand an Kopf und Fuß). */ --s360-leiste-grund: var(--s360-navy-900); --s360-leiste-text: var(--s360-weiss); --s360-leiste-text-leise: var(--s360-navy-300); --s360-leiste-kante: var(--s360-gold-500); --s360-leiste-kante-dicke: 2px; --s360-leiste-hoehe: 44px; /* Primärknopf = Gold mit dunkler Schrift (die CTA-Paarung aus Synergy-Time) */ --s360-knopf-grund: var(--s360-akzent); --s360-knopf-grund-hover: var(--s360-akzent-hover); --s360-knopf-text: var(--s360-gold-ink); /* Ruhiger Zweitknopf = Navy mit weißer Schrift */ --s360-knopf2-grund: var(--s360-navy-900); --s360-knopf2-grund-hover: var(--s360-navy-800); --s360-knopf2-text: var(--s360-weiss); --s360-fokus: var(--s360-navy-700); --s360-fokus-hof: rgba(20, 65, 143, 0.28); /* Zustand einer Modulkachel — das Herz der Ausgrau-Logik. „gesperrt" MUSS sichtbar bleiben: ein unsichtbarer Zustand wird als kaputte Funktion gemeldet (Lehre aus der Rechte-Matrix im Portal). */ --s360-gebucht-rand: var(--s360-gold-500); --s360-gesperrt-grund: var(--s360-sand-200); --s360-gesperrt-text: var(--s360-grau-500); --s360-gesperrt-rand: var(--s360-grau-300); --s360-gesperrt-deckkraft: 0.72; /* nicht tiefer — sonst unlesbar */ /* Status */ --s360-erfolg: var(--s360-gruen-500); --s360-erfolg-grund: var(--s360-gruen-100); --s360-warnung: var(--s360-warn-500); --s360-warnung-grund: var(--s360-warn-100); --s360-fehler: var(--s360-rot-500); --s360-fehler-grund: var(--s360-rot-100); /* --------------------------------------------------------------------------- SCHRIFT — Manrope (SynergyProjects), Fallback Inter (Synergy-Time) ⚠️ IMMER selbst ausliefern. Beide Produkte haben die Google-Einbindung bewusst entfernt: sie übertrug die IP jedes Besuchers an Google. --------------------------------------------------------------------------- */ --s360-schrift: "Manrope", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Schmale, gesperrte Auszeichnung für Navigationsgruppen (Synergy-Time). */ --s360-schrift-schmal: "Oswald", "Manrope", "Inter", sans-serif; --s360-schrift-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace; --s360-groesse-xs: 0.6875rem; /* 11 — Gruppenlabel, gesperrt */ --s360-groesse-sm: 0.8125rem; /* 13 — Grundmaß der Linie (SynergyProjects) */ --s360-groesse-md: 0.9375rem; /* 15 — Leiste, Bedienelemente */ --s360-groesse-lg: 1.125rem; /* 18 */ --s360-groesse-xl: 1.5rem; /* 24 */ --s360-groesse-2xl: 2rem; /* 32 */ --s360-sperrung-label: 0.14em; /* Gruppenlabel (Synergy-Time) */ --s360-sperrung-nav: 0.12em; /* Navigationseinträge */ --s360-zeilenhoehe: 1.5; --s360-fett-normal: 400; --s360-fett-mittel: 500; --s360-fett-halb: 600; --s360-fett-voll: 700; /* --------------------------------------------------------------------------- FORM — Radien und Schatten aus SynergyProjects --------------------------------------------------------------------------- */ --s360-radius-sm: 7px; /* Knöpfe, Eingabefelder */ --s360-radius-md: 8px; /* Symbolkästchen, Logo-Plättchen */ --s360-radius-lg: 14px; /* Karten, Dialoge */ --s360-radius-voll: 99px; /* Chips, Schalter */ --s360-schatten: 0 10px 30px -18px rgba(30, 45, 80, 0.35); --s360-schatten-leiste: 0 1px 8px rgba(1, 15, 44, 0.18); --s360-schatten-hoch: 0 18px 44px -20px rgba(30, 45, 80, 0.45); /* 4px-Raster */ --s360-abstand-1: 0.25rem; --s360-abstand-2: 0.5rem; --s360-abstand-3: 0.75rem; --s360-abstand-4: 1rem; --s360-abstand-6: 1.5rem; --s360-abstand-8: 2rem; --s360-abstand-12: 3rem; /* Inhaltsbreite — max-w-6xl, die im Haus vereinheitlichte Breite */ --s360-inhalt-breite: 72rem; --s360-symbol-strich: 1.75; --s360-dauer: 150ms; --s360-kurve: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ============================================================================= DUNKEL — als eigene Klasse `.s360-dunkel`, nie aus dem Betriebssystem geerbt. Begründung wie bei SynergyProjects (`:root.hell` dort umgekehrt): ein Mischzustand aus dunklen Browser-Bedienelementen und hellen Karten wirkt unaufgeräumt. Die Anwendung gibt den Ton an. ⚠️ Marke bleibt in beiden Modi GLEICH (--s360-marke, --s360-akzent): SynergyProjects hält --marke-blau/--marke-rot bewusst themeunabhängig, damit das Logo in hell und dunkel identisch aussieht. Diese Regel wird übernommen. ============================================================================= */ .s360-dunkel { --s360-flaeche: #10151f; /* = SynergyProjects --bg */ --s360-flaeche-karte: #1a2231; /* = --panel */ --s360-flaeche-tief: #151c2a; /* = --panel2 */ --s360-linie: #26314a; /* = --linie */ --s360-linie-stark: #3a4763; --s360-text: #e6eaf2; /* = --text */ --s360-text-leise: #8fa1c0; /* = --text2 */ --s360-text-zart: #66779a; /* = --text3 */ /* Akzent und Marke NICHT umdefiniert — bewusst, siehe Kopf. */ --s360-knopf2-grund: var(--s360-navy-800); --s360-knopf2-grund-hover: var(--s360-navy-700); --s360-fokus: var(--s360-gold-400); --s360-fokus-hof: rgba(233, 187, 77, 0.3); --s360-gesperrt-grund: #151c2a; --s360-gesperrt-text: #66779a; --s360-gesperrt-rand: #26314a; --s360-erfolg: #34d399; --s360-erfolg-grund: rgba(52, 211, 153, 0.14); --s360-warnung: #fbbf24; --s360-warnung-grund: rgba(251, 191, 36, 0.14); --s360-fehler: #ef4444; --s360-fehler-grund: rgba(239, 68, 68, 0.14); --s360-schatten: 0 10px 30px -12px rgba(0, 0, 0, 0.65); --s360-schatten-hoch: 0 18px 44px -16px rgba(0, 0, 0, 0.75); color-scheme: dark; } :root { color-scheme: light; } /* ============================================================================= BASIS-BAUSTEINE — die gemeinsame Grundlage, bewusst schmal gehalten ============================================================================= */ .s360-wurzel { background-color: var(--s360-flaeche); color: var(--s360-text); font-family: var(--s360-schrift); font-size: var(--s360-groesse-sm); line-height: var(--s360-zeilenhoehe); -webkit-font-smoothing: antialiased; } /* Bildlaufplatz immer reservieren — sonst rutscht zentrierter Inhalt beim Seitenwechsel ~15px seitwärts. Teuer gelernt in Synergy-Time (Review 07-23). */ html { scrollbar-gutter: stable; } /* Logo-Plättchen: die Synergy-Logos sind für WEISSEN Grund freigestellt. Auf Navy oder im Dunkelmodus brauchen sie deshalb eine weiße Fläche darunter — so machen es SynergyProjects (.kopfLogoBild) und Synergy-Time (.st-logo-plate). */ .s360-logo-plaettchen { display: inline-flex; align-items: center; background: var(--s360-weiss); border-radius: var(--s360-radius-md); padding: 3px 8px; } /* Die Leiste — navy mit goldener Unterkante. */ .s360-leiste { height: var(--s360-leiste-hoehe); background: var(--s360-leiste-grund); color: var(--s360-leiste-text); border-bottom: var(--s360-leiste-kante-dicke) solid var(--s360-leiste-kante); box-shadow: var(--s360-schatten-leiste); display: flex; align-items: center; gap: var(--s360-abstand-3); padding: 0 var(--s360-abstand-4); font-size: var(--s360-groesse-md); } /* Gruppenlabel: schmal, gesperrt, versal — die Auszeichnung der Linie. */ .s360-gruppe { font-family: var(--s360-schrift-schmal); font-size: var(--s360-groesse-xs); font-weight: var(--s360-fett-halb); letter-spacing: var(--s360-sperrung-label); text-transform: uppercase; color: var(--s360-text-leise); } .s360-karte { background: var(--s360-flaeche-karte); border: 1px solid var(--s360-linie); border-radius: var(--s360-radius-lg); box-shadow: var(--s360-schatten); } /* Modulkachel — gebucht: goldener Rand. */ .s360-modul--gebucht { border-color: var(--s360-gebucht-rand); } /* Modulkachel — nicht gebucht: erkennbar VORHANDEN, erkennbar gesperrt. Kein `display:none`, keine Deckkraft unter 0.7, immer mit Weg zum Buchen. */ .s360-modul--gesperrt { background: var(--s360-gesperrt-grund); border-color: var(--s360-gesperrt-rand); color: var(--s360-gesperrt-text); opacity: var(--s360-gesperrt-deckkraft); } .s360-modul--gesperrt .s360-logo-plaettchen { filter: grayscale(1); } .s360-knopf { font: inherit; cursor: pointer; border: 0; border-radius: var(--s360-radius-sm); padding: 6px 14px; background: var(--s360-knopf-grund); color: var(--s360-knopf-text); font-weight: var(--s360-fett-voll); transition: background var(--s360-dauer) var(--s360-kurve); } .s360-knopf:hover { background: var(--s360-knopf-grund-hover); } .s360-knopf--navy { background: var(--s360-knopf2-grund); color: var(--s360-knopf2-text); } .s360-knopf--navy:hover { background: var(--s360-knopf2-grund-hover); } /* Fokus ist immer sichtbar — nie wegstylen. */ .s360-fokussierbar:focus-visible { outline: 2px solid var(--s360-fokus); outline-offset: 2px; } .s360-chip { font-size: var(--s360-groesse-xs); padding: 3px 11px; border-radius: var(--s360-radius-voll); background: var(--s360-akzent-leise); color: var(--s360-text); border: 1px solid var(--s360-linie); white-space: nowrap; } /* Tabellenziffern für alles Zahlenhafte (Beträge, Sitzplätze, Fristen). */ .s360-zahl { font-variant-numeric: tabular-nums; }