/* ==========================================================================
MK VEKTOR GERÜSTTECHNIK — Design System
Swiss Modernism 2.0 · industrial grey + safety orange
Author: hand-built, zero dependencies
========================================================================== */
/* ---------- 0. Fonts ----------------------------------------------------
Self-hosted so that no page load reaches a third party. Archivo and Inter
are SIL Open Font License 1.1 (see assets/fonts/OFL.txt); each file is the
variable font straight from Google's own CDN, just served from our domain.
Two subsets per family: `latin` carries German and English including the
umlauts and ß, `latin-ext` only downloads if a page actually prints a
character outside it. The unicode-range values are Google's, kept verbatim
so the subsets line up with the files.
Regenerate with: python _tools/fetch_fonts.py
------------------------------------------------------------------------ */
/* Archivo — latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900; /* one variable file covers every weight we use */
font-stretch: 100%;
font-display: swap;
src: url('../fonts/archivo-latin.woff2') format('woff2-variations'),
url('../fonts/archivo-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;
}
/* Archivo — latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900; /* one variable file covers every weight we use */
font-stretch: 100%;
font-display: swap;
src: url('../fonts/archivo-latin-ext.woff2') format('woff2-variations'),
url('../fonts/archivo-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 — latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900; /* one variable file covers every weight we use */
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin.woff2') format('woff2-variations'),
url('../fonts/inter-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 — latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900; /* one variable file covers every weight we use */
font-stretch: 100%;
font-display: swap;
src: url('../fonts/inter-latin-ext.woff2') format('woff2-variations'),
url('../fonts/inter-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;
}
/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
/* Brand */
--brand: #F5A623; /* safety orange — logo accent */
--brand-600: #DE8E10;
--brand-ink: #B45309; /* orange for TEXT on light bg (5.05:1) */
--brand-soft: #FEF3E2;
/* Ink / dark surfaces */
--ink-950: #0A0A0B;
--ink-900: #131418;
--ink-800: #1B1D22;
--ink-700: #2A2D34;
--ink-600: #3D424B;
/* Light surfaces */
--paper: #FFFFFF;
--paper-alt: #F4F6F8;
--paper-alt-2: #EAEDF1;
/* Text */
--text: #14161A; /* 15.9:1 on white */
--text-muted: #4B5563; /* 7.6:1 on white */
--text-faint: #6B7280; /* 4.8:1 on white */
--text-on-dark: #F3F4F6;
--text-on-dark-mut: #A8AEB8; /* 7.1:1 on ink-950 */
--border: #DFE3E8;
--border-strong: #C6CCD4;
--border-dark: #2A2D34;
--danger: #C0392B;
--success: #157347;
/* Type */
--font-head: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--fs-xs: 0.8125rem; /* 13 */
--fs-sm: 0.9375rem; /* 15 */
--fs-base: 1.0625rem; /* 17 */
--fs-lg: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
--fs-xl: clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
--fs-2xl: clamp(1.75rem, 1.8vw + 1.3rem, 2.5rem);
--fs-3xl: clamp(2.125rem, 3vw + 1.4rem, 3.5rem);
--fs-4xl: clamp(2.5rem, 5vw + 1.2rem, 5rem);
/* Space (density 4/10 — standard-spacious) */
--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem;
--s-9: 4rem; --s-10: 5rem; --s-11: 6rem; --s-12: 8rem;
--container: 75rem; /* 1200 */
--container-tight: 52rem;
--gutter: 1.25rem;
--radius-sm: 3px;
--radius: 5px;
--radius-lg: 8px;
--shadow-1: 0 1px 2px rgba(10,10,11,.06), 0 1px 3px rgba(10,10,11,.05);
--shadow-2: 0 2px 4px rgba(10,10,11,.05), 0 8px 20px rgba(10,10,11,.07);
--shadow-3: 0 4px 8px rgba(10,10,11,.06), 0 20px 44px rgba(10,10,11,.11);
/* Motion */
--e-out: cubic-bezier(.16, 1, .3, 1);
--e-pop: cubic-bezier(.34, 1.56, .64, 1);
--e-std: cubic-bezier(.4, 0, .2, 1);
--t-fast: .16s;
--t-base: .24s;
--t-slow: .4s;
/* Layers */
--z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-overlay: 200;
}
@media (min-width: 48rem) { :root { --gutter: 2rem; } }
@media (min-width: 75rem) { :root { --gutter: 2.5rem; } }
/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
body {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.65;
color: var(--text);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* Components below set display:flex/inline-flex, which would otherwise beat the
UA rule for [hidden] on specificity and leave hidden elements visible. */
[hidden] { display: none !important; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 3px;
border-radius: 2px;
}
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible {
outline-color: var(--brand);
}
/* Some elements are focused only to move the reading position, never to be
acted on: the hero headline after the intro animation, a status line after
a submit, a step heading in the calculator. They are marked tabindex="-1"
by the script. A ring around them says "this does something", which is
wrong, and it appears whenever the last input was the keyboard — dismissing
the intro with Esc or Enter was enough to frame the headline in orange.
Interactive controls are untouched and keep their ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--brand); color: var(--ink-950); }
/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, h4, h5 {
font-family: var(--font-head);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.lead {
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--text-muted);
max-width: 44ch;
}
.measure { max-width: 68ch; }
.muted { color: var(--text-muted); }
.eyebrow {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brand-ink);
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.eyebrow::before {
content: "";
width: 2rem; height: 2px;
background: var(--brand);
flex: none;
}
.on-dark .eyebrow { color: var(--brand); }
/* ---------- 4. Layout ---------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--tight { max-width: var(--container-tight); }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--alt { background: var(--paper-alt); }
.section--dark {
background: var(--ink-950);
color: var(--text-on-dark);
}
.section--dark p, .section--dark .muted { color: var(--text-on-dark-mut); }
.section-head { max-width: 62ch; margin-bottom: var(--s-8); }
.section-head p { color: var(--text-muted); font-size: var(--fs-lg); margin-top: var(--s-4); }
.section--dark .section-head p { color: var(--text-on-dark-mut); }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Exactly two per row. auto-fit would pack in as many as happen to fit and
orphan the last card. With an odd number of cards the last one would still
be left hanging in half a row, so it is given the whole row instead — which
reads as a deliberate wide card rather than a gap. */
.grid--pair { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
.grid--pair { grid-template-columns: repeat(2, 1fr); }
.grid--pair > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.stack > * + * { margin-top: var(--s-4); }
.flow > * + * { margin-top: var(--s-5); }
.split {
display: grid;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
@media (min-width: 60rem) {
.split { grid-template-columns: 1fr 1fr; }
.split--wide-left { grid-template-columns: 1.15fr .85fr; }
}
.rule { height: 1px; background: var(--border); border: 0; }
.section--dark .rule { background: var(--border-dark); }
/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: 3rem;
padding: 0.75rem 1.5rem;
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .02em;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: background var(--t-base) var(--e-std),
color var(--t-base) var(--e-std),
border-color var(--t-base) var(--e-std),
transform var(--t-fast) var(--e-std),
box-shadow var(--t-base) var(--e-std);
touch-action: manipulation;
text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.125rem; height: 1.125rem; flex: none; }
.btn--primary {
background: var(--brand);
color: var(--ink-950);
border-color: var(--brand);
}
.btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--shadow-2); }
.btn--ghost {
border-color: var(--border-strong);
color: var(--text);
}
.btn--ghost:hover { border-color: var(--ink-950); background: var(--ink-950); color: #fff; }
.on-dark .btn--ghost, .section--dark .btn--ghost {
border-color: rgba(255,255,255,.28);
color: var(--text-on-dark);
}
.on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover {
background: #fff; color: var(--ink-950); border-color: #fff;
}
.btn--sm { min-height: 2.75rem; padding: .5rem 1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.link-arrow {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-sm);
color: var(--brand-ink);
min-height: 2.75rem;
}
.link-arrow .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--t-base) var(--e-std); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .icon { transform: translateX(4px); }
.on-dark .link-arrow, .section--dark .link-arrow { color: var(--brand); }
/* ---------- 6. Icons ----------------------------------------------------- */
.icon {
width: 1.5rem; height: 1.5rem;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------- 7. Skip link ------------------------------------------------- */
.skip-link {
position: absolute;
left: var(--s-4); top: var(--s-4);
z-index: 1000;
transform: translateY(-160%);
background: var(--brand);
color: var(--ink-950);
padding: .75rem 1.25rem;
border-radius: var(--radius);
font-weight: 600;
transition: transform var(--t-base) var(--e-out);
}
.skip-link:focus { transform: translateY(0); }
/* ---------- 8. Header / Nav ---------------------------------------------- */
/* The tint has to be opaque enough that the page behind cannot change the
header's colour. At .78 it composited to #0A0A0A over the dark hero but
#3D3E3E over a light page - the same bar reading as near-black on the home
page and washed grey everywhere else - and saturate() pulled in the hue of
whatever was underneath on top of that. */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--ink-950);
border-bottom: 1px solid rgba(255,255,255,.08);
color: var(--text-on-dark);
}
@supports (backdrop-filter: blur(12px)) {
.site-header { background: rgba(10,10,11,.94); backdrop-filter: blur(14px); }
}
.header-inner {
display: flex;
align-items: center;
gap: var(--s-5);
min-height: 4.5rem;
}
@media (min-width: 64rem) { .header-inner { min-height: 5.25rem; } }
/* -- logo -- */
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; min-height: 2.75rem; }
/* Box matched to the mark's own 1037.4 x 633 ratio, so the ![]()
has no slack
to letterbox into. Width is what the header layout is built around; the
height follows from it. */
.brand-mark { width: 3.5rem; height: 2.135rem; flex: none; }
@media (min-width: 64rem) { .brand-mark { width: 4.1rem; height: 2.5rem; } }
.brand-word { display: flex; flex-direction: column; gap: .12rem; line-height: 1; }
.brand-word b {
font-family: var(--font-head);
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -.01em;
color: #fff;
}
@media (min-width: 64rem) { .brand-word b { font-size: 1.55rem; } }
.brand-word span {
font-family: var(--font-head);
font-size: .5rem;
font-weight: 600;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--brand);
white-space: nowrap;
}
@media (min-width: 64rem) { .brand-word span { font-size: .58rem; } }
/* -- desktop nav -- */
.nav { display: none; }
@media (min-width: 64rem) {
.nav { display: flex; align-items: center; gap: var(--s-1); }
}
.nav a {
display: flex;
align-items: center;
min-height: 2.75rem;
padding: .5rem .875rem;
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-on-dark);
border-radius: var(--radius);
position: relative;
transition: color var(--t-base) var(--e-std), background var(--t-base) var(--e-std);
}
.nav a:hover { background: rgba(255,255,255,.07); }
.nav a[aria-current="page"] { color: var(--brand); }
.nav a[aria-current="page"]::after {
content: "";
position: absolute;
left: .875rem; right: .875rem; bottom: .25rem;
height: 2px;
background: var(--brand);
}
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
/* -- language switch -- */
.lang {
display: flex;
align-items: center;
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius);
overflow: hidden;
}
.lang a {
display: flex; align-items: center; justify-content: center;
min-width: 2.75rem; min-height: 2.75rem;
padding: 0 .5rem;
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .06em;
color: var(--text-on-dark-mut);
transition: background var(--t-base) var(--e-std), color var(--t-base) var(--e-std);
}
.lang a:hover { background: rgba(255,255,255,.09); color: #fff; }
.lang a[aria-current="true"] { background: var(--brand); color: var(--ink-950); }
.header-cta { display: none; }
@media (min-width: 48rem) { .header-cta { display: inline-flex; } }
/* -- burger -- */
.burger {
display: inline-flex;
align-items: center; justify-content: center;
width: 3rem; height: 3rem;
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius);
color: var(--text-on-dark);
transition: background var(--t-base) var(--e-std);
}
.burger:hover { background: rgba(255,255,255,.09); }
@media (min-width: 64rem) { .burger { display: none; } }
.burger .icon { width: 1.5rem; height: 1.5rem; }
.burger .icon--close { display: none; }
.burger[aria-expanded="true"] .icon--menu { display: none; }
.burger[aria-expanded="true"] .icon--close { display: block; }
/* -- mobile panel -- */
.mobile-nav {
position: fixed;
inset: 4.5rem 0 0 0;
z-index: var(--z-overlay);
background: var(--ink-950);
padding: var(--s-5) var(--gutter) var(--s-9);
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
transform: translateY(-.75rem);
transition: opacity var(--t-base) var(--e-std),
transform var(--t-base) var(--e-std),
visibility var(--t-base);
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 64rem) { .mobile-nav { display: none; } }
.mobile-nav ul { border-top: 1px solid rgba(255,255,255,.1); }
.mobile-nav li { border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-nav a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 3.75rem;
font-family: var(--font-head);
font-size: 1.3rem;
font-weight: 600;
color: var(--text-on-dark);
}
.mobile-nav a[aria-current="page"] { color: var(--brand); }
.mobile-nav a .icon { width: 1.25rem; height: 1.25rem; color: var(--brand); }
.mobile-nav .btn { margin-top: var(--s-6); }
.mobile-contact { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.mobile-contact a {
display: flex; align-items: center; gap: var(--s-3);
justify-content: flex-start; /* override the space-between of .mobile-nav a */
min-height: 3rem;
font-family: var(--font-body);
font-weight: 400;
color: var(--text-on-dark-mut);
font-size: var(--fs-sm);
}
.mobile-contact .icon { width: 1.25rem; height: 1.25rem; color: var(--brand); }
body[data-nav-open="true"] { overflow: hidden; }
/* ---------- 9. Hero ------------------------------------------------------ */
.hero {
position: relative;
background: var(--ink-950);
color: var(--text-on-dark);
overflow: hidden;
isolation: isolate;
}
.hero::before { /* blueprint grid */
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 78%);
z-index: -2;
}
.hero::after { /* warm glow */
content: "";
position: absolute;
top: -20%; left: 50%;
width: min(120rem, 160%); aspect-ratio: 1;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(245,166,35,.13) 0%, rgba(245,166,35,.04) 32%, transparent 62%);
z-index: -1;
pointer-events: none;
}
.hero-inner {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
align-items: center;
}
@media (min-width: 64rem) {
.hero-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
gap: clamp(2rem, 3vw, 3.5rem);
padding-block: clamp(3rem, 5vw, 5rem) clamp(4rem, 7vw, 6.5rem);
}
.hero-copy { order: 1; }
.hero-stage { order: 2; }
}
/* A notch below --fs-4xl. The headline is a full sentence, and at the shared
display size its longest words ("Sicherheit", "Richtungen") each took a
line of their own, pushing the buttons off the first screen. Four lines is
the budget; raise the cap only after checking the line count again. */
.hero h1 { font-size: clamp(2.25rem, 3.4vw + 1.2rem, 4.5rem); color: #fff; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-copy p.lead { color: var(--text-on-dark-mut); max-width: 40ch; margin-top: var(--s-5); }
.hero .btn-row { margin-top: var(--s-7); }
.hero-badges {
display: flex; flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
margin-top: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid rgba(255,255,255,.12);
}
.hero-badges li {
display: flex; align-items: center; gap: .5rem;
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: .02em;
color: var(--text-on-dark-mut);
}
.hero-badges .icon { width: 1rem; height: 1rem; color: var(--brand); stroke-width: 2.25; }
/* ---------- 10. The MK build animation ----------------------------------
The same mark, three interchangeable choreographies. Set the variant with
data-variant="a" | "b" | "c" on the .mk element — the markup never changes.
a Aufbau the crew erects it from the ground up
b Einheben a crane lowers the parts into place from above
c Vektor-Plot the mark draws itself like a CAD plot, then the crew passes
------------------------------------------------------------------------ */
.hero-stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.mk {
width: 100%;
height: auto;
overflow: visible;
}
/* --mk-line is the ink of the drawing, --mk-paper what shows through the
hollow tubes. Swapping these two turns the light logo into the dark one. */
.mk-fig { --mk-line: #FFFFFF; --mk-paper: var(--ink-950); }
/* The mark is the client's artwork, traced from b6.psd — two filled paths,
white frame and safety-orange letterform.
It cannot draw itself the way a stroke can, so an animated MASK sits over
it: one thick stroke per scaffolding member, each drawn along its length.
As a mask stroke draws, that member of the real logo appears. */
/* The artwork is a fine line drawing meant to be seen large. In the hero it
renders around 550-750px wide, where a 3.5-unit outline lands under 2px and
turns to mush. Stroking each path in its own fill colour fattens every line
by a fixed amount without altering a single coordinate. */
.mk .art-w {
fill: var(--mk-line);
fill-rule: evenodd;
stroke: var(--mk-line);
stroke-width: 2.2;
stroke-linejoin: round;
}
.mk .art-o {
fill: var(--brand);
fill-rule: evenodd;
stroke: var(--brand);
stroke-width: 2.2;
stroke-linejoin: round;
}
.mk .pc--ring {
fill: var(--brand);
fill-rule: evenodd;
stroke: var(--brand);
stroke-width: 2.2;
stroke-linejoin: round;
filter: drop-shadow(0 0 16px rgba(245,166,35,.45));
}
/* Mask strokes: white reveals, black hides. */
.mk mask .mp {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
}
.mk mask .mp-all { fill: #fff; }
.mk .pc { transform-box: view-box; }
/* ------------------------------------------------------- idle / finished -- */
.mk[data-state="idle"] .mp,
.mk[data-state="building"] .mp { stroke-dashoffset: 1; }
.mk[data-state="idle"] .mp-all,
.mk[data-state="building"] .mp-all { opacity: 0; }
.mk[data-state="idle"] .pc--ring,
.mk[data-state="building"] .pc--ring { opacity: 0; }
.mk[data-state="idle"] .crew,
.mk[data-state="built"] .crew { opacity: 0; }
.mk[data-state="built"] .mp { stroke-dashoffset: 0; }
.mk[data-state="built"] .mp-all { opacity: 1; }
.mk[data-state="built"] .pc--ring { opacity: 1; transform: none; }
/* =========================================================================
a — Aufbau: the crew erects it member by member and climbs as it grows.
========================================================================= */
.mk[data-variant="a"][data-state="building"] .mp {
animation: mpDraw var(--dur) var(--d) var(--e-out) both;
}
.mk[data-variant="a"][data-state="building"] .mp-all {
animation: mpFade .5s var(--d) linear both;
}
.mk[data-variant="a"][data-state="building"] .pc--ring {
animation: mkRing .5s var(--d) var(--e-pop) both;
}
.mk[data-variant="a"][data-state="building"] .crew--1 { animation: crew1 4.7s linear both; }
.mk[data-variant="a"][data-state="building"] .crew--2 { animation: crew2 4.7s linear both; }
.mk[data-variant="a"][data-state="building"] .crew--3 { animation: crew3 4.7s linear both; }
/* =========================================================================
b — Einheben: the members are lowered in, so they arrive fast and settle.
========================================================================= */
.mk[data-variant="b"][data-state="building"] .mp {
animation: mpDraw calc(var(--dur) * .7) calc(var(--d) * .85) var(--e-pop) both;
}
.mk[data-variant="b"][data-state="building"] .pc--frame {
animation: mkSettle 3.4s .1s var(--e-out) both;
}
.mk[data-variant="b"][data-state="building"] .mp-all {
animation: mpFade .5s calc(var(--d) * .85) linear both;
}
.mk[data-variant="b"][data-state="building"] .pc--ring {
animation: mkRing .5s calc(var(--d) * .85) var(--e-pop) both;
}
.mk[data-variant="b"][data-state="building"] .crew--1 { animation: crewB1 4.7s linear both; }
.mk[data-variant="b"][data-state="building"] .crew--2 { animation: crewB2 4.7s linear both; }
.mk[data-variant="b"][data-state="building"] .crew--3 { animation: crewB3 4.7s linear both; }
/* =========================================================================
c — Vektor-Plot: the mark plots itself fast and evenly, like a CAD plotter.
========================================================================= */
.mk[data-variant="c"][data-state="building"] .mp {
animation: mpDraw calc(var(--dur) * .62) calc(var(--d) * .62) linear both;
}
.mk[data-variant="c"][data-state="building"] .mp-all {
animation: mpFade .3s calc(var(--d) * .62) linear both;
}
.mk[data-variant="c"][data-state="building"] .pc--ring {
animation: mkRing .4s calc(var(--d) * .62) var(--e-pop) both;
}
.mk[data-variant="c"][data-state="building"] .crew--1 { animation: crewC 3.4s linear both; }
.mk[data-variant="c"][data-state="building"] .crew--2,
.mk[data-variant="c"][data-state="building"] .crew--3 { opacity: 0; }
@keyframes mpDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mkSettle {
0% { transform: translateY(-22px); }
100% { transform: translateY(0); }
}
@keyframes mkRing {
0% { opacity: 0; transform: scale(.3); }
60% { opacity: 1; }
100% { opacity: 1; transform: scale(1); }
}
/* ------------------------------------------------------------ the crew ---
Three figures, drawn once in the markup and choreographed here. Ground is
y=633 in the mark's viewBox; the lifts they climb to sit at y≈368 and 455. */
.crew-figure {
fill: none;
stroke: #FFFFFF;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
}
.crew-hat { fill: var(--brand); stroke: var(--brand); stroke-width: 4; }
.crew-vest { fill: var(--brand); stroke: none; opacity: .9; }
.mk[data-state="building"] .crew-bob { animation: crewBob .38s linear infinite; }
.mk[data-state="building"] .crew-leg-a { animation: legA .38s ease-in-out infinite; }
.mk[data-state="building"] .crew-leg-b { animation: legB .38s ease-in-out infinite; }
.mk[data-state="building"] .crew-arm { animation: armWork .7s ease-in-out infinite; }
.crew-leg-a, .crew-leg-b, .crew-arm { transform-box: fill-box; }
.crew-leg-a, .crew-leg-b { transform-origin: top center; }
.crew-arm { transform-origin: top left; }
@keyframes crewBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes legA { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes legB { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes armWork { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(-48deg); } }
/* a — Aufbau: they walk in, two climb with the rising frame, one stays down. */
@keyframes crew1 {
0% { transform: translate(-340px, 0); opacity: 0; }
4% { opacity: 1; }
20% { transform: translate(0, 0); }
82% { transform: translate(0, 0); opacity: 1; }
96% { transform: translate(250px, 0); opacity: 0; }
100% { transform: translate(250px, 0); opacity: 0; }
}
@keyframes crew2 { /* climbs the M's right leg as it tops out (~1.6s) */
0% { transform: translate(-520px, 0); opacity: 0; }
4% { opacity: 1; }
22% { transform: translate(0, 0); }
30% { transform: translate(0, 0); }
40% { transform: translate(16px, -265px); }
86% { transform: translate(16px, -265px); opacity: 1; }
95% { transform: translate(16px, -265px); opacity: 0; }
100% { transform: translate(16px, -265px); opacity: 0; }
}
@keyframes crew3 { /* waits on the ground until the K's arms exist */
0% { transform: translate(-760px, 0); opacity: 0; }
5% { opacity: 1; }
20% { transform: translate(0, 0); }
54% { transform: translate(0, 0); }
66% { transform: translate(-70px, -178px); }
88% { transform: translate(-70px, -178px); opacity: 1; }
96% { transform: translate(-70px, -178px); opacity: 0; }
100% { transform: translate(-70px, -178px); opacity: 0; }
}
/* b — Einheben: the frame comes down to them, so they guide it in from below. */
@keyframes crewB1 {
0% { transform: translate(-300px, 0); opacity: 0; }
6% { opacity: 1; }
22% { transform: translate(0, 0); }
86% { transform: translate(0, 0); opacity: 1; }
97% { transform: translate(180px, 0); opacity: 0; }
100% { transform: translate(180px, 0); opacity: 0; }
}
@keyframes crewB2 {
0% { transform: translate(-460px, 0); opacity: 0; }
6% { opacity: 1; }
26% { transform: translate(0, 0); }
88% { transform: translate(0, 0); opacity: 1; }
97% { transform: translate(0, 0); opacity: 0; }
100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes crewB3 {
0% { transform: translate(-680px, 0); opacity: 0; }
6% { opacity: 1; }
30% { transform: translate(0, 0); }
90% { transform: translate(0, 0); opacity: 1; }
98% { transform: translate(0, 0); opacity: 0; }
100% { transform: translate(0, 0); opacity: 0; }
}
/* c — Plot: the mark draws itself; a single figure walks past underneath. */
@keyframes crewC {
0% { transform: translate(-380px, 0); opacity: 0; }
10% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translate(420px, 0); opacity: 0; }
}
/* ------------------------------------------------- wordmark under the mark */
.mk-wordmark {
margin-top: var(--s-4);
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
opacity: 0;
transition: opacity .6s var(--e-out);
}
.mk-wordmark[data-show="true"] { opacity: 1; }
.mk-wordmark b {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(2rem, 7vw, 3.25rem);
letter-spacing: .01em;
line-height: 1;
color: #fff;
}
.mk-wordmark .sub {
display: flex; align-items: center; gap: .6rem;
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(.6rem, 1.7vw, .8rem);
letter-spacing: .38em;
text-transform: uppercase;
color: #fff;
padding-left: .38em;
}
.mk-wordmark .sub::before,
.mk-wordmark .sub::after {
content: "";
width: clamp(1.5rem, 4vw, 2.5rem);
height: .5rem;
background: var(--brand);
flex: none;
}
.mk-wordmark .sub::before { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.mk-wordmark .sub::after { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mk-replay {
display: inline-flex;
align-items: center;
gap: .45rem;
margin: var(--s-5) auto 0;
min-height: 2.75rem;
padding: .4rem .75rem;
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-on-dark-mut);
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--radius);
background: rgba(255,255,255,.03);
transition: color var(--t-base) var(--e-std), border-color var(--t-base) var(--e-std);
}
.mk-replay:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.mk-replay .icon { width: 1rem; height: 1rem; }
/* ---------- 11. Cards ---------------------------------------------------- */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--s-6);
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color var(--t-base) var(--e-std),
box-shadow var(--t-base) var(--e-std),
transform var(--t-base) var(--e-std);
}
.card p { color: var(--text-muted); font-size: var(--fs-sm); }
a.card:hover, .card--link:hover {
border-color: var(--ink-950);
box-shadow: var(--shadow-2);
transform: translateY(-3px);
}
.card-icon {
width: 3rem; height: 3rem;
display: grid; place-items: center;
background: var(--brand-soft);
border-radius: var(--radius);
color: var(--brand-ink);
margin-bottom: var(--s-2);
}
.card-icon .icon { width: 1.5rem; height: 1.5rem; }
.card h3 { font-size: var(--fs-lg); }
.card .link-arrow { margin-top: auto; padding-top: var(--s-3); }
.section--dark .card {
background: var(--ink-900);
border-color: var(--border-dark);
}
.section--dark .card h3 { color: #fff; }
.section--dark .card p { color: var(--text-on-dark-mut); }
.section--dark .card-icon { background: rgba(245,166,35,.12); color: var(--brand); }
/* card led by a big number — used for the experience figures */
.card--figure { padding-top: var(--s-7); }
/* `.card p` also matches these, so they need matching specificity to win */
.card p.card-figure {
font-family: var(--font-head);
font-size: clamp(2.75rem, 6vw, 4rem);
font-weight: 800;
line-height: .95;
letter-spacing: -.03em;
color: var(--brand-ink);
font-variant-numeric: tabular-nums;
}
.card p.card-figure-label {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-faint);
margin-top: var(--s-2);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--border);
}
.section--dark .card p.card-figure { color: var(--brand); }
.section--dark .card p.card-figure-label {
color: var(--text-on-dark-mut);
border-bottom-color: var(--border-dark);
}
/* numbered service card */
.card--num::before {
content: attr(data-num);
position: absolute;
top: var(--s-5); right: var(--s-5);
font-family: var(--font-head);
font-size: var(--fs-2xl);
font-weight: 800;
line-height: 1;
color: var(--paper-alt-2);
pointer-events: none;
}
/* ---------- 12. Stats --------------------------------------------------- */
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border-dark);
border: 1px solid var(--border-dark);
}
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--ink-950); padding: var(--s-6) var(--s-5); }
.stat b {
display: block;
font-family: var(--font-head);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
line-height: 1;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
.stat span {
display: block;
margin-top: var(--s-2);
font-size: var(--fs-sm);
color: var(--text-on-dark-mut);
}
/* ---------- 13. Process ------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
counter-increment: step;
padding-top: var(--s-5);
border-top: 3px solid var(--border);
position: relative;
transition: border-color var(--t-base) var(--e-std);
}
.step::before {
content: counter(step, decimal-leading-zero);
display: block;
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: .1em;
color: var(--brand-ink);
margin-bottom: var(--s-3);
}
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.step p { color: var(--text-muted); font-size: var(--fs-sm); }
.step:hover { border-top-color: var(--brand); }
/* ---------- 14. Feature list -------------------------------------------- */
.checklist { display: grid; gap: var(--s-4); }
.checklist li { display: flex; gap: var(--s-4); align-items: flex-start; }
.checklist .icon {
width: 1.375rem; height: 1.375rem;
color: var(--brand-ink);
stroke-width: 2.5;
margin-top: .18rem;
}
.section--dark .checklist .icon { color: var(--brand); }
.checklist strong { display: block; font-family: var(--font-head); font-weight: 600; }
.checklist p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: .15rem; }
.section--dark .checklist p { color: var(--text-on-dark-mut); }
/* ---------- 15. Projects ------------------------------------------------ */
.project {
display: flex;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color var(--t-base) var(--e-std), box-shadow var(--t-base) var(--e-std);
}
.project:hover { border-color: var(--ink-950); box-shadow: var(--shadow-2); }
.project-media {
aspect-ratio: 4 / 3;
background: var(--paper-alt-2);
overflow: hidden;
}
.project-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--e-out);
}
.project:hover .project-media img { transform: scale(1.04); }
.project-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.project-tag {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--brand-ink);
}
.project h3 { font-size: var(--fs-lg); }
.project dl {
margin-top: auto;
padding-top: var(--s-4);
border-top: 1px solid var(--border);
display: grid;
grid-template-columns: auto 1fr;
gap: .35rem var(--s-4);
font-size: var(--fs-sm);
}
.project dt { color: var(--text-faint); }
.project dd { margin: 0; font-weight: 500; text-align: right; }
/* ---------- 16. Quote ---------------------------------------------------- */
.quote {
border-left: 4px solid var(--brand);
padding-left: var(--s-5);
}
.quote blockquote {
font-family: var(--font-head);
font-size: var(--fs-xl);
font-weight: 500;
line-height: 1.35;
letter-spacing: -.015em;
text-wrap: balance;
}
.quote figcaption {
margin-top: var(--s-4);
font-size: var(--fs-sm);
color: var(--text-muted);
}
.section--dark .quote figcaption { color: var(--text-on-dark-mut); }
.section--dark .quote blockquote { color: #fff; }
/* ---------- 17. FAQ ------------------------------------------------------ */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: 4rem;
padding: var(--s-4) 0;
font-family: var(--font-head);
font-size: var(--fs-lg);
font-weight: 600;
letter-spacing: -.01em;
cursor: pointer;
list-style: none;
transition: color var(--t-base) var(--e-std);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-ink); }
.faq summary .icon {
width: 1.375rem; height: 1.375rem;
color: var(--brand-ink);
transition: transform var(--t-base) var(--e-std);
flex: none;
}
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq-body { padding-bottom: var(--s-5); color: var(--text-muted); max-width: 68ch; }
.faq-body > * + * { margin-top: var(--s-3); }
/* ---------- 18. CTA band ------------------------------------------------- */
.cta-band {
background: var(--brand);
color: var(--ink-950);
}
.cta-band .container {
display: grid;
gap: var(--s-6);
padding-block: clamp(2.5rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 60rem) {
.cta-band .container { grid-template-columns: 1.4fr auto; }
}
.cta-band h2 { font-size: var(--fs-2xl); }
.cta-band p { margin-top: var(--s-3); max-width: 52ch; font-weight: 500; }
.cta-band .btn--primary { background: var(--ink-950); color: #fff; border-color: var(--ink-950); }
.cta-band .btn--primary:hover { background: #000; border-color: #000; }
.cta-band .btn--ghost { border-color: rgba(10,10,11,.35); color: var(--ink-950); }
.cta-band .btn--ghost:hover { background: var(--ink-950); color: #fff; border-color: var(--ink-950); }
/* ---------- 19. Forms ---------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
/* align-content keeps inputs at their natural height when a sibling field in the
same row is taller because of helper text */
.field { display: grid; gap: .45rem; align-content: start; }
.field label {
font-family: var(--font-head);
font-size: var(--fs-sm);
font-weight: 600;
}
.field .req { color: var(--danger); }
.field .hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field input,
.field select,
.field textarea {
width: 100%;
min-height: 3rem;
padding: .75rem .875rem;
font-size: var(--fs-base);
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
transition: border-color var(--t-base) var(--e-std), box-shadow var(--t-base) var(--e-std);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-600); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--ink-950);
box-shadow: 0 0 0 3px rgba(245,166,35,.35);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--danger); }
.field-error {
display: none;
align-items: center;
gap: .4rem;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--danger);
}
.field-error .icon { width: 1rem; height: 1rem; stroke-width: 2.25; }
.field[data-invalid="true"] .field-error { display: flex; }
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.select-wrap { position: relative; }
.select-wrap .icon {
position: absolute;
right: .875rem; top: 50%;
transform: translateY(-50%);
width: 1.125rem; height: 1.125rem;
pointer-events: none;
color: var(--text-faint);
}
.consent { display: flex; gap: var(--s-3); align-items: flex-start; }
.consent input[type="checkbox"] {
width: 1.25rem; height: 1.25rem;
min-height: 0;
margin-top: .22rem;
accent-color: var(--brand);
flex: none;
cursor: pointer;
}
.consent label { font-weight: 400; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.form-status {
display: none;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-radius: var(--radius);
font-size: var(--fs-sm);
align-items: flex-start;
}
.form-status[data-type="success"] { display: flex; background: #E7F5EC; border: 1px solid #B7DFC7; color: #0F5132; }
.form-status[data-type="error"] { display: flex; background: #FDECEA; border: 1px solid #F5C2BD; color: #8A2318; }
.form-status[data-type="info"] { display: flex; background: var(--paper-alt); border: 1px solid var(--border); color: var(--text-muted); }
.form-status .icon { width: 1.25rem; height: 1.25rem; margin-top: .1rem; stroke-width: 2.25; }
.btn[data-loading="true"] { pointer-events: none; opacity: .7; }
.btn[data-loading="true"] .btn-spinner { display: block; }
.btn[data-loading="true"] .btn-label-idle { display: none; }
.btn-spinner {
display: none;
width: 1.125rem; height: 1.125rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
/* ---------- 20. Contact panel -------------------------------------------- */
.contact-list { display: grid; gap: var(--s-5); }
.contact-item { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-item .icon { width: 1.375rem; height: 1.375rem; color: var(--brand-ink); margin-top: .2rem; }
.contact-item dt {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: .15rem;
}
.contact-item dd { margin: 0; font-weight: 500; }
.contact-item a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
/* The contact page keeps a boxed map; the about page overrides the ratio. */
.map-embed { aspect-ratio: 16 / 10; }
/* ---------- 20b. Location map -------------------------------------------
Hand-built slippy map (assets/js/map.js). Tiles are desaturated; the marker
is a sibling of the tiles inside the same translated world, so it stays on
the yard when the map is panned or zoomed. */
.map-band { position: relative; }
.map-band .map-embed {
aspect-ratio: 4 / 3;
border-radius: 0;
border-left: 0;
border-right: 0;
}
@media (min-width: 48rem) { .map-band .map-embed { aspect-ratio: 2 / 1; } }
@media (min-width: 64rem) { .map-band .map-embed { aspect-ratio: 3.6 / 1; } }
.map-embed {
position: relative;
background: var(--paper-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: grid;
place-items: center;
text-align: center;
padding: var(--s-6);
}
.map-embed[data-loaded="true"] { padding: 0; display: block; }
.map-embed .map-note { max-width: 34ch; }
.map-embed .map-note p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-4); }
.map-viewport {
position: absolute;
inset: 0;
overflow: hidden;
cursor: grab;
touch-action: none;
background: #EDEDED;
}
.map-viewport.is-dragging { cursor: grabbing; }
.map-world { position: absolute; inset: 0; }
.map-tile {
position: absolute;
width: 256px;
height: 256px;
max-width: none;
user-select: none;
-webkit-user-drag: none;
filter: grayscale(1) contrast(1.05) brightness(1.02);
}
/* The pin is positioned from its own lat/lon, so it travels with the tiles. */
.map-pin {
position: absolute;
width: 2.5rem;
height: 2.5rem;
margin-left: -1.25rem; /* centre horizontally on the point */
margin-top: -2.5rem; /* sit the tip of the pin on the point */
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 3px 6px rgba(10,10,11,.45));
}
.map-pin svg { width: 100%; height: 100%; }
.map-zoom {
position: absolute;
top: var(--s-4);
right: var(--s-4);
z-index: 3;
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-2);
}
.map-zoom button {
width: 2.75rem;
height: 2.75rem;
font-size: 1.25rem;
font-weight: 600;
line-height: 1;
background: var(--paper);
color: var(--text);
border: 0;
cursor: pointer;
transition: background var(--t-base) var(--e-std);
}
.map-zoom button + button { border-top: 1px solid var(--border); }
.map-zoom button:hover { background: var(--paper-alt); }
.map-zoom button:disabled { opacity: .4; cursor: default; }
.map-attr {
position: absolute;
right: 0; bottom: 0;
z-index: 3;
margin: 0;
padding: .15rem .5rem;
font-size: 11px;
background: rgba(255,255,255,.82);
color: var(--text-muted);
}
.map-attr a { text-decoration: underline; text-underline-offset: 2px; }
.map-band .map-caption {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-5);
margin-top: var(--s-5);
font-size: var(--fs-sm);
color: var(--text-muted);
}
.map-band .map-caption .icon { width: 1.125rem; height: 1.125rem; color: var(--brand-ink); }
.map-band .map-caption a {
display: inline-flex;
align-items: center;
gap: .4rem;
min-height: 2.75rem;
font-weight: 600;
color: var(--brand-ink);
}
.map-band .map-caption a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- 20c. Service-area map ---------------------------------------
Inline SVG (built in _tools/einsatzgebiet.py) rather than an ![]()
, so the
animation can start when the reader reaches it instead of when the file
decodes.
Every element's RESTING state here is its finished state, and the keyframes
run `backwards` from a hidden state. That way the map is correct with no
JavaScript, correct under prefers-reduced-motion (the global rule collapses
the durations, landing everything on its end state), and only ever hidden
during the delay before its own beat. The parent .reveal keeps the whole
thing out of sight until then. */
.eg { display: block; width: 100%; height: 100%; }
.eg text { font-family: var(--font-head); fill: #fff; }
.eg-town text { font-size: 17px; font-weight: 700; }
.eg-region {
font-size: 13px;
font-weight: 600;
letter-spacing: 2.4px;
fill: var(--brand);
fill-opacity: .55;
}
.eg-river-label, .eg-road-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
fill: #fff;
fill-opacity: .3;
}
.eg-badge text { font-size: 13px; font-weight: 700; letter-spacing: .5px; fill: #0b0b0b; }
/* Beat one: the yard. Beat two: the perimeter. */
.is-visible .eg-glow { animation: egFade .9s var(--e-out) .25s backwards; }
.is-visible .eg-yard-dot { animation: egPop .5s var(--e-out) .25s backwards; }
.is-visible .eg-badge { animation: egBadge .5s var(--e-out) .55s backwards; }
.is-visible .eg-inner { animation: egFade .6s var(--e-out) .8s backwards; }
.is-visible .eg-ring-line { animation: egDraw 1.5s var(--e-std) 1.15s backwards; }
.is-visible .eg-node { animation: egPop .4s var(--e-out) calc(2.35s + var(--eg-i) * 90ms) backwards; }
/* The pulse is the "highlight" itself: two rings expanding out of the marker
while the badge arrives, then nothing — it does not loop, because a map
that keeps blinking next to body copy is a distraction. */
.eg-pulse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-visible .eg-pulse { animation: egPulse 1.5s var(--e-out) .3s 1 forwards; }
.is-visible .eg-pulse--2 { animation-delay: .75s; }
@keyframes egFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes egPop {
from { opacity: 0; transform: scale(.4); }
60% { transform: scale(1.12); }
to { opacity: 1; transform: none; }
}
@keyframes egBadge {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes egDraw {
from { stroke-dasharray: var(--eg-circ); stroke-dashoffset: var(--eg-circ); }
to { stroke-dasharray: var(--eg-circ); stroke-dashoffset: 0; }
}
@keyframes egPulse {
from { opacity: .7; transform: scale(.5); }
to { opacity: 0; transform: scale(3.4); }
}
/* scale() needs a box to scale about; without this Safari uses the viewBox. */
.eg-yard-dot, .eg-node { transform-box: fill-box; transform-origin: center; }
.eg-badge { transform-box: fill-box; transform-origin: center bottom; }
/* On a phone the frame is about 334px wide, so a 17px label in a 1044-wide
viewBox lands at roughly 5px — unreadable. The six most crowded towns drop
out, the decoration goes with them, what is left grows, and the yard marker
scales about its own point (which is also the projection origin, hence
--eg-x / --eg-y straight from the generator). */
@media (max-width: 47.99rem) {
.eg-town--minor,
.eg-region,
.eg-river-label,
.eg-road-label { display: none; }
.eg-town text { font-size: 30px; }
.eg-town circle:first-child { stroke-width: 3.4; }
.eg-yard {
transform-box: view-box;
transform-origin: var(--eg-x) var(--eg-y);
transform: scale(1.55);
}
}
/* ---------- 20d. First-visit intro ---------------------------------------
The hero mark, full screen, once per session. The overlay is `hidden` in
the markup and only opened by the script, so with JavaScript off there is
nothing covering the page. */
.intro {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
background: var(--ink-950);
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size: 52px 52px;
animation: introIn .4s var(--e-out);
}
.intro[hidden] { display: none; }
/* 1.639 is the mark's own ratio, so the stage never letterboxes. */
.intro-stage {
width: min(80vw, 64vh * 1.639);
transform-origin: center;
}
.intro-skip {
position: absolute;
right: clamp(1rem, 4vw, 2.5rem);
bottom: clamp(1rem, 4vw, 2.5rem);
color: var(--text-on-dark);
border-color: rgba(255,255,255,.3);
}
.intro-skip:hover { border-color: var(--brand); color: var(--brand); }
/* Leaving: the stage is given a transform that lands it exactly on the hero
mark, and the backdrop fades out from under it. */
.intro[data-leaving="true"] {
opacity: 0;
pointer-events: none;
transition: opacity .55s var(--e-std) .15s;
}
.intro[data-leaving="true"] .intro-stage {
transition: transform .7s var(--e-std);
}
.intro[data-leaving="true"] .intro-skip {
opacity: 0;
transition: opacity .2s linear;
}
@keyframes introIn { from { opacity: 0; } to { opacity: 1; } }
/* The page must not scroll underneath the overlay. */
html[data-intro-open] { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.intro { display: none !important; }
}
/* ---------- 20e. Calculator artwork (prototypes) -------------------------
Three concepts for the drawing beside the price calculator, on the internal
rechner-varianten.html page. Colours come from two tokens so a concept can
be dropped onto the dark hero or a light page without touching the script. */
.art-tool { margin-top: var(--s-8); display: grid; gap: var(--s-7); }
.art-fields {
display: grid;
gap: var(--s-4);
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
padding: var(--s-5);
background: var(--paper-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
position: sticky;
top: 5.5rem;
z-index: 2;
}
.art-pane { margin: 0; display: grid; gap: var(--s-4); }
.art-pane figcaption h2 { font-size: var(--fs-lg); }
.art-pane figcaption p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 62ch; }
.art-frame {
--art-ink: #F4F2EE;
--art-brand: #F0A030;
aspect-ratio: 13 / 10;
border: 1px solid var(--border-dark);
border-radius: var(--radius);
overflow: hidden;
background: #17181C;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 26px 26px;
}
.art-svg { display: block; width: 100%; height: 100%; }
/* The drawing's own vocabulary. Everything is strokes - no fills except the
door and the dimension plates - so it reads as a technical drawing. */
.art-svg .a-line {
fill: none;
stroke: var(--art-ink);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.art-svg .a-line--thin { stroke-width: 1; stroke-opacity: .45; }
.art-svg .a-line--active { stroke: var(--art-brand); stroke-width: 3; }
.art-svg .a-fill-none { fill: none; }
/* The building has to read as a mass behind the scaffold, or concept C
is just a grid. */
.art-svg .a-building {
fill: var(--art-ink); fill-opacity: .07;
stroke: var(--art-ink); stroke-opacity: .55; stroke-width: 1.5;
}
.art-svg .a-ground { stroke: var(--art-ink); stroke-opacity: .3; stroke-width: 1.5; }
.art-svg .a-door { fill: var(--art-ink); fill-opacity: .18; stroke: var(--art-ink); stroke-width: 1.5; }
.art-svg .a-window { fill: var(--art-ink); fill-opacity: .10; stroke: var(--art-ink);
stroke-opacity: .7; stroke-width: 1.1; }
.art-svg .a-door-plan { stroke: var(--art-brand); stroke-width: 4; stroke-linecap: butt; }
.art-svg .a-scaff { stroke: var(--art-ink); stroke-width: 2; stroke-linecap: round; }
.art-svg .a-deck { stroke: var(--art-brand); stroke-width: 3; stroke-linecap: butt; }
.art-svg .a-brace { stroke: var(--art-brand); stroke-width: 1.4; stroke-opacity: .75; }
.art-svg .a-dim { stroke: var(--art-brand); stroke-width: 1.2; }
.art-svg .a-dim-tick { stroke: var(--art-brand); stroke-width: 1.2; }
.art-svg .a-dim-plate { fill: #17181C; }
.art-svg .a-dim-text {
fill: var(--art-brand);
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.art-svg .a-title {
fill: var(--art-ink); fill-opacity: .5;
font-family: var(--font-head); font-size: 12px;
font-weight: 700; letter-spacing: 2px;
}
.art-svg .a-note {
fill: var(--art-ink); fill-opacity: .6;
font-family: var(--font-head); font-size: 13px; font-weight: 600;
}
.art-svg .a-empty {
fill: var(--art-ink); fill-opacity: .35;
font-family: var(--font-body); font-size: 15px;
}
/* One column: the building on top, the plan under it. They are read in that
order, not compared side by side. */
@media (min-width: 62rem) {
.art-fields { grid-template-columns: repeat(6, 1fr); }
.art-tool { max-width: 56rem; }
}
/* The promise under the calculator headline. Larger than the intro that
follows it, so the order of reading is headline, promise, explanation. */
/* `.page-head p` is (0,1,1) and would beat a bare `.page-tagline` (0,1,0) -
the same specificity trap this stylesheet has hit before. */
.page-head .page-tagline {
margin-top: var(--s-4);
max-width: 46ch;
font-family: var(--font-head);
font-size: var(--fs-xl);
font-weight: 600;
line-height: 1.3;
color: var(--text-on-dark);
}
.page-head .page-tagline em { font-style: normal; color: var(--brand); }
/* ---- sides, added one at a time ---- */
.side-list { display: grid; gap: var(--s-5); }
@media (min-width: 34rem) { .side-list { grid-template-columns: repeat(2, 1fr); } }
.side-item[hidden] { display: none !important; }
.side-turn { margin-top: var(--s-2); }
.side-turn[hidden] { display: none !important; }
.side-turn-label {
display: block;
font-size: var(--fs-xs);
color: var(--text-faint);
margin-bottom: .3rem;
}
.side-turn-buttons { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.side-turn-buttons button {
min-height: 2.25rem;
padding: 0 .7rem;
border: 0;
background: var(--paper);
color: var(--text-muted);
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
cursor: pointer;
}
.side-turn-buttons button + button { border-left: 1px solid var(--border); }
.side-turn-buttons button[aria-pressed="true"] { background: var(--brand); color: var(--ink-950); }
.side-turn-buttons button:hover[aria-pressed="false"] { background: var(--paper-alt); color: var(--text); }
.side-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.side-actions .btn[hidden] { display: none !important; }
.btn--sm { min-height: 2.5rem; padding: 0 var(--s-4); font-size: var(--fs-sm); }
/* ---- the drawings beside the live calculator ---- */
.calc-layout { display: grid; gap: var(--s-7); align-items: start; }
.calc-art { display: grid; gap: var(--s-5); min-width: 0; }
.calc-art .art-figure { margin: 0; display: grid; gap: var(--s-2); }
.calc-art figcaption {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-faint);
}
/* Narrow screens: the drawing has to stay in view while the fields are being
typed into, or the feedback it exists for is never seen. Only the building
is kept - two stacked drawings would take most of a phone screen - and the
plan returns as soon as there is a column to put it in. */
@media (max-width: 59.99rem) {
.calc-art {
order: -1;
position: sticky;
top: 4.5rem;
z-index: 3;
padding-bottom: var(--s-3);
background: var(--paper);
}
.calc-art .art-frame { aspect-ratio: 16 / 9; }
.calc-art .art-figure--plan { display: none; }
}
@media (min-width: 60rem) {
.calc-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.calc-art { position: sticky; top: 6rem; }
}
/* ---------- 21. Footer --------------------------------------------------- */
.site-footer {
background: var(--ink-950);
color: var(--text-on-dark-mut);
padding-block: clamp(3rem, 6vw, 4.5rem) var(--s-6);
font-size: var(--fs-sm);
}
.footer-grid {
display: grid;
gap: var(--s-8);
padding-bottom: var(--s-8);
border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.footer-grid h3 {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
margin-bottom: var(--s-4);
}
.footer-grid a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-grid a:hover { color: var(--brand); }
.footer-about p { max-width: 34ch; margin-top: var(--s-4); }
.footer-about .brand { margin-right: 0; }
.footer-contact li { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer-contact .icon { width: 1.125rem; height: 1.125rem; color: var(--brand); margin-top: .55rem; flex: none; }
.footer-contact address { font-style: normal; padding-block: .35rem; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-5);
align-items: center;
justify-content: space-between;
padding-top: var(--s-5);
font-size: var(--fs-xs);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-bottom a:hover { color: var(--brand); }
/* ---------- 22. Page header (sub-pages) ---------------------------------- */
.page-head {
background: var(--ink-950);
color: var(--text-on-dark);
padding-block: clamp(2.5rem, 6vw, 4.5rem);
position: relative;
overflow: hidden;
}
.page-head::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
}
.page-head .container { position: relative; }
.page-head h1 { color: #fff; max-width: 20ch; }
.page-head p { color: var(--text-on-dark-mut); font-size: var(--fs-lg); margin-top: var(--s-5); max-width: 56ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--fs-xs); margin-bottom: var(--s-5); }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; color: var(--text-on-dark-mut); }
.breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,.3); }
.breadcrumb a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb [aria-current="page"] { color: #fff; }
/* ---------- 23. Legal / prose -------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--s-8); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--s-6); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-top: var(--s-4); color: var(--text-muted); }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.25rem; }
.prose li + li { margin-top: .4rem; }
.prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
/* ---------- 23b. Media frame -------------------------------------------- */
.media-frame {
aspect-ratio: 4 / 3;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--paper-alt-2);
}
.section--dark .media-frame { border-color: var(--border-dark); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Spezialgerüste is the one service with two illustrations. Side by side they
would be too small to read, so they stack and the pair as a whole takes the
place of the single frame the other services have. */
.service-media { display: grid; gap: var(--s-4); }
/* Service detail block */
.service-block { scroll-margin-top: 7rem; }
.service-block + .service-block { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 60rem) {
.service-block:nth-child(even) .service-media { order: -1; }
}
.service-block h2 { display: flex; align-items: center; gap: var(--s-4); }
.service-block h2 .card-icon { margin-bottom: 0; }
/* ---------- 23c. Team ---------------------------------------------------- */
/* Four team entries: 1 up on phones, a 2x2 block on tablets, one row on wide
screens. Explicit counts rather than auto-fit so no entry is ever orphaned. */
.people { display: grid; gap: var(--s-6); }
@media (min-width: 40rem) { .people { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); } }
@media (min-width: 68rem) { .people { grid-template-columns: repeat(4, 1fr); } }
.person { text-align: left; }
.person-avatar {
width: 4.5rem; height: 4.5rem;
display: grid; place-items: center;
border-radius: 50%;
background: var(--ink-950);
color: var(--brand);
font-family: var(--font-head);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: .04em;
margin-bottom: var(--s-4);
}
.person h3 { font-size: var(--fs-lg); }
.person .role {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--brand-ink);
margin-top: .2rem;
}
.person p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-3); }
/* ---------- 23d. Info panel (contact) ------------------------------------ */
.panel {
background: var(--paper-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: clamp(1.5rem, 4vw, 2.5rem);
}
.panel h2 { font-size: var(--fs-xl); margin-bottom: var(--s-5); }
.hours { display: grid; gap: .35rem; font-size: var(--fs-sm); }
.hours div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: .25rem; }
.hours dt { color: var(--text-muted); }
.hours dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Note / callout */
.note {
display: flex;
gap: var(--s-4);
padding: var(--s-5);
background: var(--brand-soft);
border-left: 4px solid var(--brand);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
}
.note .icon { width: 1.25rem; height: 1.25rem; color: var(--brand-ink); flex: none; margin-top: .15rem; }
.note strong { display: block; margin-bottom: .2rem; font-family: var(--font-head); }
.note p { color: var(--text-muted); }
/* ---------- 23e. Document jump nav (legal page) --------------------------- */
.doc-nav {
max-width: 68ch;
margin-bottom: var(--s-8);
padding: var(--s-5);
background: var(--paper-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.doc-nav-label {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: var(--s-2);
}
.doc-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.doc-nav a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-sm);
color: var(--brand-ink);
}
.doc-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Validity line under a legal heading */
.prose .doc-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
margin-top: var(--s-4);
font-size: var(--fs-sm);
color: var(--text-faint);
}
.prose .doc-meta .tag {
background: var(--ink-950);
border-color: var(--ink-950);
color: var(--brand);
font-family: var(--font-head);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Numbered clauses sit tighter than ordinary prose headings */
.prose h3 + p { margin-top: var(--s-3); }
/* ---------- 23e2. "First in Switzerland" claim badge --------------------- */
/* `.page-head p` and `.card p` also match this element, so the badge needs a
type selector to win the specificity tie. */
p.claim {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .45rem .9rem .45rem .7rem;
border: 1px solid var(--brand);
border-radius: 999px;
background: rgba(245, 166, 35, .12);
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .06em;
line-height: 1.3;
text-transform: uppercase;
color: var(--brand);
margin-top: 0;
margin-bottom: var(--s-5);
max-width: max-content;
}
p.claim .icon { width: 1.05rem; height: 1.05rem; stroke-width: 2; flex: none; }
/* Amber text fails contrast on light surfaces — use a darker burnt orange
(6.7:1 on the light greys used here). */
.section:not(.section--dark) p.claim {
color: #8A4008;
background: var(--brand-soft);
border-color: var(--brand);
}
/* ---------- 23f. Price calculator ---------------------------------------- */
.calc {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
padding: clamp(1.25rem, 4vw, 2.5rem);
}
/* -- progress -- */
.calc-progress {
display: flex;
gap: .375rem;
margin-bottom: var(--s-7);
}
.calc-progress li {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--paper-alt-2);
transition: background var(--t-base) var(--e-std);
}
.calc-progress li[data-state="done"] { background: var(--brand-ink); }
.calc-progress li[data-state="current"] { background: var(--brand); }
.calc-step h2 {
font-size: var(--fs-xl);
outline: none;
}
.calc-step > p.muted { margin-top: var(--s-3); font-size: var(--fs-sm); }
.calc-step fieldset { border: 0; padding: 0; margin: 0; }
.calc-step legend {
font-family: var(--font-head);
font-size: var(--fs-xl);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
padding: 0;
outline: none;
}
.calc-body { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
/* -- big radio cards (step 1) -- */
.choice-grid { display: grid; gap: var(--s-4); }
@media (min-width: 34rem) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-2);
min-height: 44px;
padding: var(--s-5);
border: 2px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: border-color var(--t-base) var(--e-std),
background var(--t-base) var(--e-std);
}
.choice-card:hover { border-color: var(--ink-600); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card .choice-icon {
width: 2.75rem; height: 2.75rem;
display: grid; place-items: center;
border-radius: var(--radius);
background: var(--paper-alt);
color: var(--text-muted);
margin-bottom: var(--s-2);
transition: background var(--t-base) var(--e-std), color var(--t-base) var(--e-std);
}
.choice-card strong { font-family: var(--font-head); font-size: var(--fs-lg); }
.choice-card span.choice-desc { font-size: var(--fs-sm); color: var(--text-muted); }
.choice-card:has(input:checked) {
border-color: var(--brand);
background: var(--brand-soft);
}
.choice-card:has(input:checked) .choice-icon { background: var(--brand); color: var(--ink-950); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
/* -- toggle cards (step 3) -- */
.toggle-list { display: grid; gap: var(--s-3); }
.toggle-card {
display: flex;
align-items: flex-start;
gap: var(--s-4);
min-height: 3.5rem;
padding: var(--s-4) var(--s-5);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: border-color var(--t-base) var(--e-std), background var(--t-base) var(--e-std);
}
.toggle-card:hover { border-color: var(--ink-600); }
.toggle-card input {
width: 1.375rem; height: 1.375rem;
margin-top: .1rem;
accent-color: var(--brand);
flex: none;
cursor: pointer;
}
.toggle-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.toggle-card:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.toggle-title { display: block; font-family: var(--font-head); font-weight: 600; }
.toggle-meta { font-size: var(--fs-sm); color: var(--text-muted); }
.toggle-plus {
margin-left: auto;
font-family: var(--font-head);
font-weight: 700;
font-size: var(--fs-sm);
color: var(--brand-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* -- inputs with a unit suffix -- */
.input-unit { position: relative; }
.input-unit input { padding-right: 3rem; }
.input-unit .unit {
position: absolute;
right: .875rem; top: 50%;
transform: translateY(-50%);
font-size: var(--fs-sm);
color: var(--text-faint);
pointer-events: none;
}
.calc .field-row--3 { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .calc .field-row--3 { grid-template-columns: repeat(3, 1fr); } }
/* -- wizard nav -- */
.calc-nav {
display: flex;
gap: var(--s-3);
margin-top: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid var(--border);
}
.calc-nav [data-next] { margin-left: auto; }
/* -- result -- */
.result-panel {
background: var(--ink-950);
color: var(--text-on-dark);
border-radius: var(--radius);
padding: clamp(1.5rem, 4vw, 2.25rem);
text-align: center;
}
.result-label {
font-family: var(--font-head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-on-dark-mut);
}
.result-range {
font-family: var(--font-head);
font-size: clamp(1.75rem, 6vw, 3rem);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.05;
color: var(--brand);
margin-top: var(--s-3);
font-variant-numeric: tabular-nums;
}
.result-vat { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-on-dark-mut); }
.result-logistics {
display: inline-flex;
align-items: center;
gap: .45rem;
margin-top: var(--s-4);
padding: .35rem .8rem;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
font-size: var(--fs-xs);
color: var(--text-on-dark-mut);
}
.result-logistics .icon { width: .9rem; height: .9rem; color: var(--brand); }
.summary-list {
display: grid;
gap: 0;
margin-top: var(--s-6);
border-top: 1px solid var(--border);
}
.summary-list > div {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-4);
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid var(--border);
font-size: var(--fs-sm);
}
.summary-list dt { color: var(--text-faint); }
.summary-list dd { margin: 0; font-weight: 600; text-align: right; }
.contact-block {
margin-top: var(--s-8);
padding-top: var(--s-7);
border-top: 2px solid var(--border);
}
.contact-block h3 { font-size: var(--fs-xl); }
.btn--whatsapp {
background: #25D366;
color: #08331A;
border-color: #25D366;
}
.btn--whatsapp:hover { background: #1EBE5A; border-color: #1EBE5A; box-shadow: var(--shadow-2); }
/* WhatsApp is parked, so the button is rendered disabled rather than removed:
it shows the route exists without implying it works today. */
.btn:disabled,
.btn[aria-disabled="true"] {
background: var(--paper-alt-2);
border-color: var(--border);
color: var(--text-faint);
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
/* The country code is painted into the field rather than typed, so the
visitor cannot delete it and we always know what the nine digits mean. */
.input-prefix {
display: flex;
align-items: stretch;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--paper);
overflow: hidden;
}
.input-prefix:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(245, 166, 35, .25);
}
.input-prefix > span {
display: flex;
align-items: center;
padding: 0 .75rem;
background: var(--paper-alt);
border-right: 1px solid var(--border);
color: var(--text-muted);
font-size: var(--fs-base);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.input-prefix > input {
flex: 1 1 auto;
min-width: 0;
border: 0;
border-radius: 0;
background: none;
font-variant-numeric: tabular-nums;
}
.input-prefix > input:focus { box-shadow: none; outline: none; }
.calc-send { margin-top: var(--s-6); }
/* ---------- 24b. Confirmation dialog -------------------------------------
Native