/* ========================================================================== Hochpunkt Design Tokens Quelle: hochpunkt-2025 Website-Codebase · src/const/colors.ts → Farbpalette · tailwind.config.js → Type-Scale + Spacing · src/style.css → Layout-Variablen + @font-face -------------------------------------------------------------------------- Einbinden: Nutzung: color: var(--hp-primary); font: var(--hp-fs-h2) / 1.25 var(--hp-font-sans); ========================================================================== */ /* Schrift: Poppins wird via Google-Fonts-CDN im index.html geladen. Keine lokalen @font-face-Deklarationen mehr — verhinderte 404 auf Netlify. */ :root { /* ============================================================ FARBEN — exakt aus src/const/colors.ts ============================================================ */ --hp-black: #18191C; /* Haupttext (--font-black) */ --hp-white: #FFFFFF; --hp-primary: #006166; /* Petrol — Markenfarbe */ --hp-primary-hover: #024E52; /* Hover-State */ --hp-sea-green: #1ED7CF; /* Cyan/Türkis — Akzent, Pagination */ --hp-dark-blue: #1E0E62; /* Tiefblau — sekundär */ --hp-grey: #767A85A1; /* Grau, halb-transparent */ --hp-dark-grey: #999EA6; --hp-light-blue: #E0E7ED; /* Helle Fläche, Cards */ /* Abgeleitete / utility Farben */ --hp-text: var(--hp-black); --hp-text-soft: #4B4D54; --hp-text-mute: var(--hp-dark-grey); --hp-bg: var(--hp-white); --hp-bg-soft: var(--hp-light-blue); --hp-line: rgba(24, 25, 28, .10); --hp-line-strong: rgba(24, 25, 28, .20); --hp-on-dark: var(--hp-white); --hp-on-dark-soft: rgba(255, 255, 255, .80); --hp-line-on-dark: rgba(255, 255, 255, .15); /* ============================================================ SCHRIFT ============================================================ */ --hp-font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --hp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Font-Weights */ --hp-fw-regular: 400; --hp-fw-medium: 500; --hp-fw-semibold: 600; --hp-fw-bold: 700; /* ============================================================ TYPE-SCALE — übernommen aus tailwind.config.js responsiveScale(mobile, desktop) wurde mit clamp() aufgelöst. Basis: 16 px = 1 rem, Breakpoint xl = 1280 px. ============================================================ */ /* h0 → 64 / 80 px, lh 1.125 */ --hp-fs-h0: clamp(4rem, (100vw - 1280px) * 99, 5rem); --hp-lh-h0: 1.125; /* h1 → 40 / 64 px, lh 60 / 80 px */ --hp-fs-h1: clamp(2.5rem, (100vw - 1280px) * 99, 4rem); --hp-lh-h1: clamp(3.75rem, (100vw - 1280px) * 99, 5rem); /* h2 → 42 px, lh 1.25 */ --hp-fs-h2: 42px; --hp-lh-h2: 1.25; /* h3 → 32 px, lh 1.33 */ --hp-fs-h3: 32px; --hp-lh-h3: 1.33; /* h4 → 24 px, lh 1.25 */ --hp-fs-h4: 24px; --hp-lh-h4: 1.25; /* h5 → 20 px, lh 1.25 */ --hp-fs-h5: 20px; --hp-lh-h5: 1.25; /* p-big → 18 px, lh 1.5 */ --hp-fs-p-big: 1.125rem; /* 18 px */ --hp-lh-p-big: 1.5; /* p-big-bold → 16 / 18 px, lh 22 / 24 px, fw 700 */ --hp-fs-p-big-bold: clamp(1rem, (100vw - 1280px) * 99, 1.125rem); --hp-lh-p-big-bold: clamp(1.375rem, (100vw - 1280px) * 99, 1.5rem); /* p → 14 / 15 px, lh 19 / 22 px (Body) */ --hp-fs-p: clamp(.875rem, (100vw - 1280px) * 99, .9375rem); --hp-lh-p: clamp(1.1875rem, (100vw - 1280px) * 99, 1.375rem); /* p-s → 10 / 12 px, lh 15 / 17 px */ --hp-fs-p-s: clamp(.625rem, (100vw - 1280px) * 99, .75rem); --hp-lh-p-s: clamp(.9375rem, (100vw - 1280px) * 99, 1.0625rem); /* p-xs → 8 / 9 px */ --hp-fs-p-xs: clamp(.5rem, (100vw - 1280px) * 99, .5625rem); /* ============================================================ SPACING — responsives clamp aus tailwind.config.js Basis-Breakpoint: lg = 1024 px ============================================================ */ --hp-space-xxs: clamp(5px, (100vw - 1024px) * 99, 10px); --hp-space-xs: clamp(10px, (100vw - 1024px) * 99, 15px); --hp-space-s: clamp(15px, (100vw - 1024px) * 99, 20px); --hp-space-m: clamp(20px, (100vw - 1024px) * 99, 30px); --hp-space-l: clamp(30px, (100vw - 1024px) * 99, 40px); --hp-space-xl: clamp(40px, (100vw - 1024px) * 99, 60px); --hp-space-xxl: clamp(60px, (100vw - 1024px) * 99, 120px); /* ============================================================ LAYOUT ============================================================ */ --hp-header-height: 5rem; /* 4rem unter 1024px */ --hp-padding-inline: 3.75rem; /* 60px → 32px (md) → 20px (sm) */ --hp-content-max: calc(90rem - (2 * 3.75rem)); /* 1440 − 120 = 1320 */ --hp-action-duration: 500ms; /* Prose-Maxbreiten (aus style.css) */ --hp-prose-s: 136px; --hp-prose-m: 342px; --hp-prose-l: 605px; --hp-prose-xl: 952px; } /* ----- Layout-Tokens responsiv ------------------------------------------- */ @media (max-width: 1023px) { :root { --hp-padding-inline: 2rem; --hp-header-height: 4rem; } } @media (max-width: 767px) { :root { --hp-padding-inline: 1.25rem; } } /* ========================================================================== Globales Defaults ========================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: var(--hp-header-height); } body { font-family: var(--hp-font-sans); font-size: var(--hp-fs-p); line-height: var(--hp-lh-p); color: var(--hp-text); background: var(--hp-bg); } /* ========================================================================== Type-Utilities (entsprechen tailwind text-h0 … text-p-xs) ========================================================================== */ .hp-h0 { font-size: var(--hp-fs-h0); line-height: var(--hp-lh-h0); font-weight: var(--hp-fw-semibold); } .hp-h1 { font-size: var(--hp-fs-h1); line-height: var(--hp-lh-h1); font-weight: var(--hp-fw-semibold); } .hp-h2 { font-size: var(--hp-fs-h2); line-height: var(--hp-lh-h2); font-weight: var(--hp-fw-semibold); } .hp-h3 { font-size: var(--hp-fs-h3); line-height: var(--hp-lh-h3); font-weight: var(--hp-fw-semibold); } .hp-h4 { font-size: var(--hp-fs-h4); line-height: var(--hp-lh-h4); font-weight: var(--hp-fw-semibold); } .hp-h5 { font-size: var(--hp-fs-h5); line-height: var(--hp-lh-h5); font-weight: var(--hp-fw-medium); } .hp-p-big { font-size: var(--hp-fs-p-big); line-height: var(--hp-lh-p-big); } .hp-p-big-b { font-size: var(--hp-fs-p-big-bold); line-height: var(--hp-lh-p-big-bold); font-weight: var(--hp-fw-bold); } .hp-p { font-size: var(--hp-fs-p); line-height: var(--hp-lh-p); } .hp-p-bold { font-size: var(--hp-fs-p); line-height: var(--hp-lh-p); font-weight: var(--hp-fw-bold); } .hp-p-s { font-size: var(--hp-fs-p-s); line-height: var(--hp-lh-p-s); } .hp-p-xs { font-size: var(--hp-fs-p-xs); } /* ========================================================================== Color-Utilities ========================================================================== */ .hp-bg-primary { background: var(--hp-primary); color: var(--hp-on-dark); } .hp-bg-dark { background: var(--hp-black); color: var(--hp-on-dark); } .hp-bg-soft { background: var(--hp-light-blue); color: var(--hp-text); } .hp-bg-cyan { background: var(--hp-sea-green); color: var(--hp-black); } .hp-bg-dark-blue { background: var(--hp-dark-blue); color: var(--hp-on-dark); } .hp-text-primary { color: var(--hp-primary); } .hp-text-cyan { color: var(--hp-sea-green); } .hp-text-dark-blue{ color: var(--hp-dark-blue); } .hp-text-soft { color: var(--hp-text-soft); } .hp-text-mute { color: var(--hp-text-mute); } /* ========================================================================== Komponenten-Snippets aus style.css ========================================================================== */ /* Sekundärer Unterstrich-Link (animiert beim Hover) */ .hp-link { text-decoration: none; color: inherit; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size var(--hp-action-duration); } .hp-link:hover, .hp-link:focus { background-size: 100% 2px; } /* Bold-Link ohne Layout-Shift beim Fett-Werden */ .hp-bold-link { display: inline-flex; flex-direction: column; } .hp-bold-link:hover { font-weight: 700; } .hp-bold-link::before { content: attr(data-text); height: 0; overflow: hidden; font-weight: 700; visibility: hidden; } /* Prose-Maxbreiten */ .hp-prose-s { max-width: var(--hp-prose-s); } .hp-prose-m { max-width: var(--hp-prose-m); } .hp-prose-l { max-width: var(--hp-prose-l); } .hp-prose-xl { max-width: var(--hp-prose-xl); }