/* ================================================================
shared.css – CADKONTOR Design-System
Graphisoft Center Hannover-Braunschweig
Dieses Stylesheet wird von allen 7 HTML-Seiten per
eingebunden. Es enthält das komplette Design-System:
INHALT (Reihenfolge):
1. Schriften laden (self-hosted, DSGVO-konform)
2. Universeller Reset
3. CSS Custom Properties (Farben, Schriften, Abstände)
4. Basis-Styles (html / body / Scrollbar)
5. Typografie (h1–h4, Eyebrow-Labels)
6. Layout-Helfer (Wrapper, Section-Abstände, Section-Header)
7. Buttons (4 Varianten)
8. Cards (3 Varianten)
9. Badges / Tags (4 Varianten)
10. Grid-Utilities (2-/3-/4-spaltig)
11. Page-Hero mit CSS-Raster-Hintergrund
12. Stats-Band (Kennzahlen-Leiste)
13. Dunkle Sektionen (.s-dark)
14. Tabelle (.tbl)
15. Formulare (.fg / .fl / .fc)
16. Breadcrumb
17. Info-Box
18. Fade-in-Animation (IntersectionObserver-gesteuert)
19. Footer
20. Responsive Breakpoints (960 px / 640 px)
================================================================ */
/* ----------------------------------------------------------------
1. SCHRIFTEN
Google Fonts werden vom CDN geladen.
Inter: alle Überschriften, Fließtext, große Zahlen
IBM Plex Mono: Labels, Buttons, Eyebrows, technische Angaben
Gewichte 300–900 → ermöglicht Light-Captions bis Ultra-Bold-Hero
display=swap: verhindert unsichtbaren Text während des Ladens
---------------------------------------------------------------- */
/* Self-hosted fonts — kein Google-Server-Aufruf (DSGVO-konform) */
/* IBM Plex Mono – latin-ext */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/ibmplexmono-300-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/ibmplexmono-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/ibmplexmono-500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/ibmplexmono-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* IBM Plex Mono – latin */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/ibmplexmono-300-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/ibmplexmono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/ibmplexmono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/ibmplexmono-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Inter Variable – latin-ext */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 900; font-display:swap; src:url('../fonts/inter-var-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Inter Variable – latin */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 900; font-display:swap; src:url('../fonts/inter-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* ----------------------------------------------------------------
2. UNIVERSELLER RESET
Entfernt Browser-Default-Margins und -Padding auf allen Elementen.
box-sizing: border-box → Padding und Border werden in die
angegebene Breite eingerechnet (nicht addiert). Damit entspricht
ein Element mit width:200px und padding:20px tatsächlich 200px
Gesamtbreite – kein manuelles Abziehen nötig.
---------------------------------------------------------------- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img, svg, video, canvas { max-width: 100%; display: block; }
table { max-width: 100%; }
/* ----------------------------------------------------------------
3. CSS CUSTOM PROPERTIES (Design-Tokens)
Alle Werte nur hier ändern – wirkt sofort auf die gesamte Site.
FARBSYSTEM (Graphisoft Design System 2024):
Aubergine #291923 → primäres Dunkel (Markenfarbe)
Blue #00a0d1 → Archicad-Blau, primäre Akzentfarbe
Blue-light #54bfe0 → helles Blau für dunkle Hintergründe
Kein Orange/Rot – diese Farben sind in der aktuellen
Graphisoft CI retired (abgekündigt).
GEOMETRIE:
--nav-h 64px → Höhe der fixierten Navigation;
body bekommt padding-top:64px damit
der Inhalt nicht unter der Nav liegt
--max-w 1240px → maximale Inhaltsbreite
--pad 56px → seitlicher Außenabstand des .wrap-Containers
---------------------------------------------------------------- */
:root {
/* Primärfarben */
--aubergine: #291923; /* Graphisoft-Dunkel (eigene Marke) */
--blue: #00a0d1; /* Archicad-Blau */
--blue-light: #54bfe0; /* helleres Blau für dunkle BGs */
--blue-pale: rgba(0,160,209,0.09); /* sehr transparentes Blau */
--gray: #92898E; /* neutrales Mittelgrau */
--white: #FFFFFF;
/* Graphisoft Brand Colors (design.graphisoft.com) */
--gs-orange: #FF6104; /* Graphisoft Orange – Primär-Akzent */
--gs-orange-pale: rgba(255,97,4,0.09); /* sehr transparentes Orange */
--gs-dark: #231F20; /* Graphisoft Dunkel */
--gs-gray: #605F60; /* Graphisoft Grau (Sekundärtext) */
/* Graphisoft Design Tokens – Surface (Neutral) */
--gs-surface-theme: #ffffff;
--gs-surface-primary: #291923;
--gs-surface-disabled: #e7e6e6;
--gs-surface-hover: #e7e6e6;
--gs-surface-secondary25: #fafafa;
--gs-surface-secondary50: #f3f3f3;
--gs-surface-secondary100: #e7e6e6;
--gs-surface-secondary200: #dad8d9;
--gs-surface-secondary500: #92898e;
/* Graphisoft Design Tokens – Icon */
--gs-icon-primary: #291923;
--gs-icon-secondary: #72686e;
--gs-icon-disabled: #92898e;
--gs-icon-inverted: #ffffff;
/* Graphisoft Design Tokens – Text */
--gs-text-primary: #291923;
--gs-text-link: #291923;
--gs-text-secondary: #72686e;
--gs-text-disabled: #92898e;
--gs-text-inverted: #ffffff;
/* Graphisoft Design Tokens – Color */
--gs-blue500: #297fff;
--gs-blue50: #e5efff;
--gs-green500: #06a647;
--gs-green50: #ecf8f1;
--gs-purple500: #9c24fe;
--gs-purple50: #f3e5ff;
--gs-red500: #ff4114;
--gs-red50: #ffe8e8;
--gs-yellow500: #f4ae00;
--gs-yellow50: #fffce8;
/* Graphisoft Design Tokens – Border */
--gs-border-primary: #291923;
--gs-border-disabled: #92898e;
--gs-border-separator: #dad8d9;
--gs-border-200: #dad8d9;
--gs-border-100: #e7e6e6;
--gs-border-50: #f3f3f3;
--gs-border-inverted: #ffffff;
/* Graphisoft Design Tokens – Border (Produkte) */
--gs-border-ac: #0092be;
--gs-border-ac-sec: #33b3da;
--gs-border-au: #43957e;
--gs-border-au-sec: #6eb6a2;
--gs-border-bc: #569ea6;
--gs-border-bc-sec: #7ebec5;
--gs-border-bx: #e8a32e;
--gs-border-bx-sec: #ffc25c;
--gs-border-dds: #dc5864;
--gs-border-dds-sec: #f5818b;
--gs-border-md: #9663a6;
--gs-border-md-sec: #b78ac5;
--gs-border-gs: #dd692f;
--gs-border-gs-sec: #f58f5d;
/* Graphisoft Design Tokens – Surface (Produkte) */
/* Archicad (AC) */
--gs-ac-shout: #33b3da;
--gs-ac-100: #b0e2f1;
--gs-ac-50: #e6f6fa;
/* BIMcloud (BC) */
--gs-bc-shout: #7ebec5;
--gs-bc-100: #cde6e8;
--gs-bc-50: #eff7f8;
/* BIMx (BX) */
--gs-bx-shout: #ffc25c;
--gs-bx-100: #ffe7c0;
--gs-bx-50: #fff7eb;
/* DDScad (DDS) */
--gs-dds-shout: #f5818b;
--gs-dds-100: #fbced2;
--gs-dds-50: #feeff1;
/* Morph/ModelDesign (MD) */
--gs-md-shout: #b78ac5;
--gs-md-100: #e3d2e8;
--gs-md-50: #f6f0f8;
/* Archicad University (AU) */
--gs-au-shout: #6eb6a2;
--gs-au-100: #c7e3db;
--gs-au-50: #edf6f3;
/* Graphisoft (GS) */
--gs-gs-shout: #f58f5d;
--gs-gs-100: #fbd4c0;
--gs-gs-50: #fef1eb;
/* Seitenhintergrund & Text */
--bg: #F7F6F8; /* Haupthintergrund, leicht getönt */
--bg2: #EEEAED; /* dunklere Variante (Scrollbar etc.) */
--ink: #291923; /* Haupttextfarbe = Aubergine */
--ink2: #4A3A44; /* Fließtext, etwas heller */
--muted: #7B6F76; /* Labels, Metaangaben */
--muted2: #7A7078; /* Scrollbar, Trenner – WCAG AA konform */
/* Rahmen (halbtransparent, passt auf helle und getönte BGs) */
--border: rgba(41,25,35,0.09); /* subtiler Rahmen */
--border2: rgba(41,25,35,0.17); /* stärkerer Rahmen (Inputs, Cards) */
/* Graphisoft Design Tokens – Spacing */
--gs-gap-0: 0px;
--gs-gap-4: 4px;
--gs-gap-8: 8px;
--gs-gap-12: 12px;
--gs-gap-16: 16px;
--gs-gap-24: 24px;
--gs-gap-40: 40px;
--gs-gap-64: 64px;
--gs-gap-120: 128px;
/* Graphisoft Design Tokens – Radius */
--gs-radius-full: 9999px;
--gs-radius-xxl: 48px;
--gs-radius-xl: 24px;
--gs-radius-lg: 16px;
--gs-radius-md: 12px;
--gs-radius-sm: 8px;
--gs-radius-xs: 4px;
--gs-radius-none: 0px;
/* Schriftfamilien */
--font: 'Inter', -apple-system, sans-serif; /* Haupt-Schrift */
--mono: 'IBM Plex Mono', monospace; /* Mono für Labels/Buttons */
/* Geometrie */
--nav-h: 108px; /* Navigations-Höhe (2-zeilig: 64px + 44px) */
--max-w: 1240px; /* maximale Inhaltsbreite */
--pad: 56px; /* seitlicher Inhaltsabstand */
}
/* ----------------------------------------------------------------
4. BASIS-STYLES
---------------------------------------------------------------- */
/* Markenfarben bei Textauswahl */
::selection { background: rgba(0,160,209,.18); color: var(--aubergine); }
/* scroll-behavior: smooth → Ankersprungs scrollen sanft
(z.B. #schulungen, #anfahrt) */
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
body {
font-family: var(--font);
background-color: var(--bg);
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px),
linear-gradient(rgba(41,25,35,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(41,25,35,.025) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
color: var(--ink);
font-size: 16px;
line-height: 1.65;
overflow-x: hidden;
max-width: 100%;
padding-top: var(--nav-h);
}
/* Schmale, dezente WebKit-Scrollbar (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--muted2); }
/* ----------------------------------------------------------------
5. TYPOGRAFIE
clamp(MIN, BEVORZUGT, MAX):
Fluid-Schriftgröße – skaliert fließend zwischen Viewport-Breiten.
Beispiel h1: auf einem 320px-Smartphone → 34px,
auf einem 1440px-Monitor → 64px.
Kein abrupter Sprung durch Media Queries.
Negative letter-spacing:
Große Schrift wirkt optisch zu weit, negative letter-spacing
kompensiert das → professioneller Look bei Display-Größen.
---------------------------------------------------------------- */
h1 {
font-size: clamp(34px, 5vw, 64px); /* 34px min, 64px max */
font-weight: 800;
letter-spacing: -0.03em; /* optisch enger bei großer Schrift */
line-height: 1.06; /* eng für große Headlines */
color: var(--aubergine);
}
h2 {
font-size: clamp(24px, 3.2vw, 40px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--aubergine);
}
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--aubergine); }
h4 { font-size: 12px; font-weight: 600; color: var(--aubergine); }
/* ── Eyebrow-Label ─────────────────────────────────────────────
Kleine Zeile ÜBER der Hauptüberschrift, z.B.:
"— AUTORISIERTES GRAPHISOFT CENTER"
Das ::before-Pseudo-Element erzeugt die kurze Linie davor.
flex-shrink:0 verhindert, dass die Linie bei wenig Platz
auf 0 schrumpft. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.22em; /* stark gesperrt = typisch tech-Labels */
text-transform: uppercase;
color: var(--blue);
}
.eyebrow::before,
.eyebrow::after {
content: '';
display: block;
width: 20px;
height: 1px;
background: var(--blue);
flex-shrink: 0;
}
/* Variante für dunkle Hintergründe (blau wird heller) */
.eyebrow-light { color: var(--blue-light); }
.eyebrow-light::before,
.eyebrow-light::after { background: var(--blue-light); }
.eyebrow-orange { color: var(--gs-red500); }
.eyebrow-orange::before,
.eyebrow-orange::after { background: var(--gs-red500); }
/* ----------------------------------------------------------------
6. LAYOUT-HELFER
---------------------------------------------------------------- */
/* Zentrierter Inhalts-Container.
max-width hält den Inhalt bei breiten Screens kompakt.
padding:0 var(--pad) hält Abstand zum Viewport-Rand. */
.wrap {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad);
}
/* Vertikale Abstände für Sektionen */
.section { padding: 96px 0; } /* Standard */
.section-sm { padding: 64px 0; } /* kleiner */
/* Section-Header (Eyebrow + h2 + Beschreibungstext).
.sh-wide erlaubt breiteren Beschreibungstext (z.B. Startseite). */
.sh { margin-bottom: 56px; }
.sh h2 { margin: 14px 0 16px; }
.sh p { font-size: 15px; color: var(--ink2); line-height: 1.75; max-width: 560px; }
.sh-wide p { max-width: 720px; }
/* ----------------------------------------------------------------
7. BUTTONS
Basis .btn vererbt sich auf alle Varianten.
IBM Plex Mono + letter-spacing → technisch-präziser Charakter.
border-radius:9998px → Pill-Form (Graphisoft Design System Standard).
---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
padding: 13px 28px;
border-radius: 9998px;
border: none;
cursor: pointer;
transition: background .2s, color .2s, transform .15s, border-color .2s;
}
/* Mikro-Interaction: Button hebt sich leicht beim Hover */
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(41,25,35,.13); }
/* Fokus-Ring für Tastaturnavigation (Barrierefreiheit) */
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Globale Fokus-Stile – alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 4px;
}
/* Skip-Link – unsichtbar bis Tab-Fokus, dann eingeblendet */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
text-decoration: none;
z-index: 99999;
}
.skip-link:focus {
position: fixed;
top: 0;
left: 16px;
width: auto;
height: auto;
overflow: visible;
background: var(--blue);
color: var(--white);
padding: 10px 18px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
border-radius: 0 0 8px 8px;
outline: none;
}
/* Dunkel (Standard) → wird blau beim Hover */
.btn-dark { background: var(--aubergine); color: var(--white); }
.btn-dark:hover { background: var(--blue); }
/* Blau → wird dunkel beim Hover */
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--aubergine); }
/* Outline: transparenter Hintergrund, Rahmen sichtbar */
.btn-out { background: transparent; color: var(--ink2); border: 1px solid var(--border2); }
.btn-out:hover { border-color: var(--blue); color: var(--blue); }
/* Weiß: für dunkle oder blaue Hintergründe */
.btn-white { background: var(--white); color: var(--aubergine); }
.btn-white:hover { background: var(--aubergine); color: var(--white); }
/* ----------------------------------------------------------------
8. CARDS
border-top:2px solid transparent → Platzhalter für Hover-Akzent.
Warum transparent statt kein border? Damit die Höhe beim Hover
konstant bleibt (kein Layout-Sprung durch Rahmen-Hinzufügen).
---------------------------------------------------------------- */
.card {
background: var(--white);
border-radius: 12px;
border: 1px solid var(--border);
padding: 36px 32px;
box-shadow: 0 1px 4px rgba(41,25,35,.06);
transition: transform .25s, box-shadow .25s;
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(41,25,35,.12);
}
.card-bg { background: var(--bg); } /* grau */
.card-dark {
background: linear-gradient(145deg, #291923 0%, #1a0e14 100%) !important;
border-color: transparent !important;
position: relative;
overflow: hidden;
}
/* Radial glow in upper-right corner */
.card-dark::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(0,160,209,.18) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.card-dark:hover {
box-shadow: 0 20px 60px rgba(41,25,35,.35), 0 0 40px rgba(0,160,209,.12) !important;
}
.card-dark h3 { color: var(--white); }
.card-dark p { color: rgba(255,255,255,.55); }
/* ----------------------------------------------------------------
9. BADGES / TAGS
Kleine Kennzeichnungen wie "AKBW zertifiziert", "Verfügbar".
white-space:nowrap → kein ungewollter Zeilenumbruch in der Tabelle.
---------------------------------------------------------------- */
.badge {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 9998px;
white-space: nowrap;
}
.badge-blue { background: var(--blue-pale); color: var(--blue); } /* Info */
.badge-dark { background: rgba(41,25,35,.08); color: var(--gray); } /* Neutral */
.badge-green { background: rgba(0,160,80,.1); color: #00a050; } /* OK */
.badge-red { background: rgba(255,65,20,.1); color: var(--gs-red500); } /* Fehler/Ausgebucht */
.badge-orange { background: rgba(255,65,20,.1); color: var(--gs-red500); } /* Warnung / Geplant */
/* ----------------------------------------------------------------
9b. FILTER-TABS (News-Seite)
Pill-förmige Filter-Reiter. Passt zum .btn-Design-System, aber
kompakter und ohne Hover-Translate-Effekt.
---------------------------------------------------------------- */
.ftab {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 9998px;
border: 1px solid var(--border2);
background: var(--white);
color: var(--ink2);
text-decoration: none;
transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
white-space: nowrap;
}
.ftab:hover {
border-color: var(--aubergine);
color: var(--aubergine);
box-shadow: 0 2px 8px rgba(41,25,35,.08);
}
.ftab--active {
background: var(--aubergine);
border-color: transparent;
color: var(--white);
box-shadow: 0 2px 10px rgba(41,25,35,.14);
}
.ftab--active:hover {
background: var(--blue);
border-color: transparent;
color: var(--white);
}
/* ----------------------------------------------------------------
10. GRID-UTILITIES
Einfache CSS-Grid-Klassen für 2-, 3- und 4-spaltige Layouts.
gap:24px → Graphisoft Design System Standard (Spacing.gap-24).
Die .gap*-Klassen überschreiben das Gap wo abweichend benötigt.
---------------------------------------------------------------- */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gap16 { gap: 16px !important; } /* !important überschreibt .g*-Gap */
.gap32 { gap: 32px !important; }
.gap48 { gap: 48px !important; }
/* ----------------------------------------------------------------
11. PAGE-HERO mit CSS-Raster-Hintergrund
Verwendet von allen Unterseiten als Seiten-Kopfbereich.
Das ::before-Pseudo-Element erzeugt ein zweigliedriges Raster
(80px-Hauptraster + 16px-Unterraster) nur aus CSS-Gradienten –
kein Bild, kein SVG.
Aufbau: 4 überlagerte linear-gradients:
1. Horizontale Linien, 80px-Raster (stärker)
2. Vertikale Linien, 80px-Raster (stärker)
3. Horizontale Linien, 16px-Raster (schwächer)
4. Vertikale Linien, 16px-Raster (schwächer)
pointer-events:none → Klicks gehen durch das Pseudo-Element
zum eigentlichen Inhalt darunter.
z-index:1 auf .page-hero-inner legt den Inhalt über das Raster.
---------------------------------------------------------------- */
.page-hero {
background: var(--white);
padding: 80px 0 72px;
position: relative; /* Positionierungs-Kontext für ::before */
overflow: hidden;
}
.page-hero::before { display: none; }
.page-hero-inner { position: relative; z-index: 1; } /* über dem Raster */
.page-hero h1 { margin: 16px 0 20px; }
/* Lead-Text: größerer Intro-Absatz direkt unter der h1 */
.lead {
font-size: 16px;
color: var(--ink2);
line-height: 1.75;
max-width: 560px;
margin-bottom: 32px;
}
/* ----------------------------------------------------------------
12. STATS-BAND
Dunkles Band mit Kennzahlen (800+ Kunden, 25+ Jahre …).
display:grid → Spaltenanzahl wird inline per style="" gesetzt,
z.B. style="grid-template-columns:repeat(4,1fr)".
.stat-i:last-child → letzte Zelle ohne rechten Trennstrich.
---------------------------------------------------------------- */
.stats-band {
background: var(--aubergine);
display: grid;
border-top: 3px solid var(--blue);
box-shadow: 0 -1px 0 rgba(0,160,209,.2), 0 4px 24px rgba(41,25,35,.18);
}
.stat-i {
padding: 32px 36px;
border-right: 1px solid rgba(255,255,255,.07);
transition: background .25s, box-shadow .25s;
position: relative;
}
.stat-i::after {
content: '';
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 0;
background: var(--blue);
transition: width .25s ease;
border-radius: 0 2px 2px 0;
}
.stat-i:hover { background: rgba(0,160,209,.1); }
.stat-i:hover::after { width: 3px; }
.stat-i:last-child { border-right: none; }
.stat-n {
font-family: var(--font);
font-size: 34px;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--blue);
line-height: 1;
margin-bottom: 6px;
transition: transform .2s;
}
.stat-i:hover .stat-n { transform: translateX(4px); }
.stat-l {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
transition: color .2s;
}
.stat-i:hover .stat-l { color: rgba(255,255,255,.65); }
/* ----------------------------------------------------------------
13. DUNKLE SEKTION (.s-dark)
Für thematische Hervorhebungen (Subscription, BIM-Implementierung,
CTA-Sektion etc.). Überschreibt Textfarben auf Weiß.
---------------------------------------------------------------- */
.s-dark { background: var(--aubergine); padding: 96px 0; }
.s-dark h2,
.s-dark h3 { color: var(--white); }
.s-dark .sh p { color: rgba(255,255,255,.55); }
/* ----------------------------------------------------------------
14. TABELLE (.tbl)
border-collapse:collapse → keine Doppelrahmen zwischen Zellen.
.tbl tr:hover td → sehr schwaches Blau-Highlight auf Hover.
---------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
text-align: left;
padding: 12px 20px;
border-bottom: 1px solid var(--border2);
}
.tbl td {
padding: 18px 20px;
border-bottom: 1px solid var(--border);
font-size: 13.5px;
color: var(--ink2);
vertical-align: middle;
}
.tbl tr:hover td { background: rgba(0,160,209,.03); }
/* ----------------------------------------------------------------
15. FORMULARE
.fg = form-group → unterer Abstand zwischen Feldern
.fl = form-label → kleines Mono-Label über dem Feld
.fc = form-control → einheitlicher Style für Input/Select/Textarea
appearance:none → entfernt browsereigene Styles, wichtig für