/* ─────────────────────────────────────────────
Pelikan Haustechnik — global.css
Mood: "Werkstatt-Frisch" — modern & freundlich
Blau aus Eric's Shirt + Pelikan-Orange
───────────────────────────────────────────── */
/* ─── Google Fonts — als in HTML geladen (kein @import: render-blocking) ─── */
/* ─── CSS-Variablen ─── */
:root {
/* Brand — Pelikan-Blau */
--color-brand-main: #5C86A6; /* Eric's Shirt-Blau */
--color-brand-darker: #3F6887;
--color-brand-deepest: #1A3045;
--color-brand-lighter: #85A7C1;
--color-brand-subtle: #EEF3F8;
/* Accent — Pelikan-Orange */
--color-accent-main: #D94A17; /* Werkzeugtasche */
--color-accent-darker: #B33B0F;
--color-accent-lighter: #EE7A4B;
--color-accent-subtle: #FCEFE7;
/* Backgrounds */
--color-bg-light: #FFFFFF;
--color-bg-soft: #F6F8FB;
--color-bg-dark: #1A3045;
--color-bg-card: #FFFFFF;
--color-bg-accent: #EEF3F8;
/* Linien & Trenner */
--color-border: #DCE5ED;
--color-border-strong: #B8C7D6;
/* Text */
--color-heading: #172A3D;
--color-body: #3E5266;
--color-muted: #64778A;
--color-off-white: #F6F8FB;
/* System */
--color-success: #22C55E;
--color-warning: #F59E0B;
--color-danger: #DC2626;
/* Typografie */
--font-main: 'Figtree', system-ui, -apple-system, sans-serif;
--font-size-body: 17px;
--line-height-body: 1.55;
--font-size-h1: 68px;
--font-size-h2: 48px;
--font-size-h3: 32px;
--font-size-h4: 22px;
--font-size-h5: 18px;
--font-size-small: 17px;
--font-size-nav: 17px;
--font-size-button: 17px;
/* Layout */
--max-width: 1200px;
--section-padding: 100px 40px;
--section-padding-mobile: 64px 0;
/* Radius */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
/* Shadow (mit Blau-Tint) */
--shadow-xs: 0 1px 2px rgba(23, 42, 61, 0.05);
--shadow-sm: 0 2px 6px rgba(23, 42, 61, 0.06), 0 1px 2px rgba(23, 42, 61, 0.04);
--shadow-md: 0 8px 20px rgba(23, 42, 61, 0.08), 0 2px 6px rgba(23, 42, 61, 0.05);
--shadow-lg: 0 20px 40px rgba(23, 42, 61, 0.12), 0 6px 12px rgba(23, 42, 61, 0.06);
--shadow-accent: 0 10px 24px rgba(217, 74, 23, 0.22);
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 180ms;
--duration-base: 320ms;
--duration-slow: 560ms;
}
/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── Basis ─── */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html, body { overflow-x: hidden; overflow-x: clip; }
body {
font-family: var(--font-main);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
color: var(--color-body);
background: var(--color-bg-light);
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-heading);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h1 { font-size: var(--font-size-h1); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); font-weight: 600; }
h5 { font-size: var(--font-size-h5); font-weight: 600; }
p { color: var(--color-body); }
p + p { margin-top: 1em; }
a {
color: var(--color-brand-darker);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-main); }
img, svg, video { max-width: 100%; display: block; }
strong { font-weight: 600; color: var(--color-heading); }
::selection { background: var(--color-accent-main); color: #fff; }
/* ─── Layout Helpers ─── */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 40px;
width: 100%;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-brand-main);
}
.eyebrow::before {
content: '';
width: 24px;
height: 2px;
background: var(--color-accent-main);
display: inline-block;
}
/* ─── Buttons ─── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 26px;
font-family: var(--font-main);
font-size: var(--font-size-button);
font-weight: 700;
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
text-decoration: none;
transition: transform var(--duration-fast) var(--ease-spring),
background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
white-space: nowrap;
line-height: 1;
}
.btn-primary {
background: var(--color-accent-main);
color: #FFFFFF;
box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
background: var(--color-accent-darker);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(217, 74, 23, 0.32);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
background: var(--color-brand-main);
color: #FFFFFF;
box-shadow: 0 6px 16px rgba(92, 134, 166, 0.28);
}
.btn-secondary:hover {
background: var(--color-brand-darker);
color: #FFFFFF;
transform: translateY(-2px);
}
.btn-ghost {
background: transparent;
color: var(--color-heading);
border: 1.5px solid var(--color-border-strong);
}
.btn-ghost:hover {
border-color: var(--color-brand-main);
color: var(--color-brand-main);
}
.btn-emergency {
background: var(--color-accent-main);
color: #FFFFFF;
position: relative;
padding-left: 42px;
}
.btn-emergency::before {
content: '';
position: absolute;
left: 14px;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
background: #FFFFFF;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.btn-emergency::after {
content: '';
position: absolute;
inset: -4px;
border-radius: var(--radius-pill);
border: 2px solid var(--color-accent-main);
opacity: 0;
animation: pulse-ring 2.2s var(--ease-out) infinite;
pointer-events: none;
}
@keyframes pulse-ring {
0% { transform: scale(0.94); opacity: 0.8; }
100% { transform: scale(1.18); opacity: 0; }
}
/* ─── Form Elements ─── */
.input, .textarea, .select {
width: 100%;
padding: 14px 16px;
font-family: var(--font-main);
font-size: 17px;
color: var(--color-heading);
background: var(--color-bg-light);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: var(--color-brand-main);
box-shadow: 0 0 0 4px rgba(92, 134, 166, 0.14);
}
.textarea { min-height: 140px; resize: vertical; }
.label {
display: block;
font-size: 17px;
font-weight: 600;
color: var(--color-heading);
margin-bottom: 6px;
}
/* ─── Badges ─── */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 17px;
font-weight: 600;
border-radius: var(--radius-pill);
background: var(--color-brand-subtle);
color: var(--color-brand-darker);
}
.badge-accent {
background: var(--color-accent-subtle);
color: var(--color-accent-darker);
}
.badge-dark {
background: var(--color-brand-deepest);
color: #FFFFFF;
}
/* ─── Cards ─── */
.card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 28px;
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-brand-lighter);
}
/* ─── Divider ─── */
.divider {
height: 1px;
background: var(--color-border);
border: none;
margin: 40px 0;
}
/* ─── Responsive ─── */
@media (max-width: 1024px) {
:root {
--font-size-h1: 56px;
--font-size-h2: 40px;
--font-size-h3: 28px;
}
}
@media (max-width: 767px) {
:root {
--font-size-h1: 40px;
--font-size-h2: 30px;
--font-size-h3: 24px;
--font-size-body: 16px;
}
.container { padding: 0 20px; }
}
/* ─── Utility ─── */
.text-center { text-align: center; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ─── Scroll-Reveal Utility (IntersectionObserver-gesteuert) ───
Benutzung:
…
(default: up-fade)
…
…
…
…
Stagger: style="--delay: 120ms;"
-------------------------------------------------------------- */
.sk-reveal,
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 700ms var(--ease-out),
transform 700ms var(--ease-out),
filter 700ms var(--ease-out);
transition-delay: var(--delay, 0ms);
will-change: opacity, transform;
}
.sk-reveal--left { transform: translateX(-32px); }
.sk-reveal--right { transform: translateX(32px); }
.sk-reveal--scale { transform: scale(0.94) translateY(14px); }
.sk-reveal--fade { transform: none; filter: blur(6px); }
.sk-reveal--down { transform: translateY(-24px); }
.sk-reveal.is-visible,
.reveal.is-visible {
opacity: 1;
transform: none;
filter: none;
}
/* Stagger-Helfer für direkte Kinder eines Containers */
.sk-stagger > .sk-reveal:nth-child(1) { --delay: 60ms; }
.sk-stagger > .sk-reveal:nth-child(2) { --delay: 140ms; }
.sk-stagger > .sk-reveal:nth-child(3) { --delay: 220ms; }
.sk-stagger > .sk-reveal:nth-child(4) { --delay: 300ms; }
.sk-stagger > .sk-reveal:nth-child(5) { --delay: 380ms; }
.sk-stagger > .sk-reveal:nth-child(6) { --delay: 460ms; }
.sk-stagger > .sk-reveal:nth-child(7) { --delay: 540ms; }
.sk-stagger > .sk-reveal:nth-child(8) { --delay: 620ms; }
/* Ganze Sections als ein Block einblenden */
.sk-reveal-section { opacity: 0; transition: opacity 700ms var(--ease-out); }
.sk-reveal-section.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.sk-reveal, .reveal,
.sk-reveal--left, .sk-reveal--right,
.sk-reveal--scale, .sk-reveal--fade, .sk-reveal--down {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}