A - Typografie (Fonts)

A.0 - Projekt-Schriftfamilie (Outfit) Dies sind alle geladenen Schriftschnitte (Font-Weights), auf die unser Projekt Zugriff hat. Sie bilden das Rohmaterial für unser strenges Design-System.
Ophyr 200 (ExtraLight)
Ophyr 300 (Light)
Ophyr 400 (Regular)
Ophyr 500 (Medium)
Ophyr 600 (SemiBold)
Ophyr 700 (Bold)
Ophyr 800 (ExtraBold)

Aus diesem Basis-Baukasten generieren wir exakt 4 standardisierte Typografie-Layouts für absolute Konsistenz im gesamten OPHYR-Projekt:

A.1 - Display & Hero (H1) Schnitt: ExtraLight (200)
Transform: Uppercase
Größe: clamp(40px, 8vw, 90px)
Spacing: 15px
Ophyr
A.2 - Struktur & Sub-Titel (H2) Schnitt: Light (300)
Transform: Uppercase
Größe: 16px
Spacing: 4px
Die flüssige Architektur
A.3 - Fließtext & Body (p) Schnitt: Light (300)
Transform: Normal
Größe: 16px
Lese-Abstand: 1.8 Line-Height
Entdecken Sie die Symbiose aus traditioneller Alchemie und modernster Quantenphysik. Eine Revolution der zellulären Gesundheit durch 24-karätiges Gold.
A.4 - Signal & Akzente (Bold) Schnitt: Bold (700)
Transform: Uppercase
Größe: 12px
Spacing: 2px
VERIFIZIERT GÜLTIG

B - Farbsystem (Colors)

B.1 - Gold Primary
#cdab7e

C - Navigation (Menüs)

Definieren aller Navigations-Objekte, damit wir exakt wissen, wovon wir sprechen.

C.1 - Home-Button Der linke, goldene Block mit Logo-Wing. Er ist fest mit der Ribbon-Navbar verschmolzen (border-radius nur links).
OPHYR
C.2 - Menübutton (Inaktiv) Standard Glas-Kachel. Klasse `.menu-tile`. Enthält Text im Font-Typ A.2 (Light, 11px).
KONTAKT
C.3 - Menübutton (Aktiv) Kachel der aktuell besuchten Seite `.menu-tile.active`. Farbe Elfenbein, Text tiefschwarz und fett (Typ A.4).
ENTWICKLUNG

D - Formen & Buttons

D.1 - Primary CTA Button Call-to-Action. Pill-Shape (Border Radius 30px). Glasmorphismus mit Goldrand.
Jetzt Entdecken
D.2 - Icon Circle Kreisrunde Icons. Exakt 50% Radius. Genutzt in Showcase-Cards.

E - Linien & Grenzen (Divs)

Div-Elemente als Strukturgeber. Wir nutzen primär feine, goldene oder verblassende Linien zur optischen Trennung.

E.1 - Fade-Line (Horizontal) 1px Divider, der an den Seiten in Transparenz übergeht (Gradient Fade).
E.2 - Form-Border (Input Bottom) Scharfer unterer Rand für Eingabefelder im Kontakt- und Concierge-Formular.
Input Platzhalter Text...

F - Symbole & Interaktionen

F.1 - Accordion Toggle (Öffnen/Schließen) Div-Element für Textboxen (`.accordion-item`). Beinhaltet ein Pfeil-Icon (`.toggle-icon`), das bei Klick um 180 Grad rotiert und den Inhalt smooth aufslide lässt.
F.1 Objekt anklicken (Test)

Dieses Objekt (Div) öffnet eine Box via Grid-Template-Rows Interpolation.

G - Globale Effekte & States

G.1 - Glassmorphism Standard für Hintergrund-Divs (`.system-section`, Cards). Hintergrund: `rgba(22,17,13,0.4)` + `blur(20px)`.

Glas-Kasten

Der Hintergrund des Kastens lässt das Licht von hinten leicht durchschimmern.

G.2 - Video Background & Glassmorphism Die Interaktion zwischen dynamischen Cinematic-Videos im Hintergrund und der `backdrop-filter` Unschärfe des Overlays.

Card Overlay

Das Video verflüssigt sich durch den 20px Blur-Filter der Glass-Box zu einem lebendigen Gemälde.

G.3 - Liquid Idle State (Stillstand des Scrollings) Nach exakt 4 Sekunden Stillstand transformiert OPHYR alle Divs in rabenschwarze Vektor-Boxen mit goldenen Haarlinien (`box-shadow 0.5px`) und 0.4px Text-Borders für extreme, scharfe Lesbarkeit im Dunkeln. Das Video läuft jedoch unbeeindruckt dahinter weiter!

Teste es live: Bewege die Maus für 4 Sekunden nicht und klicke nicht!

"Stillstand bedeutet bei OPHYR Konzentration. Wartest du 4 Sekunden ohne Aktion, verdunkeln wir die UI, um Ablenkung zu töten."

H - Layout-Komponenten (Cards)

H.1 - Showcase Grid (Startseite) Diese 3 Karten definieren die Hauptübersicht (.showcase-card). Sie demonstrieren den 10px-Hover-Lift, den goldenen Rand-Glow und die Skalierung des Icons im Inneren.

Die Essenz

Erfahren Sie, wie drei elementare Inhaltsstoffe die Essenz von Ophyr bilden.

Die Wirkung

Zelluläre Kommunikation, kollagene Festigkeit und mentale Performance in Perfektion.

Die Technologie

Einblick in den patentierten Plasma-Resonanz-Prozess zur Goldpotenzierung.

I - Formulare & Eingabefelder (UI)

I.1 - Formulare (Concierge / Login) Diese spezifischen UI-Schriften weichen von den Archetypen A.1-A.4 ab, da sie mikroskopische Präzision benötigen. Labels nutzen hartes Tracking (11px, 500 Weight, 2px Spacing). Eingaben nutzen weiches Tracking in Weiß (16px, 300 Weight).

J - Brand Assets (Logos & Claims)

J.1 - Offizielle Logo-Variationen Hier ist das gesamte Inventar unserer geschützten grafischen Assets (aus dem Ordner bilder/LOGOS/) hinterlegt. Diese hochauflösenden PNG-Logos werden für externe Medien, Print oder spezifische Bildkompositionen auf der Website genutzt. Innerhalb der obersten Web-Navigation nutzen wir aus Performancegründen primär Vektor-Logos, außer an kritischen Branding-Punkten (Hero/Footer).
Ophyr Basic Logo
Ophyr Logo (Standard) Das klassische grafische Markenzeichen in Gold, ohne Subtext oder Claim. Für minimale Placements.
Ophyr Logo Weiss
Ophyr Logo (Weiß) Spezielle Kontrast-Variante. Wird primär auf sehr dunklen oder rein goldenen Hintergründen eingesetzt.
Ophyr Logo und Claim
Main Brand (Logo + Claim) Die herrschaftliche Haupt-Kombination. OPHYR kombiniert mit dem "Swiss Liquid Gold" Qualitäts-Siegel. Genutzt am Ende von wichtigen Abschnitten (z.B. Store).
Ophyr Swiss Liquid
Swiss Liquid Gold (Inline) Sehr breites, filmisches Format für Footer oder weite Monolith-Karten.
Pure Gold Nothing Else
Sub-Claim: Pure Gold. Isolierter Claim-Schriftzug ohne unser Hauptlogo. Für dramaturgische Pausen im Lesefluss.

K - Brand Claim Animationen

K.1 - The Golden Thread (Claim-Reveal) Ein extrem minimalistischer, filmischer Teiler (Divider). Eine unendlich zarte, goldene Linie wächst aus der Mitte, während das isolierte Sub-Claim-PNG ("Pure Gold. Nothing Else.") wie aus flüssigem Licht auftaucht. Dieser physikalische Effekt eignet sich perfekt für dramaturgische Pausen oder Übergänge zwischen extrem großen Inhalts-Blöcken.

Teste es live: Gehe mit der Maus über die große schwarze Box unten, um den Scroll-Effekt zu bewundern!
Pure Gold Nothing Else
K.2 - Footer-Scroll-Vorschlag 1: "Der Horizont-Schnitt" Ein massiver, aber unfassbar subtiler Design-Bruch. Wenn der User das Ende der Seite erreicht, zieht sich die magische goldene Haarlinie auf. Oben erscheint winzig, fast geisterhaft das tiefweiße Ophyr-Logo. Darunter atmet der "Pure Gold. Nothing Else." Claim ganz sanft ein und leuchtet auf.

Teste es live: Hover über die extrem dunkle Box unten.
Pure Gold Nothing Else
K.3 - Footer-Scroll-Vorschlag 2: "Das Ätherische Pulsieren" Dieses Konzept verzichtet komplett auf Linien. Es bedient sich stattdessen am "Glas" und am "Licht". Eine goldene Aura (Lichtkugel) wird im Hintergrund der Seite sanft hochgefahren, wodurch die Schrift aus dem Dunkeln wie eine leuchtende Reflexion auftaucht. Das Layout ist gestapelt, minimal und das Logo extrem technisch geschrieben.

Teste es live: Hover über die Box unten.
Pure Gold Nothing Else
K.4 - Footer-Scroll-Vorschlag 3: "The Majestic Balance (333px / 33px)" Hier ist der exakte "Golden Thread", aber mit der perfekten architektonischen Balance deiner Formel. Der Claim ist exakt 333px breit, und mittig direkt darüber schwebt das weiße Ophyr-Logo – mikroskopisch klein und extrem edel auf exakt 33px skaliert. Beide Elemente faden extrem weich animiert aus dem Nichts auf eine mächtige 20% Opacity ein.

Teste es live: Hover über die Box unten.
Pure Gold Nothing Else

L - Referenz-Layout (Technologie)

L.1 - Das Monolith-Accordion (Technologie) Dies ist das absolut perfektionierte Kern-Layout der technologie.html. Es dient als "Single Source of Truth" für zukünftige Inhaltsblöcke. Es kombiniert exakte mathematische Grid-Spalten (38% zu 62%) mit Glas-Effekten.
Die exakten Masse (CSS Architektur):
  • Container-Breite (Desktop): 60% des Viewports, margin: 0 auto (zentriert)
  • Glas-Block (Monolith): background: rgba(22, 17, 13, 0.6) + backdrop-filter: blur(30px)
  • Border-Radius: 20px (Außenkanten)
  • Grid-Schnitt (Spalten): grid-template-columns: 38% 62%
  • Innenabstand (Padding): 40px 50px (Oben/Unten 40px, Links/Rechts 50px)
  • Ziffer (z.B. 01): font-size: 26px, font-weight: 200, letter-spacing: 2px, Farbe: Gold
  • Titel: font-size: 16px, font-weight: 600, line-height 1.4
  • Trennlinie Vertikal: Ein 1px feiner, ausfadender Strich via linear-gradient
  • Kompensation (Mobile): Switch zu 1 Spalte (1fr), Padding rekalibriert auf 30px 20px
01
70 Billionen
Goldatome
Maximale Dichte für zelluläre Wirksamkeit
v
03
Silizium, Gold und
Reinstwasser
Eine Symbiose von vollendeter Reinheit

Drei Elemente verschmelzen zu einer Einheit technologischer Perfektion. Silizium strukturiert während Gold regeneriert und hochkohärentes Wasser die absolute Reinheit garantiert. Diese Verbindung ist die Essenz unserer Innovation. Es ist ein Dreiklang der Brillanz.

^