/* ============================================================================ koeln-schloss24.de — THE SHARED DESIGN LANGUAGE. Every page links this file UNEDITED; cohesion lives here, uniqueness lives in the per-page composition of the primitives below. Feel: stahl-kupfer (style-library/stahl-kupfer) — machined, sober, transparent; ruled objects rather than floating cards. Re-themed from that style's gunmetal steel-blue to KÖLN'S VIOLET #6B21A8 (network palette for this domain), with the copper CTA family kept because design-tokens.md §3.4 requires the CTA to be a WARM accent contrasting the primary, contrast-verified as TEXT and not only as a fill. Every colour pair below was COMPUTED, not eyeballed (tools/contrast-check.py). The four surfaces carry a faint violet cast so the neutrals belong to the primary instead of sitting beside it. ========================================================================== */ :root{ /* --- surfaces (faint violet cast: "brushed metal in Köln violet") --- */ --bg:#faf8fd; --surface:#ffffff; --surface-alt:#f2edf8; --steel:#e8e0f2; --line:#dbd2e6; /* decorative hairline only */ --line-strong:#7f7191; /* 3.50:1 on --steel, 4.49:1 on --surface — use when a border is the ONLY signal. The stahl-kupfer value re-hued lands at 2.86:1 on this violet steel and was darkened until it cleared 3:1 on ALL FOUR light grounds. */ --dark:#171122; --dark-2:#221a31; --dark-line:#372a4a; --dark-muted:#bdb0cf; /* --- ink --- */ --text:#1d1826; /* 17.34:1 on --surface */ --muted:#544a63; /* 8.28:1 on --surface — "muted" is chroma, never contrast */ --head:#161020; /* --- brand --- */ --primary:#6B21A8; /* Köln violet · 8.72:1 on --surface, 6.80:1 on --steel */ --primary-hover:#571888; --primary-subtle:#f0e6fa; --on-primary:#ffffff; /* 8.72:1 */ /* --- the ONE reserved accent: the phone CTA --- */ --cta:#b8541c; /* copper · white on it 4.86:1 — a FILL token */ --cta-hover:#9c4415; /* white on it 6.46:1 */ --cta-light:#efb283; /* copper for TEXT ON DARK. stahl-kupfer's #e8a06a is 4.02:1 on THIS primary (it was 4.89:1 on the steel-blue one) — under AA. Lightened until it clears 4.5 on --primary (4.72) and --dark (9.97). */ --cta-ink:#a04716; /* copper for TEXT on any LIGHT band. --cta itself is 4.86:1 on white but only 4.36 on --surface-alt and 3.98 on --steel, so it is a FILL, not a text colour. --cta-ink clears 4.5 on all five light grounds (worst --steel 4.81). */ --on-cta:#ffffff; --dark-3:#2c2240; /* raised surface ON a dark band */ --dark-4:#362a4d; /* hover surface / ghost graphic on dark */ --dark-line-2:#54426f; /* hover border on dark */ --on-dark:#ded4ea; /* body copy on any dark or primary fill (6.11:1 on --primary) */ --tint-2:#e2d6f2; /* pressed/hover tint on light */ --cta-tint:#fdf4ef; /* ground of the info notice + accent hover tint */ --focus:#180f26; /* always paired with a white inner ring */ --danger:#b3261e; --danger-tint:#fdf1f0; --success:#1c6b3f; /* --- personality --- */ --r-xs:2px; --r-sm:4px; --r:8px; --r-lg:14px; --pill:999px; --notch:14px; /* the key-bow corner cut */ --sh-sm:0 1px 2px rgba(23,17,34,.06), 0 2px 6px rgba(23,17,34,.05); --sh:0 6px 18px rgba(23,17,34,.09); --sh-lg:0 18px 44px rgba(23,17,34,.15); --sh-dark:0 18px 44px rgba(0,0,0,.34); --c:1320px; --gut:24px; --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s; --dur-slow:.58s; --tap:44px; --f:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --f-num:ui-monospace,'SF Mono','Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace; } /* ---------------------------------------------------------------- base ---- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--f); font-size:18px; /* A10 floor — never drop to 16px */ line-height:1.7; color:var(--text); background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; text-underline-offset:.18em; } img{max-width:100%;height:auto;display:block} svg{display:block} a{color:var(--primary);text-decoration-thickness:1px} /* THE BUG THIS FIXES: a bare `a:hover` is (0,1,1) and beats `.btn{color:var(--btn-fg)}` (0,1,0), so on hover every button label turned copper — and on .btn--cta that is copper text on a darker-copper wipe, i.e. the label disappears. A link that IS a component owns its own colour; only prose links take the copper hover. (Same specificity trap as `.section--dark a` further down — attribute/state selectors quietly outrank plain class rules.) */ a:not(.btn):not(.callbtn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.telbig):hover{ color:var(--cta-ink)} /* hyphens:auto on a DISPLAY heading produces mid-word breaks that read as a defect ("Schließzylin-" / "der" at 48px). Headings get hyphens:manual with overflow-wrap as the safety net for a compound too long for its column; body copy — where German hyphenation genuinely helps the ragged edge — keeps hyphens:auto. */ h1,h2,h3,h4{color:var(--head);line-height:1.14;letter-spacing:-.018em;font-weight:800; overflow-wrap:break-word;hyphens:manual} p{max-width:68ch;hyphens:auto} ul,ol{margin:0;padding:0} strong{color:var(--head);font-weight:700} ::selection{background:var(--cta);color:#fff} /* one focus treatment that survives EVERY band: white inner ring + dark outer */ :where(a,button,summary,[tabindex]):focus-visible{ outline:none; box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus); border-radius:var(--r-sm); } .section--dark :where(a,button,summary):focus-visible{ box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light); } /* ------------------------------------------------------------ structure --- */ .wrap{max-width:var(--c);margin-inline:auto;padding-inline:var(--gut)} /* The narrow and wide measures move WITH --c, or the deliberate measure change between a normal band and the FAQ band stops reading as a decision. */ .wrap--narrow{max-width:920px} .wrap--wide{max-width:1440px} .section{padding:clamp(58px,7.2vw,104px) 0;position:relative} .section--tight{padding:clamp(40px,4.6vw,64px) 0} .section--alt{background:var(--surface-alt)} .section--surface{background:var(--surface)} .section--dark{background:var(--dark);color:var(--dark-muted)} .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff} /* ROOT-CAUSE FIX: a bare `.section--dark a` is (0,1,1) and silently beat every button's own (0,1,0) colour, so .btn/.callbtn inside a dark band rendered their label in --cta-light — copper-on-copper at ~1.4:1 on the CTA fill. A link that is a BUTTON carries its own colour; only prose links take the dark-band link colour. */ .section--dark a:not(.btn):not(.callbtn):not(.calltab):not(.chip):not(.brand):not(.ftel){ color:var(--cta-light)} .section--dark .lead{color:var(--on-dark)} /* the SIGNATURE band: brushed steel. A material texture (german-design.md §4.3), not a decorative gradient — fine vertical hairlines at 2.5% over a flat tint. */ .section--steel{ background: repeating-linear-gradient(90deg, rgba(107,33,168,.030) 0 1px, rgba(255,255,255,0) 1px 6px), repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, rgba(255,255,255,0) 1px 14px), var(--steel); } .section--dark.section--steel{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 4px), var(--dark); } /* --------------------------------------------------------- typography ----- */ .display{ font-size:clamp(34px,5.6vw,62px);font-weight:800;line-height:1.05; letter-spacing:-.026em;color:var(--head); } .display .l2{display:block;color:var(--primary)} .section--dark .display,.hero--dark .display{color:#fff} .section--dark .display .l2,.hero--dark .display .l2{color:var(--cta-light)} .display--long{font-size:clamp(30px,4.4vw,48px)} .stitle{font-size:clamp(27px,3.3vw,42px);font-weight:800;letter-spacing:-.022em} .h3{font-size:clamp(19px,1.5vw,22px);font-weight:700;letter-spacing:-.012em;line-height:1.28} .lead{font-size:clamp(18px,1.35vw,20.5px);line-height:1.66;color:var(--muted)} .small{font-size:16.5px;line-height:1.6} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* section head — the eyebrow + title + optional lead, three rhythms */ .shead{margin-bottom:clamp(30px,3.4vw,50px);max-width:760px} .shead--center{margin-inline:auto;text-align:center} .shead--split{display:grid;gap:22px clamp(28px,4vw,64px);align-items:end;max-width:none; grid-template-columns:minmax(0,1fr)} @media(min-width:900px){.shead--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}} .shead .stitle+.lead{margin-top:15px} /* eyebrow — variant A: copper key-bit mark + label */ .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800; letter-spacing:.15em;text-transform:uppercase;color:var(--cta-ink);margin-bottom:15px} .section--dark .eyebrow{color:var(--cta-light)} /* the key-bitting mark — 4 teeth at 30x12. Measured: a 7-tooth profile at 26x9 renders as an illegible smear, so the tooth count is capped at what survives at this size. */ .eyebrow::before{content:"";width:30px;height:12px;flex:none;background:currentColor; clip-path:polygon(0 100%,0 42%,20% 42%,20% 8%,40% 8%,40% 58%,60% 58%,60% 22%,80% 22%,80% 70%,100% 70%,100% 100%)} /* eyebrow — variant B: boxed, for use where a rule would be too quiet */ .eyebrow--box{border:1.5px solid var(--line-strong);color:var(--primary); padding:7px 14px;letter-spacing:.13em;font-size:12px} .eyebrow--box::before{display:none} .section--dark .eyebrow--box{border-color:var(--dark-line);color:var(--cta-light)} /* eyebrow — variant C: the pin-tumbler rule. Pins HANG from a shear line rather than standing on a baseline — bottom-anchored bars read as signal-strength bars, which is the wrong object entirely. Top-anchored under a rule reads as a lock cross-section. */ .pinrule{display:flex;align-items:flex-start;gap:5px;height:24px;margin-bottom:16px; padding-top:4px;border-top:2px solid var(--cta);width:45px} .pinrule i{width:4px;background:var(--cta);display:block;border-radius:0 0 2px 2px} .pinrule i:nth-child(1){height:13px}.pinrule i:nth-child(2){height:7px} .pinrule i:nth-child(3){height:17px}.pinrule i:nth-child(4){height:10px} .pinrule i:nth-child(5){height:15px} .section--dark .pinrule{border-top-color:var(--cta-light)} .section--dark .pinrule i{background:var(--cta-light)} /* ------------------------------------------------------------- buttons ---- */ .btn{ --btn-bg:var(--primary); --btn-fg:var(--on-primary); --btn-bg-h:var(--primary-hover); position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px; min-height:var(--tap);padding:14px 26px;border:0;border-radius:var(--r-sm); background:var(--btn-bg);color:var(--btn-fg); font:700 17px/1.2 var(--f);letter-spacing:.005em;text-decoration:none;cursor:pointer; transition:background var(--dur) var(--ease),transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); overflow:hidden;isolation:isolate; } /* The wipe MUST be z-index:-1, not 0. CSS paint order puts a positioned descendant at z-index:0 ABOVE the element's own inline content — so a button whose label is a bare text node (most of them) had its text painted over by the wipe on hover. `.btn>*` cannot rescue it: a text node is not an element and can never be lifted. At -1, and with `isolation:isolate` on .btn keeping it inside this stacking context, the wipe paints above the button's background and below the label, wrapped or not. */ .btn>*{position:relative;z-index:1} .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg-h); transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .btn:hover::before{transform:scaleX(1)} .btn:hover{box-shadow:var(--sh)} .btn:active{transform:translateY(1px)} .btn--cta{--btn-bg:var(--cta);--btn-fg:var(--on-cta);--btn-bg-h:var(--cta-hover)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--primary);--btn-bg-h:var(--primary); box-shadow:inset 0 0 0 1.5px var(--line-strong)} .btn--ghost:hover{color:#fff} .section--dark .btn--ghost{--btn-fg:#fff;--btn-bg-h:#fff;box-shadow:inset 0 0 0 1.5px var(--dark-line)} .section--dark .btn--ghost:hover{color:var(--dark)} .btn--lg{padding:18px 32px;font-size:18.5px} .btn--block{display:flex;width:100%} .btn svg{width:20px;height:20px;flex:none} /* the call button: label above the number, icon disc at the left. Lifted from the Dexon hero treatment, re-coloured to copper. */ .callbtn{ display:inline-flex;align-items:center;gap:14px;min-height:var(--tap); padding:11px 26px 11px 11px;border-radius:var(--pill); background:var(--cta);color:#fff;text-decoration:none; transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .callbtn:hover{background:var(--cta-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-lg)} .callbtn .disc{width:46px;height:46px;flex:none;border-radius:50%;background:rgba(255,255,255,.19); display:grid;place-items:center} .callbtn .disc svg{width:21px;height:21px;stroke:#fff} /* opacity:.86 white over copper blends to #f5e7df = 4.02:1 — under AA for 12px text. Full white is 4.86:1. Never dim text on the accent fill to "soften" it. */ .callbtn .cap{display:block;font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;line-height:1} .callbtn .num{display:block;font-size:21px;font-weight:800;letter-spacing:-.01em;margin-top:3px; font-variant-numeric:tabular-nums} /* Specificity note: `.section--dark a` is (0,1,1) and would otherwise win over a plain `.callbtn--dark` (0,1,0), painting this white-ground button in --cta-light at ~1.9:1. Doubling the class to (0,2,0) is what keeps it readable on a dark band. */ .callbtn.callbtn--dark{background:var(--surface);color:var(--primary)} .callbtn.callbtn--dark:hover{background:var(--surface);color:var(--primary)} .callbtn--dark .disc{background:var(--cta)} .callbtn--dark .cap{color:var(--muted);opacity:1} /* ------------------------------------------------------- icon badges ------ */ .ibadge{width:54px;height:54px;flex:none;border-radius:var(--r);display:grid;place-items:center; background:var(--primary-subtle);color:var(--primary); transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)} .ibadge svg{width:26px;height:26px;stroke-width:1.7} .ibadge--cta{background:var(--cta);color:#fff} .ibadge--dark{background:var(--primary);color:#fff} .ibadge--outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)} .ibadge--round{border-radius:50%} .ibadge--lg{width:70px;height:70px}.ibadge--lg svg{width:32px;height:32px} .ibadge--sm{width:40px;height:40px;border-radius:var(--r-sm)}.ibadge--sm svg{width:20px;height:20px} .section--dark .ibadge{background:var(--dark-3);color:var(--cta-light)} /* --------------------------------------------------------------- cards ---- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(22px,2.2vw,30px);position:relative; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease)} .card:hover{border-color:var(--line-strong);box-shadow:var(--sh);transform:translateY(-3px)} .card h3,.card .h3{margin-bottom:9px} .card p{color:var(--muted);font-size:17px} .section--dark .card{background:var(--dark-2);border-color:var(--dark-line);color:var(--dark-muted)} .section--dark .card:hover{border-color:var(--dark-line-2)} .section--dark .card p{color:var(--dark-muted)} /* the key-bow NOTCH — the style's structural signature: one cut top-right corner. NOTE: clip-path also clips border AND box-shadow, so a notched box can never carry either. Two forms exist, and both are honest about that: .card--notch — a FILLED notched card (no edge). Only legible on a band that contrasts its fill, so it ships on tint/steel/dark bands. .notch/.notch__in — a two-element notched card WITH a hairline edge: the outer box is the line colour, the inner is inset 1px and re-clipped. Elevation on a clipped box must use filter:drop-shadow(), which is applied after clipping and therefore traces the notch; box-shadow would be cut away. */ .card--notch{ clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%); border:0;background:var(--primary-subtle);box-shadow:none; transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease)} .card--notch:hover{background:var(--tint-2);filter:drop-shadow(0 10px 20px rgba(23,17,34,.15))} .section--dark .card--notch{background:var(--dark-2)} .section--dark .card--notch:hover{background:var(--dark-4);filter:none} .notch{--notch-line:var(--line); clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%); background:var(--notch-line);padding:1px; transition:background var(--dur) var(--ease),filter var(--dur) var(--ease)} .notch:hover{--notch-line:var(--line-strong);filter:drop-shadow(0 10px 20px rgba(23,17,34,.14))} .notch__in{ clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% calc(var(--notch) - 1px),100% 100%,0 100%); background:var(--surface);padding:clamp(22px,2.2vw,30px);height:100%} .section--dark .notch{--notch-line:var(--dark-line)} .section--dark .notch:hover{--notch-line:var(--dark-line-2);filter:none} .section--dark .notch__in{background:var(--dark-2)} /* the COPPER INLAY — a 3px leading edge marking the emphasis card in a set */ .card--inlay{border-top:3px solid var(--cta)} .card--lead{background:var(--primary);border-color:var(--primary);color:var(--on-dark)} .card--lead h3,.card--lead .h3{color:#fff} .card--lead p{color:var(--on-dark)} /* -------------------------------------------------------------- grids ----- */ .grid{display:grid;gap:clamp(16px,1.7vw,24px)} .g2{grid-template-columns:minmax(0,1fr)} .g3{grid-template-columns:minmax(0,1fr)} .g4{grid-template-columns:minmax(0,1fr)} @media(min-width:640px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:980px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}} .split{display:grid;gap:clamp(28px,4vw,60px);align-items:center;grid-template-columns:1fr} @media(min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .split--wide-l{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)} .split--wide-r{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)} .split--flip>*:first-child{order:2} } /* --------------------------------------------------------------- chips ---- */ .chips{display:flex;flex-wrap:wrap;gap:9px;padding:0;list-style:none} .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--pill); background:var(--surface);border:1px solid var(--line);font-size:16px;font-weight:600;color:var(--text); transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .chip:hover{border-color:var(--cta);background:var(--cta-tint)} .chip--solid{background:var(--primary-subtle);border-color:transparent;color:var(--primary)} .section--dark .chip{background:var(--dark-3);border-color:var(--dark-line);color:var(--on-dark)} /* ------------------------------------------------------- image slots ------ */ .imgph{position:relative;display:block;width:100%;background:var(--steel);border-radius:var(--r); overflow:hidden;color:var(--muted)} .imgph img{width:100%;height:100%;object-fit:cover} .imgph--notch{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);border-radius:0} .ratio-16x9{aspect-ratio:16/9}.ratio-4x3{aspect-ratio:4/3}.ratio-1x1{aspect-ratio:1/1} .ratio-3x4{aspect-ratio:3/4}.ratio-3x2{aspect-ratio:3/2} /* ------------------------------------------------------------- motion ----- */ /* TRANSFORM-ONLY, and this is a correctness decision, not a taste one. `.reveal{opacity:0}` with a JS-only `.in` leaves every below-fold element at zero opacity in any renderer that does not scroll — which is every headless audit. axe then computes the foreground alpha as 0 and reports serious colour-contrast violations on perfectly legible text, and a reader with scripting off sees a blank page. The rise alone carries the reveal; the text is opaque from the first paint. */ .reveal{transform:translateY(18px); transition:transform var(--dur-slow) var(--ease)} .reveal.in{transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* one-shot clip reveal for images — fires from the same observer */ img.wipe,.imgph.wipe{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)} .wipe.in{clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} .wipe{clip-path:none} } /* ======================================================================== */ /* SHARED CHROME — identical on every page (navbar, call bar, to-top, */ /* footer). Built once here so the four pages cannot drift. */ /* ======================================================================== */ /* --- topbar: the number is ALWAYS visible, never behind the hamburger --- */ .topbar{background:var(--dark);color:var(--dark-muted);font-size:15.5px} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:var(--tap);flex-wrap:wrap} .topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:9px; min-height:var(--tap);font-weight:600} .topbar a:hover{color:var(--cta-light)} .topbar svg{width:17px;height:17px;stroke:var(--cta-light);flex:none} .topbar .tb-note{display:none} @media(min-width:760px){.topbar .tb-note{display:inline-flex;align-items:center;gap:9px}} /* --- header --- */ header{position:sticky;top:0;z-index:120;background:var(--surface); border-bottom:1px solid var(--line);transition:box-shadow var(--dur) var(--ease)} header.stuck{box-shadow:0 6px 20px rgba(23,17,34,.10)} .navrow{display:flex;align-items:center;gap:18px;min-height:74px} .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto} .brand .bmark{width:40px;height:40px;flex:none;border-radius:var(--r-sm);background:var(--primary); display:grid;place-items:center} .brand .bmark svg{width:23px;height:23px;stroke:var(--cta-light)} .brand b{font-size:20px;font-weight:800;color:var(--head);letter-spacing:-.02em;line-height:1.1} @media(max-width:400px){ /* the lockup alone was 229px, overflowing a 320px viewport once the burger and gutters were counted. */ .brand b{font-size:16.5px}.brand span{font-size:11px} .brand .bmark{width:34px;height:34px}.brand .bmark svg{width:19px;height:19px} .navrow{gap:10px} } .brand span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .nav{display:none;gap:4px;list-style:none} .nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 11px; font-size:16.2px;font-weight:600;color:var(--text);text-decoration:none;border-radius:var(--r-sm); white-space:nowrap; transition:color var(--dur) var(--ease),background var(--dur) var(--ease)} .nav a:hover,.nav a[aria-current="page"]{color:var(--primary);background:var(--primary-subtle)} .navcall{display:none} .navcall span{white-space:nowrap} /* raised from 1040: with four items plus the brand and the call button, the bar only genuinely fits from ~1120px. Below that the burger is the honest answer. */ @media(min-width:1120px){.nav{display:flex}.navcall{display:inline-flex} .brand b{white-space:nowrap}} /* flex:none is load-bearing — as a flex item in .navrow the burger shrank to 38px wide at tablet widths, i.e. under the 44px floor for the ONE control that opens the menu. Width alone does not protect a flex item. */ .burger{display:inline-grid;place-items:center;flex:none; width:var(--tap);height:var(--tap);min-width:var(--tap); border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer} .burger svg{width:24px;height:24px;stroke:var(--head)} @media(min-width:1120px){.burger{display:none}} .mobmenu{display:none;border-top:1px solid var(--line);background:var(--surface)} .mobmenu.open{display:block} .mobmenu ul{list-style:none;padding:10px 0 18px} .mobmenu a{display:flex;align-items:center;min-height:52px;font-size:17.5px;font-weight:600; color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)} .mobmenu a:hover{color:var(--cta-ink)} /* --- sticky mobile call bar (C2: class matches (call|tel|phone|anruf) + position:fixed) --- */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none; background:var(--surface);border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(23,17,34,.17);padding:9px 14px calc(9px + env(safe-area-inset-bottom))} .callbar a{display:flex;align-items:center;justify-content:center;gap:11px;min-height:52px; border-radius:var(--r-sm);background:var(--cta);color:#fff;text-decoration:none; font-size:18.5px;font-weight:800;letter-spacing:.01em} .callbar a svg{width:22px;height:22px;stroke:#fff;flex:none} @media(max-width:1119px){.callbar{display:block}body{padding-bottom:84px}} /* --- scroll to top --- */ .totop{position:fixed;right:16px;bottom:96px;z-index:140;width:48px;height:48px; display:grid;place-items:center;border:1px solid var(--line);border-radius:50%; background:var(--surface);color:var(--primary);cursor:pointer; opacity:0;visibility:hidden;transform:translateY(9px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease), visibility var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .totop.show{opacity:1;visibility:visible;transform:none} .totop:hover{box-shadow:var(--sh);border-color:var(--line-strong)} .totop svg{width:22px;height:22px;stroke:currentColor} @media(min-width:1120px){.totop{bottom:24px}} /* --- footer --- */ footer{background:var(--dark);color:var(--dark-muted);padding-top:clamp(48px,5.4vw,76px)} footer h3{color:#fff;font-size:17px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:17px} .fgrid{display:grid;gap:34px clamp(24px,3vw,48px);grid-template-columns:1fr} @media(min-width:700px){.fgrid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}} footer ul{list-style:none} /* 44px floor on footer links too: A11 only WARNS on non-call controls, but this audience is older and often one-handed on a phone, so the floor is worth the height. */ footer li{margin-bottom:0} footer a{color:var(--dark-muted);text-decoration:none; display:inline-flex;align-items:center;min-height:var(--tap)} footer a:hover{color:var(--cta-light);text-decoration:underline} footer .ftel{display:inline-flex;align-items:center;gap:11px;min-height:var(--tap); color:#fff;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums} footer .ftel svg{width:21px;height:21px;stroke:var(--cta-light);flex:none} .fbase{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--dark-line); padding:22px 0 26px;display:flex;flex-wrap:wrap;gap:10px 22px; align-items:center;justify-content:space-between;font-size:15.5px} .fbase ul{display:flex;flex-wrap:wrap;gap:2px 20px} .fbase li{margin:0} .fbase a{min-height:var(--tap)} /* skip link — visible only on focus, above the sticky header */ .skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--cta);color:#fff; padding:13px 20px;font-weight:700;text-decoration:none;border-radius:0 0 var(--r-sm) 0} .skip:focus{left:0;color:#fff} /* footer lockup reuses .brand with dark-band colours */ .brand--foot b{color:#fff} .brand--foot span span{color:var(--dark-muted)} .brand--foot .bmark{background:var(--dark-2);border:1px solid var(--dark-line)} /* ======================================================================== */ /* Two late primitives, both from the hotlock/dexon reads. */ /* ======================================================================== */ /* THE KEYPAD GRID — the layout lines ARE the design. One `gap:1px` over a line- coloured ground, cells painted in the surface colour, so the rules are drawn by the gap rather than by per-cell borders (the source hand-tuned border-width per cell at every breakpoint; this needs no arithmetic and reflows for free). Reads unmistakably as security hardware — the closest thing this style has to a trade-specific structure. Also the mechanism behind the segmented assurance slab: three cells at gap:2px read as ONE slab, not three cards. */ .keypad{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .keypad>*{background:var(--surface);padding:clamp(20px,2.2vw,30px);margin:0} .keypad--tight{gap:2px;background:var(--line-strong);border:0} .keypad--cta{gap:2px;background:var(--cta-hover);border:0} .keypad--cta>*{background:var(--cta);color:#fff} .keypad--cta>* :where(h2,h3,h4,.h3,strong){color:#fff} .section--dark .keypad{background:var(--dark-line);border-color:var(--dark-line)} .section--dark .keypad>*{background:var(--dark-2)} @media(min-width:640px){.keypad--2{grid-template-columns:repeat(2,1fr)} .keypad--3{grid-template-columns:repeat(2,1fr)}.keypad--4{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.keypad--3{grid-template-columns:repeat(3,1fr)} .keypad--4{grid-template-columns:repeat(4,1fr)}.keypad--6{grid-template-columns:repeat(6,1fr)}} /* PHONE NUMBER AS DISPLAY TYPE — no button chrome at all. On a page where the call IS the only conversion channel, a huge tappable number outranks another square button, and it still clears the 44px target by a wide margin. */ .telbig{display:inline-flex;align-items:center;gap:14px;text-decoration:none; font-size:clamp(30px,4.4vw,54px);font-weight:800;line-height:1.06; letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--head); transition:color var(--dur) var(--ease)} .telbig:hover{color:var(--cta-ink)} .telbig svg{width:.72em;height:.72em;flex:none;stroke:var(--cta);stroke-width:1.8} .section--dark .telbig{color:#fff} .section--dark .telbig:hover{color:var(--cta-light)} .section--dark .telbig svg{stroke:var(--cta-light)} /* THE CALL TAB — a copper block that reads as die-cut out of the image above it: one rounded corner, zero top radius, and a negative pull so it bites into the photo's bottom edge. From the `blocks` kit, where it is a generic tab; the recon flagged it as "the best-shaped button in the corpus and it wants a phone number", so here it only ever carries the number. Unlike .btn it has NO hover wipe — design-tokens.md §5 forbids animating the CTA; the hover is colour only. */ .calltab{ display:inline-flex;align-items:center;gap:13px;position:relative;z-index:2; margin-top:-34px;padding:20px 30px 20px 26px; border-radius:0 var(--r-lg) 0 0; background:var(--cta);color:#fff;text-decoration:none; font-size:clamp(19px,1.7vw,24px);font-weight:800;letter-spacing:-.01em; font-variant-numeric:tabular-nums;min-height:var(--tap); transition:background var(--dur) var(--ease)} .calltab:hover{background:var(--cta-hover);color:#fff} .calltab svg{width:1.05em;height:1.05em;flex:none;stroke:currentColor;stroke-width:1.9} .calltab .cap{display:block;font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;line-height:1;margin-bottom:4px} /* TAP-TARGET FLOOR for every click-to-call, whatever a page happens to call it. A11 measures the rendered box, so a number styled as pure display type still has to clear 44px. min-height only bites on a flex/block box, hence the display switch; verified that no tel: link on any page sits inline inside a

, so this is safe. */ /* :not(.navcall) is load-bearing: this rule is (0,1,1) and would otherwise beat `.navcall{display:none}` (0,1,0) below 1040px, resurrecting the desktop call button and pushing the burger off-screen on every phone <=390px. */ a[href^="tel:"]:not(.navcall){display:inline-flex;align-items:center;min-height:var(--tap)} /* ============================================================================ stahl-kupfer — SHARED LANGUAGE, PART 2. Section + layout primitives and the widget set, all drawn from the recon catalogue (`_recon-catalogue.md`). Neutral, composable bricks — never finished templates. Every value is a token; nothing here introduces a new theme value. ========================================================================== */ /* ------------------------------------------------------------------------- */ /* A · THE SEAM HELPERS — the overlap grammar, made hard to get wrong. */ /* Rule 1 of the style is "every other band has exactly one element crossing */ /* its boundary". Two traps make it easy to botch by hand: the crossing */ /* element must be the FIRST or LAST child of its band (pulling up a mid- */ /* section element just collides with the heading above it), and it needs a */ /* z-index or the next band paints over it. These encode both. */ /* ------------------------------------------------------------------------- */ .seam-up{position:relative;z-index:2;margin-top:calc(-1 * var(--seam,54px))} .seam-down{position:relative;z-index:2;margin-bottom:calc(-1 * var(--seam,54px))} .seam-sm{--seam:32px} .seam-lg{--seam:82px} /* A .seam-down is only half the mechanism and on its own it does NOTHING: the pull is smaller than the band's own bottom padding, so the element never reaches the seam. It takes THREE classes, and all three are required: .section--hang on the band the element hangs OUT of (drops its bottom padding) .seam-down on that band's LAST child .section--catch on the following band (makes room for the overhang) The .seam-up counterpart needs only .seam-up on the next band's FIRST child, plus enough bottom padding on the band above for the element to sit in. */ .section--hang{padding-bottom:0} .section--catch{padding-top:calc(clamp(58px,7.2vw,104px) + var(--seam,54px))} @media(max-width:699px){ /* below 700px the bands are too short for a crossing element to read as deliberate — it just looks like a mistake. Collapse them. */ .seam-up,.seam-down{margin-top:0;margin-bottom:0} .section--catch{padding-top:clamp(58px,7.2vw,104px)} } /* ------------------------------------------------------------------------- */ /* B · SECTION + LAYOUT PRIMITIVES */ /* ------------------------------------------------------------------------- */ /* B1 · DIPTYCH — zero-gutter two-column band, each half carrying its OWN fill, meeting at the exact centreline with no divider. Off-centre text comes from asymmetric percentage padding, so it stays optically centred at every width with no media query for position. (hotlock: three visually different bands from one grid rule.) */ .diptych{display:grid;grid-template-columns:minmax(0,1fr)} .diptych__half{padding:clamp(38px,5vw,72px) var(--gut)} @media(min-width:900px){ .diptych{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .diptych__half{padding:clamp(52px,6vw,92px) 8% clamp(52px,6vw,92px) 14%} .diptych__half+.diptych__half{padding:clamp(52px,6vw,92px) 14% clamp(52px,6vw,92px) 8%} } .diptych__half--dark{background:var(--dark);color:var(--dark-muted)} .diptych__half--dark :where(h2,h3,h4){color:#fff} .diptych__half--steel{background:var(--steel)} .diptych__half--primary{background:var(--primary);color:var(--on-dark)} .diptych__half--primary :where(h2,h3,h4){color:#fff} /* steel ground so a slow or failed image reads as an empty slot, not a black void */ .diptych__half--media{padding:0;position:relative;min-height:320px;background:var(--steel)} .diptych__half--media img,.diptych__half--media .imgph{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0} /* B2 · LEDGER — one hairline frame around rows whose narrow cell is a label tab and whose wide cell carries the content. A ruled register reads as a record; a card grid reads as marketing. Right for Öffnungszeiten, coverage, liability splits, credential lists. (dexon: 20% white label cell / 80% filled cell.) */ .ledger{border:1px solid var(--line);background:var(--surface)} .ledger__row{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)} .ledger__row:first-child{border-top:0} .ledger__k{padding:16px clamp(16px,2vw,24px);font-weight:700;color:var(--head); background:var(--surface-alt);font-size:16.5px;display:flex;align-items:center} .ledger__v{padding:16px clamp(16px,2vw,24px);color:var(--muted);font-size:16.8px;line-height:1.55} @media(min-width:700px){ .ledger__row{grid-template-columns:minmax(180px,.26fr) 1fr} .ledger__k{border-right:1px solid var(--line)} } .ledger--dark{border-color:var(--dark-line);background:var(--dark-2)} .ledger--dark .ledger__row{border-top-color:var(--dark-line)} .ledger--dark .ledger__k{background:var(--dark-3);color:#fff;border-right-color:var(--dark-line)} .ledger--dark .ledger__v{color:var(--dark-muted)} /* B3 · SIDE RAIL — a sticky column against a single-file stack. The spine of a long service page: the number stays reachable through explanatory copy. Single-viewport sticky only — never a multi-viewport scroll sequence. */ .rail{display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:1fr;align-items:start} @media(min-width:1000px){ .rail{grid-template-columns:minmax(0,.4fr) minmax(0,1fr)} .rail__side{position:sticky;top:108px} .rail--right .rail__side{order:2} } .rail__main{display:grid;gap:clamp(30px,3.6vw,52px)} /* B4 · OFFSET GRID — hand-placed masonry rhythm with zero JS and no library. Every nth item drops, so the grid reads composed rather than tabulated. (ekvator built this with presentational spacer divs; nth-child is cleaner.) */ .offgrid{display:grid;gap:clamp(16px,1.8vw,26px);grid-template-columns:minmax(0,1fr);align-items:start} @media(min-width:640px){ .offgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .offgrid>*:nth-child(2n){margin-top:clamp(20px,3vw,44px)} } @media(min-width:980px){ .offgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .offgrid--3>*:nth-child(2n){margin-top:0} .offgrid--3>*:nth-child(3n-1){margin-top:clamp(24px,3.4vw,52px)} } /* B5 · PEEK RAIL — user-driven horizontal scroll with the next card bleeding off the edge as the affordance. scroll-snap, NOT an auto-carousel: nothing moves until the reader moves it, and every card is keyboard-reachable. */ .peek{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:14px;scrollbar-width:thin} .peek>*{flex:0 0 clamp(250px,74vw,330px);scroll-snap-align:start} @media(min-width:760px){.peek>*{flex-basis:330px}} .peek::-webkit-scrollbar{height:8px} .peek::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--pill)} .peek::-webkit-scrollbar-track{background:var(--surface-alt)} /* B6 · MOSAIC — one tall image beside two stacked halves. An asymmetric 1+2 composition out of a plain two-column grid. */ .mosaic{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)} @media(min-width:700px){.mosaic{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}} .mosaic__col{display:grid;gap:14px;grid-template-rows:1fr 1fr} .mosaic .imgph{height:100%} .mosaic--flip>*:first-child{order:2} /* B7 · COMPARE — a static two-up with a shared centre rule. This is the LEGAL form of a before/after: the source templates build that with , which the validator hard-fails. Nothing here is interactive. */ .compare{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line); background:var(--surface)} .compare__side{padding:clamp(22px,2.6vw,34px)} .compare__side+.compare__side{border-top:1px solid var(--line)} @media(min-width:760px){ .compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .compare__side+.compare__side{border-top:0;border-left:1px solid var(--line)} } .compare__tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:13px; font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase} .compare__side--a .compare__tag{color:var(--success)} .compare__side--b .compare__tag{color:var(--danger)} /* B8 · TIMELINE — vertical connected steps. Order matters, so a stepper, not a grid. The connector is a pseudo-element so no extra markup carries it. */ .timeline{list-style:none;display:grid;gap:clamp(20px,2.4vw,32px);counter-reset:tl} .timeline>li{position:relative;padding-left:64px;counter-increment:tl} .timeline>li::before{content:counter(tl,decimal-leading-zero);position:absolute;left:0;top:0; width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:var(--surface);color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--line-strong); font:800 14px/1 var(--f-num);letter-spacing:.02em} .timeline>li::after{content:"";position:absolute;left:21.5px;top:52px;bottom:calc(-1 * clamp(20px,2.4vw,32px)); width:1px;background:var(--line)} .timeline>li:last-child::after{display:none} .section--dark .timeline>li::before{background:var(--dark-2);color:var(--cta-light); box-shadow:inset 0 0 0 1.5px var(--dark-line)} .section--dark .timeline>li::after{background:var(--dark-line)} /* B9 · STEPPER — the horizontal counterpart, for a sibling page that must not repeat the timeline's shape. */ .stepper{list-style:none;display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:minmax(0,1fr); counter-reset:st} @media(min-width:820px){.stepper{grid-template-columns:repeat(4,minmax(0,1fr))}} .stepper>li{counter-increment:st;position:relative;padding-top:56px} .stepper>li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0; width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center; background:var(--primary);color:#fff;font:800 14px/1 var(--f-num)} .stepper>li::after{content:"";position:absolute;left:52px;top:20px;right:0;height:1px; background:var(--line)} .stepper>li:last-child::after{display:none} @media(max-width:819px){.stepper>li::after{display:none}} /* B10 · NOTICE — a real callout, never a paragraph. --danger is the safety register (gas, electrical, 110/112); --info carries the copper. */ .notice{border:1px solid var(--danger);border-left-width:5px;background:var(--danger-tint); padding:clamp(22px,2.6vw,34px);border-radius:var(--r-sm)} .notice__head{display:flex;align-items:center;gap:13px;margin-bottom:12px} .notice__ic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--danger);color:#fff} .notice__ic svg{width:22px;height:22px;stroke:currentColor} .notice h2,.notice h3,.notice .h3{color:var(--danger)} .notice--info{border-color:var(--cta);background:var(--cta-tint)} .notice--info .notice__ic{background:var(--cta)} .notice--info :where(h2,h3,.h3){color:var(--cta-ink)} /* B11 · STAT RAIL — static figures only. The sources animate these with odometers; counters are on the banlist and an invented figure breaks iron rule 4, so a figure appears here only if the partner can defend it. */ .stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}} .stats>div{background:var(--surface);padding:clamp(20px,2.4vw,30px)} .stats b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--primary); letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.05} .stats span{display:block;margin-top:7px;font-size:16px;color:var(--muted);line-height:1.4} .section--dark .stats{background:var(--dark-line);border-color:var(--dark-line)} .section--dark .stats>div{background:var(--dark-2)} .section--dark .stats b{color:var(--cta-light)} .section--dark .stats span{color:var(--dark-muted)} /* B12 · INDEX ROWS — the hover-flood service index. Three independent sources converged on this shape, and it is the answer to "never a bare