/* ============================================================ DESIGN SYSTEM — extrahiert aus majd-portfolio.framer.website Alle Werte sind 1:1 aus dem laufenden DOM ausgelesen. ============================================================ */ :root { /* ---------- FARBEN ------------------------------------------------ Original-Tokennamen aus Framer sind als Kommentar hinterlegt. */ --c-cream: #faf7f3; /* token-2fcd1089 — Canvas / Papier */ --c-ink: #111111; /* token-e44374f3 — Schrift / Flächen */ --c-ink-50: #1111119e; /* Sekundärtext. Ursprünglich 80 (50 %) aus der Framer-Vorlage — das ergab nur 3,49:1 auf Creme. 9e (62 %) bringt 5,1:1. */ --c-hairline: #0000001a; /* token-050a7e9f — Trennlinien 10 % */ --c-cream-90: #faf7f3e6; /* token-0a96c60c */ --c-cream-50: #faf7f380; /* token-04b522f2 — Text auf Dunkel */ --c-cream-30: #faf7f34d; /* token-b5ff5227 */ --c-cream-10: #faf7f31a; /* token-57f08e2a — Border auf Dunkel */ --c-accent: #eb4d6d; /* token-f6bceadb — Signalfarbe der Framer-Vorlage. Ungenutzt: das Rosa passt nicht zum warmen Tunnelbild. */ /* ---------- WARME TÖNE AUS DEM HERO ------------------------------- Direkt aus dem letzten Videoframe gegriffen: Lampenlicht, die ockerfarbene Tunnelwand und der tiefste Schatten. Sie tragen die Wärme des Hero in die helle Seite hinein — sparsam eingesetzt für Licht, Linien und Füllungen, nicht für Flächen. */ --c-lamp: #fdf6e6; /* Lampenlicht (= --light im Hero) */ --c-amber: #c98a2e; /* Bernstein — auf Dunkel und für Linien */ --c-amber-deep: #8a5412; /* dieselbe Farbe für Text auf Creme: 5,5:1 statt 2,6:1 des hellen Tons */ --c-umbra: #241a12; /* wärmster Tiefton der Tunnelwand */ /* Abgeleitete Rollen */ --bg: var(--c-cream); --bg-invert: var(--c-ink); --fg: var(--c-ink); --fg-muted: var(--c-ink-50); --fg-invert: var(--c-cream); --fg-invert-muted:var(--c-cream-50); --line: var(--c-hairline); --line-invert: var(--c-cream-10); /* Startfarbe des Scroll-Scrub-Textes (gemessen: rgba(0,0,0,.1)) */ --scrub-from: rgba(0, 0, 0, 0.1); --scrub-to: var(--c-ink); /* ---------- TYPOGRAFIE -------------------------------------------- Archivo (NICHT Inter — die Inter-@font-face-Regeln im Framer-Export sind ungenutzte Fallbacks; computed font-family ist überall Archivo). Tracking konsequent negativ: −0.02em ab 26px, −0.04em darunter. */ --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Größen (Desktop-Basis 1440px) */ --t-display: 174px; /* Hero w800 lh 0.90 ls −0.02em */ --t-h1: 76px; /* Sektionstitel w600 lh 1.00 ls −0.02em */ --t-h2: 68px; /* ©2026 w600 lh 1.00 ls −0.02em */ --t-lead: 44px; /* Stufe der Skala, aktuell ungenutzt */ --t-scrub: 36px; /* Scrub-Absatz w500 lh 1.20 ls −0.02em */ --t-h3: 32px; /* Kartentitel w500 lh 1.20 ls −0.02em */ --t-h4: 26px; /* Footer-Label w500 lh 1.20 ls 0 */ --t-h5: 22px; /* Wordmark w600 lh 1.40 ls −0.04em */ --t-body: 18px; /* Fließtext w400 lh 1.40 ls −0.04em */ --t-small: 16px; /* Meta / Tags w400 lh 1.40 ls −0.04em */ /* Zeilenhöhen */ --lh-display: 0.9; --lh-tight: 1; --lh-snug: 1.2; --lh-body: 1.4; /* Tracking */ --ls-display: -0.02em; --ls-body: -0.04em; /* Gewichte */ --w-light: 300; --w-normal: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-black: 800; /* ---------- LAYOUT ------------------------------------------------ */ --container: 1180px; /* gemessene Inhaltsbreite */ --gutter: 130px; /* (1440 − 1180) / 2 */ --grid-gap: 16px; /* gilt für ALLE Raster */ --section-pt: 120px; /* Abstand über jeder Sektion */ --section-gap: 60px; /* Titel → Inhalt */ --about-gap: 260px; /* Sonderabstand der About-Spalten */ --footer-pb: 300px; /* Platz für die riesige Wortmarke */ /* ---------- RADIEN ------------------------------------------------ */ --r-card: 20px; /* dominant: Karten, Bilder, Nav */ --r-chip: 8px; /* Pills, Inputs, kleine Flächen */ --r-pill: 999px; /* vollrund */ /* ---------- SCHATTEN ---------------------------------------------- */ --shadow-float: rgba(0, 0, 0, 0.17) 0px 0.602187px 1.56569px -1.5px, rgba(0, 0, 0, 0.14) 0px 2.28853px 5.95019px -3px, rgba(0, 0, 0, 0.02) 0px 10px 26px -4.5px; --shadow-ring: inset 0 0 0 1px var(--c-ink); /* ---------- MOTION ------------------------------------------------- Framer backt seine Federn als linear()-Easing in die WAAPI. Die Kurve unten ist die aus dem Original resampelte, kritisch gedämpfte Feder (kein Überschwingen, ~94 % bei halber Laufzeit). */ --ease-spring: linear( 0.0000 0.00%, 0.0296 2.88%, 0.1212 6.47%, 0.2142 9.35%, 0.3358 12.95%, 0.4292 15.83%, 0.5352 19.42%, 0.6098 22.30%, 0.6897 25.90%, 0.7434 28.78%, 0.7992 32.37%, 0.8358 35.25%, 0.8730 38.85%, 0.8970 41.73%, 0.9211 45.32%, 0.9364 48.20%, 0.9516 51.80%, 0.9612 54.68%, 0.9706 58.27%, 0.9765 61.15%, 0.9823 64.75%, 0.9859 67.63%, 0.9894 71.22%, 0.9916 74.10%, 0.9937 77.70%, 0.9950 80.58%, 0.9963 84.17%, 0.9971 87.05%, 0.9978 90.65%, 0.9983 93.53%, 0.9987 97.12%, 1.0000 100.00% ); /* gemessen an .framer-* Buttons: background, box-shadow 0.2s */ --ease-ui: cubic-bezier(0.44, 0, 0.56, 1); --d-reveal-title: 1800ms; /* Überschriften-Wortreveal */ --d-reveal-text: 1400ms; /* Fließtext-Wortreveal */ --d-stagger: 50ms; /* Versatz pro Wort */ --d-ui: 200ms; /* Hintergrund / Schatten */ --d-color: 300ms; /* Farbwechsel (linear!) */ --blur-title: 10px; /* Start-Blur Überschrift */ --blur-text: 6px; /* Start-Blur Fließtext */ --lift: 10px; /* Start-translateY */ --perspective: 1200px; /* 3D-Karten */ } /* Responsive Typo- und Layoutstufen ------------------------------- */ @media (max-width: 1200px) { :root { --container: 100%; --gutter: 48px; --t-display: 12vw; --about-gap: 80px; } } @media (max-width: 800px) { :root { --gutter: 24px; --t-display: 15vw; --t-h1: 44px; --t-h2: 40px; --t-lead: 28px; --t-h3: 24px; --section-pt: 80px; --section-gap: 32px; --about-gap: 48px; --footer-pb: 140px; } }