/* ============================================================= Design Tokens — Sophie Leisch Quelle: Figma "SL Webdesign 2026" (oNXRMUrT8A2TOvVz6lG06h) Nur die vier Farben sind echte Figma-Variablen. Alle übrigen Werte sind aus den Frames rekonstruiert (Referenz-Node-IDs stehen jeweils dabei). ============================================================= */ :root { /* --------------------------------------------------------- Farben — Figma-Variablen --------------------------------------------------------- */ --color-koralle: #ef8b72; /* nur noch auf dunklem Grund */ --color-koralle-dunkel: #d96f55; /* "Koralle dunkler" — Akzent auf hellem Grund */ --color-steingrau: #efede9; /* Seitenhintergrund, Text auf Dunkel */ --color-waldgruen: #424e40; /* Footer-Fläche, Section-Headlines */ --color-urbangrau: #2e2c2d; /* Fließtext */ --color-weiss: #fff; /* Text auf Bild */ /* Farben ohne Figma-Variable, aus den Frames gelesen */ --color-placeholder: #d9d9d9; /* Bildplatzhalter hinter Karten */ /* --------------------------------------------------------- Kontrast Gemessen nach WCAG 2.1 gegen Steingrau als Hintergrund: Koralle dunkler #D96F55 2.83:1 Soll 3:1 (grosser Text) Weiss auf #D96F55 3.30:1 Soll 4.5:1 (Buttonschrift) Zuvor stand hier die helle Koralle mit 2.09:1 bzw. 2.44:1 — der Wechsel auf den dunkleren Ton verbessert beides, reicht aber noch nicht. Im selben Farbton lagen #D7684D bei 3.01:1 und #B94629 bei 4.52:1. Auf dunklem Grund ist die helle Koralle unkritisch (5.68:1), deshalb bleibt sie dort stehen. --------------------------------------------------------- */ /* Formular-Label: war #A4A4A4 (2.13:1), abgedunkelt auf 4.61:1. Kein Markenton, daher direkt korrigiert. */ --color-label: #6b6a6a; /* Buttonschrift auf Koralle-Flaeche. Designwert Weiss = 2.44:1. */ --color-button-text: var(--color-weiss); /* Button beim Ueberfahren. Als Token, weil die Flaeche sich nach dem Untergrund richten muss: im Footer waere Waldgruen gleich der Hintergrundfarbe, der Button wuerde verschwinden. */ --color-button-hover-bg: var(--color-waldgruen); --color-button-hover-text: var(--color-steingrau); /* Koralle als Textfarbe auf hellem Grund. Der Entwurf setzt dafuer nicht die helle Koralle, sondern "Koralle dunkler": Links im Impressum und im Datenschutz, die Wortmarke im Footer, die H2 in den Karten und die Buttonflaeche stehen alle in #D96F55. Nur die Rubrik "mein ansatz" ist noch hell (#F08B73) — "der ablauf" auf derselben Seite ist bereits dunkel. 2.83:1 statt 2.09:1 — besser, aber immer noch unter den 3:1 fuer grossen Text. */ --color-accent-text: var(--color-koralle-dunkel); /* Semantische Zuweisung */ --color-bg: var(--color-steingrau); --color-text: var(--color-urbangrau); --color-heading: var(--color-waldgruen); /* Der Entwurf setzt fast durchgaengig den dunkleren Ton: Wortmarke, Rubriken, Buttonflaeche, Karten-H2 und Links. Hell geblieben ist dort nur die Rubrik "mein ansatz" — "der ablauf" auf derselben Seite ist bereits dunkel. */ --color-accent: var(--color-koralle-dunkel); --color-border: var(--color-urbangrau); --color-footer-bg: var(--color-waldgruen); --color-footer-text: var(--color-steingrau); --color-on-image: var(--color-weiss); } /* ------------------------------------------------------------- Dunkles Seitenthema Die Buchungs- und Fragebogenstrecke (Figma 12.1–12.6, 13.1–13.3) läuft durchgängig auf Urbangrau statt Steingrau. Überschriften stehen dort in Koralle statt Waldgrün. Anwendung: ------------------------------------------------------------- */ .theme-dark { --color-bg: var(--color-urbangrau); --color-text: var(--color-steingrau); --color-heading: var(--color-koralle); --color-border: var(--color-steingrau); /* Auf dunklem Grund kehrt sich das um: die helle Koralle kommt dort auf 5.68:1, die dunkle nur auf 2.65:1. */ --color-accent: var(--color-koralle); --color-accent-text: var(--color-koralle); /* 5.68:1 — unkritisch */ --color-label: #9a9895; } :root { /* --------------------------------------------------------- Typografie Romie (Serife) + Soyuz Grotesk (Marke). Beide lizenzpflichtig, Dateien in assets/fonts/, eingebunden in css/fonts.css. Das Figma nennt als Serife noch Chronicle Display. Geliefert wurde Romie — die Gewichte unterscheiden sich: Chronicle war dort mit Light 300 und Semibold 600 gesetzt, Romie hat Regular 400 und Bold 700. Der Fliesstext faellt dadurch etwas kraeftiger aus als im Entwurf. --------------------------------------------------------- */ --font-serif: "Romie", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-brand: "Soyuz Grotesk", "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif; --weight-regular: 400; --weight-bold: 700; /* Groessen und Zeilenhoehen stammen aus den Figma-Textstilen (Panel "Text styles"), Wert und Stilname stehen jeweils dabei. Lesegroessen (H2, Fliesstext, Navigation, Footer) erreichen ihre Entwurfsgroesse schon bei 1024px und werden dort gedeckelt. Vorher war der vw-Anteil an das 1728er Artboard gebunden — auf einem 1440er Laptop lief der Fliesstext dadurch mit 18 statt 22px. Schaugroessen (Display, Zitat, Rubrik) skalieren weiter mit dem Viewport, dort ist das Schrumpfen gewollt. */ --text-display: clamp(2.5rem, 5.787vw, 6.25rem); /* 100/105 Bold — Body/Header */ --text-quote: clamp(1.75rem, 2.894vw, 3.125rem); /* 50/60 Italic — Body/Füller Text Desktop */ /* Rubrik, im Entwurf als Pfad gezeichnet. Eingestellt an der gezeichneten Breite, nicht an einer Punktgroesse: Unsere Soyuz laeuft bei gleicher Groesse 1,4-mal schmaler als die Pfade. „jeder körper ist anders." misst 571 bei 1728 (49:2152 ff.) und 492 bei 834 (123:110) — das sind 50,5 und 43,4px. Zwei Geraden, die sich bei 834 treffen: darunter steil (Tablet, 31px bei 601), darueber flach bis zum Artboard. `min()` nimmt jeweils die kleinere, dadurch gibt es an keiner Breite einen Sprung. Vorher fiel die Rubrik bei 901px von 47 auf 24px. */ --text-section: clamp(1.875rem, min(5.2vw, calc(2.3rem + 0.794vw)), 3.16rem); --text-brand: clamp(1.5rem, 3.223vw, 2.0625rem);/* 33/28 Soyuz — Footer/Footer Desktop SL */ --text-h2: clamp(1.5rem, 2.930vw, 1.875rem); /* 30/34 Bold — Body/H2 Desktop */ --text-body: clamp(1.125rem, 2.148vw, 1.375rem); /* 22/30 — Body/Fließtext Desktop */ --text-nav: clamp(1rem, 1.758vw, 1.125rem); /* 18/22 — Navigation/Navigation Desktop 18/26 im Footer — Footer/Footer Infotexte */ --text-small: clamp(0.875rem, 0.926vw, 1rem); /* 16px — Hinweistexte (49:1678) */ /* Knopfbeschriftung. Aus den Vektoren zurueckgerechnet: „termin buchen" misst im Entwurf 168 x 19 Tinte (47:964), „senden" 86 x 19 (49:1681) — beides ergibt 27px, bei „termin buchen" stimmen Hoehe und Breite auf 0,4 % ueberein. Mit 27px kommt der Knopf auf 216px Breite, im Entwurf sind es 225. */ --text-button: clamp(1.25rem, 2.637vw, 1.6875rem); /* 27px */ --text-micro: 0.75rem; /* 12/26 Bold — Footer/Footer Subtitels */ /* Zeilenhoehen als Verhaeltnis, damit sie jeder Schriftgroesse folgen statt nur bei 1728px zu stimmen (Figma-Absolutwerte in Klammern). */ --leading-display: 1.05; /* 105/100 */ --leading-quote: 1.2; /* 60/50 */ --leading-brand: 0.848; /* 28/33 — Soyuz sitzt eng, Versalhoehe fuellt die Zeile */ --leading-heading: 1.133; /* 34/30 */ --leading-body: 1.36; /* 30/22 */ --leading-nav: 1.222; /* 22/18 */ --leading-footer: 1.444; /* 26/18 — Footer setzt luftiger als die Navigation */ --leading-micro: 2.167; /* 26/12 — die Spaltenlabels tragen die Zeilenhoehe der Adressen */ /* Nur im Zitat: Figma setzt 1px Sperrung (Füller Text Desktop). */ --tracking-quote: 0.0625rem; /* --------------------------------------------------------- Layout Figma-Artboard: 1728px (MacBook Pro 16") Content-Spalte: 1370px = 3 Karten à 438px + 2 Gutter à 28px --------------------------------------------------------- */ /* Alle Layoutmasse in rem: stellt jemand im Browser eine groessere Schrift ein, waechst das Raster mit. Die px-Werte in den Kommentaren gelten bei 16px Basisschrift und entsprechen dem Figma-Artboard. */ --layout-max: 108rem; /* 1728px — Artboard-Breite */ --layout-content: 85.625rem; /* 1370px — 3 Karten + 2 Gutter */ --layout-card: 27.375rem; /* 438px — Kartenbreite */ --layout-gap: var(--space-l); /* 28px — Gutter zwischen Karten */ --layout-measure: 46.75rem; /* 748px — schmale Textspalte */ /* Seitenrand: 30px bis zur Tabletgrenze (1024), 179px auf dem Artboard (1728). Dazwischen gerade interpoliert — 0,2116 * Breite − 186,7. Vorher stand hier eine reine vw-Kurve. Die traf die 179 oben, sprang aber direkt ueber der Tabletgrenze auf 93px und nahm im Bereich um 1100px ueber 220px Breite weg: Auf „Kontakt" und „Ueber mich" blieb fuer die Rubrikspalte neben dem Text kaum noch Platz. */ --layout-gutter: clamp(1.875rem, calc(21.16vw - 11.67rem), 11.1875rem); /* Aus den Bestandteilen gerechnet statt fest gesetzt: der Header ist so hoch wie die Wortmarke plus Innenabstand. Beide skalieren mit der Schriftgroesse, also tut es der Token auch — sonst stimmt der Versatz von .site-main--offset nicht mehr. */ --logo-height: 3.5rem; /* 56px — Hoehe der Wortmarke */ --header-height: calc(var(--logo-height) + 2 * var(--space-m)); --footer-height: 13.3125rem; /* 213px */ /* --------------------------------------------------------- Abstände --------------------------------------------------------- */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-s: 1rem; /* 16px */ --space-m: 1.5rem; /* 24px — Außenrand schmal */ --space-l: 1.75rem; /* 28px — Grid-Gutter */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ /* Vertikaler Section-Rhythmus, fluid */ --section-gap: clamp(3rem, 6.5vw, 7rem); /* --------------------------------------------------------- Formen & Effekte --------------------------------------------------------- */ /* Hier bleibt px mit Absicht: Radien, Haarlinien und Weichzeichner sind Formensprache, keine Textmasse. Ein 25px-Radius, der bei grosser Schrift auf 40px mitwaechst, verzieht die Kartenform, ohne dass die Lesbarkeit davon profitiert. */ --radius-card: 25px; /* Karten und Textarea */ --radius-button: 9px; /* aus dem Button-SVG: rx="9" */ --border-width: 1.5px; --blur-glass: 4px; /* --------------------------------------------------------- Bewegung Nicht im Figma definiert — Projektkonvention. --------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 250ms; /* Splash auf der Startseite: wie lange die Bildmarke steht und wie lange der Wechsel zur Startseite dauert. */ --splash-hold: 1.4s; --splash-fade: 600ms; } /* ------------------------------------------------------------- Tablet und schmaler (iPad Pro 11", Figma 120:232 ff.) Zwei Werte lassen sich nicht aus der Desktop-Kurve ableiten, weil der Entwurf dort bewusst anders setzt: Seitenrand — auf dem Artboard 179px von 1728 (10.36vw). Bei 834px waeren das 86px; der Tablet-Entwurf haelt aber 30px (Zitat 123:159, Footer 123:160 ff.). Headline — Desktop 100/105, Tablet 80/85 als eigener Stil „Tablet/Header Tablet". Die Desktop-Kurve ergaebe bei 834px nur 48px. ------------------------------------------------------------- */ @media (max-width: 64em) { :root { --layout-gutter: 1.875rem; /* 30px */ /* „jeder körper ist anders." und „der ablauf" stehen im Entwurf nicht am Seitenrand, sondern bei x=96 (123:110, 123:113). „mein ansatz" bleibt bei 31 — der Einzug gilt nur fuer die Rubriken ueber ganzbreiten Bloecken. */ --rubrik-einzug: 4.125rem; /* 66px */ --text-display: clamp(2.5rem, 9.6vw, 5rem); /* 80px bei 834 */ --leading-display: 1.0625; /* 85/80 */ /* --text-section kommt aus der Grundkurve oben — sie deckt das Tablet mit ab (43px bei 834: „mein ansatz" 243, „der ablauf" 218, „wobei ich dich begleite." 479 wie im Entwurf). */ /* Ueberschriften: der Entwurf hat fuer das Tablet einen eigenen Stil, „Tablet/H3 Tablet" — Romie Bold 22/30. Er gilt dort ueberall, wo am Desktop Body/H2 (30/34) steht: Kartentexte und Behandlungsbloecke (126:419), Lebenslauf-Rubriken (185:2370), Abschnitte der Rechtstexte. Die Desktop-Kurve gaebe hier 24,4px auf 27,7 Zeilenhoehe. */ --text-h2: 1.375rem; /* 22px */ --leading-heading: 1.3636; /* 30/22 */ /* Fliesstext: „Tablet/Text Tablet" — Romie Regular 18/26 (126:419, 185:2365). Der Zeilenabstand faellt hier aus dem sonst durchgehaltenen Faktor 1,36 heraus; das steht so im Entwurf. Die Groesse ergaebe sich schon aus der Untergrenze der Desktop-Kurve, steht hier aber ausgeschrieben, damit beide Werte zusammen bleiben. */ --text-body: 1.125rem; /* 18px */ --leading-body: 1.4444; /* 26/18 */ } } /* Zitate im Tablet-Hochformat: „Tablet/Füllertext Tablet", Romie Italic 30/40 (126:447). Die Desktop-Kurve fiel hier auf ihre Untergrenze von 28px. Nachgemessen: Die laengste Zeile des Zitats ist im Entwurf 560 breit, bei uns in 30px 558 — anders als bei der Soyuz stimmen die Romie-Groessen also direkt. Nur im Tabletband: Das Telefon hat einen eigenen Stil (24/34, 148:1870). */ @media (min-width: 37.5em) and (max-width: 64em) { :root { --text-quote: 1.875rem; /* 30px */ --leading-quote: 1.3333; /* 40/30 */ } } /* --- Telefon ------------------------------------------------ Der Entwurf (148:74 ff., 402px) rueckt naeher an den Rand als Tablet und Desktop: Fliesstext und Ueberschriften laufen dort von 10 bis 392. Ganz so knapp wird es hier nicht, 1rem traegt sich ruhiger. ------------------------------------------------------------ */ @media (max-width: 37.5em) { :root { --layout-gutter: 1.5rem; /* 24px */ /* Die Rubriken stehen am Telefon nicht mehr eingerueckt, sondern auf derselben Kante wie der Text darunter („jeder körper ist anders." 148:1872 bei x=10, der Text 148:1873 ebenso). */ --rubrik-einzug: 0rem; /* Am Telefon fuellt die Rubrik die Zeile fast aus: „jeder körper ist anders." misst im Entwurf 364 von 402 (148:1872), auf dem Desktop dagegen 571 von 1728. Die Groesse ist darum an der gezeichneten Breite eingestellt und nicht aus der Desktop-Kurve weitergerechnet — die gaebe nur zwei Drittel davon. Der vw-Anteil haelt sie auf schmaleren Telefonen innerhalb des Satzspiegels. */ --text-section: clamp(1.25rem, 7.4vw, 2rem); /* Wortmarke 81x35 bei x=10, y=15 (148:1830) — der Header ist damit 65 statt 104 hoch. */ /* Abstand ueber der ersten Ueberschrift einer Seite — unter dem Hero ebenso wie unter dem Kopfband. Ein Wert fuer alle Seiten, damit sie gleich hoch anfangen. */ --kopfabstand: 8.5rem; /* 136px */ --logo-height: 2.1875rem; /* 35px */ --header-rand: 0.9375rem; /* 15px */ --header-height: calc(var(--logo-height) + 2 * var(--header-rand)); } }