/* ============================================================
nquartic — Website layout, glass UI, motion, responsive
Runs on the dark ground throughout. Content sits above a
fixed WebGL water canvas; glass panels let the water show.
============================================================ */
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-h);
-webkit-text-size-adjust: 100%;
overflow-x: clip; /* never allow sideways scrolling, even if a child overshoots */
overscroll-behavior-x: none; /* kill the horizontal rubber-band/jitter on touch */
background: var(--nq-ink); /* dark ground lives here so the negative-z fluid shows over it */
}
:root { --header-h: 76px; --wrap: 1160px; }
body {
margin: 0;
background: transparent; /* moved to ; transparent here so the negative-z fluid is visible */
color: var(--fg1);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.6;
overflow-x: clip; /* clip (not hidden) so position:sticky keeps working */
overscroll-behavior-x: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; }
/* ---------- Scroll-snap removed (user request): continuous, free scrolling on every
window size; the page no longer auto-jumps to fixed section positions. Sections keep
their 100vh min-height, but you can stop anywhere. ---------- */
/* ---------- Flowing water background ---------- */
#fluid, #fluid-fallback {
position: fixed; inset: 0; width: 100%; height: 100%;
display: block; pointer-events: none;
}
#fluid-fallback { z-index: -3; background: var(--nq-grad-dark); }
#fluid {
z-index: -2; opacity: 1;
/* dark brand ground shows through the transparent areas of the fluid */
background: radial-gradient(120% 120% at 50% 36%, #142231 0%, #0E1318 56%, #090c10 100%);
}
/* cinematic vignette + readability scrim over the fluid, below the content */
#fluid-vignette, #fluid-scrim { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
#fluid-vignette { background: radial-gradient(135% 108% at 50% 50%, transparent 42%, rgba(7,10,14,0.82) 100%); mix-blend-mode: multiply; }
#fluid-scrim { background: rgba(9,12,16,0.26); }
/* content sits above the now negative-z fluid via normal flow. We deliberately DON'T give
`main` a z-index: that stacking context would stop the Mission video (mix-blend: screen)
from blending with the fluid. The header keeps its own z-index (raised below to 50) so it
still floats above every section, including #marke's z-40 carousel arrows. */
.site-header, main, .site-footer { position: relative; }
/* ============================================================
Shared layout
============================================================ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.wrap.narrow { max-width: 880px; }
.section {
position: relative;
/* uniform vertical rhythm: every section pair gets the same gap (2× this padding),
independent of content height. (Replaces the old 100vh-centred model whose visual
gaps shrank as content grew taller.) */
padding: clamp(110px, 18vh, 220px) 0;
display: flex; align-items: center;
}
/* only the hero stays a full screen (the landing); all other sections flow at the
uniform rhythm above */
.hero { min-height: 100vh; min-height: 100svh; }
.section.center { text-align: center; }
.section.center .wrap { display: flex; flex-direction: column; align-items: center; }
/* ============================================================
Typography
============================================================ */
.eyebrow {
font-family: var(--font-ui); font-weight: 600; font-size: 18px;
letter-spacing: .2em; text-transform: uppercase; color: var(--hilite);
margin: 0 0 20px;
}
.statement {
font-family: var(--font-display); font-weight: var(--fw-display);
text-transform: uppercase; letter-spacing: .05em; line-height: 1.06;
font-size: clamp(30px, 4.6vw, 60px); margin: 0; text-wrap: balance;
color: var(--fg1); text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.statement.big { font-size: clamp(34px, 6vw, 84px); letter-spacing: .04em; }
.statement.small { font-size: clamp(26px, 3.4vw, 40px); }
/* eyebrows stay steel-blue (--hilite); the highlighted words in headlines/leads/pulls
are the green accent (--accent) → the brand logic "eyebrow blue, highlight green" */
.statement .hi, .pull .hi, .lead .hi, .kontakt-sub .hi { color: var(--accent); }
/* superscript four in the n⁴ wordmark-as-text (uses the Dosis digit, raised & shrunk) */
.statement sup, .eyebrow sup { font-size: .56em; vertical-align: super; line-height: 0; }
.lead {
font-size: clamp(18px, 2.1vw, 23px); font-weight: 400; color: var(--fg2);
line-height: 1.55; max-width: 46ch; margin: 28px 0 0;
}
.lead.big { font-size: clamp(20px, 2.6vw, 30px); color: var(--fg1); max-width: 24ch; }
.center .lead { margin-left: auto; margin-right: auto; }
/* hero lead — drei manuell umbrochene, gleichmäßige Zeilen; die Schriftgröße
läuft mit der Teaser-Statement-Breite mit (img = clamp(280px,46vw,560px),
~53 Zeichen je Zeile bei Dosis ≈ .42em → 46vw/53/.42 ≈ 2.07vw, Cap ≈ 25px),
sodass die rechte Textkante ≈ rechte Statement-Kante */
/* längerer Fließtext (kein manueller Umbruch mehr) — Breite an der Teaser-
Statement-Breite orientiert, damit er als kompakter Block darunter sitzt */
.hero .lead { font-size: clamp(18px, 1.9vw, 24px); max-width: clamp(320px, 44vw, 560px);
margin-top: clamp(40px, 5.5vh, 64px); }
@media (max-width: 640px) { .hero .lead { max-width: 42ch; } }
.body { font-size: clamp(16px, 1.4vw, 18px); color: var(--fg2); max-width: 64ch; margin: 22px 0 0; }
.body.strong { color: var(--fg1); font-weight: 500; }
.pull {
font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
letter-spacing: .04em; line-height: 1.2; font-size: clamp(22px, 2.8vw, 34px);
color: var(--fg1); margin: 40px 0 0; max-width: 22ch; text-wrap: balance;
}
.hint { font-family: var(--font-ui); font-size: 14px; letter-spacing: .04em; color: var(--fg3); margin: 18px 0 0; }
/* About-us (#marke) — a wider lead paragraph, then a 3-card glass carousel (card stack).
Der Karten-Stack nutzt die volle Desktop-Breite (Wrap auf 1380 geweitet, Layout 1280
→ Frontkarte ~934px): Kacheln flacher, weniger Leerfläche, Founder-Foto wirkt größer.
Der Intro-Absatz behält seine lesbare Zeilenlänge (eigene 1040px-Deckelung). */
#marke .wrap { max-width: 1380px; } /* Randabstand kommt aus dem .wrap-Padding */
.about-layout { width: 100%; max-width: 1280px; margin: clamp(26px, 4vh, 46px) auto 0; /* Abstand wie .kontakt-sub */
display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 30px); text-align: left; }
.about-intro { font-size: clamp(20px, 2.7vw, 28px); line-height: 1.55; color: var(--fg2);
text-align: center; max-width: 1040px; margin: 0 auto clamp(4px, 1vh, 12px); }
/* --- card-stack carousel: front card centred, the other two peek symmetrically behind;
green chevron arrows (overlaid at the edges) cycle the focus. Dimensional layering
(z-index + elevation) + glass; expo-out easing for a premium, calm swap. --- */
/* the stack spans the full width of the intro text above it (= .about-layout, 820px),
so the OUTER edges of the peeking back cards line up with the text edges */
.about-stack { position: relative; width: 100%; margin-top: clamp(6px, 1.4vh, 18px); }
/* keep the slide-up entrance but NOT the opacity fade: an ancestor with opacity<1 suppresses
the cards' backdrop-filter (the glass), which made the front card load transparent for ~1s */
.about-stack.reveal { opacity: 1; }
.about-viewport { position: relative; } /* arrows centre on the cards, not on the dots below */
.about-cards { position: relative; width: 100%; touch-action: pan-y; } /* horizontal drag = swipe gesture (JS); vertical pan still scrolls the page */
.about-cards:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: var(--r-lg); }
.about-card {
position: absolute; left: 50%; top: 0; box-sizing: border-box;
width: 73%; padding: clamp(28px, 3vw, 40px) clamp(28px, 3.2vw, 44px); /* 73% → back outer edges reach the text edges */
transform: translateX(-50%) scale(1);
transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .34s ease, box-shadow .42s ease, border-color .42s ease;
}
/* die beiden reinen Textkacheln sind SCHMALER als die Founder-Kachel, damit der
Text sie füllt (halbleer wirkte unfertig; 2-3 Leerzeilen unten sind ok). Die
Texte sind unterschiedlich lang → JE Kachel eigene Breite (empirisch auf die
von der Founder-Kachel vorgegebene Einheitshöhe eingemessen). Klassen statt
[data-rel] — rel wechselt beim Durchblättern! */
.about-card-wandel { width: 44%; }
.about-card-mindset { width: 51%; }
.about-card-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2.2vw, 26px);
letter-spacing: .08em; line-height: 1.18; text-transform: uppercase; color: var(--hilite);
margin: 0 0 clamp(12px, 1.8vh, 18px); } /* enlarged + LIGHT blue card headline (thin, like the #bedeutung .ps-title) */
.about-card p { margin: 0; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.62; color: var(--fg2); }
.about-card[data-rel="0"] { z-index: 30; opacity: 1; transform: translateX(-50%) scale(1);
border-color: rgba(255,255,255,0.20); box-shadow: 0 30px 64px rgba(0,0,0,0.50); }
/* the two behind peek a touch more and sit paler so they don't pull focus from the front card */
.about-card[data-rel="1"] { z-index: 12; opacity: .32; transform: translateX(-26.5%) scale(.9); cursor: pointer; }
/* bei VIER Karten: rel 1 = rechts-Peek, rel 3 = links-Peek (beide klickbar),
rel 2 = ganz hinten/unsichtbar */
.about-card[data-rel="3"] { z-index: 12; opacity: .32; transform: translateX(-73.5%) scale(.9); cursor: pointer; }
.about-card[data-rel="2"] { z-index: 6; opacity: 0; transform: translateX(-50%) scale(.86); pointer-events: none; }
/* Die Peek-Transforms sind %-Werte der EIGENEN Kachelbreite und auf die 73%-
Kacheln (Punkt + Founder = Default-Werte) geeicht. Damit die schmaleren
Textkacheln hinten IMMER gleich weit links/rechts hinausragen, liegen ihre
Außenkanten per eigener Formel auf den Stack-Außenkanten: rechts t=0.5/f−0.95,
links t=−0.5/f−0.05 (f = Breitenanteil, Scale .9) */
.about-card-wandel[data-rel="1"] { transform: translateX(18.64%) scale(.9); }
.about-card-mindset[data-rel="1"] { transform: translateX(3.04%) scale(.9); }
.about-card-wandel[data-rel="3"] { transform: translateX(-118.64%) scale(.9); }
.about-card-mindset[data-rel="3"] { transform: translateX(-103.04%) scale(.9); }
/* --- "Auf den Punkt gebracht"-Karte: Kurztext mit inline eingebundener
nquartic-Wortmarke (reuse .bridge-mark, baseline-ausgerichtet) + 2×2-
Punkteliste mit führenden grünen Haken (keine Unterkacheln); Text bei
Umbruch linksbündig --- */
/* die Kachel als Flex-Spalte: Titel+Text oben, die Liste zentriert im Restraum;
translateY = halbe untere Kachel-Polsterung, damit der Abstand Text→Liste
EXAKT dem Abstand Liste→Kachelkante entspricht (Desktop; mobil füllt der
Inhalt die Kachel → dort natürlicher Fluss) */
.about-card-punkt { display: flex; flex-direction: column; }
.punkt-list { list-style: none; margin: auto 0; padding: 0;
transform: translateY(calc(clamp(28px, 3vw, 40px) / 2));
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vh, 18px) clamp(20px, 2.6vw, 38px); }
.punkt-list li { display: flex; align-items: flex-start; gap: 12px; text-align: left;
font-family: var(--font-ui); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4; color: var(--fg1); } /* = Textgröße darüber (.about-card p) */
.punkt-check { flex: none; margin-top: -.02em; color: var(--accent); display: inline-flex; }
.punkt-check svg { width: clamp(24px, 2.2vw, 30px); height: auto; display: block; } /* größerer grüner Haken */
@media (max-width: 640px) {
.about-card-punkt { display: block; }
.punkt-list { margin: clamp(16px, 2.4vh, 26px) 0 0; transform: none;
grid-template-columns: 1fr; gap: 11px; }
}
.about-arrow { position: absolute; top: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0; border-radius: 50%; color: var(--accent); cursor: pointer; z-index: 40;
transform: translateY(-50%); transition: color .18s ease, background .18s ease, transform .18s ease; }
/* Pfeile sitzen KNAPP AUSSERHALB der genutzten Kachelfläche (= Stack-Außenkanten,
auf denen die Peek-Kanten liegen); das max() hält sie bei schmalen Viewports
im sichtbaren Bereich (nie weiter raus als das Wrap-Padding erlaubt) */
.about-arrow--prev { left: max(-52px, calc(10px - clamp(20px, 5vw, 64px))); }
.about-arrow--next { right: max(-52px, calc(10px - clamp(20px, 5vw, 64px))); }
/* enlarge the invisible tap target — generously ABOVE/BELOW the button (so a touch that
lands a little too high/low still hits the arrow, not the page edge beside it), but only
a little sideways so the hit area never reaches past the screen edge (which would cause
horizontal overflow / a stray horizontal scrollbar on mobile). Visual button stays 44px. */
.about-arrow::before { content: ""; position: absolute; inset: -42px -10px; }
.about-arrow:hover { color: #74d3ba; background: rgba(88,184,160,0.12); }
.about-arrow:active { transform: translateY(-50%) scale(.9); }
.about-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* pagination dots — white, the active one green; the green moves as you click */
.about-dots { display: flex; justify-content: center; gap: clamp(10px, 1.3vw, 14px); margin-top: clamp(20px, 3vh, 32px); }
.about-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
background: rgba(255,255,255,0.5); cursor: pointer; transition: background .3s ease, transform .3s ease; }
.about-dot::after { content: ""; position: absolute; inset: -9px; } /* enlarge the tap area to ~28px */
.about-dot:hover { background: rgba(255,255,255,0.85); }
.about-dot.is-active { background: var(--accent); transform: scale(1.25); }
.about-dot.is-active:hover { background: var(--accent); }
.about-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .about-card { transition: none; } }
/* mobil: platzoptimiert — Karten deutlich breiter (die Peek-Kanten ragen aus dem
Viewport und werden von body{overflow-x:clip} beschnitten, kein h-Scroll);
die Pfeile werden kompakter und bekommen einen dunklen Rückhalt, weil sie
jetzt als Overlay auf der Kartenkante liegen */
@media (max-width: 640px) {
/* gilt für ALLE Karten (überstimmt die schmalen Wandel/Mindset-Breiten:
gleiche Spezifität, aber später in der Datei) */
.about-card, .about-card-wandel, .about-card-mindset { width: 86%; padding: 24px 22px; }
/* mobil sind alle Karten gleich breit (86%) → zurück auf die Basis-Transforms */
.about-card-wandel[data-rel="1"], .about-card-mindset[data-rel="1"] { transform: translateX(-26.5%) scale(.9); }
.about-card-wandel[data-rel="2"], .about-card-mindset[data-rel="2"] { transform: translateX(-73.5%) scale(.9); }
.about-arrow { width: 36px; height: 36px; background: rgba(14,19,24,.5);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.about-arrow svg { width: 20px; height: 20px; }
.about-arrow--prev { left: 0; }
.about-arrow--next { right: 0; }
}
/* #auftrag — the lead line and the bridge line share the same .pull look (Dosis
display, sentence case) so they read as a matched pair */
.about-lead { max-width: 40ch; text-transform: none; }
/* the bridge line — "nquartic" rendered as its wordmark, inline and sized to the line
so the brand visual is picked up, not typed text */
.about-bridge { max-width: 34ch; text-transform: none; } /* normal sentence case (the .pull default is uppercase) */
/* drop the mark by its own descender depth (q-tail ≈ 0.18 of the .8em height)
so the wordmark's letter baseline sits on the text baseline; the q-tail then
hangs below the line like a "g" would */
.bridge-mark { height: .8em; width: auto; display: inline-block; vertical-align: baseline; transform: translateY(.18em);
/* the wordmark SVG is cropped flush at the "c", so add a normal word space after it */
margin-right: .2em; }
/* #auftrag — Mission split: text left, looping video right. The video's (crushed) near-black
areas screen-blend against a page-matched dark plate INSIDE its own cell, so no global
stacking change is needed; the cell's feathered edges dissolve into the live fluid bg, so
the moving background reads as continuous with the clip — no hard rectangle. */
.section .wrap.mission-wrap { max-width: min(1380px, 95vw); padding-inline: clamp(16px, 3vw, 40px); }
.mission-grid { width: 100%; margin-top: clamp(34px, 6vh, 64px);
display: grid; grid-template-columns: minmax(380px, 500px) 1fr;
gap: clamp(28px, 4vw, 60px); align-items: stretch; }
.mission-copy { display: flex; flex-direction: column; justify-content: center; align-items: center;
gap: clamp(20px, 3.4vh, 40px); text-align: center; }
.mission-copy .pull { margin: 0; max-width: none; }
.mission-lead, .mission-bridge { line-height: 1.34; }
/* This cell must create NO stacking context — no background plate, no mask, no z-index.
A mask DOES create a stacking context, which re-isolates the video from the fluid: the
screen-blend then has nothing to blend against and the clip's black stays an OPAQUE box
(the "black box with hard edges, fluid only at the rim" symptom). Kept context-free, the
video screens directly against the live fluid; the strong black-crush on the clip itself
dissolves its dark edges to transparency, so the rectangle disappears with no mask needed. */
.mission-video-cell { position: relative; min-height: clamp(440px, 60vh, 600px); overflow: hidden; }
.mission-video { position: absolute; inset: 0; left: 0; right: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block; margin: 0 auto; mix-blend-mode: screen; }
/* stack on tablets / small laptops so the 2-col split never crowds the video */
@media (max-width: 1024px) {
.mission-grid { grid-template-columns: 1fr; gap: clamp(18px, 4vh, 30px); }
.mission-video-cell { min-height: 0; aspect-ratio: 16 / 11; }
}
/* phones: the video goes FULL-BLEED (edge to edge) and square, so the centred cube fills
the whole width with no side margins — uses the full mobile width and removes any margin
asymmetry that read as "shifted right". The text keeps comfortable side padding. */
@media (max-width: 600px) {
.section .wrap.mission-wrap { max-width: 100%; padding-inline: 16px; }
.mission-grid { display: block; } /* block flow so the cell can break out cleanly */
.mission-copy { margin: 0 auto; }
.mission-video-cell {
aspect-ratio: 1 / 1;
width: 100vw;
margin-left: calc(50% - 50vw); /* full-bleed: span the whole viewport, centred */
margin-right: calc(50% - 50vw);
margin-top: clamp(20px, 5vh, 34px);
}
/* the clip's bright cube/fish sit ~6.6% RIGHT of centre (measured brightness centroid
= 56.6% in the 1:1 crop). Shift the crop window right (= content left) so the visible
centroid lands at ~50% and the cube reads as centred. Mobile only; desktop unchanged. */
.mission-video { object-position: 55% 50%; }
}
/* typewriter — the Über-uns headline. Line 1 "Wir sind" (white) stays; line 2 is
a typed phrase that loops between two statements with per-word colours.
Font/size/colour of the headline are unchanged; only line 2 is animated in JS. */
.tw-hi { color: var(--accent); } /* the green words */
.tw-cursor { display: inline-block; color: var(--fg1); font-weight: 300; margin-left: .04em; animation: tw-blink 1.05s steps(1, end) infinite; } /* always white, blinking */
@keyframes tw-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-cursor { display: none; } }
/* reserve the height (line 1 + line 2) so the copy below never jumps while line 2
types / empties; line 2 wraps to two lines on very narrow screens → reserve three */
#about-headline { min-height: 2.15em; min-height: 2lh; }
@media (max-width: 520px) { #about-headline { min-height: 3.25em; min-height: 3lh; } }
/* the brand caret as a typographic device */
.car { color: var(--accent); font-weight: 700; font-family: var(--font-ui); display: inline-block; line-height: 1; }
/* CTA claim — fixed first line ("Powering what's next.") + a second line whose
tail reveals letter-by-letter ("for your company / people / you"). Line 2 has a
reserved height so the copy below never shifts. Per-letter motion runs in JS
(cta-claim.js) via the Web Animations API. */
.claim-visible { display: block; }
.claim-line { display: block; }
.claim-line2 { /* reserve exactly one line so the box never grows/shrinks */
min-height: 1.1em;
min-height: 1lh;
}
.claim-rotator { display: inline-block; white-space: nowrap; }
.claim-rotator .ch { display: inline-block; will-change: opacity, filter, transform; }
.claim-rotator .ch.ch-dot { color: var(--fg1); } /* the period keeps the normal text colour */
/* the period after "next" shows only in the start state; it fades out as the
tail reveals (the period then rides at the end of the revealed fragment) */
.claim-dot1 { transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
.claim-rotator .ch { opacity: 1 !important; filter: none !important; transform: none !important; }
.claim-dot1 { transition: none; }
}
/* screen-reader-only (the visible claim is aria-hidden while it animates) */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ============================================================
Buttons
============================================================ */
.btn {
font-family: var(--font-ui); font-size: 16px; font-weight: 600; letter-spacing: .02em;
text-decoration: none; cursor: pointer; border: 0;
padding: 14px 26px; border-radius: var(--r-pill);
display: inline-flex; align-items: center; gap: 9px;
transition: transform .18s ease, background .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.btn-primary { background: var(--nq-green-500); color: #0E1318; box-shadow: var(--sh-glow); }
.btn-primary:hover { background: var(--nq-green-600); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--fg1); border: 1px solid var(--line-strong); }
.btn-ghost:hover { opacity: .68; transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
/* ============================================================
Glass component
============================================================ */
.glass {
background: rgba(20,28,36,0.46);
-webkit-backdrop-filter: blur(16px) saturate(1.25);
backdrop-filter: blur(16px) saturate(1.25);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-lg);
box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
/* ============================================================
Header
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 50; height: var(--header-h); /* above #marke's z-40 arrows now that main no longer isolates */
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: 20px; padding: 0 clamp(18px, 4vw, 44px);
background: rgba(14,19,24,0.55);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.brand-wordmark { justify-self: start; display: inline-flex; align-items: center; }
.brand-wordmark img { height: 30px; width: auto; display: block; }
.site-nav { justify-self: center; align-self: stretch; display: flex; gap: clamp(16px, 2vw, 32px); align-items: center; }
.nav-group { position: relative; display: inline-flex; align-items: center; align-self: stretch; }
/* top-level entries (buttons for the two dropdown headings, a-link for Kontakt) */
.nav-top {
font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: .12em; color: var(--fg2);
text-decoration: none; text-transform: uppercase; transition: color .18s ease;
background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 1;
display: inline-flex; align-items: center; gap: 7px;
}
.nav-top:hover, a.nav-top:focus-visible { color: var(--accent); }
/* dropdown affordance: small chevron that flips + greens with the heading on hover */
.nav-top.has-panel::after {
content: ""; width: 6px; height: 6px; flex: none;
border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; opacity: .65;
}
.nav-group:hover .nav-top.has-panel, .nav-group:focus-within .nav-top.has-panel { color: var(--accent); }
.nav-group:hover .nav-top.has-panel::after, .nav-group:focus-within .nav-top.has-panel::after { transform: translateY(1px) rotate(225deg); opacity: 1; }
/* pop-up panel */
.nav-panel {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(2px);
display: flex; flex-direction: column; gap: 2px; min-width: 212px; margin-top: 8px; padding: 8px;
background: rgba(14,19,24,0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,0.42);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* transparent bridge so the hover doesn't drop in the gap above the panel */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-group:hover .nav-panel, .nav-group:focus-within .nav-panel {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-panel a {
display: block; padding: 9px 13px; border-radius: 8px; white-space: nowrap;
font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .09em;
text-transform: uppercase; color: var(--fg2); text-decoration: none;
transition: color .15s ease, background .15s ease;
}
.nav-panel a:hover, .nav-panel a:focus-visible { color: var(--accent); background: rgba(255,255,255,0.05); }
.header-right { justify-self: end; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); }
.brand-logo img { height: 40px; width: auto; display: block; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; letter-spacing: .08em; color: var(--fg3); }
.lang-switch button {
background: none; border: 0; cursor: pointer; color: var(--fg3);
font: inherit; padding: 4px 2px; transition: color .18s ease;
}
.lang-switch button.is-active { color: var(--accent); font-weight: 700; }
.lang-switch button:hover { color: var(--fg1); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; padding: 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--fg1); border-radius: 2px; margin: 4px 0; transition: transform .25s ease, opacity .25s ease; }
/* ============================================================
Hero
============================================================ */
.hero { overflow: hidden; }
.hero-inner { position: relative; }
.hero-statement { margin: 22px 0 0; line-height: 0; }
.hero-statement img { width: clamp(280px, 46vw, 560px); height: auto; filter: drop-shadow(0 6px 40px rgba(0,0,0,.5)); }
.hero-glyph {
position: absolute; right: clamp(20px, 2.5vw, 64px); top: 50%; transform: translateY(-50%);
height: 92vh; max-height: 820px; width: auto; opacity: .10; pointer-events: none; user-select: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.scroll-hint {
position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
font-family: var(--font-ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
color: var(--fg3); text-decoration: none;
}
.scroll-hint svg { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* ============================================================
03b · Leistungsbereiche — split wordmarks (digital · media)
============================================================ */
.practice-split {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px);
width: 100%; margin-top: clamp(30px, 5vh, 60px); align-items: stretch;
}
.practice { display: flex; flex-direction: column; align-items: center; }
.practice-mark { width: 100%; min-height: clamp(120px, 15vw, 165px); display: flex; align-items: center; justify-content: center; }
.practice-mark img {
width: 100%; max-width: clamp(260px, 32vw, 420px); height: auto; display: block;
filter: drop-shadow(0 8px 30px rgba(0,0,0,.42));
}
.practice-text { margin-top: clamp(18px, 3vh, 34px); max-width: 40ch; }
/* Variante B — frosted glass box around each practice */
.practice.glass { padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px); }
/* ============================================================
04 · Meanings of n — pinned horizontal scrub
(vertical scroll through a tall section drives the track sideways)
============================================================ */
#bedeutung.pin { height: 320vh; }
.pin { position: relative; }
.pin-stick {
position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
display: flex; flex-direction: column; justify-content: center;
gap: clamp(26px, 5vh, 56px);
}
.pipe-head { flex: none; text-align: center; } /* centred eyebrow + headline */
.pipe-head .statement { margin-top: 14px; }
.pipe-track {
--pipe-gap: clamp(34px, 4.4vw, 80px);
flex: none; display: flex; align-items: stretch; gap: var(--pipe-gap);
/* centre the scrub: side padding = half the empty space around one segment, so at
scroll-start the FIRST segment sits centred (and at scroll-end the LAST one does);
vertical scroll then slides the segments left out of frame (JS translate unchanged) */
padding-inline: calc((100vw - clamp(330px, 35vw, 500px)) / 2);
will-change: transform;
}
.pstage { flex: 0 0 clamp(330px, 35vw, 500px); display: flex; flex-direction: column; }
.ps-num { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .18em; color: var(--hilite); }
.ps-icon { width: 56px; height: 56px; color: var(--accent); margin: 22px 0; }
.ps-icon svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 16px rgba(88,184,160,.40)); }
.ps-title {
font-family: var(--font-display); font-weight: var(--fw-display-2);
text-transform: uppercase; letter-spacing: .04em; line-height: 1.04;
font-size: clamp(28px, 3.4vw, 48px); color: var(--fg1); margin: 0 0 16px;
min-height: 1.04em; /* reserve one header line so all segments align */
}
/* reserve three lines of body text so every segment is the same height
(and the logo in segment 0 matches that height) */
.ps-text { font-size: clamp(16px, 1.6vw, 19px); color: var(--fg2); line-height: 1.55; max-width: 50ch; margin: 0; min-height: calc(1.55em * 4); }
.ps-bar { height: 2px; margin-top: 28px; border-radius: 2px; background: var(--nq-grad-line); transform-origin: left; transform: scaleX(0); }
/* Segment 0 — the logo the following six segments explain. Aligned to the
content segments: a hidden number-row spacer + a 22px top margin push the
logo's top to the icons' top edge; flex:1 stretches it down to the bar line.
The img is absolute so it never dictates the row height (the content does). */
.pstage--logo { justify-content: flex-start; margin-right: calc(var(--pipe-gap) / -2); }
.pstage--logo .ps-logo { margin-top: 22px; }
.ps-logo { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.ps-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* keep the six divider lines aligned at narrower side-by-side widths, where the
longer copy wraps to 4 lines (≥1280px it fits 3 lines, so the tight reserve stays) */
@media (min-width: 881px) and (max-width: 1279px) {
.ps-text { min-height: calc(1.55em * 5); }
}
/* ============================================================
06 · Deliverables grid (N⁴ framework tiles)
============================================================ */
.deliver-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
/* the methodik section is centred (like flywheel) → keep the tile grid full-width
and its card content left-aligned (only eyebrow + headline are centred) */
#methodik .deliver-grid { width: 100%; text-align: left; }
/* widen the methodik chapter to use more page width (per request) */
#methodik .wrap { max-width: 1300px; }
/* short lead-in / summary below the four pillars (centred via .center .lead). Width
tuned so line 1 ("…wollen Sie?") stays on one line; the two
s break it into
three blocks and the long last sentence wraps to two lines within this width. */
.methodik-summary { margin-top: clamp(30px, 4.5vh, 56px); max-width: 62ch; font-size: clamp(20px, 2.7vw, 28px); }
/* one continuous glass box per column: gradient on the TOP + BOTTOM edges, a thin
grey line elsewhere (from .glass); header, goal, bullet list and result stacked
inside, the result pushed to the bottom and split off by a thin grey divider */
.dcol { position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 26px 26px 28px; }
.dcol::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--nq-grad-line); }
.dcol::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--nq-green-500), var(--nq-blue-500)); }
.dcol header { display: flex; align-items: center; gap: 12px; }
.dcol .car { font-size: 46px; }
.dcol h3 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; font-size: 30px; margin: 0; color: var(--fg1); }
/* goal line (under the header) + result text are identical: same family/size/weight, white */
.dcol-sub, .dcol-result-text { font-family: var(--font-ui); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--fg1); }
.dcol-sub { margin: 14px 0 18px; min-height: 2.6em; }
/* padding-bottom = the same gap as line→result (.dcol-result padding-top:18px), so the
divider keeps an even 18px above (the last bullet) and below it even in the tallest
column, where margin-top:auto otherwise collapses the gap above to ~0 */
.dcol-list { list-style: none; margin: 0; padding: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.dcol-list li { position: relative; padding-left: 20px; font-size: 19px; color: var(--fg2); }
.dcol-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* mint-green bullets */
.dcol-result { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); } /* thin grey divider above the result */
.dcol-result-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dcol-result-label { font-family: var(--font-ui); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--hilite); } /* "Ergebnis" label = steel-blue */
.dcol-result-icon { flex: none; width: 24px; height: 24px; color: var(--accent); } /* mint-green result icon */
.dcol-result-icon svg { width: 100%; height: 100%; display: block; }
.dcol-result-text { margin: 12px 0 0; font-size: 20px; min-height: calc(1.3em * 2); color: var(--fg1); } /* white result, forced 2 lines (
); reserve 2 lines so dividers line up across columns */
/* ============================================================
08 · Flywheel
============================================================ */
/* the flywheel runs free on the page (no glass box), centred, resting on a
full-bleed brand line; the text sits above it. The section is a flex column:
the text takes its natural height and the wheel fills the rest, so the wheel
stays as big as possible while the line always remains on screen. */
/* #flywheel uses the base .section padding (clamp(72px,11vh,132px)) so section spacing
stays uniform across the site (was a custom smaller padding-block) */
/* Flywheel spacing mirrors the methodik chapter (headline→pillars→text). The wheel SVG
carries large internal whitespace (~17.6% of its box above the green ring, ~15.1% below),
so the stage/copy margins are pulled NEGATIVE by that fraction of the wheel size — landing
the VISIBLE ring/text at the same gaps as methodik (48px headline→pillars, ~56px pillars→
text). min(92vw,72vh,640px) is the wheel height, so the compensation tracks it on mobile too. */
.flywheel-stage { position: relative; width: 100%; display: flex; justify-content: center; margin-top: calc(48px - 0.176 * min(92vw, 72vh, 640px)); }
/* flywheel intro copy sits BELOW the wheel, sized to match the methodik summary (.lead) */
.fly-copy { font-size: clamp(20px, 2.7vw, 28px); line-height: 1.55; max-width: 1080px; /* breiter als .body-64ch → beide Absätze je 3 Zeilen */
margin-top: calc(clamp(30px, 4.5vh, 56px) - 0.151 * min(92vw, 72vh, 640px)); }
.fly-copy + .fly-copy { margin-top: clamp(14px, 1.8vh, 22px); }
.fly { position: relative; width: min(92vw, 72vh, 640px); aspect-ratio: 1 / 1; -webkit-tap-highlight-color: transparent; }
.fly svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.fly .wlabel { font-family: var(--font-display), system-ui, sans-serif; font-weight: 600; font-size: 21px; letter-spacing: .16em; fill: #fff; }
/* full-bleed brand line (blue→green) the wheel sits on, spanning the viewport */
.fly-line {
position: absolute; left: 50%; transform: translateX(-50%); top: 75.25%;
width: 100vw; height: 2px; z-index: 0;
background: var(--nq-grad-line); box-shadow: 0 0 14px rgba(88,184,160,.45);
}
/* shimmer travels right → left, so the wheel reads as rolling forward; a touch
brighter/wider than before so the motion is clearly visible */
.fly-line::after {
content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 240px;
background: linear-gradient(90deg, transparent, rgba(150,230,205,.5) 28%, rgba(224,255,246,.98) 50%, rgba(150,230,205,.5) 72%, transparent);
filter: blur(.6px); will-change: transform;
animation: fly-shimmer 5s linear infinite;
}
@keyframes fly-shimmer { from { transform: translateX(100vw);} to { transform: translateX(-240px);} }
@keyframes nq-spin { from { transform: translate(400px,410px) rotate(0deg);} to { transform: translate(400px,410px) rotate(360deg);} }
@keyframes nq-orbit-now { from { transform: translate(400px,410px) rotate(180deg) translateY(-136px) rotate(-180deg);} to { transform: translate(400px,410px) rotate(540deg) translateY(-136px) rotate(-540deg);} }
@keyframes nq-orbit-next { from { transform: translate(400px,410px) rotate(300deg) translateY(-136px) rotate(-300deg);} to { transform: translate(400px,410px) rotate(660deg) translateY(-136px) rotate(-660deg);} }
@keyframes nq-orbit-nav { from { transform: translate(400px,410px) rotate(60deg) translateY(-136px) rotate(-60deg);} to { transform: translate(400px,410px) rotate(420deg) translateY(-136px) rotate(-420deg);} }
@keyframes nq-pulse { from { transform: translate(400px,410px) rotate(var(--ca)) translateY(0); opacity:.5;} to { transform: translate(400px,410px) rotate(var(--ca)) translateY(9px); opacity:1;} }
.fly .a-spin { animation: nq-spin 18s linear infinite; transform-origin: 0 0; }
.fly .a-now { animation: nq-orbit-now 18s linear infinite; transform-origin: 0 0; }
.fly .a-next { animation: nq-orbit-next 18s linear infinite; transform-origin: 0 0; }
.fly .a-nav { animation: nq-orbit-nav 18s linear infinite; transform-origin: 0 0; }
.fly .a-pulse { animation: nq-pulse 2.6s ease-in-out infinite alternate; transform-origin: 0 0; }
/* click-to-accelerate: only the outer rim is clickable; on click the rim presses in
and the inward arrows flash (the speed boost itself is driven from flywheel.js) */
.ring-press { transform-box: view-box; transform-origin: 400px 410px;
transition: transform .16s cubic-bezier(.34, 1.7, .5, 1); }
.ring-press.is-press { transform: scale(.96); }
.hit-ring { pointer-events: stroke; cursor: pointer; touch-action: none;
/* kill the mobile tap-highlight: without this, a touch flashes a translucent blue
rectangle over the hit-ring's bounding box (= the whole flywheel) */
-webkit-tap-highlight-color: transparent; }
.fly svg .a-pulse path { transition: stroke-width .25s ease; }
.fly svg.flash .a-pulse path { stroke-width: 10; opacity: 1 !important; }
/* ============================================================
09 · Success factors
============================================================ */
/* Erfolgsfaktoren — pinned preset-morph scrub: a big colour word morphs as you
scroll; a glass checklist fills + ticks one point per factor revealed. */
#erfolg.pin { height: 240vh; }
.ef-stick {
position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: clamp(14px, 2.2vh, 26px); padding: 0 clamp(20px, 5vw, 64px);
}
.ef-stick .statement { max-width: 18ch; }
.ef-morph { display: flex; flex-direction: column; align-items: center; margin-top: clamp(10px, 1.6vh, 22px); }
.ef-mask { overflow: hidden; padding: 0.12em 0.06em; margin: -0.12em -0.06em; }
.ef-word {
display: inline-block; font-family: var(--font-display); font-weight: 500;
text-transform: uppercase; letter-spacing: .03em; line-height: 1.06; white-space: nowrap;
font-size: clamp(30px, 4.6vw, 60px);
background: linear-gradient(92deg, var(--nq-blue-400) 6%, var(--accent) 94%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
transition: transform .5s cubic-bezier(.4,.7,.3,1), opacity .34s ease; will-change: transform, opacity;
}
/* leeres Wort (Schritt 0 und Schluss-Schritt) hält per nbsp seine Zeilenhöhe —
sonst kollabiert die Maske um ~60px und die zentrierte Sticky-Spalte SPRINGT
beim ersten Einblenden bzw. beim Ausblenden am Ende des Scrubs */
.ef-word:empty::before { content: "\a0"; }
.ef-word.out { transform: translateY(-114%); opacity: 0; }
.ef-word.inq { transform: translateY(114%); opacity: 0; transition: none; }
.ef-desc {
margin: clamp(12px, 1.8vh, 22px) auto 0; max-width: none; white-space: nowrap; /* desktop immer EINZEILIG */
min-height: 1.5em; /* genau eine Zeile reservieren — konstant, auch wenn leer */
font-size: clamp(17px, 1.8vw, 22px); line-height: 1.5; color: var(--fg2);
transition: opacity .34s ease;
}
.ef-desc.out { opacity: 0; }
/* progressive checklist in a glass box, with a scroll cue beside it */
.ef-checkwrap { margin-top: clamp(16px, 2.6vh, 34px); display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 24px); }
/* breit genug, dass jede Beschreibungszeile (längste: „Kulturellen Wandel zur
leidenschaftlich verfolgten Chance moderieren.") desktop EINZEILIG bleibt —
die Box bleibt dadurch kompakt und der Leitsatz darunter früher sichtbar;
mobil greift die eigene statische Regel (width:auto, max-width 520px) */
.ef-list { width: min(90vw, 700px); padding: clamp(20px, 2.6vw, 30px) clamp(22px, 2.8vw, 32px); text-align: left; }
.ef-scrollcue { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; }
.ef-cue-track { flex: 1 1 auto; width: 3px; min-height: 54px; border-radius: 3px; background: rgba(255,255,255,0.10); position: relative; overflow: hidden; }
.ef-cue-fill { position: absolute; left: 0; top: 0; right: 0; height: 0%; background: var(--nq-grad-line); box-shadow: 0 0 8px rgba(88,184,160,.5); transition: height .12s linear; }
.ef-cue-arrow { width: 18px; height: 18px; color: var(--accent); animation: ef-cue-bounce 1.7s ease-in-out infinite; }
.ef-cue-label { font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg3); writing-mode: vertical-rl; }
@keyframes ef-cue-bounce { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(4px); opacity: 1; } }
.ef-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.9vh, 22px); }
.ef-row { display: flex; align-items: flex-start; gap: 14px; }
.ef-check {
flex: none; width: 26px; height: 26px; border-radius: 7px; color: var(--accent);
border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center;
transition: border-color .35s ease, background .35s ease;
}
.ef-check svg { width: 16px; height: 16px; opacity: 0; transform: scale(.5);
transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.5,.5,1); transition-delay: .06s; }
.ef-row.is-done .ef-check { border-color: var(--accent); background: rgba(88,184,160,.14); }
.ef-row.is-done .ef-check svg { opacity: 1; transform: scale(1); }
.ef-row-body { flex: 1 1 auto; min-width: 0; }
.ef-row-label {
display: block; font-family: var(--font-ui); font-weight: 600;
font-size: clamp(17px, 1.5vw, 21px); text-transform: uppercase; letter-spacing: .05em;
color: transparent; transition: color .45s ease;
}
.ef-row.is-done .ef-row-label { color: var(--fg1); }
/* subtitle stays in the box (so it's still readable after the morph word is gone);
it writes in with the row and reserves its space so the box doesn't jump */
.ef-row-desc {
display: block; margin-top: 9px; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55;
color: transparent; transition: color .45s ease;
}
.ef-row.is-done .ef-row-desc { color: var(--fg2); }
/* a thin divider sits below the whole point (under the subtext) and separates the
four points from one another — it does NOT split the title from its subtext */
.ef-row:not(:last-child) .ef-row-body { padding-bottom: clamp(14px, 1.9vh, 22px); border-bottom: 1px solid var(--line); }
/* #erfolg-quote uses the base .section padding for uniform spacing (previously pulled
up toward #erfolg with a negative margin) */
#erfolg-quote .pull { max-width: 24ch; margin: 0 auto; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.12; }
.ef-quote-line { display: block; }
.ef-quote-line + .ef-quote-line { margin-top: clamp(16px, 3vh, 34px); }
.hl-green { color: var(--accent); }
.hl-blue { color: var(--hilite); }
/* per-letter spans for the variable-weight proximity effect (Leitsatz) */
.prox-word { display: inline-block; white-space: nowrap; }
.prox-l { display: inline-block; text-align: center; will-change: font-weight; font-family: "DosisVF", "Dosis", system-ui, sans-serif; }
/* ============================================================
Scroll progress — top bar (grows right) + right rail (moves down)
============================================================ */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(255,255,255,0.05); }
.scroll-progress > span { display: block; height: 100%; width: 0%; background: var(--nq-grad-line); box-shadow: 0 0 12px rgba(88,184,160,.55); }
/* ============================================================
11 · Closing — TrueFocus (focus one statement, blur the rest)
============================================================ */
.true-focus { position: relative; display: inline-flex; flex-direction: column; gap: .08em; align-items: center; margin: 0;
/* the words are tap-interactive (tap to focus, focus.js) — a tap must NOT select the word
text, which on mobile pops up the selection toolbar / Google search and disrupts the cycle */
-webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tf-word { touch-action: manipulation; }
.tf-word {
font-family: var(--font-display); font-weight: 200; text-transform: uppercase; letter-spacing: .04em;
font-size: clamp(34px, 6vw, 84px); line-height: 1.1; color: var(--fg1); text-wrap: balance;
filter: blur(7px); opacity: .3; transition: filter .55s ease, opacity .55s ease;
text-shadow: 0 2px 40px rgba(0,0,0,.5); will-change: filter, opacity;
}
.tf-word.is-active { filter: blur(0); opacity: 1; }
.tf-frame {
position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
transition: transform .55s cubic-bezier(.4,.7,.3,1), width .55s cubic-bezier(.4,.7,.3,1), height .55s cubic-bezier(.4,.7,.3,1);
}
.tf-frame i { position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent); filter: drop-shadow(0 0 6px rgba(88,184,160,.6)); }
.tf-frame i:nth-child(1) { left: -12px; top: -10px; border-right: 0; border-bottom: 0; }
.tf-frame i:nth-child(2) { right: -12px; top: -10px; border-left: 0; border-bottom: 0; }
.tf-frame i:nth-child(3) { right: -12px; bottom: -10px; border-left: 0; border-top: 0; }
.tf-frame i:nth-child(4) { left: -12px; bottom: -10px; border-right: 0; border-top: 0; }
/* mobile: soften the blur on the inactive words so they stay legible on small screens
(the active word keeps blur(0) via the higher-specificity .tf-word.is-active rule) */
@media (max-width: 880px) {
.tf-word:not(.is-active) { filter: blur(3px); opacity: .5; }
}
/* ============================================================
12 · Contact
============================================================ */
/* Centred single-column stack: eyebrow "Let's talk" → animated claim → subtext +
e-mail → business card. #kontakt uses .center, so .wrap is a centred flex column
(align-items:center). Each sub-block is headed by an identical .eyebrow. */
.kontakt-stack { max-width: 1080px; } /* breiter, damit die drei Kontakt-Glasboxen nebeneinander passen */
/* subtext widened to the same measure as the flywheel copy (64ch at the matching font
clamp) so it reads as a wide block, not a narrow column, and uses less vertical space */
.kontakt-sub { margin-top: clamp(26px, 4vh, 46px); max-width: none; font-size: clamp(20px, 2.7vw, 28px); }
.kontakt-sub .body { margin: 0; max-width: none; font-size: clamp(20px, 2.7vw, 28px); line-height: 1.55; }
.kontakt-sub .body + .body { margin-top: clamp(13px, 1.8vh, 19px); }
/* ============================================================
13 · FAQ — native accordion, in the site's glass style
(JS-free; one panel open at a time via the grouping)
============================================================ */
#faq .wrap { max-width: 880px; }
.faq-list { width: 100%; margin-top: clamp(28px, 4vh, 48px); display: flex; flex-direction: column; gap: 12px; text-align: left; }
/* keep the slide-up entrance but force opacity:1 — an ancestor with opacity<1 suppresses
the glass items' backdrop-filter (same trap as the #marke card stack) */
.faq-list.reveal { opacity: 1; }
.faq-item { overflow: hidden; }
.faq-q {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
gap: 18px; padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 28px);
font-family: var(--font-ui); font-weight: 600; font-size: clamp(16px, 1.6vw, 20px);
letter-spacing: .01em; line-height: 1.3; color: var(--fg1); transition: color .18s ease;
}
.faq-q::-webkit-details-marker { display: none; } /* hide the default disclosure triangle */
.faq-q::marker { content: ""; }
.faq-q sup { font-size: .62em; vertical-align: super; line-height: 0; }
.faq-item:hover .faq-q, .faq-item[open] .faq-q { color: var(--accent); }
.faq-q-text { flex: 1 1 auto; }
.faq-icon { flex: none; width: 24px; height: 24px; color: var(--accent); transition: transform .3s cubic-bezier(.4,.7,.3,1); }
.faq-icon svg { width: 100%; height: 100%; display: block; }
.faq-item[open] .faq-icon { transform: rotate(45deg); } /* the "+" turns into an "×" */
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-lg); }
.faq-a { padding: 0 clamp(20px, 2.6vw, 28px) clamp(20px, 2.4vw, 26px); }
.faq-a p { margin: 0; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.62; color: var(--fg2); max-width: 72ch; }
.faq-a sup { font-size: .62em; vertical-align: super; line-height: 0; }
@media (prefers-reduced-motion: reduce) { .faq-icon { transition: none; } }
/* ============================================================
Footer
============================================================ */
.site-footer { padding: 48px 0; border-top: 1px solid var(--line); background: rgba(14,19,24,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { display: block; }
.footer-div { width: 1px; height: 34px; background: var(--line-strong); }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { font-family: var(--font-ui); font-size: 14px; color: var(--fg2); text-decoration: none; transition: color .18s ease; }
.footer-legal a:hover { color: var(--accent); }
.footer-copy { font-family: var(--font-ui); font-size: 14px; color: var(--fg3); margin: 0; }
/* ============================================================
Reveal & trace animations
============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* trace rectangle injected by reveal.js */
.trace { position: relative; }
.trace-svg { position: absolute; inset: -16px -22px; width: calc(100% + 44px); height: calc(100% + 32px); overflow: visible; pointer-events: none; z-index: -1; }
.trace-svg rect { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .85; }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1040px) {
.deliver-grid { grid-template-columns: repeat(2, 1fr); }
.vcard-wrap { max-width: 400px; }
/* 2×2 (and 1-col mobile): the tiles are wider, so the forced break after the "&"
left big empty gaps → drop the break here (goal-sub + result read on one line,
wrapping naturally only if truly needed) and release the 2-line reserve */
#methodik .dcol-sub br { display: none; } /* goal-sub collapses to 1 line; the result keeps its
(forced 2 lines) at all sizes */
#methodik .dcol-sub { min-height: 0; }
#methodik .dcol-result-text { min-height: calc(1.3em * 2); } /* result reserves 2 lines so the dividers align */
}
@media (max-width: 880px) {
:root { --header-h: 62px; }
.brand-wordmark img { height: 26px; }
.brand-logo img { height: 34px; }
/* mobile nav */
.nav-toggle { display: block; }
.site-header { grid-template-columns: auto 1fr; }
.site-nav {
position: fixed; inset: var(--header-h) 0 auto 0; justify-self: stretch; width: auto;
flex-direction: column; gap: 0; align-items: stretch;
background: rgba(14,19,24,0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line); padding: 8px 0 16px;
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: transform .26s ease, opacity .26s ease;
}
.site-header.nav-open .site-nav { transform: none; opacity: 1; pointer-events: auto; }
.site-nav a { padding: 14px clamp(18px, 6vw, 40px); font-size: 18px; border-bottom: 1px solid var(--line); }
/* dropdown groups collapse into a flat, always-expanded list (no hover on touch) */
.nav-group { display: block; }
.nav-top { width: 100%; box-sizing: border-box; justify-content: flex-start;
padding: 14px clamp(18px, 6vw, 40px); font-size: 18px; border-bottom: 1px solid var(--line); }
.nav-top.has-panel::after { display: none; }
.nav-panel {
/* inherit pointer-events from .site-nav: the closed mobile menu is pointer-events:none,
so the (invisible, position:fixed) nav must NOT capture taps over the page content —
it becomes tappable only when the menu is open (.nav-open → .site-nav pointer-events:auto). */
position: static; transform: none; opacity: 1; visibility: visible; pointer-events: inherit;
margin: 0; padding: 0; min-width: 0; gap: 0; border: 0; border-radius: 0; box-shadow: none;
background: rgba(255,255,255,0.03); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-panel::before { display: none; }
/* the desktop hover/focus reveal (translateX(-50%)) must NOT apply on touch — a tap
gives the group :focus-within / sticky :hover and would slide the panel off-screen left */
.nav-group:hover .nav-panel, .nav-group:focus-within .nav-panel { transform: none; }
.nav-panel a { padding: 12px clamp(30px, 9vw, 56px); font-size: 14.5px; letter-spacing: .08em; border-radius: 0; }
.header-right { gap: 14px; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.practice-split { grid-template-columns: 1fr; gap: 44px; }
.practice-mark { min-height: 0; }
.practice-mark img { max-width: min(78vw, 360px); }
/* mobile: faint watermark, right-aligned to the edge (not clipped). The logo SVG has
big internal padding — the visible art (4-tip → n-foot) is only ~72% of the box and
sits y≈15.7–113.6 in the 0–136 viewBox. So size/position the BOX so the VISIBLE art
spans eyebrow → bottom-of-"NEXT": box ≈246px tall (30.3vh), top ≈185px (22.8%).
It deliberately reaches into the teaser text. */
.hero-glyph { opacity: .06; height: 30.3vh; width: auto; max-height: none; left: auto; right: clamp(8px, 3vw, 16px); top: 22.8%; transform: none; }
/* smaller screens → the fluid colour crowds the text more, so the scrim stays a bit
darker than desktop (0.26). Eased 0.44 → 0.36 so the calm autonomous clouds show
through on mobile (paired with the brighter auto-colour + gentler dye dissipation
in fluid.js); copy still reads cleanly against it. */
#fluid-scrim { background: rgba(9,12,16,0.36); }
/* section padding now comes from the uniform clamp on .section (no mobile override) */
.pull { max-width: none; }
/* meanings of n: drop the pin, stack the cards vertically */
#bedeutung.pin { height: auto; }
.pin-stick { position: static; height: auto; overflow: visible; display: block; padding: 84px 0; }
/* shorten the header→tiles gap (it was a big empty block: the segment-0 logo card) */
.pipe-head { margin-bottom: clamp(24px, 5vw, 36px); }
/* (header is already centred via the base .pipe-head rule) override the desktop
centre-padding for the stacked mobile layout */
.pipe-head .wrap, .pipe-track { padding-inline: clamp(20px, 5vw, 64px); }
.pipe-track { flex-direction: column; align-items: center; gap: 40px; transform: none !important; }
.pstage { flex: none; max-width: 38ch; text-align: center; }
.pstage .ps-icon { margin-inline: auto; }
/* hide the segment-0 n⁴ logo card on mobile — it collapsed to a tall empty block and
created the oversized gap; the n⁴ already appears in the headline above */
.pstage--logo { display: none; }
.ps-bar { transform: scaleX(1) !important; }
/* erfolgsfaktoren: drop the morph scrub, show the full checklist with descriptions */
#erfolg.pin { height: auto; }
.ef-stick { position: static; height: auto; overflow: visible; display: block; padding: 84px clamp(20px, 5vw, 64px); }
.ef-stick .statement { max-width: none; }
.ef-morph { display: none; }
.ef-checkwrap { display: block; margin-top: 0; }
.ef-scrollcue { display: none; }
.ef-list { width: auto; max-width: 520px; margin: 30px auto 0; }
/* mobile: everything is shown statically, no reveal animation */
.ef-row-label { color: var(--fg1); transition: none; }
.ef-row-desc { color: var(--fg2); transition: none; }
}
@media (max-width: 560px) {
.deliver-grid { grid-template-columns: 1fr; }
.cta-row .btn { flex: 1 1 auto; justify-content: center; }
}
/* ============================================================
Reduced motion — calm, static, accessible
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; scroll-snap-type: none; }
#fluid { display: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.tf-word { filter: none; opacity: 1; }
.ef-word, .ef-desc, .ef-row-label, .ef-check svg, .ef-check { transition: none !important; }
.scroll-hint svg { animation: none; }
.fly .a-spin, .fly .a-now, .fly .a-next, .fly .a-nav, .fly .a-pulse, .fly-line::after { animation-play-state: paused !important; }
}
/* ============================================================
10 · REFERENZEN — Aufklapp-Referenzen (Kacheln aus js/referenzen.js)
============================================================ */
/* ============================================================
Referenzen-Testseite — Aufklapp-Mechanik nach glean.com-Vorbild,
übersetzt in die nquartic-Markenwelt (Glass auf dunklem Grund).
Struktur je Zeile: [Toggle-Kreis] [Projektname] [Teaser]
Aufgeklappt: [Kennzahlen + Text + Link | Visual] + N⁴-Skala
============================================================ */
.ref-wrap { max-width: min(1320px, 95vw); }
/* ---------- Sektionskopf — ZENTRIERT wie der Rest der Seite: Eyebrow, große
Headline, kleinerer erklärender Text mittig darunter (Gewicht auf der Headline) ---------- */
.ref-head { text-align: center; margin-bottom: clamp(30px, 5vh, 56px); }
/* Subheader in der Größe der anderen Sektions-Leads (z. B. .about-intro) — konsistent */
.ref-intro { font-size: clamp(20px, 2.7vw, 28px); line-height: 1.55; color: var(--fg2);
margin: clamp(26px, 4vh, 46px) auto 0; max-width: 1192px; } /* = Accordion-Breite; EN passt damit auf 3 Zeilen (Abstand wie .kontakt-sub) */
/* ---------- Accordion-Container: EIN Glass-Panel, Zeilen durch Linien getrennt ---------- */
.ref-acc { width: 100%; overflow: hidden; }
.ref-item + .ref-item { border-top: 1px solid var(--line); }
/* Kopfzeile (immer sichtbar) — SCHLANK: nur noch EIN Textbaustein (Projektname),
einzeilig über alle Registerkarten, reduzierte Höhe */
.ref-row {
display: grid; grid-template-columns: 44px 1fr;
gap: clamp(16px, 2.2vw, 28px); align-items: center;
width: 100%; text-align: left; background: none; border: 0; color: inherit;
font: inherit; cursor: pointer; padding: clamp(13px, 1.9vh, 19px) clamp(18px, 2.6vw, 34px);
transition: background .25s ease;
-webkit-tap-highlight-color: transparent;
}
.ref-row:hover { background: rgba(255,255,255,0.04); }
.ref-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm); }
/* Projektname — gleiche Schrift/Größe wie die Karten-Überschriften der Seite
(.about-card-title: Dosis Light, clamp 19–26px), aber in WEISS statt Blau */
.ref-name { font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2.2vw, 26px);
letter-spacing: .08em; text-transform: uppercase; color: var(--fg1); line-height: 1.18; }
/* ---------- Toggle-Kreis: zu = grüner Marken-Caret (Pfeil), offen = grüner Kreis mit × ---------- */
.ref-icon { position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none;
border: 1px solid var(--line-strong);
transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.ref-icon .car, .ref-icon .x { position: absolute; inset: 0; display: grid; place-items: center;
transition: opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1); }
/* Marken-Caret (das ⁴ aus dem Logo) — zeigt im zugeklappten Zustand nach UNTEN
(Aufklapp-Richtung). Markenoriginal zeigt nach oben → Flag: rotate(0deg) statt 180deg. */
.ref-icon .car svg { width: 16px; height: auto; display: block; transform: rotate(180deg); }
.ref-icon .x svg { width: 14px; height: 14px; display: block; }
.ref-icon .x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.ref-row:hover .ref-icon { border-color: var(--accent); }
/* offener Zustand: gefüllter Mint-Kreis, × in Ink; Caret blendet aus */
.ref-item.open .ref-icon { background: var(--accent); border-color: var(--accent); }
.ref-item.open .ref-icon .car { opacity: 0; transform: rotate(90deg) scale(.6); }
.ref-item.open .ref-icon .x { opacity: 1; transform: rotate(0deg) scale(1); }
.ref-item.open .ref-row:hover .ref-icon { background: var(--nq-green-400); border-color: var(--nq-green-400); }
/* ---------- Aufklapp-Panel: sanfte Höhenanimation über grid-template-rows ---------- */
.ref-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1); }
.ref-item.open .ref-panel { grid-template-rows: 1fr; }
.ref-panel-inner { overflow: hidden; min-height: 0; }
.ref-item.open { background: rgba(255,255,255,0.03); } /* leichte Tönung wie in der Vorlage */
.ref-body { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
gap: clamp(22px, 3.4vw, 52px); align-items: start;
padding: clamp(6px, 1.2vh, 14px) clamp(18px, 2.6vw, 34px) clamp(10px, 1.6vh, 18px)
calc(clamp(18px, 2.6vw, 34px) + 44px + clamp(16px, 2.2vw, 28px)); }
/* Kennzahlen — große Dosis-Light-Zahlen, gedämpfte Labels (wie Vorlage) */
.ref-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin: 6px 0 0; }
.ref-metric { min-width: 0; }
.ref-metric b { display: block; font-family: var(--font-display); font-weight: 300;
font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; color: var(--fg1); letter-spacing: .02em; }
.ref-metric span { display: block; margin-top: 6px; font-family: var(--font-ui); font-weight: 600;
font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3);
max-width: 20ch; line-height: 1.45; }
.ref-text { font-size: clamp(15.5px, 1.35vw, 17.5px); line-height: 1.62; color: var(--fg2);
max-width: 52ch; margin: clamp(16px, 2.4vh, 24px) 0 0; }
.ref-text .ph { color: var(--fg3); font-style: italic; } /* sichtbarer Platzhalter, keine erfundene Zahl */
/* Link mit grünem Kreis-Pfeil (Vorlage: blauer Kreis) */
.ref-link { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(16px, 2.4vh, 22px);
font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--accent); text-decoration: none; }
.ref-link .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
display: grid; place-items: center; box-shadow: 0 0 18px rgba(88,184,160,.45);
transition: transform .25s ease; }
.ref-link:hover .dot { transform: translateX(3px); }
.ref-link .dot svg { width: 12px; height: 12px; display: block; }
/* ---------- Visual rechts: Platzhalter-Rahmen mit Mini-Animation (Leitplanken-Matrix) ---------- */
.ref-visual { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md);
background: rgba(14,19,24,0.35); overflow: hidden; aspect-ratio: 4 / 3; }
.ref-visual figcaption { position: absolute; left: 12px; bottom: 10px; margin: 0;
font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--fg3); }
.ref-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Mini-Animation: 3×3-Priorisierungsmatrix, Top-3-Use-Cases leuchten nacheinander auf */
@keyframes ref-pulse { 0%, 22% { fill: rgba(255,255,255,.28); r: 5; } 34%, 86% { fill: var(--nq-green-500); r: 7; } 100% { fill: rgba(255,255,255,.28); r: 5; } }
@keyframes ref-badge { 0%, 28% { opacity: 0; transform: scale(.4); } 38%, 84% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.4); } }
/* Segmente: Glasoptik; hervorgehobene Segmente blassgrün bzw. Markengrün */
.ref-anim .seg { fill: rgba(255,255,255,0.035); stroke: rgba(255,255,255,0.09); }
.ref-anim .seg.hi-soft { fill: rgba(88,184,160,0.12); stroke: rgba(88,184,160,0.24); }
.ref-anim .seg.hi { fill: rgba(88,184,160,0.30); stroke: rgba(88,184,160,0.50); }
.ref-anim .dot-bg { fill: rgba(255,255,255,.28); }
.ref-anim .dot-hi { animation: ref-pulse 7s ease-in-out infinite; }
.ref-anim .dot-hi.d2 { animation-delay: .35s; }
.ref-anim .dot-hi.d3 { animation-delay: .7s; }
.ref-anim .badge { transform-origin: center; transform-box: fill-box;
animation: ref-badge 7s ease-in-out infinite; }
.ref-anim .badge.d2 { animation-delay: .35s; }
.ref-anim .badge.d3 { animation-delay: .7s; }
.ref-anim .axis { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.ref-anim .axis-arrow { fill: rgba(255,255,255,.32); }
.ref-anim text { font-family: var(--font-ui); font-weight: 600; letter-spacing: .12em; }
.ref-anim .axis-label { font-size: 10px; fill: var(--fg3); text-transform: uppercase; }
.ref-anim .badge text { font-size: 11px; fill: var(--nq-ink); font-weight: 700; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
.ref-anim .dot-hi { animation: none; fill: var(--nq-green-500); }
.ref-anim .badge { animation: none; opacity: 1; }
}
/* ---------- Leitplanken-Animation (Kachel 2): ruhig, vom Durcheinander zur Ordnung.
Sechs Pills starten als überlappender, verdrehter Haufen (wenig Struktur, redundant,
intransparent) und wandern langsam auf klare Plätze rund um den Kunden; erst dann
erscheinen die Wechselwirkungs-Linien. 16s-Zyklus, sanfte Übergänge, wenig Aktion. ---------- */
/* Kunde = typisches Markengrün (Text in Ink), Leitplanken = abgeblasstes Grün */
.ref-lp .hub circle { fill: var(--nq-green-500); stroke: var(--nq-green-400); stroke-width: 1.5; }
.ref-lp .hub text { font-family: var(--font-ui); font-size: 11px; font-weight: 700;
letter-spacing: .14em; fill: var(--nq-ink); }
.ref-lp .lp rect { fill: rgba(88,184,160,0.14); stroke: rgba(88,184,160,0.42); }
.ref-lp .lp text { font-family: var(--font-ui); font-size: 11px; font-weight: 600;
letter-spacing: .06em; fill: #fff; }
/* 12s-Zyklus: kurzes Chaos, zügiges Ordnen, danach Linien + Häkchen (wenig Stillstand) */
.ref-lp .lp { animation-duration: 12s; animation-timing-function: ease-in-out;
animation-iteration-count: infinite; }
.ref-lp .lp1 { animation-name: lp1; }
.ref-lp .lp2 { animation-name: lp2; }
.ref-lp .lp3 { animation-name: lp3; }
.ref-lp .lp4 { animation-name: lp4; }
.ref-lp .lp5 { animation-name: lp5; }
.ref-lp .lp6 { animation-name: lp6; }
.ref-lp .lp-link { stroke: rgba(88,184,160,0.40); stroke-width: 1.5; opacity: 0;
animation: lp-link 12s ease-in-out infinite; }
/* Häkchen: erscheinen nacheinander, sobald die Struktur steht */
.ref-lp .check { opacity: 0; animation: lp-check 12s ease-in-out infinite; }
.ref-lp .lp2 .check { animation-delay: .25s; }
.ref-lp .lp3 .check { animation-delay: .5s; }
.ref-lp .lp4 .check { animation-delay: .75s; }
.ref-lp .lp5 .check { animation-delay: 1s; }
.ref-lp .lp6 .check { animation-delay: 1.25s; }
.ref-lp .check circle { fill: var(--nq-green-500); }
.ref-lp .check path { fill: none; stroke: var(--nq-ink); stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round; }
@keyframes lp1 { 0%, 5% { transform: translate(175px,125px) rotate(-12deg); } 20%, 92% { transform: translate(150px,63px) rotate(0deg); } 100% { transform: translate(175px,125px) rotate(-12deg); } }
@keyframes lp2 { 0%, 5% { transform: translate(212px,138px) rotate(8deg); } 20%, 92% { transform: translate(250px,63px) rotate(0deg); } 100% { transform: translate(212px,138px) rotate(8deg); } }
@keyframes lp3 { 0%, 5% { transform: translate(188px,160px) rotate(-5deg); } 20%, 92% { transform: translate(300px,150px) rotate(0deg); } 100% { transform: translate(188px,160px) rotate(-5deg); } }
@keyframes lp4 { 0%, 5% { transform: translate(222px,152px) rotate(14deg); } 20%, 92% { transform: translate(250px,237px) rotate(0deg); } 100% { transform: translate(222px,152px) rotate(14deg); } }
@keyframes lp5 { 0%, 5% { transform: translate(176px,146px) rotate(4deg); } 20%, 92% { transform: translate(150px,237px) rotate(0deg); } 100% { transform: translate(176px,146px) rotate(4deg); } }
@keyframes lp6 { 0%, 5% { transform: translate(204px,122px) rotate(-9deg); } 20%, 92% { transform: translate(100px,150px) rotate(0deg); } 100% { transform: translate(204px,122px) rotate(-9deg); } }
@keyframes lp-link { 0%, 22% { opacity: 0; } 30%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes lp-check { 0%, 30% { opacity: 0; transform: scale(.4); } 38%, 86% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(.4); } }
.ref-lp .check { transform-origin: center; transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) {
.ref-lp .lp { animation: none; }
.ref-lp .lp1 { transform: translate(150px,63px); }
.ref-lp .lp2 { transform: translate(250px,63px); }
.ref-lp .lp3 { transform: translate(300px,150px); }
.ref-lp .lp4 { transform: translate(250px,237px); }
.ref-lp .lp5 { transform: translate(150px,237px); }
.ref-lp .lp6 { transform: translate(100px,150px); }
.ref-lp .lp-link { animation: none; opacity: 1; }
.ref-lp .check { animation: none; opacity: 1; transform: scale(1); }
}
/* ---------- Kachel 3 (Zielbild Systemlandschaft): verstreute Silos und Ebenen ordnen
sich zum Schichten-Stack; der Kontext-/Wissens-Layer pulsiert anschließend grün ---------- */
.ref-st text { font-family: var(--font-ui); font-weight: 600; fill: #fff; letter-spacing: .06em; }
.ref-st .bar rect { fill: rgba(56,104,144,0.22); stroke: rgba(91,134,168,0.5); }
.ref-st .silo rect { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.22); }
.ref-st .ctx rect { fill: rgba(88,184,160,0.26); stroke: rgba(88,184,160,0.6);
animation: st-ctx 12s ease-in-out infinite; }
.ref-st .st { animation-duration: 12s; animation-timing-function: ease-in-out;
animation-iteration-count: infinite; }
.ref-st .st1 { animation-name: st1; }
.ref-st .st2 { animation-name: st2; }
.ref-st .st3 { animation-name: st3; }
.ref-st .st4 { animation-name: st4; }
.ref-st .st5 { animation-name: st5; }
.ref-st .st6 { animation-name: st6; }
.ref-st .st7 { animation-name: st7; }
@keyframes st1 { 0%, 5% { transform: translate(150px,120px) rotate(-18deg); } 20%, 92% { transform: translate(120px,232px) rotate(0deg); } 100% { transform: translate(150px,120px) rotate(-18deg); } }
@keyframes st2 { 0%, 5% { transform: translate(255px,170px) rotate(12deg); } 20%, 92% { transform: translate(200px,232px) rotate(0deg); } 100% { transform: translate(255px,170px) rotate(12deg); } }
@keyframes st3 { 0%, 5% { transform: translate(110px,195px) rotate(-6deg); } 20%, 92% { transform: translate(280px,232px) rotate(0deg); } 100% { transform: translate(110px,195px) rotate(-6deg); } }
@keyframes st4 { 0%, 5% { transform: translate(205px,150px) rotate(10deg); } 20%, 92% { transform: translate(200px,192px) rotate(0deg); } 100% { transform: translate(205px,150px) rotate(10deg); } }
@keyframes st5 { 0%, 5% { transform: translate(180px,95px) rotate(-5deg); } 20%, 92% { transform: translate(200px,156px) rotate(0deg); } 100% { transform: translate(180px,95px) rotate(-5deg); } }
@keyframes st6 { 0%, 5% { transform: translate(215px,205px) rotate(6deg); } 20%, 92% { transform: translate(200px,120px) rotate(0deg); } 100% { transform: translate(215px,205px) rotate(6deg); } }
@keyframes st7 { 0%, 5% { transform: translate(185px,175px) rotate(-9deg); } 20%, 92% { transform: translate(200px,84px) rotate(0deg); } 100% { transform: translate(185px,175px) rotate(-9deg); } }
@keyframes st-ctx { 0%, 28% { fill: rgba(88,184,160,0.26); } 40% { fill: rgba(88,184,160,0.48); }
52% { fill: rgba(88,184,160,0.28); } 64% { fill: rgba(88,184,160,0.48); }
78%, 100% { fill: rgba(88,184,160,0.26); } }
/* ---------- Kachel 4 (Hyperpersonalisierung): Segment of One — grauer Strom läuft
durch das grüne KI-Prisma und fächert sich in individuelle Empfänger auf ---------- */
.ref-pr .flowline { stroke: rgba(255,255,255,0.14); stroke-width: 1.5; }
.ref-pr .src rect { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.25); }
.ref-pr .prism rect { fill: rgba(88,184,160,0.30); stroke: #58B8A0; stroke-width: 1.5; }
.ref-pr .prism text { font-family: var(--font-ui); font-size: 11px; font-weight: 700;
letter-spacing: .1em; fill: #fff; }
.ref-pr .card .frame { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.18); }
.ref-pr .card .line { fill: rgba(255,255,255,0.32); }
.ref-pr .lbl { font-family: var(--font-ui); font-weight: 600; font-size: 10px;
letter-spacing: .12em; fill: var(--fg3); text-transform: uppercase; }
.ref-pr .gdot { fill: rgba(255,255,255,0.45); opacity: 0; animation: pr-in 8s linear infinite; }
.ref-pr .gdot.g2 { animation-delay: 2.7s; }
.ref-pr .gdot.g3 { animation-delay: 5.4s; }
.ref-pr .cdot { opacity: 0; animation-duration: 8s; animation-timing-function: ease-in-out;
animation-iteration-count: infinite; }
.ref-pr .c1 { animation-name: pr-o1; }
.ref-pr .c2 { animation-name: pr-o2; animation-delay: .4s; }
.ref-pr .c3 { animation-name: pr-o3; animation-delay: .8s; }
.ref-pr .c4 { animation-name: pr-o4; animation-delay: 1.2s; }
@keyframes pr-in { 0% { transform: translate(40px,150px); opacity: 0; } 6% { opacity: .8; }
30% { transform: translate(164px,150px); opacity: .8; }
34%, 100% { transform: translate(168px,150px); opacity: 0; } }
@keyframes pr-o1 { 0%, 34% { transform: translate(200px,150px); opacity: 0; } 40% { opacity: 1; }
60% { transform: translate(276px,66px); opacity: 1; }
66%, 100% { transform: translate(276px,66px); opacity: 0; } }
@keyframes pr-o2 { 0%, 34% { transform: translate(200px,150px); opacity: 0; } 40% { opacity: 1; }
60% { transform: translate(276px,122px); opacity: 1; }
66%, 100% { transform: translate(276px,122px); opacity: 0; } }
@keyframes pr-o3 { 0%, 34% { transform: translate(200px,150px); opacity: 0; } 40% { opacity: 1; }
60% { transform: translate(276px,178px); opacity: 1; }
66%, 100% { transform: translate(276px,178px); opacity: 0; } }
@keyframes pr-o4 { 0%, 34% { transform: translate(200px,150px); opacity: 0; } 40% { opacity: 1; }
60% { transform: translate(276px,234px); opacity: 1; }
66%, 100% { transform: translate(276px,234px); opacity: 0; } }
/* ---------- Kachel 5 (Systemlösungen): Buy · Adopt · Make — drei Pfade leuchten
nacheinander, dann konvergiert alles in die passgenaue Lösung mit Häkchen ---------- */
.ref-bam text { font-family: var(--font-ui); font-weight: 600; fill: #fff; letter-spacing: .08em; }
.ref-bam .box rect { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.25); }
.ref-bam .dia rect { fill: rgba(56,104,144,0.35); stroke: #5B86A8; }
.ref-bam .pill rect { fill: rgba(56,104,144,0.28); stroke: rgba(91,134,168,0.5); }
.ref-bam .base { stroke: rgba(255,255,255,0.16); stroke-width: 1.5; }
.ref-bam .hi { opacity: 0; animation: bam-hi 10s ease-in-out infinite; }
.ref-bam .hi line { stroke: rgba(88,184,160,0.85); stroke-width: 1.5; }
.ref-bam .hi rect { fill: rgba(88,184,160,0.22); stroke: #58B8A0; }
.ref-bam .hi.h2 { animation-delay: 1.4s; }
.ref-bam .hi.h3 { animation-delay: 2.8s; }
.ref-bam .conv { stroke: rgba(88,184,160,0.5); stroke-width: 1.5; opacity: 0;
animation: bam-conv 10s ease-in-out infinite; }
.ref-bam .done circle { fill: rgba(88,184,160,0.18); stroke: #58B8A0; stroke-width: 1.5; }
.ref-bam .done path { fill: none; stroke: #58B8A0; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; }
/* Häkchen-Kreis: bis zum Zyklus-Ende UNSICHTBAR — die Lösung entsteht erst am Ende */
.ref-bam .done { opacity: 0; transform-origin: center; transform-box: fill-box;
animation: bam-done 10s ease-in-out infinite; }
@keyframes bam-hi { 0%, 14% { opacity: 0; } 18%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes bam-conv { 0%, 58% { opacity: 0; } 66%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes bam-done { 0%, 58% { opacity: 0; transform: scale(.5); }
66%, 90% { opacity: 1; transform: scale(1); }
97%, 100% { opacity: 0; transform: scale(.5); } }
/* ---------- Kachel 6 (Digitale Medien): Idee → Bild → Video → 3D-Zwilling → XR.
Punkte laufen zügig durch den Zeitstrahl (alle 3,5s ein neuer); an jeder Etappe
fällt ein grüner Wert-Impuls nach unten auf die fünf Verwendungsbereiche
(Planung · Simulation · Marketing · Vertrieb · Kommunikation), deren Balken
schrittweise wachsen — jeder Schritt leistet bereits einen Wertbeitrag. ---------- */
.ref-sto .stage { color: rgba(255,255,255,0.45); animation: sto-stage 3.5s ease-in-out infinite; }
.ref-sto .stage.s2 { animation-delay: .66s; }
.ref-sto .stage.s3 { animation-delay: 1.31s; }
.ref-sto .stage.s4 { animation-delay: 1.97s; }
.ref-sto .stage.s5 { animation-delay: 2.63s; }
.ref-sto .stage rect, .ref-sto .stage path, .ref-sto .stage line, .ref-sto .stage circle {
stroke: currentColor; fill: none; stroke-width: 1.5; }
.ref-sto .stage .fill { fill: currentColor; stroke: none; }
.ref-sto .lbl { font-family: var(--font-ui); font-weight: 600; font-size: 10px;
letter-spacing: .12em; fill: var(--fg3); text-transform: uppercase; }
.ref-sto .rail { stroke: rgba(255,255,255,0.14); stroke-width: 1.5; }
.ref-sto .pulse { fill: var(--nq-green-500); opacity: 0; animation: sto-dot 3.5s linear infinite; }
.ref-sto .cube { transform-origin: center; transform-box: fill-box;
animation: sto-rock 7s ease-in-out infinite; }
.ref-sto .play { transform-origin: center; transform-box: fill-box;
animation: sto-play 2.6s ease-in-out infinite; }
/* Wert-Impulse: kleine grüne Strahlen, die von der Etappe zur Wertzeile fallen */
.ref-sto .ray { fill: var(--nq-green-500); opacity: 0; transform-box: fill-box;
animation: sto-ray 3.5s ease-in infinite; }
.ref-sto .ray.y2 { animation-delay: .66s; }
.ref-sto .ray.y3 { animation-delay: 1.31s; }
.ref-sto .ray.y4 { animation-delay: 1.97s; }
.ref-sto .ray.y5 { animation-delay: 2.63s; }
/* Sammelleitung: nimmt die Impulse aller Etappen auf; ein grüner Fluss wandert
hindurch und verteilt den Wert über die Fallrohre an ALLE Gefäße */
.ref-sto .pipe { fill: rgba(88,184,160,0.12); stroke: rgba(88,184,160,0.35); }
.ref-sto .pflow { fill: rgba(88,184,160,0.85); animation: sto-flow 3.5s linear infinite; }
.ref-sto .drop { stroke: rgba(255,255,255,0.14); stroke-width: 1.5; }
@keyframes sto-flow { 0% { transform: translateX(0); opacity: 0; }
8% { opacity: 1; }
88% { opacity: 1; }
100% { transform: translateX(282px); opacity: 0; } }
/* Wert-Balken: füllen sich in 12 Stufen über 14s (4 Punktdurchläufe), dann Neustart */
.ref-sto .vframe { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.14); }
.ref-sto .vbar { fill: rgba(88,184,160,0.55); transform-origin: bottom; transform-box: fill-box;
transform: scaleY(.12); animation: sto-bar 14s steps(12, end) infinite; }
.ref-sto .vbar.b2 { animation-delay: .1s; }
.ref-sto .vbar.b3 { animation-delay: .2s; }
.ref-sto .vbar.b4 { animation-delay: .3s; }
.ref-sto .vbar.b5 { animation-delay: .4s; }
@keyframes sto-stage { 0%, 4% { color: rgba(255,255,255,0.45); } 8%, 15% { color: var(--nq-green-500); }
22%, 100% { color: rgba(255,255,255,0.45); } }
@keyframes sto-dot { 0% { transform: translate(30px,110px); opacity: 0; }
5% { transform: translate(48px,110px); opacity: 1; }
80% { transform: translate(352px,110px); opacity: 1; }
88%, 100% { transform: translate(366px,110px); opacity: 0; } }
@keyframes sto-ray { 0%, 5% { transform: translateY(0); opacity: 0; }
9% { opacity: .9; }
17%, 100% { transform: translateY(16px); opacity: 0; } }
@keyframes sto-bar { from { transform: scaleY(.12); } to { transform: scaleY(1); } }
@keyframes sto-rock { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } }
@keyframes sto-play { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.ref-st .st { animation: none; }
.ref-st .st1 { transform: translate(120px,232px); }
.ref-st .st2 { transform: translate(200px,232px); }
.ref-st .st3 { transform: translate(280px,232px); }
.ref-st .st4 { transform: translate(200px,192px); }
.ref-st .st5 { transform: translate(200px,156px); }
.ref-st .st6 { transform: translate(200px,120px); }
.ref-st .st7 { transform: translate(200px,84px); }
.ref-st .ctx rect { animation: none; }
.ref-pr .gdot, .ref-pr .cdot { animation: none; opacity: 0; }
.ref-bam .hi { animation: none; opacity: 0; }
.ref-bam .conv { animation: none; opacity: 1; }
.ref-bam .done { animation: none; opacity: 1; transform: scale(1); }
.ref-sto .stage, .ref-sto .cube, .ref-sto .play { animation: none; }
.ref-sto .pulse, .ref-sto .ray, .ref-sto .pflow { animation: none; opacity: 0; }
.ref-sto .vbar { animation: none; transform: scaleY(.8); }
}
/* ---------- N⁴-Skala: NOW · NEW · NEXT · NAVIGATE — Brücke zu den vier Säulen ---------- */
.ref-n4 { grid-column: 1 / -1; margin-top: clamp(8px, 1.6vh, 16px);
padding-top: clamp(14px, 2vh, 20px); border-top: 1px solid var(--line); }
.ref-n4-label { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: .14em;
text-transform: uppercase; color: var(--hilite); margin: 0 0 10px; }
.ref-n4-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ref-n4-seg { position: relative; display: block; width: 100%; padding: 10px 6px 9px; text-align: center;
font-family: var(--font-ui); font-weight: 600; font-size: clamp(11.5px, 1vw, 13.5px);
letter-spacing: .14em; text-transform: uppercase;
background: rgba(255,255,255,0.045); border: 1px solid var(--line); border-radius: var(--r-sm);
color: var(--fg3); cursor: default; font-variant-numeric: tabular-nums; }
.ref-n4-seg sup { font-size: .6em; }
/* aktive Phasen: mint eingefärbt */
.ref-n4-seg.active { background: rgba(88,184,160,0.18); border-color: rgba(88,184,160,0.55);
color: var(--fg1); cursor: pointer; }
.ref-n4-seg.active:hover, .ref-n4-seg.active:focus-visible { background: rgba(88,184,160,0.30); }
.ref-n4-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Mouseover-Popup nur auf aktiven Segmenten */
.ref-n4-seg .tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
width: max-content; max-width: min(320px, 74vw); padding: 12px 14px;
font-family: var(--font-body); font-weight: 400; font-size: 13.5px; line-height: 1.5;
letter-spacing: 0; text-transform: none; text-align: left; color: var(--fg1);
background: rgba(16,22,28,0.96); border: 1px solid rgba(88,184,160,0.45);
border-radius: var(--r-sm); box-shadow: 0 14px 40px rgba(0,0,0,.5);
opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 20; }
.ref-n4-seg .tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 6px solid transparent; border-top-color: rgba(88,184,160,0.45); }
.ref-n4-seg.active:hover .tip, .ref-n4-seg.active:focus-visible .tip {
opacity: 1; transform: translateX(-50%) translateY(-2px); pointer-events: auto; }
/* ============================================================
V2-VARIANTE — nur Kachel 1 (Vergleichs-Layout):
· Jahreszahl entfällt im Namen (JS)
· offener Zustand: Kreis mit × in FIRMENBLAU
· Kopfzeile behält die blasse Hover-Tönung dauerhaft, solange offen
(= natürliche Abgrenzung Header/Subheader ↔ Inhalt)
· Kennzahlen entfallen; Text läuft über die GESAMTE Breite (2–3 Zeilen)
· darunter zwei Zellen: Animation | Flywheel (ausgegraut, aktive Phasen farbig)
============================================================ */
/* offener Toggle-Kreis: GRÜN (Mint) wie die Basis-Variante — kein Override nötig */
/* Tönung bleibt NUR auf der Kopfzeile stehen; Panel bleibt ungetönt → klare Trennung */
.ref-item.v2.open { background: transparent; }
.ref-item.v2.open .ref-row { background: rgba(255,255,255,0.05); }
.ref-item.v2.open .ref-row:hover { background: rgba(255,255,255,0.07); }
/* Layout: zwei unsichtbar getrennte Bereiche nebeneinander —
LINKS Text + N⁴-Phasen-Boxen darunter, RECHTS die Grafik.
Beide aneinander ausgerichtet: Text-Oberkante = Grafik-Oberkante,
Boxen-Unterkante = Grafik-Unterkante (linke Spalte streckt sich mit). */
.ref-item.v2 .ref-body { align-items: stretch; }
.ref-item.v2 .ref-details { display: flex; flex-direction: column; }
/* Mini-Eyebrows (blau): Überschriften über Text-Bausteinen, Grafik und N⁴-Zuordnung
— jetzt in der ÜBLICHEN Eyebrow-Größe der Seite (18px, wie .eyebrow) */
.ref-mini { margin: 0 0 clamp(10px, 1.4vh, 14px); font-family: var(--font-ui); font-weight: 600;
font-size: 18px; letter-spacing: .2em;
text-transform: uppercase; color: var(--hilite); }
.ref-mini sup { font-size: .56em; vertical-align: super; line-height: 0; }
/* Kurzbeschreibungstext: lesbare Größe (wie der übrige Fließtext) statt zu klein */
.ref-block + .ref-block { margin-top: clamp(14px, 2.2vh, 22px); }
.ref-block-text { margin: 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62;
color: var(--fg2); max-width: 62ch; }
/* Rechts: Überschrift AUSSERHALB, Grafik ohne Glasbox (verschlankt), kleiner Abstand.
container-type: der Grafiktitel skaliert mit der Spaltenbreite (cqw), damit er
auch bei den längsten Titeln IMMER einzeilig bleibt (kein Umbruch, kein Overflow). */
.ref-gwrap { display: flex; flex-direction: column; container-type: inline-size; }
.ref-gwrap .ref-mini { margin-bottom: clamp(10px, 1.6vh, 14px);
white-space: nowrap; letter-spacing: .12em; font-size: min(18px, 4.4cqw); }
/* Grafik LINKSBÜNDIG zur Überschrift: kein 4/3-Rahmen mehr; das SVG behält sein
eigenes (per viewBox eng zugeschnittenes) Seitenverhältnis und füllt die Spaltenbreite */
.ref-item.v2 .ref-visual { border: 0; background: transparent; border-radius: 0;
aspect-ratio: auto; overflow: visible; margin: 0; } /* Grafik OBEN ausgerichtet (Titel auf Höhe des linken Eyebrows) */
.ref-item.v2 .ref-visual svg { position: static; width: 100%; height: auto; display: block; }
/* N⁴-Zuordnung: Gruppe (Mini-Eyebrow + Boxen) dockt an der Unterkante an */
.ref-phases-group { margin-top: auto; padding-top: clamp(16px, 2.4vh, 24px); }
/* Popups verankern sich am linken Rand der Button-GRUPPE (nicht am einzelnen Button),
damit sie mobil nie rechts aus dem Fenster laufen */
.ref-phases { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
/* N⁴-Phasen: reine Label-Chips (kein Button, keine Mouseover-Tooltips mehr) */
.ref-phase { display: inline-block;
font-family: var(--font-ui); font-weight: 600; font-size: 13px;
letter-spacing: .16em; text-transform: uppercase; color: #fff;
background: var(--nq-blue-500); border-radius: var(--r-sm);
padding: 9px 18px 8px; }
.ref-item.v2 .ref-visual figcaption { display: none; }
/* ---------- Mobil (≤ 720px): gestapelt wie in der Vorlage ---------- */
@media (max-width: 720px) {
/* V2 mobil: Text, Boxen, Grafik kompakt untereinander */
.ref-phases { gap: 8px; }
.ref-phase { font-size: 12px; padding: 8px 14px 7px; }
.ref-name { font-size: 15px; letter-spacing: .08em; }
.ref-body { grid-template-columns: 1fr; padding-left: clamp(18px, 2.6vw, 34px); }
.ref-metrics { flex-direction: column; gap: 16px; }
.ref-visual { aspect-ratio: 16 / 10; }
.ref-n4-scale { gap: 4px; }
.ref-n4-seg { letter-spacing: .06em; padding: 9px 2px 8px; }
.ref-n4-seg .tip { left: auto; right: 0; transform: none; }
.ref-n4-seg.active:hover .tip, .ref-n4-seg.active:focus-visible .tip { transform: translateY(-2px); }
.ref-n4-seg .tip::after { left: auto; right: 18px; transform: none; }
}
/* ============================================================
11 · TERMINBUCHUNG (#kontakt) — Google-Kalender-Button unter der
E-Mail: großzügiger Abstand nach oben und unten (zur Visitenkarte);
der von Google injizierte Button wird auf die Markenoptik der
.btn-primary umgestylt (Hintergrundfarbe kommt aus dem color-
Parameter in js/termin.js = Markengrün).
============================================================ */
/* EINE Glasbox mit drei Bereichen UNTEREINANDER: E-Mail → Anschrift → LinkedIn
Business Profil. Schmale, zentrierte Box; großzügiger vertikaler Abstand zwischen
den Bereichen; Gradient-Kanten oben/unten bleiben. Alle Texte (außer den blauen
Eyebrows) teilen die Schriftgröße des E-Mail-Links: clamp(20px, 2vw, 24px). */
.kontakt-panel { position: relative; overflow: hidden; text-align: center;
display: flex; flex-direction: column; align-items: center;
gap: clamp(30px, 4.2vh, 44px);
width: min(100%, 620px); margin: clamp(36px, 5.5vh, 64px) auto 0;
padding: clamp(26px, 3vw, 36px) clamp(28px, 4vw, 52px) clamp(24px, 2.8vw, 34px); }
.kontakt-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--nq-grad-line); z-index: 3; }
.kontakt-panel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--nq-green-500), var(--nq-blue-500)); z-index: 3; }
/* Inhalte ZENTRIERT unter der Terminbuchung; nur der Adress-Textblock selbst
bleibt linksbündig neben dem Logo */
.kpart { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Eyebrows im Panel = Standard-Eyebrow-Größe der Seite (18px aus der Basisregel) */
.kpart .eyebrow { margin-bottom: 11px; }
/* Anschrift: Logo links, GLYPHENGENAU an den Buchstaben ausgerichtet (nicht an
den Zeilenboxen): Spitze der 4 = Ink-Oberkante von "nquartic GmbH i. Gr.",
Unterkante des n = Baseline von "40212 Düsseldorf". Canvas-gemessene Dosis-
Metriken (in em): fontBoundingBoxAscent 1.03, Ink-Ascent Zeile 1 = 0.76,
Ink-Descent Zeile 3 ≈ 0.01; halfLeading = (1.55 − 1.27)/2 = 0.14.
→ Ink-Top = 0.14 + 1.03 − 0.76 = 0.41em; Ink-Bottom = 0.14 + 1.03 + 2·1.55
+ 0.01 = 4.28em; Logo-Höhe = 3.87em, Offset 0.41em. Alles in em → skaliert
mit der clamp-Schriftgröße auf .kpart-adr mit. (Das tight-SVG hat die
Glyphen-BBox als viewBox, seine Kanten SIND die Glyphenkanten.) */
.kpart-adr { display: flex; align-items: flex-start; justify-content: center;
text-align: left; gap: clamp(16px, 2vw, 24px);
font-size: clamp(20px, 2vw, 24px); }
.kpart-logo { flex: none; height: 3.87em; margin-top: 0.41em; width: auto; display: block; }
.kbox-addr-text { font-style: normal; font-family: var(--font-ui); font-size: 1em;
line-height: 1.55; color: var(--fg2); }
.kbox-company { color: var(--fg1); font-weight: 600; }
/* Terminbuchung: Button steht direkt unter dem Aufruf-Text — klarer Bezug zum
"Vereinbaren Sie ... Gespräch", eigenständig, aber ohne große Lücke */
.kontakt-termin { margin-top: 40px; /* gleicher Abstand wie der Hero-Button (.cta-row) */
display: flex; flex-direction: column; align-items: center; }
.termin-slot { display: flex; justify-content: center; }
.kontakt-termin button {
font-family: var(--font-ui) !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
padding: 14px 26px !important;
border: 0 !important;
border-radius: var(--r-pill) !important;
color: #0E1318 !important;
box-shadow: var(--sh-glow) !important;
cursor: pointer;
transition: transform .18s ease, filter .18s ease;
}
.kontakt-termin button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.kontakt-termin button:active { transform: scale(.98); }
/* grüner Mail-CTA (Referenzen: „Projekt anfragen"; Methodik: „Leistungsangebot
anfragen") — Optik wie der Terminbuchungs-Button, Abstand zur Box = 40px */
.mail-cta-row { margin-top: 40px; display: flex; justify-content: center; }
.mail-cta { display: inline-block; font-family: var(--font-ui); font-size: 16px;
font-weight: 600; letter-spacing: .02em; padding: 14px 26px; border: 0;
border-radius: var(--r-pill); background: var(--accent); color: #0E1318;
text-decoration: none; box-shadow: var(--sh-glow);
transition: transform .18s ease, filter .18s ease; }
.mail-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.mail-cta:active { transform: scale(.98); }
/* E-Mail + LinkedIn teilen dieselbe Link-Optik (.kbox-li): Lucide-Icon im glasig
hinterlegten Rahmen + Text daneben, nicht fett; Hover färbt Text und Icon mint */
.kbox-li { margin-top: 2px; display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-ui); font-size: clamp(20px, 2vw, 24px); font-weight: 400;
color: var(--fg2); text-decoration: none; transition: color .18s ease; }
.kbox-li:hover { color: var(--accent); }
.kbox-li-icon { flex: none; width: 1.4em; height: 1.4em; display: grid; place-items: center;
border-radius: 8px; background: rgba(91,134,168,.16); color: var(--hilite);
transition: background .18s ease, color .18s ease; }
.kbox-li-icon svg { width: .78em; height: .78em; display: block; }
.kbox-li:hover .kbox-li-icon { background: rgba(88,184,160,.18); color: var(--accent); }
@media (max-width: 860px) {
/* Zentrierung gilt jetzt schon in der Basisregel — mobil nur kompaktere Abstände */
.kontakt-panel { gap: 30px; padding: 24px clamp(22px, 6vw, 36px) 22px; }
/* die manuellen Zeilenumbrüche des Desktop-Satzspiegels entfallen mobil */
.kontakt-sub br { display: none; }
}
/* ============================================================
12 · MINISTECKBRIEF DES GRÜNDERS — FÜHRENDE Karte im "Über uns"-
Karussell: Statement links, unten Name als Signatur + LinkedIn+QR
(keine Boxen in der Box); Cutout-Foto rechts OHNE eigenen Rahmen,
absolut positioniert: flush am rechten Rand + Kachelboden (bottom:0,
overflow:hidden clippt an der runden Kante), Oberkante reicht bis
nahe an die Karten-Überschrift heran.
============================================================ */
.about-card-founder { overflow: hidden; display: flex; flex-direction: column; }
.founder { flex: 1; display: flex; min-height: 0; }
/* Textspalte links; das Foto ist HÖHENGETRIEBEN (Oberkante fix knapp unter der
Überschrift, Breite folgt dem 4:5-Seitenverhältnis). Seine Box darf unter die
Textspalte reichen — der Cutout ist im Kopfbereich schmal, sichtbare Pixel
berühren den Text nicht; der Text liegt zur Sicherheit auf z-index 1. */
.founder-info { position: relative; z-index: 1; flex: none; width: 54%;
display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
/* DESKTOP (User-Wunsch, vgl. Screenshot): Cutout-Foto rechts OHNE Rahmen,
höhengetrieben (Oberkante knapp unter der Überschrift), flush an rechtem Rand
und Kachelboden — der Blickfang der Karte. */
.founder-photo-img { position: absolute; right: 0; bottom: 0; z-index: 0;
height: calc(100% - clamp(56px, 6vw, 78px));
width: auto; max-width: 58%; object-fit: contain; object-position: right bottom; }
/* Signatur-ZEILE ans Kachelende gepinnt: Marken-Caret + Name links (wie eine
Unterschrift), die beiden Icon-Buttons (Mail + LinkedIn) am rechten Rand der
Textspalte — eine Zeile, dadurch bleibt die Kachel flach */
.founder-sig { margin-top: auto; padding-top: clamp(14px, 2vh, 22px); width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.about-card p.founder-name, .founder-name { font-family: var(--font-display); font-weight: 300;
font-size: clamp(23px, 2.2vw, 28px); letter-spacing: .02em; line-height: 1.1; color: var(--fg1); margin: 0; }
/* führender grüner Marken-Caret vor dem Namen — als visuelles Designelement
DEUTLICH größer (1.5em). Spitze bleibt exakt auf der Versal-Oberkante des T:
Canvas-gemessen Caret-Ink-Ascent .72em (font-ui 700), T-Versalhöhe .73em
(font-display 300) → ty = (.72·1.5 − .73)·nameFS = .35·nameFS = .233em(caret) */
.founder-name .car { font-size: 1.5em; margin-right: .1em; transform: translateY(.233em); }
/* Icon-Buttons in der Optik der Kontakt-Icon-Chips, nur größer (Link NUR auf dem Icon) */
.founder-links { display: flex; align-items: center; gap: 12px; }
.founder-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center;
border-radius: 11px; background: rgba(91,134,168,.16); color: var(--hilite);
transition: background .18s ease, color .18s ease, transform .18s ease; }
.founder-ic svg { width: 22px; height: 22px; display: block; }
.founder-ic:hover, .founder-ic:focus-visible { background: rgba(88,184,160,.18); color: var(--accent); transform: translateY(-2px); }
@media (max-width: 640px) {
/* mobil: Text volle Breite oben, Signatur unten gepinnt (margin-top:auto im
Flex-Kontext von .founder-info). Alle Karten sind FIX gleich hoch (JS) →
die zentrierten Pfeile bleiben konstant, die Seite springt beim Durchklicken
nicht; ein evtl. Leerraum liegt ruhig zwischen Text und der unten stehenden
Signatur. Das Foto sitzt als kleiner, halbtransparenter Cutout rechts unten
neben den Icons, bündig an der unteren Kachelkante — wo es in den Text ragt,
bleibt dieser durch die Transparenz lesbar. */
.founder-info { width: 100%; }
/* Foto FIX über die Höhe verankert: Oberkante ~2 Zeilen über dem Namen. Der
Abstand Name→Kachelboden ist konstant (Signatur + Padding), daher ist eine
feste px-Höhe auflösungs-/bildschirmunabhängig robust. Bild bleibt flush
rechts/unten, halbtransparent im Hintergrund (darf Name/Icons überlappen). */
.founder-photo-img { position: absolute; right: 0; bottom: 0; z-index: 0;
height: 176px; width: auto; max-width: none; margin: 0;
object-fit: contain; object-position: right bottom; opacity: .4; }
.founder-sig { flex-wrap: wrap; row-gap: 18px; justify-content: flex-start; }
.founder-name { width: 100%; }
.founder-links { margin-left: 0; } /* Icons links; das Foto füllt die Lücke rechts daneben */
.founder-ic { width: 42px; height: 42px; }
}
/* Zwei-Klick-Lösung: Transparenz-Hinweis unter dem Button, versteckter
Google-Container (wird erst nach dem Klick befüllt) und Ladezustand */
.termin-hint { margin: 14px auto 0; max-width: 52ch;
font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--fg3); }
.termin-hint a { color: var(--fg3); text-decoration: underline; }
.termin-hint a:hover { color: var(--accent); }
.termin-ghost { display: none; }
.termin-link.is-loading { opacity: .55; pointer-events: none; }
/* ============================================================
14 · WAS WIR TUN (#tun) — vier Magnet-Glaskacheln mit Farb-
verlaufskanten oben/unten (wie .kontakt-panel). Sichtbar ist je
Kachel der WIR-Teilsatz (grün) + Teaser („… damit …"); der
Maus-Lichtkegel (MINT-KREIS mit Ink-Text, js/tun.js — der
Caret-Masken-Test scheiterte an der Lesbarkeit im Strichband)
blendet die Fortsetzung ein, die mit SIE/IHNEN (blau) beginnt.
Unten je Kachel ein dezenter Hinweis: kleiner Marken-Caret +
Infotext (nur auf Hover-Geräten). Ohne Hover (Touch) stehen
beide Teilsätze nahtlos statisch (Teaser-Ellipse ausgeblendet).
============================================================ */
.tun-grid { width: 100%; margin-top: clamp(26px, 4vh, 46px);
display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.tun-card { position: relative; overflow: hidden;
min-height: clamp(300px, 42vh, 400px); /* Bühne für den Effekt */
padding: clamp(20px, 2.2vw, 30px) clamp(18px, 1.9vw, 26px);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; }
.tun-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--nq-grad-line); z-index: 3; }
.tun-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--nq-green-500), var(--nq-blue-500)); z-index: 3; }
/* halbierte Sätze → größere Schrift */
.tun-text { margin: 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.62; color: var(--fg2); }
.tun-text + .tun-text { margin-top: 14px; }
/* WIR/SIE im Stil der .about-card-title (Dosis Light, uppercase, gesperrt) */
.tun-wir, .tun-sie { font-family: var(--font-display); font-weight: 300;
text-transform: uppercase; letter-spacing: .08em; font-size: 1.35em; line-height: 1; }
.tun-wir { color: var(--hilite); } /* Farbtausch (User): WIR blau … */
.tun-sie { color: var(--accent); } /* … SIE/IHNEN gruen */
/* Touch-Basiszustand: kein Kegel, kein Hinweis, keine Teaser-Ellipse —
Basis + Fortsetzung lesen sich nahtlos untereinander */
.tun-circle { display: none; }
.tun-hint { display: none; }
.tun-ellipsis { display: none; }
/* Lichtkegel nur auf Geräten mit echtem Hover; der Fortsetzungs-Teilsatz
bleibt dort für Screenreader lesbar (visuell versteckt statt display:none) */
@media (hover: hover) and (pointer: fine) {
.tun-card--magnet { cursor: none; }
.tun-ellipsis { display: inline; }
.tun-card--magnet .tun-text--rest { position: absolute; width: 1px; height: 1px;
margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Der Kreis ist ein KACHELGROSSER, statischer Text-Layer; nur eine CLIP-PATH-
Kreisscheibe wächst und folgt dem Cursor (js/tun.js). Weil der Text nie
transformiert/skaliert wird, gibt es KEIN Sub-Pixel-Zittern mehr (die alte
width/height-Wachstums-Variante mit gegengerechnetem translate wackelte). */
.tun-circle { display: flex; position: absolute; inset: 0; z-index: 2;
align-items: center; justify-content: center; text-align: center;
padding: clamp(20px, 2.2vw, 30px) clamp(18px, 1.9vw, 26px); box-sizing: border-box;
pointer-events: none;
/* dunklerer Marken-Blau-Gradient, orientiert an der NOW-Farbe des Flywheels
(#2D5475 = --nq-blue-600 als Mittelton), Verlauf zu blue-700 */
background: linear-gradient(140deg, var(--nq-blue-500) 0%, var(--nq-blue-600) 55%, var(--nq-blue-700) 100%);
filter: drop-shadow(0 0 22px rgba(45, 84, 117, .45));
clip-path: circle(0px at 50% 50%); will-change: clip-path; }
.tun-circle-inner { max-width: 100%; }
/* beim Hover tritt der Basistext zurück, damit die im Kreis eingeblendete
Fortsetzung nicht mit ihm um Aufmerksamkeit konkurriert */
.tun-card--magnet .tun-text--base { transition: opacity .4s ease; }
.tun-card--magnet.is-hover .tun-text--base { opacity: .35; }
/* WEISSER Text auf Blau; die führenden Wörter (SIE/IHNEN) leuchten gruen */
.tun-circle .tun-text { color: #fff; }
.tun-circle .tun-sie { color: var(--accent); }
/* dezenter Interaktions-Hinweis am Kachelboden: kleiner Marken-Caret + Text
(liegt unter dem Kegel, z-index 1 < 2 — der Kreis überstreicht ihn) */
.tun-hint { display: flex; position: absolute; left: 0; right: 0; bottom: 13px;
z-index: 1; flex-direction: column; align-items: center; gap: 6px; }
/* der grüne Caret pulsiert fortlaufend leicht nach oben → lenkt Aufmerksamkeit
auf die Interaktion (prefers-reduced-motion respektiert, s. unten) */
/* alle Carets pulsieren gleichmäßig synchron (Welle war zu unruhig) */
.tun-hint svg { width: 20px; height: auto; color: var(--accent); opacity: .9;
animation: tun-caret-pulse 1.7s ease-in-out infinite; }
@keyframes tun-caret-pulse { 0%, 100% { transform: translateY(0); opacity: .7; }
50% { transform: translateY(-5px); opacity: 1; } }
.tun-hint span { font-family: var(--font-ui); font-size: 11px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--hilite); }
@media (prefers-reduced-motion: reduce) {
.tun-circle, .tun-card--magnet .tun-text--base { transition: none; }
.tun-hint svg { animation: none; }
}
}
/* Abschlusszeile unter den Boxen — Abstand/Schriftgröße wie die Lead-Texte
der anderen Segmente (.kontakt-sub/.about-intro) */
.tun-outro { max-width: 1040px; margin: clamp(26px, 4vh, 46px) auto 0;
font-size: clamp(20px, 2.7vw, 28px); line-height: 1.55; color: var(--fg2); text-align: center; }
@media (max-width: 1080px) {
.tun-grid { grid-template-columns: repeat(2, 1fr); }
.tun-text { font-size: clamp(16px, 2vw, 19px); }
}
@media (max-width: 640px) {
.tun-grid { grid-template-columns: 1fr; gap: 14px; }
.tun-card { padding: 20px 18px; min-height: 0; }
.tun-outro br { display: none; }
}