/* ==========================================================================
ARKAD Partners — layout & component styles.
All values come from theme/docs/home/figma-audit.json (via blueprint.py).
Tokens live in style.css :root — no hardcoded hex/radius/transition values
that should be tokens.
========================================================================== */
/* --------------------------------------------------------------------------
Reset & base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Anchor targets land below the fixed sticky nav (120px outer @1920, fluid) */
scroll-padding-top: min(6.25vw, 120px);
/* Always reserve the scrollbar gutter so opening/closing the menu or team
popup (which sets body overflow:hidden) doesn't reflow the page ~15px
and shift the content/images (Feedback 1.0 #9 — image jump on close). */
scrollbar-gutter: stable;
}
/* Phase 5 JS adds .is-locked while the mobile menu or team popup is open.
overflow:hidden hides the scrollbar and blocks background scroll while
keeping content exactly in place; scrollbar-gutter:stable on html prevents
the ~15px reflow, and focus({preventScroll}) stops focus-into-view scroll —
together they keep the page from jumping on open/close (Feedback 1.0 #9). */
body.is-locked {
overflow: hidden;
}
body {
font-family: var(--font-body);
font-size: var(--fs-xl);
line-height: var(--lh-body);
color: var(--color-dark-green);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Auto-hyphenate long words (esp. long German compounds) so they break with a
hyphen instead of jumping to the next line and leaving a ragged gap. The
hyphenation dictionary follows — de-DE on the German site,
en-US on the English site (WPML sets it per page). Display headings opt out
below. */
-webkit-hyphens: auto;
hyphens: auto;
/* Cleaner, more deliberate breaks (inherited by all text incl. the mobile
headings): only hyphenate words of at least 6 characters, and never leave
fewer than 3 letters before or after the hyphen — no tiny "Un-" fragments.
Chromium/Firefox read hyphenate-limit-chars; iOS Safari/WebKit the
-webkit-hyphenate-limit-* pair (before+after=6 ⇒ same ≥6-char minimum). */
hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
}
/* Display headings are NOT auto-hyphenated — a hyphen in the Merchant display
type reads awkwardly, and a name shouldn't be split. They wrap whole and only
hard-break (overflow-wrap) as a last resort for a word longer than the line. */
h1, h2, h3, h4,
.kf-box-headline,
.news-row-title,
.search-profile-title,
.four-card-title,
.four-card-subtitle,
.contact-card-name,
.contact-card-link a {
-webkit-hyphens: manual;
hyphens: manual;
overflow-wrap: break-word;
}
/* Client (mobile only): every header EXCEPT H1 auto-hyphenates per
(de-DE / en-US via WPML) — long German compounds break with a hyphen on the
narrow column instead of leaving a ragged gap. H1 (the big display title) keeps
hyphens:manual and never splits. Same selectors as the opt-out above, minus h1;
overflow-wrap (inherited from that rule) stays as the last-resort hard break. */
@media (max-width: 768px) {
h2, h3, h4,
.kf-box-headline,
.news-row-title,
.search-profile-title,
.four-card-title,
.four-card-subtitle,
.contact-card-name,
.contact-card-link a {
-webkit-hyphens: auto;
hyphens: auto;
}
}
/* Client (mobile): stop the ragged gap where a hyphenated word orphaned a short
tail on its own line (e.g. the footer "…zu span-/nenden/Akquisitions…").
text-wrap:balance evens heading line lengths and lets the browser pick an
arrangement that avoids the awkward break entirely; text-wrap:pretty tightens
the rag of running text while keeping its hyphenation. Both are progressive —
unsupported browsers just fall back to normal wrapping. */
@media (max-width: 768px) {
h2, h3, h4,
.kf-box-headline,
.news-row-title,
.search-profile-title,
.four-card-title,
.four-card-subtitle,
.contact-card-name {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
}
/* --------------------------------------------------------------------------
Fluid up-scaling beyond the design width. The layout already scales DOWN
below 1920 through its min(vw,px) / clamp() values; at 1920 those freeze, so
above it we scale the WHOLE page up proportionally instead of letting the
layout spread apart or shrink into a small centred island that is unreadable
when the browser is zoomed out. `zoom` on the root behaves like the browser's
own zoom: everything — the fixed nav, sticky parallax and overlays included —
scales uniformly and stays aligned, and scrolling stays correct (unlike
transform: scale). The factor is 1 at 1920 (no change) and grows on ultra-wide
screens / extreme zoom-OUT, so the design renders larger but pixel-identical
in layout — coherent AND legible. Adjust --design-width to move where
up-scaling begins.
-------------------------------------------------------------------------- */
@media (min-width: 1920px) {
:root {
zoom: calc(100vw / var(--design-width));
}
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
h1,
h2,
h3,
h4 {
font-weight: inherit;
}
/* --------------------------------------------------------------------------
Reusable patterns (shared across sections)
-------------------------------------------------------------------------- */
/* Two-tone heading accent spans (figma-audit.json → text_spans) */
.accent {
color: var(--color-bright-green);
}
.accent-sage {
color: var(--color-sage);
}
/* Section heading — Merchant 200 / 72px / lh 1.2 (stats, team, footer CTA) */
.section-heading {
font-family: var(--font-display);
font-weight: 200;
font-size: var(--fs-h2);
line-height: var(--lh-heading);
}
/* Nav/footer link — white → #89f075, 600ms ease-in-out (interaction-spec rows 1–10) */
.nav-link {
display: inline-block;
padding-bottom: 4px;
font-size: var(--fs-2xl);
/* Figma text box is cap-trimmed to 18px at 24px font (node 149×18 + 4px
pad = 22px link box); 0.75 reproduces that box height in CSS */
line-height: 0.75;
color: var(--color-white);
white-space: nowrap;
transition: color var(--transition-link);
}
.nav-link:hover {
color: var(--color-bright-green);
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
Hero — Figma 248:964 "Header" (1920×1080, clipsContent)
Flex row, align-items flex-end, padding 0 0 320px 64px (fluid /19.2 = vw)
-------------------------------------------------------------------------- */
.hero {
position: relative;
display: flex;
align-items: flex-end;
height: min(56.25vw, 1080px); /* 1080 @ 1920 */
padding: 0 0 min(16.6667vw, 320px) min(3.3333vw, 64px);
overflow: hidden;
}
/* Header_Background 248:965: uploaded photo (bound inline from the module
field — no hardcoded image, Feedback 1.0 #13). Figma layers a Green_Glass
#052000@.75 + blur 160 over it; that glass let the bright photo glow softly
through, giving the green depth. Feedback 2.0 #3 had us flatten it to a solid
opaque colour (to fully block the image); Feedback 3.0 wants the "glow" back.
Reconciled: the overlay stays 100% OPAQUE (photo still only shows through the
"A" cutout) but is now a green GRADIENT GLOW — luminous toward the top/upper-
right (#2a3e1a, sampled from the Figma render) fading to the deep brand green
(#052000) bottom-left — reproducing the design's illumination without the
photo bleeding into the text. Shared by Hero V1 and V2. */
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--hero-img); /* mobile swap → var(--hero-img-m) in the ≤768 block */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(115% 125% at 72% 8%,
#34481f 0%,
#1c3411 38%,
#0a2705 68%,
var(--fill-hero-solid) 100%);
}
/* Header_Image 248:968 — dynamic "A" cutout (Feedback 1.0 #2). The SAME
uploaded photo as .hero-bg, full-cover and sharp (no glass), masked to the
brand "A" letterform (assets/images/hero-a-shape.svg) sitting flush on the
right with the design's 14px bottom bleed. Shares .hero-bg's cover box, so
the crisp A registers exactly with the blurred background behind it. */
.hero-clear {
position: absolute;
inset: 0;
z-index: 1;
background-image: var(--hero-img);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-webkit-mask: url(../images/hero-a-shape.svg) no-repeat;
mask: url(../images/hero-a-shape.svg) no-repeat;
-webkit-mask-size: min(58.3333vw, 1120px) auto;
mask-size: min(58.3333vw, 1120px) auto;
-webkit-mask-position: right calc(100% + min(0.7292vw, 14px));
mask-position: right calc(100% + min(0.7292vw, 14px));
}
/* H1 248:971 — Figma box 989×291 (3 lines), Merchant 100 / 92px / lh 96.6px.
Width hugs content: Sentient stand-in renders wider than Merchant, so a
forced 989px box would re-wrap the explicit 3-line break pattern. */
.hero-heading {
position: relative;
z-index: 2;
width: fit-content;
font-family: var(--font-display);
font-weight: 100;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
color: var(--color-cream-green);
}
/* In-hero nav 543:2179 — 1792×104 at left/right 64, top 0; padding-top 40 */
.hero-nav {
position: absolute;
z-index: 3;
top: 0;
left: min(3.3333vw, 64px);
right: min(3.3333vw, 64px);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
}
.hero-nav-logo img {
width: 168px;
height: 64px;
}
.hero-nav-menu {
display: flex;
align-items: center;
gap: 36px;
}
.hero-nav-menu li {
display: flex; /* collapse the li line-box strut around the 22px link */
}
/* Mobile-only hero pieces (Figma 1348:946) — the semi-transparent green "A" and
the bottom text box. Output in both hero templates; shown only ≤768 (below). */
.hero-m-a,
.hero-m-box {
display: none;
}
/* --------------------------------------------------------------------------
Stats — Figma 248:877 "Stats / 8 /" (1920×1184, fit-content height)
Flex column, align-items flex-end, padding 160/64, gap 40, bg #ebfce8
-------------------------------------------------------------------------- */
.stats {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
gap: min(2.0833vw, 40px);
background: var(--color-pale-green);
overflow: hidden;
}
/* Frame 14 248:878 — full-width row holding the heading */
.stats-header {
display: flex;
gap: 10px;
width: 100%;
}
/* Heading 248:879 — Figma box 1184×258 (3 lines @ 72px/86.4px), #11320b,
line 3 at 53% opacity (text_spans). fit-content per Sentient-drift rule. */
.stats-heading {
width: fit-content;
color: var(--color-dark-green);
}
.stats-heading .dim {
color: var(--color-heading-dark-53);
}
/* Frame 15 248:880 — 869px row, content justified to the right edge */
.stats-intro-row {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
width: min(45.2604vw, 869px); /* 248:880 — fluid below 1920 */
max-width: 100%;
}
/* Paragraph 248:881 — 728×120, Switzer 400 20px/30px, #3d3d3d */
.stats-intro {
width: min(37.9167vw, 728px); /* 248:881 — fluid below 1920 */
max-width: 100%;
font-size: var(--fs-xl);
line-height: var(--lh-body);
color: var(--color-text-grey);
}
/* Frame 1 248:882 — full-width card row, padding-top 94, gap 32, centered */
/* Max 3 cards per row; extras wrap to a new row beneath the first, each
keeping its designated width (Feedback 1.0 #6). flex-start so a 4th/5th
card sits directly under the 1st rather than centering. */
.stats-cards {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
padding-top: min(4.8958vw, 94px);
gap: 32px;
}
/* Stat 248:883/888/889 — 576×312 FILL siblings, padding 32, space-between.
flex: 0 0 (no grow/shrink) locks the 3-per-row width so a 4th+ card wraps
instead of compressing the whole row (Feedback 1.0 #6). */
.stat-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 0 calc((100% - 64px) / 3);
width: calc((100% - 64px) / 3);
height: min(16.25vw, 312px);
padding: 32px;
gap: 8px;
background: var(--color-dark-green);
border-radius: var(--radius-md);
overflow: hidden;
}
/* Label — Switzer 400 18px/25.2px #d9ffd2; above the decorative icon */
.stat-label {
position: relative;
z-index: 1;
font-size: var(--fs-md);
line-height: var(--lh-label);
color: var(--color-cream-green);
}
/* Value — Merchant 200, enlarged on request. Own clamp (not the shared
--fs-stat, which also sizes .kf-box-headline / .search-profile-title) so ONLY
the three-cards metric grows. 4vw reaches the 60px cap by ~1500px wide (was
56px / 2.9167vw, which only read ~44px at that width). */
.stat-value {
position: relative;
z-index: 1;
width: fit-content;
font-family: var(--font-display);
font-weight: 200;
font-size: clamp(28px, 4vw, 60px);
line-height: var(--lh-stat);
color: var(--color-bright-green);
}
/* Line-art icons — absolute inside card, offsets from blueprint (right 32;
bottoms 53/45/28). Sizes fluid so they scale with the card below 1920. */
/* Every card icon uses ONE fixed, square bounding box (Feedback 1.0 #7) so
identical icons render identically regardless of card position — the
Figma frames are all ~square (206/223/256); 223 is the median. object-fit:
contain fits the artwork inside without stretching it (was object-fit:fill,
which distorted off-aspect uploads). Slots 1–3 no longer set per-position
widths, so duplicate cards look the same. */
.stat-icon {
position: absolute;
right: min(1.6667vw, 32px);
bottom: min(2.3438vw, 45px);
width: min(11.6146vw, 223px);
height: min(11.6146vw, 223px);
object-fit: contain;
object-position: bottom right;
}
/* --------------------------------------------------------------------------
Image feature sections — Figma 248:875 "Component 2" (road) and
248:876 "Component 6" (building). Full-bleed 1920×1080 photo; MOUSE_ENTER
→ SMART_ANIMATE 1.2s ease-in-out (--transition-reveal): photo zoom
(imageTransform diff) + overlay group fades opacity 0→1.
-------------------------------------------------------------------------- */
.image-feature {
position: relative;
height: min(56.25vw, 1080px); /* 1080 @ 1920 */
overflow: hidden;
}
.svg-defs {
position: absolute;
}
/* Zoom wrapper — scaled on hover; img inside carries the default crop */
.image-zoom {
position: absolute;
inset: 0;
transition: transform var(--transition-reveal);
}
.image-photo {
position: absolute;
max-width: none;
}
/* Road default crop from imageTransform [[.84962,0,.01255],[0,.84962,.15066]]:
display size = 1/.84962 = 117.70035% of section; left = -.01255/.84962,
top = -.15066/.84962 (photo 4096×2304 is exactly 16:9, scaleMode STRETCH) */
.image-road .image-photo {
left: -1.4775%;
top: -17.7325%;
width: 117.70035%;
height: 117.70035%;
}
/* Hover matrix [[.76833,0,.05617],[0,.76833,.23192]] → scale .84962/.76833
= 1.10580 about the fixed point (53.658%, 99.976%) — lands exactly on the
hover crop (left −140.4px, top −326.0px at 1920) */
.image-zoom-road {
transform-origin: 53.658% 99.976%;
}
.image-road.is-revealed .image-zoom-road {
transform: scale(1.1058);
}
/* Overlay = Group 2 I248:875;248:689 — 1378×716 at 271,172; opacity 0 → 1.
Reveal trigger is now scroll-based (.is-revealed, added once by main.js
via IntersectionObserver) instead of MOUSE_ENTER — Feedback 1.0 #3: the
box animates in as it enters the viewport and stays permanently. */
.image-overlay {
position: absolute;
left: min(14.1146vw, 271px);
top: min(8.9583vw, 172px);
width: min(71.7708vw, 1378px);
height: min(37.2917vw, 716px);
opacity: 0;
transition: opacity var(--transition-reveal);
}
.image-feature.is-revealed .image-overlay {
opacity: 1;
}
/* Glass panel clip box. Base fills its parent (used inside the centered team
popup panel, which is exactly the 1378×716 box). overflow:hidden clips the
1507px-wide shape to the panel. */
.image-glass {
position: absolute;
inset: 0;
overflow: hidden;
}
/* In Big Box V1 the glass is a feature-level sibling of the photo (so
backdrop-filter can sample it — Feedback 1.0 #4), so it needs the explicit
Group 2 panel box (1378×716 @ 271,172) rather than filling the section. */
.image-feature > .image-glass {
left: min(14.1146vw, 271px);
top: min(8.9583vw, 172px);
width: min(71.7708vw, 1378px);
height: min(37.2917vw, 716px);
}
/* Subtract I248:875;248:691 — 1507×716 at left 0; #2a3e1a@.64 + bg-blur 64,
A-cutout via overlay-glass-shape path (inline clipPath, objectBoundingBox).
backdrop-filter + the reveal opacity sit on the SAME element: own opacity
fades the blurred result without isolating its own backdrop. */
.image-glass-shape {
position: absolute;
left: 0;
top: 0;
width: 109.3614%; /* 1507/1378 */
height: 100%;
background: var(--fill-overlay-64);
-webkit-backdrop-filter: blur(var(--blur-overlay));
backdrop-filter: blur(var(--blur-overlay));
clip-path: url(#glass-clip-road);
}
/* Reveal fade is ONLY for the Big Box V1 glass (scroll-reveal). The team
popup reuses .image-glass-shape but is never inside .image-feature, so it
must stay fully visible — scoping the opacity here keeps the popup glass
from being stuck at opacity 0 (Feedback 1.0 #4/#9 regression). */
.image-feature .image-glass-shape {
opacity: 0;
transition: opacity var(--transition-reveal);
}
.image-feature.is-revealed .image-glass-shape {
opacity: 1;
}
/* Both Big Box V1 glass panels: blur 45px (overrides the 64px default).
Scoped to .image-feature so the team popup glass keeps its own blur. */
.image-feature .image-glass-shape {
-webkit-backdrop-filter: blur(45px);
backdrop-filter: blur(45px);
}
/* Heading I248:875;248:698 at 74,122 in panel — Merchant 200 72/86.4, 2 lines,
spans #d9ffd2 + #89f075 (text_spans overlay-2-heading) */
.image-overlay-heading {
position: absolute;
left: min(3.8542vw, 74px);
top: min(6.3542vw, 122px);
width: fit-content;
color: var(--color-cream-green);
}
/* Frames 18/19 — 869px rows at left 74, content justified right (text x=215) */
.image-overlay-row {
position: absolute;
left: min(3.8542vw, 74px);
display: flex;
justify-content: flex-end;
align-items: center;
width: min(45.2604vw, 869px);
}
.image-overlay-row-1 {
top: min(17.3958vw, 334px);
}
.image-overlay-row-2 {
top: min(25.7292vw, 494px);
}
/* Paragraph 728×120, Switzer 400 20/30 #fff. Font fluid below 1920 so the
absolute-positioned rows scale proportionally and can't overlap at 1440 */
.image-overlay-text {
width: min(37.9167vw, 728px);
font-size: var(--fs-xl); /* body: 20 desktop+tablet / 18 mobile (Feedback 4.0 #1) */
line-height: var(--lh-body);
color: var(--color-white);
}
/* ==========================================================================
IMAGE FEATURE — BUILDING (Figma 248:876 "Component 6")
Shares all .image-feature/.image-overlay classes above. Photo default
imageTransform = identity → img fills the section exactly (STRETCH ≡
default object-fit: fill). Hover matrix [[0.87952,0,0.060338],
[0,0.87952,0.085535]] → wrapper scale 1/0.87952 = 1.13698 about the
fixed point tx/(1−s), ty/(1−s) = (50.083%, 70.997%).
========================================================================== */
.image-building .image-photo {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.image-zoom-building {
transform-origin: 50.083% 70.997%;
}
.image-building.is-revealed .image-zoom-building {
transform: scale(1.13698);
}
.image-glass-shape-building {
clip-path: url(#glass-clip-building);
}
/* ==========================================================================
TEAM (Figma 248:896 "Stats / 8 /" #2, 1920×1553.75)
Heading + intro (885 col) with 2 cards in row 1, 3 visible cards +
invisible 6th slot (248:909, instance opacity 0) in row 2. Card =
photo frame 421.5×526.875 + gap 10 + name block. ON_HOVER 600ms
ease-in-out: photo rect → 439×549 @ −9,−11 (zoom cards) or −1px
shift (cards 3/4); bio panel fades 0→1 sliding top 370→238
(card 2: 454→238), h 210→264. Photo crops from imageTransform
(% of the rect, so the rect zoom scales them along).
========================================================================== */
.team {
display: flex;
flex-direction: column;
gap: min(2.0833vw, 40px);
padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
background: var(--color-white);
overflow: hidden;
}
.team-row {
display: flex;
align-items: center;
gap: min(1.6667vw, 32px);
}
.team-row-1 {
align-items: flex-start;
}
.team-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: min(2.0833vw, 40px);
width: min(46.0938vw, 885px);
}
.team-heading {
width: fit-content;
color: var(--color-dark-green);
}
.team-intro-text {
width: min(36.5625vw, 702px);
font-size: 20px;
line-height: var(--lh-body);
color: var(--color-text-grey);
}
.team-cards {
display: flex;
align-items: center;
gap: min(1.6667vw, 32px);
}
.team-card {
display: flex;
flex-direction: column;
gap: min(0.5208vw, 10px);
overflow: hidden;
}
.team-photo-frame {
position: relative;
width: min(21.9531vw, 421.5px);
height: min(27.4414vw, 526.875px);
overflow: hidden;
/* 2026 redesign: cut-out portraits now sit on a soft light gradient (Figma
Frame 29, #F9F9F9→#DFDFDF top-left→bottom-right) instead of the white
section showing through. Needs transparent-background (cut-out) photos. */
background: linear-gradient(135deg, #f9f9f9 0%, #dfdfdf 100%);
}
.team-photo-rect {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* Smooth zoom: animate transform (GPU-composited, no per-frame layout/paint)
instead of left/top/width/height, which re-laid-out + repainted the image
every frame and made the hover zoom shimmer/shake. */
transform-origin: center;
transition: transform var(--transition-link);
will-change: transform;
backface-visibility: hidden;
}
.team-card-zoom:hover .team-photo-rect, .team-card-zoom.is-hover .team-photo-rect {
/* ~4.2% centered zoom — matches the old 421.5→439 / 526.875→549 growth */
transform: scale(1.042);
}
/* All team photos fill the frame uniformly (Feedback 1.0 #8): object-fit
cover + a consistent top-center anchor, so every uploaded portrait gets the
same crop — heads at the same scale, consistent headroom, shoulders along
the bottom edge. Replaces the per-card Figma imageTransform crops, which
zoomed each slot differently (card 1 ~206%, card 6 ~234%) and cut off heads
on dynamic CPT content. The subtle hover zoom lives on .team-photo-rect. */
.team-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* Desktop (>1200) — strict 4-column grid (client): every card is one column,
the intro spans two, so cards align perfectly across every row. Previously
the intro (min 885px) was ~5px narrower than two card-columns + gap, so
row 2's cards drifted out of alignment with row 1's. Tablet/mobile (≤1200)
keep the stacked layout in the media blocks further down — desktop-only. */
@media (min-width: 1201px) {
.team-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: min(1.6667vw, 32px);
align-items: start;
}
/* Text block = two columns wide (spanning the gap between them). */
.team-intro {
grid-column: span 2;
width: auto;
}
/* Dissolve the row-1 cards wrapper so its two cards become direct grid
items (columns 3 & 4) on the same track as row 2's four cards. */
.team-cards {
display: contents;
}
/* Frame fills its column instead of a fixed 421.5px (≈22.08vw vs the old
21.95vw — a hair wider, which is exactly what closes the alignment gap). */
.team-photo-frame {
width: 100%;
}
}
/* bio panel (Frame 5) — fades in while sliding up and growing; the
"Mehr über Michael" row exists only in the hover variant, so the
default height clips it (panel is opacity 0 there anyway) */
.team-bio {
position: absolute;
left: min(1.25vw, 24px);
right: min(1.25vw, 24px);
top: min(19.2708vw, 370px);
height: min(10.9375vw, 210px);
display: flex;
flex-direction: column;
gap: min(1.25vw, 24px);
padding: min(1.25vw, 24px);
background: var(--fill-panel-75);
border-radius: var(--radius-sm);
-webkit-backdrop-filter: blur(var(--blur-panel));
backdrop-filter: blur(var(--blur-panel));
opacity: 0;
overflow: hidden;
transition: top var(--transition-link), height var(--transition-link),
opacity var(--transition-link);
}
.team-card-2 .team-bio {
top: min(23.6458vw, 454px);
}
.team-card:hover .team-bio, .team-card.is-hover .team-bio {
top: min(12.3958vw, 238px);
height: min(13.75vw, 264px);
opacity: 1;
}
/* On reveal (hover or tap) the name plate dissolves — its green background fades
to transparent and the name/role text fades out — so the bio panel underneath
reads cleanly (matches the Figma hover state). The plate goes click-through so
the bio's links stay tappable; the touch "+"/"−" keeps its own pointer events. */
.team-card:hover .team-name, .team-card.is-hover .team-name {
background: transparent;
pointer-events: none;
}
.team-card:hover .team-name p, .team-card.is-hover .team-name p {
opacity: 0;
}
.team-card.is-hover .team-card-plus {
pointer-events: auto;
}
.team-bio-text {
font-weight: 300;
font-size: min(0.9375vw, 18px);
line-height: var(--lh-body);
color: var(--color-white);
}
.team-bio-link,
.team-bio-email {
display: flex;
align-items: center;
gap: min(0.8333vw, 16px);
font-weight: 300;
font-size: min(1.0417vw, 20px);
line-height: var(--lh-body);
color: var(--color-cream-green);
}
.team-bio-link {
text-decoration: none;
}
/* Client request (Phase B follow-up): underline the "Mehr über …" label on
hover/focus. Animated via text-decoration-color with the theme's link
timing; the hash icon stays unaffected. */
.team-bio-link span {
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
transition: text-decoration-color var(--transition-link);
}
.team-bio-link:hover span,
.team-bio-link:focus-visible span {
text-decoration-color: currentColor;
}
.team-bio-email a {
color: inherit;
text-decoration: none;
}
.team-bio-link-icon {
width: min(1.1458vw, 22px);
height: min(1.1458vw, 22px);
}
.team-bio-email-icon {
width: min(1.3021vw, 25px);
height: min(1.3021vw, 25px);
}
/* Name plate — 2026 redesign: overlaid on the image bottom (Figma Frame 5,
421×108 #2A3E1A), name white 500 over role cream-green 300, stacked lines. */
.team-name {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: min(1.25vw, 24px);
background: var(--color-glass-green);
transition: background var(--transition-link);
}
/* line 1 (name) Switzer 500 white, line 2 (role) Switzer 300 cream-green */
.team-name p {
font-size: 20px;
font-weight: 300;
line-height: var(--lh-body);
color: var(--color-cream-green);
transition: opacity var(--transition-link);
}
.team-name-person {
font-weight: 500;
color: var(--color-white);
}
/* Touch-only "+" tap target (Feedback 2.0 mobile #5). Hidden on hover-capable
devices, where the card opens via the hover overlay's bio link instead. */
.team-card-plus {
display: none;
}
/* Show the +/− toggle on tablet AND mobile — by WIDTH (≤1200), not only on
pure-touch (hover:none) devices, since a touch tablet can report hover-capable
and then have no way to open the card. Desktop (>1200) uses the hover reveal. */
@media (hover: none), (max-width: 1200px) {
/* Touch: the overlay is opened/closed by the "+/-" toggle (main.js adds/
removes .is-hover). A sticky :hover left on the card after a tap must NOT
keep it open, so force the revealed state off whenever .is-hover is
absent — this makes the "-" reliably close the overlay (Feedback 3.0).
pointer-events:none so the (invisible) closed overlay never intercepts a
tap on the photo — its bio/contact links are inert until the "+" opens it. */
.team-card:not(.is-hover) .team-bio {
opacity: 0;
pointer-events: none;
}
/* On touch the reveal is driven by the +/− toggle (.is-hover), NOT :hover —
a tap leaves a STICKY :hover on the card, which (via the base reveal rule)
would make the name plate pointer-events:none and swallow the very tap meant
for the "+". So until .is-hover, force the plate solid + tappable, and keep
the button itself always tappable so it can open AND close the overlay. */
.team-card:not(.is-hover) .team-name {
background: var(--color-glass-green);
pointer-events: auto;
}
.team-card:not(.is-hover) .team-name p {
opacity: 1;
}
.team-card-plus {
pointer-events: auto;
}
.team-card-zoom:not(.is-hover) .team-photo-rect {
transform: none;
}
/* Name row becomes name (left) + the "+" button (right), vertically
centred so the "+" sits on the same axis as the name/position text,
in the card's bottom-right corner. */
.team-name {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.team-card-plus {
display: block;
position: relative;
flex-shrink: 0;
width: 44px;
height: 44px;
/* negative vertical margins keep the 44px tap target without adding row
height; the button's right edge stays flush inside the card. */
margin: -10px 0;
}
/* plus/minus glyph, drawn so no extra icon asset is needed. White on the dark
green name plate (2026 redesign; was #11320B, then cream-green). */
.team-card-plus::before,
.team-card-plus::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--color-white);
}
.team-card-plus::before {
width: 22px;
height: 2px;
}
.team-card-plus::after {
width: 2px;
height: 22px;
transition: opacity 0.2s ease;
}
/* Toggle (Feedback 3.0 mobile #2): when the overlay is open the "+" becomes
a "−" by hiding the vertical bar; tapping again closes it and the bar
returns. main.js sets aria-expanded on the button. */
.team-card-plus[aria-expanded="true"]::after {
opacity: 0;
}
}
/* ==========================================================================
FOOTER (Figma 543:1098, 1920×715)
========================================================================== */
/* --- CTA band (Header_Background 248:911, 1920×579) --- */
.footer-cta {
position: relative;
height: min(30.1563vw, 579px);
overflow: hidden;
}
/* bg rect 248:912 is rotated 180° with STRETCH imageTransform
[[1,0,0],[0,0.53611,0.00023]] → img h = 100/0.53611 = 186.52885%,
top = −0.00023148/0.53611 = −0.0432% */
.footer-bg-rect {
position: absolute;
inset: 0;
overflow: hidden;
transform: rotate(180deg);
}
.footer-bg {
position: absolute;
left: 0;
top: -0.0432%;
width: 100%;
height: 186.52885%;
max-width: none;
}
.footer-glass {
position: absolute;
inset: 0;
background: var(--fill-hero-glass);
-webkit-backdrop-filter: blur(var(--blur-hero));
backdrop-filter: blur(var(--blur-hero));
}
/* A deco 248:914 — 700×1109 at x1271, bottom 2px past the band (581 in
a 579 band); upward overflow clipped by .footer-cta */
.footer-deco {
position: absolute;
left: min(66.1979vw, 1271px);
bottom: max(-0.1042vw, -2px);
width: min(36.4583vw, 700px);
height: min(57.7604vw, 1109px);
}
/* Frame 14 248:917 — abs 64,161 / 1792 wide, row space-between align-end */
.footer-cta-inner {
position: absolute;
left: min(3.3333vw, 64px);
right: min(3.3333vw, 64px);
top: min(8.3854vw, 161px);
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/* Heading 248:918 — Figma box 1184×258 (3 lines locked with
;
fit-content for Sentient width drift) */
.footer-heading {
width: fit-content;
color: var(--color-cream-green);
}
/* Frame 2 248:919 (370) > Frame 15 248:920 (350, column gap 24) */
.footer-contact {
display: flex;
align-items: center;
width: min(19.2708vw, 370px);
/* fonts don't shrink perfectly linearly with vw — let the box grow the
few rounding px it needs below 1920 (at 1920 max-content is 368 < 370) */
min-width: max-content;
}
/* Figma frame is 350 but the address row renders 368 wide (design-authored
overflow) — max-content makes the box match the rendered content without
moving any glyph (left edge unchanged) */
.footer-contact-col {
display: flex;
flex-direction: column;
gap: min(1.25vw, 24px);
width: max-content;
}
.footer-org {
font-weight: 500;
font-size: var(--fs-footer-org);
line-height: var(--lh-body);
color: var(--color-white);
}
.footer-contact-rows {
display: flex;
flex-direction: column;
gap: min(0.625vw, 12px);
margin: 0;
padding: 0;
list-style: none;
}
.footer-contact-row {
display: flex;
align-items: center;
gap: min(0.8333vw, 16px);
font-weight: 300;
/* fluid (not the --fs-2xl clamp): the 18px floor would make the nowrap
address outgrow its vw-shrinking column below ~1440 */
font-size: min(1.25vw, 24px);
line-height: var(--lh-body);
color: var(--color-cream-green);
/* Figma: address text (329) overflows its 350 frame on one line */
white-space: nowrap;
}
.footer-contact-row a {
color: inherit;
text-decoration: none;
}
.footer-icon-address {
width: min(1.1458vw, 22px);
height: min(1.3021vw, 25px);
}
.footer-icon-email {
width: min(1.3021vw, 25px);
height: min(1.3021vw, 25px);
}
.footer-icon-phone {
width: min(1.3021vw, 25px);
height: min(1.5625vw, 30px);
}
/* --- Bottom bar (Frame 33 248:956, 1920×136) — 4px stroke is inside in
Figma, so padding-top 32 + 4px border = the design's 36 --- */
.footer-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: min(1.6667vw, 32px) min(3.3333vw, 64px) min(1.875vw, 36px);
background: var(--color-pale-green);
border-top: 4px solid var(--color-bright-green);
}
.footer-logo-link {
display: flex;
}
.footer-logo {
width: min(8.75vw, 168px);
height: min(3.3333vw, 64px);
object-fit: cover;
}
.footer-legal {
display: flex;
/* baseline (not flex-end): the copyright has no padding but the links
carry padding-bottom: 4px, so bottom-alignment dropped the copyright
onto a lower baseline. Aligning text baselines puts them on one line
regardless of box padding (Feedback 1.0 #10). */
align-items: baseline;
gap: min(3.3333vw, 64px);
}
/* 20px text cap-trimmed to a 15px box in Figma — lh 0.75 reproduces it
(same trick as .nav-link) */
.footer-copyright {
font-size: var(--fs-xl);
line-height: 0.75;
color: var(--color-dark-green);
white-space: nowrap;
}
.footer-link {
display: inline-block;
padding-bottom: 4px;
font-size: var(--fs-xl);
line-height: 0.75;
color: var(--color-dark-green);
text-decoration: none;
white-space: nowrap;
transition: color var(--transition-link);
}
.footer-link:hover {
color: var(--color-bright-green);
}
/* --------------------------------------------------------------------------
STICKY NAV — Figma 486:1672 (INSTANCE of 243:373, 1920×120)
Fixed bar; hidden by default, Phase 5 JS adds .is-visible on scroll.
Outer: padding 24/64/0. Bar: 1792×96, rgba(42,62,26,.75), radius 8,
backdrop blur 64, padding 16/36, space-between.
-------------------------------------------------------------------------- */
.nav-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* Equal inset on top + sides (top adopts the side padding) so the bar floats
with matching gaps from the viewport top, left and right. */
padding: min(3.3333vw, 64px) min(3.3333vw, 64px) 0;
transform: translateY(-100%);
/* No authored Figma transition for the reveal — phase default 200ms ease-out */
transition: transform 0.2s ease-out;
}
.nav-sticky.is-visible {
transform: none;
}
.nav-sticky-bar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: min(0.8333vw, 16px) min(1.875vw, 36px);
background: var(--fill-panel-75);
border-radius: var(--radius-md);
-webkit-backdrop-filter: blur(var(--blur-nav));
backdrop-filter: blur(var(--blur-nav));
}
/* A-Shape I486:1672;243:670 — 142×96 at 825,0 spanning the full bar height
(white @ 0.4, opacity baked into the SVG); height:100% keeps it inside
the bar as the fluid padding shrinks it below 96px */
.nav-sticky-deco {
position: absolute;
top: 0;
left: min(42.9688vw, 825px);
width: auto;
height: 100%;
}
/* Separate mobile decoration (ACF sticky_nav_decoration_mobile) — rendered only
when a mobile image is set. It also carries .nav-sticky-deco, so it inherits
the same absolute placement. Hidden on desktop/tablet. */
.nav-sticky-deco-mobile {
display: none;
}
@media (max-width: 768px) {
/* On mobile the standard deco NEVER shows; only the mobile deco does — and it
is output only when its field is set. So an empty mobile field = no
decoration on phones at all. (.nav-sticky-deco-mobile re-shows itself; it
also carries .nav-sticky-deco but the later rule wins for it.) */
.nav-sticky-deco {
display: none;
}
.nav-sticky-deco-mobile {
display: block;
}
}
.nav-sticky-logo {
display: flex;
}
.nav-sticky-logo img {
width: 168px;
height: 64px;
}
.nav-sticky-menu {
display: flex;
align-items: center;
gap: 36px;
}
.nav-sticky-menu li {
display: flex; /* collapse the li line-box strut around the link */
}
/* Sticky links are 22px in Figma; News keeps the 24px .nav-link default */
.nav-link-sticky {
font-size: var(--fs-nav-sticky);
}
/* ==========================================================================
TEAM POPUP (Figma 474:1572, 1920×1080 page-level overlay)
Dim Rectangle 12 (#11320b @ .36) over the page; glass panel Group 2
1378×716 at 271,202 — same overlay-glass-shape assembly as the image
features (reuses .image-glass / .image-overlay-* classes) but with the
0.75-alpha panel fill. Hidden by default; Phase 5 JS toggles .is-open
from the team card's "Mehr über Michael" link and the close X.
========================================================================== */
.team-popup {
position: fixed;
inset: 0;
z-index: 200;
display: none;
}
.team-popup.is-open {
display: block;
}
.team-popup-dim {
position: absolute;
inset: 0;
background: var(--fill-popup-dim);
}
/* Centered in the viewport (Feedback 1.0 #9) — the Figma absolute
coordinates (271,202) pushed the tall panel toward the bottom on normal
laptop heights. translate(-50%,-50%) keeps it centered both axes. */
.team-popup-panel {
position: absolute;
left: 50%;
/* Vertically centered (Feedback 1.0 #9), but clamped so the top never rises
into the fixed sticky nav on short viewport heights. The sticky bar now spans
its top min(3.3333vw,64px) padding + ~96px bar (its top padding was widened to
match the sides); keep the panel ~44px below that. On tall viewports the
centered branch wins and the layout is unchanged. */
top: max(calc(min(3.3333vw, 64px) + 140px), calc(50% - min(18.6458vw, 358px)));
transform: translateX(-50%);
width: min(71.7708vw, 1378px);
height: min(37.2917vw, 716px);
}
/* Outer Subtract I474:1572;474:1541 — rgba(42,62,26,.75) + bg-blur 64 */
.team-popup-glass {
background: var(--fill-panel-75);
clip-path: url(#glass-clip-popup);
}
/* Group 5 I474:1572;487:1686 — 54×54 hit area at 25,22; 29×29 X centered */
.team-popup-close {
position: absolute;
left: min(1.3021vw, 25px);
top: min(1.1458vw, 22px);
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.team-popup-close img {
display: block;
}
/* Heading I474:1572;474:1549 at 74,93 in panel (vs 122 in image overlays) */
.team-popup-heading {
top: min(4.8438vw, 93px);
}
/* Frames 18/19 — right-aligned 728px paragraphs at panel tops 305 / 533.
One flow column: 305 + para1 210 + gap 18 = 533 exact at 1920, and an
extra wrapped line below 1920 pushes para 2 down instead of overlapping */
.team-popup-body {
position: absolute;
left: min(3.8542vw, 74px);
top: min(15.8854vw, 305px);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: min(0.9375vw, 18px);
width: min(45.2604vw, 869px);
}
/* ==========================================================================
RESPONSIVE — Phase 4. No mobile/tablet frames exist in the Figma file
(all frames are 1920) — values below are derived per
phases/04-responsive.md (fluid zone 1920→1200 is handled by the min()
values above; breakpoints only restructure). NO :root overrides here.
========================================================================== */
/* ===== RESPONSIVE — GLOBAL BASE ===== */
html,
body {
min-width: 320px;
}
/* Mobile-only nav elements, hidden on desktop */
.nav-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
}
.nav-hamburger span,
.nav-hamburger span::before,
.nav-hamburger span::after {
display: block;
width: 28px;
height: 2px;
background: var(--color-white);
transition: transform var(--transition-link), opacity var(--transition-link),
background var(--transition-link);
}
.nav-hamburger span {
position: relative;
}
.nav-hamburger span::before,
.nav-hamburger span::after {
content: '';
position: absolute;
left: 0;
}
.nav-hamburger span::before {
top: -9px;
}
.nav-hamburger span::after {
top: 9px;
}
.nav-hamburger:hover span,
.nav-hamburger:hover span::before,
.nav-hamburger:hover span::after {
background: var(--color-bright-green);
}
/* Open state (Phase 5 JS toggles .is-active): lines collapse into an X */
.nav-hamburger.is-active span {
background: transparent;
}
.nav-hamburger.is-active span::before {
transform: translateY(9px) rotate(45deg);
}
.nav-hamburger.is-active span::after {
transform: translateY(-9px) rotate(-45deg);
}
/* Sticky nav — MOBILE dimensions from Figma "Mix Schriftgrößen" (node 1348:940):
bar with 16px side margins, 70px tall (logo 54 + 8/8 padding), radius 4, inner
padding top/bottom 8 · left 8 · right 16; logo 142×54; hamburger lines 41px.
Scoped to ≤768 so tablet/desktop keep their fluid dimensions. */
@media (max-width: 768px) {
.nav-sticky {
padding: 16px 16px 0;
}
.nav-sticky-bar {
padding: 8px 16px 8px 8px;
border-radius: 4px;
background: rgba(5, 32, 0, 0.75); /* Figma #052000 @ 0.75 (mobile) */
}
.nav-sticky-logo img {
width: 142px;
height: 54px;
}
.nav-hamburger span,
.nav-hamburger span::before,
.nav-hamburger span::after {
width: 41px;
}
}
/* Overlay (Feedback 5.0 #2): fade + slight slide instead of an abrupt display
swap. display:none keeps it inert above 1200 (it can never open there); the
≤1200 nav block flips it to display:flex so opacity/transform can transition.
visibility is delayed by the fade duration on close so the fade-out plays,
then the panel leaves the a11y tree + hit-testing. */
.nav-mobile-menu {
display: none;
position: fixed;
inset: 0;
z-index: 150; /* above sticky nav (100), below popup (200) */
flex-direction: column;
padding: 104px 32px 48px;
background: var(--color-dark-green);
overflow-y: auto;
opacity: 0;
visibility: hidden;
pointer-events: none; /* don't intercept clicks while hidden or fading out */
transform: translateY(-12px);
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out,
visibility 0s linear 0.4s;
}
.nav-mobile-menu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out,
visibility 0s;
}
.nav-mobile-close {
position: absolute;
top: 20px;
right: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 0;
}
/* Close control = the same hamburger lines as the bar button. They sit as a
burger by default and rotate into an X while the overlay is open, so opening
reads as the burger morphing into the X (and closing reverses it). */
.nav-mobile-close span,
.nav-mobile-close span::before,
.nav-mobile-close span::after {
display: block;
width: 28px;
height: 2px;
background: var(--color-white);
transition: transform 0.4s ease-in-out, background 0.4s ease-in-out;
}
.nav-mobile-close span {
position: relative;
}
.nav-mobile-close span::before,
.nav-mobile-close span::after {
content: '';
position: absolute;
left: 0;
}
.nav-mobile-close span::before {
top: -9px;
}
.nav-mobile-close span::after {
top: 9px;
}
.nav-mobile-close:hover span::before,
.nav-mobile-close:hover span::after {
background: var(--color-bright-green);
}
.nav-mobile-menu.is-open .nav-mobile-close span {
background: transparent;
}
.nav-mobile-menu.is-open .nav-mobile-close span::before {
transform: translateY(9px) rotate(45deg);
}
.nav-mobile-menu.is-open .nav-mobile-close span::after {
transform: translateY(-9px) rotate(-45deg);
}
/* Respect reduced-motion: show/hide and morph instantly. */
@media (prefers-reduced-motion: reduce) {
.nav-mobile-menu,
.nav-mobile-close span,
.nav-mobile-close span::before,
.nav-mobile-close span::after {
transition: none;
}
}
/* White ARKAD logo in the opened menu (Feedback 2.0 mobile #3) — top-left,
mirroring the X (same top + 54px box) so both sit on one horizontal axis.
Links to the homepage. */
.nav-mobile-logo {
position: absolute;
top: 20px;
left: 16px;
display: flex;
align-items: center;
height: 54px;
}
.nav-mobile-logo img {
width: auto;
height: 40px;
}
.nav-mobile-list {
display: flex;
flex-direction: column;
text-align: center; /* menu items centred (full-width links keep the tap target) */
}
/* The language switcher item is a flex row, so text-align doesn't move it —
centre its link explicitly to match the other menu items. */
.nav-mobile-list .nav-lang {
justify-content: center;
}
.nav-mobile-link {
display: block;
padding: 14px 0;
font-size: 28px;
line-height: 1.2;
color: var(--color-white);
transition: color var(--transition-link);
}
.nav-mobile-link:hover {
color: var(--color-bright-green);
}
/* ==========================================================================
TABLET — max-width: 1200px (first layout-shift breakpoint)
========================================================================== */
@media (max-width: 1200px) {
/* --- NAV: collapse to hamburger (mobile menu is a sibling of the fixed
bar, so the bar's backdrop-filter can keep running) --- */
.hero-nav-menu,
.nav-sticky-menu {
display: none;
}
.nav-hamburger {
display: flex;
}
/* Render the overlay so its opacity/transform can transition (it stays
hidden via opacity/visibility until .is-open). */
.nav-mobile-menu {
display: flex;
}
/* --- HERO: the homepage Hero V1 adopts the Hero V2 layout on tablet too,
not just mobile (Feedback 2.0 tablet #3) — so every hero defaults to V2
below 1200px. V2 box proportions + the V2 bottom-anchored "A" mask. The
heading size and the tablet "A" right-push (which contain the headline)
are shared with the subpage V2 hero in modules.css. --- */
.hero:not(.hero-v2) {
height: auto;
min-height: min(39.3229vw, 755px);
padding: 150px min(3.3333vw, 64px) 56px;
}
/* On tablet/mobile the home hero (V1) takes Hero V2's format: its own
hero-v2-a-shape.png "A", left-anchored, matching .hero-clear-v2's ≤1200 base
in modules.css — so both heroes look identical on small screens. V1 keeps its
own hero-a-shape.svg on desktop (>1200); V2's narrower redesign is desktop-only. */
.hero:not(.hero-v2) .hero-clear {
-webkit-mask-image: url(../images/hero-v2-a-shape.png);
mask-image: url(../images/hero-v2-a-shape.png);
-webkit-mask-size: min(58.3333vw, 1120px) auto;
mask-size: min(58.3333vw, 1120px) auto;
-webkit-mask-position: min(44.7917vw, 860px) calc(100% + min(0.8854vw, 17px));
mask-position: min(44.7917vw, 860px) calc(100% + min(0.8854vw, 17px));
}
/* --- STATS: 3-across cards stack to one column --- */
.stats-cards {
flex-direction: column;
gap: 24px;
padding-top: 48px;
}
.stat-card {
flex: none; /* drop the desktop 3-per-row basis so column cards size by content */
width: 100%;
height: auto;
min-height: 220px;
}
/* --- IMAGE FEATURES: hover-revealed overlay becomes always-visible
static content below the photo (no hover on touch devices) --- */
.image-feature {
height: auto;
}
.image-zoom {
position: relative;
height: 56.25vw; /* keeps the photo's 16:9 crop box */
overflow: hidden;
transition: none;
}
.image-feature.is-revealed .image-zoom {
transform: none;
}
.image-overlay {
position: static;
display: flex;
flex-direction: column;
gap: 24px;
width: auto;
height: auto;
padding: 64px 40px;
background: var(--color-dark-green);
opacity: 1;
transition: none;
}
.image-feature .image-glass {
display: none;
}
.image-overlay-heading {
position: static;
}
.image-overlay-row {
position: static;
width: auto;
justify-content: flex-start;
}
.image-overlay-text {
width: auto;
max-width: 728px;
/* font-size governed by --fs-xl token (20 tablet / 18 mobile) */
}
/* --- TEAM: rows stack; cards wrap at their full Figma size; bio panel
geometry switches to percentages of the photo frame (identical px at
this fixed frame size, and it keeps scaling on phones) --- */
/* The section gap min(2.0833vw,40px) collapses to ~8px on phones, making
the gap between row 1 and row 2 smaller than the within-row card gaps.
Pin it to 40px so every team-card gap is uniform (Feedback 3.0 #2c). */
.team {
gap: 40px;
}
.team-row {
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
.team-intro {
width: 100%;
}
.team-intro-text {
width: auto;
max-width: 702px;
}
.team-cards {
flex-wrap: wrap;
align-items: flex-start;
gap: 24px;
width: 100%; /* row-1 wrapper must span full width, else its cards (the first
two) collapse to ~40px on phones where they get width:100% */
}
.team-photo-frame {
width: 421.5px;
height: 526.875px;
}
.team-card-zoom:hover .team-photo-rect, .team-card-zoom.is-hover .team-photo-rect {
left: -2.1352%; /* −9 / 421.5 */
top: -2.0878%; /* −11 / 526.875 */
width: 104.1518%; /* 439 / 421.5 */
height: 104.1993%;/* 549 / 526.875 */
}
/* Dynamic overlay height (Feedback 3.0 tablet #1): the fixed open height
clipped longer bios (e.g. Pepyn Dinandt). Anchor the box to a fixed
bottom edge with height:auto so it grows UPWARD over the photo to fit all
text/links/icons. Because top/height are now auto (not animatable), the
reveal is animated with transform+opacity instead — so the slide-up
"effect" still plays at these sizes, not just on desktop. */
.team-bio {
left: 24px;
right: 24px;
top: auto;
bottom: 4.7213%; /* matches the old open box's bottom edge */
height: auto;
gap: 24px;
padding: 24px;
transform: translateY(24px);
transition: opacity var(--transition-link), transform var(--transition-link);
}
.team-card-2 .team-bio {
top: auto; /* bottom-anchored now; drop the desktop card-2 special top */
}
/* override the desktop open rule's fixed top/height so the box stays
bottom-anchored with content height; just slide it in via transform. */
.team-card:hover .team-bio, .team-card.is-hover .team-bio {
top: auto;
height: auto;
transform: translateY(0);
}
.team-bio-text {
font-size: 18px;
}
.team-bio-link,
.team-bio-email {
gap: 16px;
font-size: 20px;
}
.team-bio-link-icon {
width: 22px;
height: 22px;
}
.team-bio-email-icon {
width: 25px;
height: 25px;
}
.team-name {
padding: 24px; /* fixed plate padding to match the fixed-size tablet frame */
}
/* --- FOOTER CTA: absolute inner becomes flowing, wrapping content --- */
.footer-cta {
height: auto;
}
.footer-bg {
top: 0;
height: 100%;
object-fit: cover;
}
.footer-cta-inner {
position: relative; /* keeps it painting above the absolute deco */
left: auto;
right: auto;
top: auto;
flex-wrap: wrap;
gap: 64px; /* Figma 1348:962: heading → contact block */
padding: 64px 16px; /* mobile redesign (Figma): 64 top/bottom, 16 sides */
}
.footer-heading {
font-size: 22px; /* client: footer top heading 24 → 22 on mobile */
}
.footer-contact {
width: auto;
min-width: 0;
}
.footer-contact-col {
width: auto;
}
.footer-contact-row {
align-items: flex-start;
gap: 16px;
font-size: 16px; /* Figma footer contact rows */
white-space: normal;
}
.footer-icon-address {
width: 22px;
height: 25px;
}
.footer-icon-email {
width: 25px;
height: 25px;
}
.footer-icon-phone {
width: 25px;
height: 30px;
}
/* --- TEAM POPUP: fixed glass panel becomes a scrollable solid dialog --- */
.team-popup {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Centre the OPEN popup panel (margin:auto in a flex box; it still scrolls if
taller than the viewport). Only .is-open — must not override display:none. */
.team-popup.is-open {
display: flex;
}
/* the popup scrolls here — pin the dim to the viewport so content
scrolled past the first screen stays dimmed */
.team-popup-dim {
position: fixed;
}
.team-popup-panel {
position: relative;
left: auto;
top: auto;
transform: none;
width: calc(100% - 48px);
height: auto;
margin: auto; /* vertically centred in the viewport (mobile + tablet) */
padding: 88px 32px 48px;
background: var(--color-dark-green);
border-radius: var(--radius-md);
}
.team-popup .image-glass {
display: none;
}
.team-popup-close {
left: auto;
right: 12px;
top: 12px;
}
.team-popup-heading {
position: static;
}
.team-popup-body {
position: static;
align-items: flex-start;
width: auto;
margin-top: 24px;
gap: 18px;
}
}
/* ==========================================================================
TABLET ONLY — 769–1200px: team cards 2 per row (Feedback 2.0 tablet #5)
The ≤1200 rules stack the cards single-column (fixed 421.5px frames),
leaving the right half empty. Here the cards go fluid at 50% width so two
sit per row across the whole tablet range; the % bio/zoom geometry scales
with the frame. Mobile (≤768) keeps its single-column layout below.
========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {
/* second/“rest” rows lay their cards out in a wrapping 2-up row */
.team-row-2 {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 40px 24px;
}
/* row 1's card group spans the full width so its two cards size to 50% */
.team-cards {
width: 100%;
}
.team-card {
width: calc((100% - 24px) / 2);
max-width: none;
}
.team-photo-frame {
width: 100%;
height: auto;
max-width: none;
aspect-ratio: 421.5 / 526.875;
}
.team-name {
width: 100%;
}
}
/* ==========================================================================
MOBILE — max-width: 768px (single-column, reduced typography/spacing)
========================================================================== */
@media (max-width: 768px) {
/* --- NAV --- */
.nav-mobile-menu {
padding: 96px 24px 40px;
}
/* HERO: the homepage V1→V2 morph (box + "A" mask) now lives in the ≤1200
block (Feedback 2.0 tablet #3) so it covers tablet AND mobile. Only the
mobile heading floor + the ≤480 "A" size remain breakpoint-specific. */
.hero-heading {
font-size: 36px; /* H1 mobile = 36 (client spec); matches --fs-h1 ≤768 */
}
/* Lift the home headline higher inside the green too (Feedback 3.0 mobile
#1) — matches the subpage V2 hero's bottom padding. */
.hero:not(.hero-v2) {
padding-bottom: 110px;
}
/* Mobile (<768px) header image: swap in hero_vX_image_mobile when set (falls
back to the desktop image). Both photo layers swap here; the V2 cutout
layer .hero-clear-v2 is handled in modules.css. */
.hero-bg,
.hero-clear {
background-image: var(--hero-img-m, var(--hero-img));
}
/* Uniform team-card spacing (Feedback 3.0 mobile #2): row 1's two cards
used a 24px gap while every other card gap is 40px. Match them so the
vertical spacing between all stacked cards is identical. */
.team-cards {
gap: 40px;
}
/* Keep each person's NAME on a single line on mobile (client: David van
Riesen wrapped to two rows though the plate had room). The name row is
flex [name | "+"]; nowrap stops an avoidable break — the role keeps its
own line via the
. Every current name fits the plate with margin to
spare down to 320px (the longest, "DR. JAN-PHILIP BRANDT", stays inside
too). Scoped to ≤768 so tablet/desktop layout is untouched. */
.team-name-person {
white-space: nowrap;
}
/* Shared/section headings now scale via the --fs-h2 token (Feedback 3.0
typography) — no fixed mobile override, so the hierarchy stays ordered. */
/* --- STATS --- */
.stats {
padding: 64px 16px; /* mobile redesign (Figma 1348:929) */
}
.stats-cards {
padding-top: 32px;
}
/* --- IMAGE FEATURES --- */
.image-overlay {
padding: 48px 24px;
}
/* --- TEAM --- */
.team {
padding: 60px 24px;
}
/* --- FOOTER --- */
.footer-cta-inner {
gap: 40px;
padding: 64px 24px 48px;
}
.footer-bar {
flex-wrap: wrap;
gap: 16px 24px;
padding: 32px 16px 48px; /* mobile redesign (Figma 1348:962): 32 top, 16 sides, 48 bottom */
}
/* fluid min() would shrink the logo to ~33×12 on phones */
.footer-logo {
width: 137px; /* Figma footer bottom logo */
height: 52px;
}
.footer-legal {
flex-wrap: wrap;
gap: 12px 24px;
}
/* Client: keep both legal links (Impressum + Datenschutz) together on one
row — the copyright takes its own full-width row so the two links wrap as a
pair beneath it, instead of Datenschutz dropping alone onto a third row. */
.footer-copyright {
flex-basis: 100%;
font-size: 16px; /* Figma footer bottom text */
}
.footer-link {
padding: 12px 0;
font-size: 16px; /* Figma footer legal links */
}
/* --- TEAM POPUP --- */
.team-popup-panel {
margin: auto;
width: calc(100% - 32px);
padding: 80px 20px 40px;
}
}
/* ==========================================================================
SMALL MOBILE — max-width: 480px (typography + spacing fine-tuning only)
========================================================================== */
@media (max-width: 480px) {
/* --- NAV --- */
.nav-mobile-menu {
padding: 88px 20px 32px;
}
.nav-mobile-link {
font-size: 24px;
}
/* --- HERO --- */
/* No .hero padding override here: the ≤768 V2-matched box (150px /
min(3.3333vw,64px) / 56px) already resolves correctly down to 320px, and
.hero-v2 ignores a .hero override anyway — so dropping it keeps the
unified V1/V2 hero identical at ≤480 (Feedback 2.0 mobile #1). */
/* Match .hero-clear-v2's larger phone "A" (same specificity as the ≤1200
home morph so this wins by source order at ≤480). */
.hero:not(.hero-v2) .hero-clear {
-webkit-mask-size: 86vw auto;
mask-size: 86vw auto;
/* Position inherits the flush-right base so the phone "A" matches Hero V2
(whose ≤480 rule also inherits flush-right). */
}
.hero-heading {
font-size: 36px;
}
/* --- STATS --- */
.stats {
padding: 64px 16px; /* mobile redesign (Figma 1348:929) — 64 down to small phones */
}
/* stat values scale via --fs-stat / --fs-h3 tokens now (Feedback 3.0) */
/* --- IMAGE FEATURES --- */
.image-overlay {
padding: 40px 16px;
}
/* --- TEAM: cards shrink with the viewport (aspect-ratio keeps the
Figma frame proportion; the % bio/crop geometry scales along) --- */
.team {
padding: 40px 16px;
}
.team-photo-frame {
width: 100%;
max-width: 421.5px;
height: auto;
aspect-ratio: 421.5 / 526.875;
}
.team-card {
width: 100%;
max-width: 421.5px;
}
/* --- FOOTER --- */
.footer-cta-inner {
padding: 64px 16px; /* mobile redesign (Figma) — 64 down to small phones */
}
.footer-bar {
justify-content: center;
text-align: center;
}
.footer-legal {
justify-content: center;
}
/* --- TEAM POPUP --- */
.team-popup-panel {
margin: auto;
width: calc(100% - 24px);
padding: 72px 16px 32px;
}
}
/* ============================================================================
Drei Karten ("Kennzahlen"/stats) cards — MOBILE (Figma "Mix Schriftgrößen"
1348:929): each dark card padding 16, radius 4; label 18 (cream) grouped over
value 30 (bright) at gap 20; small geometric icon 65×60 vertically centred on
the right. Tablet keeps its own block below; desktop unchanged. */
@media (max-width: 768px) {
.stat-card {
height: auto;
min-height: 0;
justify-content: center;
gap: 20px;
padding: 16px;
border-radius: 4px;
}
.stat-label {
font-size: 18px;
}
.stat-value {
font-size: 30px;
}
.stat-icon {
width: 16.1692vw; /* 65px @ 402 */
height: 14.9254vw; /* 60px @ 402 */
top: 50%;
right: 16px;
bottom: auto;
transform: translateY(-50%);
object-position: center;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.stat-card {
justify-content: center;
gap: 4px;
min-height: calc(18vw + 64px); /* icon height + 32px top + 32px bottom */
}
.stat-value {
font-size: 48px;
}
.stat-icon {
width: 18vw;
height: 18vw;
top: 50%;
right: 32px;
bottom: auto;
transform: translateY(-50%);
object-position: center;
}
/* Intro row: drop the desktop fluid min() column cap (~45vw) so it spans the
full width on tablet instead of a narrow right-aligned column. */
.stats-intro-row {
width: 100%;
}
}