/* =================================================================== Klinik Dr. Herter – Design Tokens Quelle: Figma-Datei "Dr.-Herter", ausgelesen am 28.08.2026 Seiten: Buttons + Icons, Template Komponenten – mobil Werte stammen direkt aus den Figma-Styles. Abweichungen zur Konzept-PDF sind an der jeweiligen Stelle vermerkt. =================================================================== */ :root { /* --------------------------------------------------------------- MARKENFARBEN (Figma-Styles) --------------------------------------------------------------- */ --c-primary: #891217; /* "Marke Burgunder" */ --c-primary-hover: #A51A20; /* Styleguide-Seite "Buttons / Primary" */ --c-primary-pressed: #6F0D11; --c-primary-disabled: #C7B6B8; --c-secondary: #635A60; /* Taupe-Grau */ --c-neutral: #D1D4D3; /* Sekundär-Button laut Styleguide-Seite */ --c-btn-sec-hover: #F1ECEB; --c-btn-sec-pressed: #E3DEDD; /* Hinweis: Die Button-Komponenten in Figma tragen zusätzlich eine Schwarzfläche mit 20 % Deckkraft (#891217 wird dadurch zu #6E0E12). Die Styleguide-Seite der Datei nennt dagegen #891217 als Normalwert. Bis zur Klärung gilt der dokumentierte Wert. */ --c-primary-overlay: #6E0E12; /* --------------------------------------------------------------- FLÄCHEN (Figma-Styles) --------------------------------------------------------------- */ --c-offwhite: #F7F5F2; /* "Warmes Offwhite" */ --c-sand: #E9E3DA; /* "helle Fläche HG" */ /* Drei neutrale Graustufen – bisher nur auf den Seiten zu "Ästhetik für Männer". Die übrigen Seiten bleiben bei Offwhite und Sand. */ --c-grau-hell: #E5E5E4; --c-grau-mittel: #D9D9D9; --c-grau-dunkel: #C6C7C7; --c-forms: #FAFAF8; /* "Forms" – auch Textfarbe auf Rot */ --c-sage-light: #CBD4CB; /* "Salbei hell" */ --c-sage-mid: #AAB8AA; --c-moss: #7E8A80; /* "Moosgaru" (Schreibweise aus Figma) */ --c-taupe-light: #B8ACA5; --c-stone: #8D8686; --c-sage-dark: #56645A; /* --------------------------------------------------------------- TEXT --------------------------------------------------------------- */ --c-text: #000000; /* Figma setzt Text auf reines Schwarz */ --c-text-body: #000000; --c-text-secondary: #635A60; --c-text-disabled: #AFAFAF; --c-text-inverse: #FAFAF8; /* nicht #FFFFFF – Figma nutzt "Forms" */ /* --------------------------------------------------------------- STATUS Die Statuspalette der Datei führt #6E8D73 unter dem Namen "Hover". Die Button-Spezifikation nennt für Hover jedoch #A51A20. Offene Frage – hier zunächst als reine Statusfarbe geführt. --------------------------------------------------------------- */ --c-status-hover: #6E8D73; --c-status-success: #A7EE9E; --c-info: #7395A7; --c-warning: #C89A56; --c-error: #A64045; /* --------------------------------------------------------------- INTERAKTION --------------------------------------------------------------- */ --c-link: #891217; --c-link-hover: #A51A20; --c-link-visited: #635A60; --c-input-border: #D1D4D3; /* FAQ-Karten, Werte aus Figma Node 310:205. Achtung: diese vier liegen ausserhalb der dokumentierten Palette – reines Weiss statt "Forms", ein waermerer Rand als der Formularrand und zwei Neutralgraus statt Taupe. So steht es in der Datei; fuer die Abstimmung mit Frau Schmidt notiert. */ --c-faq-flaeche: #FFFFFF; --c-faq-rand: #D9D2CC; --c-faq-frage: #222222; --c-faq-antwort: #666666; /* Sternfarbe wie im Google-Unternehmensprofil */ --c-stern: #FBBC04; --c-input-border-hover: #B8ACA5; --c-input-border-focus: #891217; --c-icon: #635A60; --c-icon-active: #891217; --c-icon-decorative: #7E8A80; --c-border-card: #ECE8E5; /* --------------------------------------------------------------- FLÄCHEN-ALIASE Sprechende Namen für die Verwendung im Layout. --------------------------------------------------------------- */ --c-bg-page: var(--c-offwhite); --c-bg-card: var(--c-forms); --c-bg-alt: var(--c-sand); --c-bg-shape: #FAFAF8; /* --------------------------------------------------------------- SCHATTEN Figma setzt den Schatten dauerhaft, nicht erst beim Hover. --------------------------------------------------------------- */ --shadow-btn: 0 4px 2px rgba(0, 0, 0, .25); --shadow-text: 0 4px 4px rgba(0, 0, 0, .25); --shadow-focus: 0 0 0 3px rgba(137, 18, 23, .12); --shadow-card: 0 2px 12px rgba(0, 0, 0, .06); /* --------------------------------------------------------------- TYPOGRAFIE (Figma Text Styles) "H 1 Überschrift Mobile" Newsreader Regular 42 "Button" Manrope Bold 16 "Fließtext Mobil" Manrope Regular 16 --------------------------------------------------------------- */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Mobil sind alle Werte belegt. Die Desktop-Obergrenzen stammen weiter aus dem Konzept – die Figma-Seite "Homepage" war beim Auslesen nicht verfügbar. */ --fs-h1: clamp(2.625rem, 1.6rem + 4.4vw, 4.5rem); /* 42 px mobil */ --fs-h2: clamp(1.4375rem, 1.3rem + .6vw, 2.5rem); /* 23 px mobil */ --fs-h3: clamp(1.25rem, 1.2rem + .25vw, 1.5rem); /* 20 px mobil */ --fs-teaser: 1.125rem; /* 18 px – Teaser-Überschrift */ --fs-body: 1rem; /* 16 px */ --fs-small: .9375rem; /* 15 px */ --fs-xsmall: .875rem; --fs-nav: 1rem; --fs-btn: 1rem; /* 16 px, Bold */ --lh-tight: 1.12; --lh-heading: 1.25; --lh-body: 1.55; --ls-h2: -.01em; /* Figma: -0,23 px bei 23 px */ /* --------------------------------------------------------------- SPACING Aus den Auto-Layout-Werten der mobilen Templates: Abschnitt 40 oben / 38 unten, 30 links, 18 rechts, Absatzabstand 30, Abstand Überschrift zu Text 15. --------------------------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .625rem; /* 10 px – Innenabstand Buttons */ --sp-4: .9375rem; /* 15 px – Überschrift zu Text */ --sp-5: 1.125rem; /* 18 px */ --sp-6: 1.5rem; --sp-7: 1.875rem; /* 30 px – Absatzabstand */ --sp-8: 2.5rem; /* 40 px – Abschnitt oben */ --sp-9: 3.5rem; --sp-10: 5rem; --sp-11: 6rem; --sp-12: 8rem; /* Abstand zwischen den Abschnitten. Angehoben, weil die Bereiche sonst zu dicht aufeinander sitzen. */ /* Abstand zwischen den Abschnitten. Oberer Wert von 112 auf 152 px angehoben – auf breiten Bildschirmen wirkten die Abschnitte sonst gedrängt. Mobil bleibt es bei 52 px. */ --sp-section: clamp(3.25rem, 1.1rem + 6.6vw, 8rem); /* --------------------------------------------------------------- LAYOUT Mobiler Entwurf: 393 px breit, Inhalt 345 px, also 30 px links und 18 px rechts. --------------------------------------------------------------- */ --container: 1240px; --container-text: 720px; /* Leseweite. Die Abschnitte laufen inzwischen über die volle Containerbreite; dieser Wert gilt nur noch für Formular und Hinweisboxen. */ --gutter: clamp(1.125rem, .5rem + 2vw, 2.5rem); --radius-sm: 4px; --radius: 10px; /* Figma: Buttons und Bildkacheln */ --radius-lg: 14px; /* Figma-Datei, Node 310:205 – im Konzept stand 15 */ --radius-pill: 20px; /* Figma: Menüeinträge im Overlay */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: .15s; --dur: .25s; --tap-target: 48px; --header-h: 64px; /* Figma nennt 56 – angehoben fuer die Bildmarke */ } /* =================================================================== Ergänzungen aus den Seitenvorlagen (Stand 31.08.2026) Quelle: Figma "Gesicht-2. Unter-Falten" (462:648) =================================================================== */ :root { /* Seitenüberschrift, genutzt von h1 und h2 (.seitentitel-h2). 24 px bis 600 px Fensterbreite, danach wachsend bis 44 px ab 1280 px. Die Steigung ist so gewählt, dass der untere Deckel über alle üblichen Handybreiten greift und nicht schon bei 430 px anwächst. */ --fs-h2-seite: clamp(1.5rem, 0.4rem + 2.94vw, 2.75rem); /* 24 px mobil, 44 px ab 1280 px */ --fs-lead: 1.125rem; /* 18 px, Manrope Bold */ --fs-vorteile: 1.25rem; /* 20 px, Manrope SemiBold */ --footer-bar-h: 56px; }