/* ============================================================ HARTMANN IT SOLUTIONS — Design System CSS Version 1.0 · März 2026 Corporate Identity: "The Signal" ============================================================ INHALTSVERZEICHNIS ────────────────── 00 Google Fonts Import 01 Design Tokens (CSS Custom Properties) 02 Reset & Base 03 Typografie — Klassen & Helfer 04 Farb-Utilities 05 Layout — Container & Sections 06 Logo-Komponente 07 Buttons 08 Badges & Labels 09 Cards 10 Navigation 11 Formulare 12 Tabellen 13 Trennlinien & Strukturelemente 14 Signatur-Block (E-Mail-Stil) 15 Hero-Abschnitt 16 Metriken / Stat-Cards 17 Responsive Breakpoints VERWENDUNG ────────── 1. Binde diese Datei im ein: 2. Google Fonts werden automatisch eingebunden. Alternativ lokal über @font-face ersetzen. 3. Das Logo (SVG inline) steht als .hit-logo-mark Klassen-Helfer zur Verfügung — siehe Abschnitt 06. ============================================================ */ /* ============================================================ 00 LOCAL FONTS (via @font-face — kein externer Request) ============================================================ */ /* Fraunces — 300 Normal */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-300-normal.woff2') format('woff2'); } /* Fraunces — 300 Italic */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-300-italic.woff2') format('woff2'); } /* Fraunces — 400 Normal */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-400-normal.woff2') format('woff2'); } /* Fraunces — 400 Italic */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-400-italic.woff2') format('woff2'); } /* Fraunces — 500 Normal */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-500-normal.woff2') format('woff2'); } /* Fraunces — 500 Italic */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/fraunces/fraunces-latin-500-italic.woff2') format('woff2'); } /* Bricolage Grotesque — 300 */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-300-normal.woff2') format('woff2'); } /* Bricolage Grotesque — 400 */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-400-normal.woff2') format('woff2'); } /* Bricolage Grotesque — 500 */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); } /* Bricolage Grotesque — 700 */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); } /* ============================================================ 01 DESIGN TOKENS ============================================================ Alle Markenwerte als Custom Properties. Nutze immer diese Variablen — nie Roh-Hex-Werte im eigenen Code. Farbnamen-Referenz: --hit-ink Midnight Navy Primärhintergrund, Headlines --hit-ember Ember Orange Akzente, CTAs, Highlights --hit-ember-2 Ember Hell Hover-States, Gradients --hit-slate Slate Blue Sekundärtext, Links --hit-steel Steel Blue Muted Text, Labels, Borders --hit-parch Parchment Warme Flächen, Dokumente --hit-cream Cream Seitenhintergrund --hit-stone Stone Grey Trennlinien, Borders --hit-white Pure White Karten auf dunklem BG */ :root { /* ── Farben ── */ --hit-ink: #0C1825; --hit-ember: #E04E0A; --hit-ember-2: #FF6B2B; --hit-slate: #3D5A78; --hit-steel: #7A93AB; --hit-parch: #F3EDE0; --hit-cream: #FAF7F2; --hit-stone: #C8D0D8; --hit-white: #FFFFFF; /* ── Semantische Aliases ── */ --hit-bg: var(--hit-cream); --hit-bg-dark: var(--hit-ink); --hit-bg-warm: var(--hit-parch); --hit-text: var(--hit-ink); --hit-text-muted: var(--hit-slate); --hit-text-faint: var(--hit-steel); --hit-accent: var(--hit-ember); --hit-border: var(--hit-stone); /* ── Typografie ── */ --hit-font-display: 'Fraunces', Georgia, serif; --hit-font-body: 'Bricolage Grotesque', system-ui, sans-serif; --hit-font-mono: 'Courier New', Courier, monospace; /* ── Schriftgrößen-Skala ── */ --hit-text-xs: 11px; --hit-text-sm: 13px; --hit-text-base: 15px; --hit-text-md: 18px; --hit-text-lg: 24px; --hit-text-xl: 32px; --hit-text-2xl: clamp(36px, 4vw, 52px); --hit-text-hero: clamp(52px, 8vw, 96px); /* ── Zeilenhöhen ── */ --hit-lh-tight: 1.1; --hit-lh-snug: 1.3; --hit-lh-normal: 1.6; --hit-lh-loose: 1.8; /* ── Abstände ── */ --hit-space-xs: 8px; --hit-space-sm: 16px; --hit-space-md: 32px; --hit-space-lg: 48px; --hit-space-xl: 64px; --hit-space-2xl: 80px; /* ── Radius ── */ --hit-radius-sm: 3px; --hit-radius-md: 6px; --hit-radius-lg: 12px; /* ── Schatten ── */ --hit-shadow-sm: 0 1px 4px rgba(12,24,37,0.08); --hit-shadow-md: 0 4px 16px rgba(12,24,37,0.12); --hit-shadow-lg: 0 12px 40px rgba(12,24,37,0.16); /* ── Übergänge ── */ --hit-transition: 160ms ease; } /* ============================================================ 02 RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--hit-font-body); font-size: var(--hit-text-base); font-weight: 400; line-height: var(--hit-lh-normal); color: var(--hit-text); background-color: var(--hit-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: var(--hit-slate); text-decoration: none; transition: color var(--hit-transition); } a:hover { color: var(--hit-ember); } /* ============================================================ 03 TYPOGRAFIE ============================================================ */ /* ── Display / Hero ── */ .hit-display { font-family: var(--hit-font-display); font-size: var(--hit-text-hero); font-weight: 300; line-height: var(--hit-lh-tight); color: var(--hit-text); } .hit-display em, .hit-display i { color: var(--hit-ember); font-style: italic; } /* ── Überschriften ── */ .hit-h1 { font-family: var(--hit-font-display); font-size: var(--hit-text-2xl); font-weight: 300; line-height: var(--hit-lh-tight); color: var(--hit-text); } .hit-h2 { font-family: var(--hit-font-display); font-size: var(--hit-text-xl); font-weight: 300; line-height: var(--hit-lh-snug); color: var(--hit-text); } .hit-h3 { font-family: var(--hit-font-display); font-size: var(--hit-text-lg); font-weight: 300; line-height: var(--hit-lh-snug); color: var(--hit-text); } /* Serif-Italic-Akzent in Headlines */ .hit-h1 em, .hit-h2 em, .hit-h3 em { color: var(--hit-ember); font-style: italic; } /* ── Subheadline / Lead ── */ .hit-subheadline { font-family: var(--hit-font-body); font-size: var(--hit-text-md); font-weight: 400; line-height: var(--hit-lh-normal); color: var(--hit-slate); } /* ── Body-Text ── */ .hit-body { font-family: var(--hit-font-body); font-size: var(--hit-text-base); font-weight: 300; line-height: var(--hit-lh-loose); color: var(--hit-slate); } /* ── Section Label (Eyebrow) ── */ /* Einsatz: über Headlines als Kapitelmarke / Sektionsbezeichnung */ .hit-label { font-family: var(--hit-font-body); font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hit-steel); line-height: 1; } .hit-label--ember { color: var(--hit-ember); } /* ── Caption / Fine Print ── */ .hit-caption { font-family: var(--hit-font-body); font-size: var(--hit-text-xs); font-weight: 400; color: var(--hit-steel); line-height: var(--hit-lh-normal); } /* ── Monospace ── */ .hit-mono { font-family: var(--hit-font-mono); font-size: 0.9em; } /* ── Kontextmodifikatoren ── */ /* Auf dunklem Hintergrund: füge .hit-on-dark hinzu */ .hit-on-dark .hit-h1, .hit-on-dark .hit-h2, .hit-on-dark .hit-h3, .hit-on-dark .hit-display { color: var(--hit-parch); } .hit-on-dark .hit-subheadline, .hit-on-dark .hit-body { color: var(--hit-steel); } .hit-on-dark .hit-label { color: var(--hit-steel); } .hit-on-dark a { color: var(--hit-steel); } .hit-on-dark a:hover { color: var(--hit-parch); } /* ============================================================ 04 FARB-UTILITIES ============================================================ */ /* Hintergründe */ .hit-bg-ink { background-color: var(--hit-ink); } .hit-bg-ember { background-color: var(--hit-ember); } .hit-bg-parch { background-color: var(--hit-parch); } .hit-bg-cream { background-color: var(--hit-cream); } .hit-bg-white { background-color: var(--hit-white); } .hit-bg-slate { background-color: var(--hit-slate); } /* Textfarben */ .hit-text-ink { color: var(--hit-ink); } .hit-text-ember { color: var(--hit-ember); } .hit-text-slate { color: var(--hit-slate); } .hit-text-steel { color: var(--hit-steel); } .hit-text-parch { color: var(--hit-parch); } .hit-text-white { color: var(--hit-white); } .hit-text-muted { color: var(--hit-steel); } /* Rahmenfarben */ .hit-border-stone { border-color: var(--hit-stone); } .hit-border-ember { border-color: var(--hit-ember); } .hit-border-steel { border-color: var(--hit-steel); } /* ============================================================ 05 LAYOUT — CONTAINER & SECTIONS ============================================================ */ /* Zentrierter Inhaltsbereich */ .hit-container { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: var(--hit-space-xl); padding-right: var(--hit-space-xl); } .hit-container--narrow { max-width: 760px; } .hit-container--wide { max-width: 1400px; } /* ── Section-Varianten ── */ /* Standard: Cream-Hintergrund */ .hit-section { padding-top: var(--hit-space-2xl); padding-bottom: var(--hit-space-2xl); } /* Dunkel: Midnight-Hintergrund */ .hit-section--dark { background-color: var(--hit-ink); color: var(--hit-parch); } /* Warm: Parchment-Hintergrund */ .hit-section--warm { background-color: var(--hit-parch); } /* Akzent: Ember-Hintergrund (sparsam einsetzen!) */ .hit-section--ember { background-color: var(--hit-ember); color: var(--hit-white); } /* Innerer Wrapper für fullwidth Sections */ .hit-section--dark .hit-container, .hit-section--warm .hit-container, .hit-section--ember .hit-container { /* Schon korrekt durch .hit-container — kein Override nötig */ } /* ── Abstandshelfer ── */ .hit-spacer-sm { height: var(--hit-space-sm); } .hit-spacer-md { height: var(--hit-space-md); } .hit-spacer-lg { height: var(--hit-space-lg); } .hit-spacer-xl { height: var(--hit-space-xl); } .hit-spacer-2xl { height: var(--hit-space-2xl); } /* ── Trennlinie ── */ .hit-rule { border: none; border-top: 1px solid var(--hit-stone); opacity: 0.5; margin: 0; } .hit-rule--ember { border-top-color: var(--hit-ember); border-top-width: 2px; opacity: 1; } .hit-rule--heavy { border-top-width: 4px; border-top-color: var(--hit-ember); opacity: 1; } /* ============================================================ 06 LOGO-KOMPONENTE ============================================================ */ /* Verwendung: Größen: hit-logo--sm / hit-logo--md (default) / hit-logo--lg Farbe: hit-logo--light / hit-logo--dark (default für helle Flächen) Auf dark-bg: hit-logo--on-dark */ .hit-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; } .hit-logo__mark { flex-shrink: 0; width: 36px; height: 36px; } .hit-logo__wordmark { display: flex; flex-direction: column; } .hit-logo__name { font-family: var(--hit-font-body); font-size: 18px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--hit-ink); } .hit-logo__sub { font-family: var(--hit-font-body); font-size: 8.5px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hit-slate); margin-top: 5px; line-height: 1; } /* Größen */ .hit-logo--sm .hit-logo__mark { width: 24px; height: 24px; } .hit-logo--sm .hit-logo__name { font-size: 14px; } .hit-logo--sm .hit-logo__sub { font-size: 7px; } .hit-logo--lg .hit-logo__mark { width: 52px; height: 52px; } .hit-logo--lg .hit-logo__name { font-size: 24px; } .hit-logo--lg .hit-logo__sub { font-size: 10px; } /* Auf dunklem Hintergrund */ .hit-logo--on-dark .hit-logo__name { color: var(--hit-parch); } .hit-logo--on-dark .hit-logo__sub { color: var(--hit-steel); } /* Icon-only (kein Wordmark) */ .hit-logo--icon-only .hit-logo__wordmark { display: none; } /* SIGNAL MARK — Inline SVG Vorlage (hell): Auf dunkelm Hintergrund: fill="#0C1825" → fill="#F3EDE0" Auf Ember-Hintergrund: fill="#0C1825" → fill="#FFFFFF" Ember-Bar: fill="#E04E0A" → fill="rgba(255,255,255,0.5)" */ /* ============================================================ 07 BUTTONS ============================================================ */ .hit-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hit-font-body); font-size: var(--hit-text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; padding: 14px 28px; border-radius: var(--hit-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--hit-transition), color var(--hit-transition), border-color var(--hit-transition), transform var(--hit-transition); white-space: nowrap; } .hit-btn:active { transform: translateY(1px); } /* Primär — Ember gefüllt */ .hit-btn--primary { background-color: var(--hit-ember); color: var(--hit-white); border-color: var(--hit-ember); } .hit-btn--primary:hover { background-color: var(--hit-ember-2); border-color: var(--hit-ember-2); color: var(--hit-white); } /* Sekundär — Outline Ink */ .hit-btn--secondary { background-color: transparent; color: var(--hit-ink); border-color: var(--hit-ink); } .hit-btn--secondary:hover { background-color: var(--hit-ink); color: var(--hit-parch); } /* Ghost — für dunkle Hintergründe */ .hit-btn--ghost { background-color: transparent; color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.2); } .hit-btn--ghost:hover { color: var(--hit-parch); border-color: rgba(255, 255, 255, 0.45); } /* Ghost Ember — Outline in Ember-Farbe */ .hit-btn--ghost-ember { background-color: transparent; color: var(--hit-ember-2); border-color: rgba(224, 78, 10, 0.4); } .hit-btn--ghost-ember:hover { background-color: rgba(224, 78, 10, 0.08); border-color: var(--hit-ember); color: var(--hit-ember); } /* Größen */ .hit-btn--sm { font-size: var(--hit-text-xs); padding: 9px 18px; } .hit-btn--lg { font-size: 14px; padding: 18px 36px; } /* Voll-Breite */ .hit-btn--full { width: 100%; justify-content: center; } /* ============================================================ 08 BADGES & LABELS ============================================================ */ .hit-badge { display: inline-block; font-family: var(--hit-font-body); font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--hit-radius-sm); line-height: 1; } /* Varianten */ .hit-badge--ember { background-color: rgba(224, 78, 10, 0.12); color: var(--hit-ember); } .hit-badge--ink { background-color: var(--hit-ink); color: var(--hit-parch); } .hit-badge--parch { background-color: var(--hit-parch); color: var(--hit-slate); } .hit-badge--slate { background-color: rgba(61, 90, 120, 0.12); color: var(--hit-slate); } /* Pill-Form */ .hit-badge--pill { border-radius: 100px; } /* ============================================================ 09 CARDS ============================================================ */ /* ── Basis-Card ── */ .hit-card { background-color: var(--hit-white); border: 1px solid var(--hit-stone); border-radius: var(--hit-radius-md); padding: var(--hit-space-md); transition: box-shadow var(--hit-transition), transform var(--hit-transition); } .hit-card:hover { box-shadow: var(--hit-shadow-md); transform: translateY(-2px); } /* Warm — auf Cream-BG */ .hit-card--warm { background-color: var(--hit-parch); border-color: transparent; } /* Dunkel */ .hit-card--dark { background-color: var(--hit-ink); border-color: rgba(255, 255, 255, 0.06); color: var(--hit-parch); } .hit-card--dark .hit-label { color: var(--hit-steel); } /* Ember Akzentlinie links */ .hit-card--accented { border-left: 3px solid var(--hit-ember); border-radius: 0 var(--hit-radius-md) var(--hit-radius-md) 0; } /* ── Card-Elemente ── */ .hit-card__label { font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hit-steel); margin-bottom: var(--hit-space-xs); } .hit-card__title { font-family: var(--hit-font-display); font-size: var(--hit-text-md); font-weight: 300; color: var(--hit-ink); margin-bottom: var(--hit-space-xs); line-height: var(--hit-lh-snug); } .hit-card--dark .hit-card__title { color: var(--hit-parch); } .hit-card__body { font-size: var(--hit-text-sm); font-weight: 300; color: var(--hit-slate); line-height: var(--hit-lh-loose); } .hit-card--dark .hit-card__body { color: var(--hit-steel); } .hit-card__footer { margin-top: var(--hit-space-md); padding-top: var(--hit-space-sm); border-top: 1px solid var(--hit-stone); display: flex; align-items: center; justify-content: space-between; } .hit-card--dark .hit-card__footer { border-top-color: rgba(255, 255, 255, 0.08); } /* ── Stat/Metrik-Card ── */ .hit-stat-card { background-color: var(--hit-white); border: 1px solid var(--hit-stone); border-radius: var(--hit-radius-md); padding: var(--hit-space-md); } .hit-stat-card__value { font-family: var(--hit-font-display); font-size: var(--hit-text-xl); font-weight: 300; color: var(--hit-ink); line-height: 1; margin-bottom: 6px; } .hit-stat-card__label { font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hit-steel); } /* Dark variant */ .hit-stat-card--dark { background-color: transparent; border-color: transparent; } .hit-stat-card--dark .hit-stat-card__value { color: var(--hit-white); } .hit-stat-card--dark .hit-stat-card__label { color: var(--hit-steel); } /* ============================================================ 10 NAVIGATION ============================================================ */ .hit-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--hit-space-xl); background-color: var(--hit-ink); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .hit-nav__links { display: flex; align-items: center; gap: var(--hit-space-md); list-style: none; } .hit-nav__link { font-size: var(--hit-text-sm); color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; transition: color var(--hit-transition); } .hit-nav__link:hover, .hit-nav__link--active { color: var(--hit-parch); } /* Leichte Variante (für helle Hintergründe) */ .hit-nav--light { background-color: var(--hit-white); border-bottom-color: var(--hit-stone); } .hit-nav--light .hit-nav__link { color: var(--hit-slate); } .hit-nav--light .hit-nav__link:hover, .hit-nav--light .hit-nav__link--active { color: var(--hit-ink); } /* ============================================================ 11 FORMULARE ============================================================ */ .hit-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--hit-space-sm); } .hit-label-text { font-family: var(--hit-font-body); font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hit-slate); } .hit-input, .hit-textarea, .hit-select { font-family: var(--hit-font-body); font-size: var(--hit-text-base); font-weight: 300; color: var(--hit-ink); background-color: var(--hit-white); border: 1px solid var(--hit-stone); border-radius: var(--hit-radius-sm); padding: 12px 16px; width: 100%; outline: none; transition: border-color var(--hit-transition), box-shadow var(--hit-transition); appearance: none; } .hit-input::placeholder, .hit-textarea::placeholder { color: var(--hit-stone); font-weight: 300; } .hit-input:focus, .hit-textarea:focus, .hit-select:focus { border-color: var(--hit-ember); box-shadow: 0 0 0 3px rgba(224, 78, 10, 0.12); } .hit-textarea { resize: vertical; min-height: 120px; line-height: var(--hit-lh-loose); } .hit-field__hint { font-size: var(--hit-text-xs); color: var(--hit-steel); } .hit-field__error { font-size: var(--hit-text-xs); color: #C0392B; } .hit-input--error { border-color: #C0392B; } /* ============================================================ 12 TABELLEN ============================================================ */ .hit-table { width: 100%; border-collapse: collapse; font-size: var(--hit-text-sm); } .hit-table th { font-family: var(--hit-font-body); font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hit-steel); text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--hit-stone); } .hit-table td { padding: 14px 16px; border-bottom: 1px solid var(--hit-stone); color: var(--hit-slate); font-weight: 300; line-height: var(--hit-lh-normal); } .hit-table tr:last-child td { border-bottom: none; } .hit-table tr:hover td { background-color: var(--hit-cream); } /* Vergleichstabelle (EVP-Stil) */ .hit-table--compare .hit-table__highlight { color: var(--hit-ink); font-weight: 500; } .hit-table--compare th:first-child, .hit-table--compare td:first-child { font-weight: 500; color: var(--hit-ink); } /* Ember-Akzent auf einer Spalte */ .hit-table td.hit-table__accented { color: var(--hit-ember); font-weight: 500; } /* ============================================================ 13 TRENNLINIEN & STRUKTURELEMENTE ============================================================ */ /* Ember-Akzentlinie */ .hit-stripe { height: 4px; background-color: var(--hit-ember); } .hit-stripe--thin { height: 2px; } /* Deko-Ringe (für Cover/Hero-Hintergründe) */ .hit-deco-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.04); pointer-events: none; } /* ============================================================ 14 SIGNATUR-BLOCK ============================================================ */ .hit-signature { display: inline-flex; align-items: flex-start; gap: 18px; padding: 28px 32px; border-left: 3px solid var(--hit-ember); background-color: var(--hit-white); } .hit-signature__name { font-size: 16px; font-weight: 500; color: var(--hit-ink); margin-bottom: 2px; } .hit-signature__role { font-size: var(--hit-text-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hit-ember); margin-bottom: 14px; } .hit-signature__divider { width: 28px; height: 1px; background-color: var(--hit-stone); margin-bottom: 12px; } .hit-signature__details { font-size: var(--hit-text-sm); color: var(--hit-slate); line-height: 1.9; font-weight: 300; } .hit-signature__details a { color: var(--hit-slate); } .hit-signature__brand { font-size: var(--hit-text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--hit-steel); margin-top: 12px; } /* ============================================================ 15 HERO-ABSCHNITT ============================================================ */ .hit-hero { background-color: var(--hit-ink); background-image: radial-gradient(ellipse 80% 60% at 72% 50%, rgba(61, 90, 120, 0.28) 0%, transparent 65%); padding: var(--hit-space-2xl) var(--hit-space-xl); position: relative; overflow: hidden; } /* Dekorative Hintergrundkreise */ .hit-hero::before { content: ''; position: absolute; right: -100px; top: -100px; width: 600px; height: 600px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; } .hit-hero::after { content: ''; position: absolute; right: 40px; bottom: -200px; width: 900px; height: 900px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 50%; pointer-events: none; } .hit-hero__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .hit-hero__eyebrow { font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--hit-ember-2); margin-bottom: 28px; } .hit-hero__title { font-family: var(--hit-font-display); font-size: var(--hit-text-hero); font-weight: 300; color: var(--hit-white); line-height: var(--hit-lh-tight); margin-bottom: 20px; } .hit-hero__title em { color: var(--hit-ember-2); font-style: italic; } .hit-hero__subtitle { font-size: 17px; font-weight: 300; color: var(--hit-steel); line-height: 1.7; max-width: 520px; margin-bottom: 36px; } .hit-hero__actions { display: flex; align-items: center; gap: var(--hit-space-sm); flex-wrap: wrap; } /* Metrikenleiste am unteren Hero-Rand */ .hit-hero__metrics { display: flex; gap: var(--hit-space-lg); flex-wrap: wrap; margin-top: var(--hit-space-xl); padding-top: var(--hit-space-md); border-top: 1px solid rgba(255, 255, 255, 0.06); } .hit-hero__metric-value { font-family: var(--hit-font-display); font-size: var(--hit-text-xl); font-weight: 300; color: var(--hit-white); line-height: 1; margin-bottom: 4px; } .hit-hero__metric-label { font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hit-steel); } /* ============================================================ 16 METRIKEN / STAT-GRID ============================================================ */ .hit-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2px; } .hit-metric { background-color: var(--hit-white); padding: var(--hit-space-md); } .hit-metric__value { font-family: var(--hit-font-display); font-size: var(--hit-text-xl); font-weight: 300; color: var(--hit-ink); line-height: 1; margin-bottom: 6px; } .hit-metric__label { font-size: var(--hit-text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hit-steel); } /* Auf dunklem Hintergrund */ .hit-metrics--dark .hit-metric { background-color: transparent; } .hit-metrics--dark .hit-metric__value { color: var(--hit-white); } /* Ember-Akzent auf einem Wert */ .hit-metric__value--ember { color: var(--hit-ember); } /* ============================================================ 17 RESPONSIVE BREAKPOINTS ============================================================ */ /* Mobile first — Overrides ab 768px und 1100px */ @media (max-width: 768px) { :root { --hit-space-xl: 32px; --hit-space-2xl: 56px; } .hit-container { padding-left: var(--hit-space-md); padding-right: var(--hit-space-md); } .hit-hero__title { font-size: clamp(36px, 10vw, 64px); } .hit-hero__metrics { gap: var(--hit-space-md); } .hit-nav { padding: 16px var(--hit-space-md); } .hit-nav__links { gap: var(--hit-space-sm); } .hit-metrics { grid-template-columns: repeat(2, 1fr); } .hit-hero__actions { flex-direction: column; align-items: flex-start; } .hit-btn--full-mobile { width: 100%; justify-content: center; } } @media (max-width: 480px) { .hit-nav__links { display: none; /* Mobile: Hamburger-Menü separat implementieren */ } .hit-metrics { grid-template-columns: 1fr 1fr; } .hit-table { font-size: var(--hit-text-xs); } .hit-table th, .hit-table td { padding: 10px 10px; } } /* ============================================================ EOF — Hartmann IT Solutions Design System hartmann-it.css · v1.0 · 2026 ============================================================ */