/* =========================================================================
Felix M. Schönberger — public website
Editorial / anthracite. Plain CSS, no build. See CLAUDE.md + MASTER-PLAN.md.
Typography is the primary visual element. One restrained accent. One
orchestrated motion moment. No per-section animation.
Fonts: self-hosted woff2 via assets/css/fonts.css (Fraunces + Inter, variable).
========================================================================= */
:root {
/* Neutrals — warm off-white → warm earth-dark (2026-09-26: replaced the
former near-black --anthracite #23262A across the whole dark-neutral
family - --ink/--ink-2/--nav-active shifted warmer too, not just the
structural-background token, per Felix's brief. --earth-dark's value
was chosen by rendering #4A433D against three neighbouring candidates
(#48413B/#4C453F/#504841) as flat swatches next to --paper and
eyeballing warmth/legibility, not picked from the hex alone - all
four cleared >8:1 contrast against --paper, so the choice was purely
visual. Deliberately a SMALL family (--ink/--ink-2/--earth-dark/
--earth-hover only) - --nav-ink/--nav-dimmed/--muted/--on-dark-mut
were already warm-leaning and are left as-is, per the brief's own
explicit warning against turning every neutral in the site into a
slightly different brown. */
--paper: #F6F5F2;
--paper-2: #EEEBE5;
--card: #FFFFFF;
--ink: #201D1A; /* was #191A1A (neutral near-black) - warm undertone, still reads as near-black in running text */
--ink-2: #2E2A26; /* was #26282A (slightly cool/blue-leaning) - now warm, matching --ink's family */
--muted: #5F5E59; /* ~5.3:1 on --paper */
--line: #D4D1CA;
--line-soft: #E4E1DA;
--earth-dark: #4A433D; /* was --anthracite #23262A - see family note above */
--earth-hover:#3A342F; /* one step deeper than --earth-dark, for button hover only - was a hardcoded #101214 near-black with no token at all */
--nav-ink: #4B4A46; /* nav's resting tone - a step lighter than --earth-dark/--nav-active, so brand and navigation read as two different weights of dark rather than one flat black. Already warm-leaning; left unchanged. */
--nav-active: #4A433D; /* explicit hover/focus/interaction-active tone for grouped nav links - same value as --earth-dark (brand), deliberately darker than --nav-ink's resting tone */
--nav-dimmed: #6B6660; /* grouped-link sibling-dimming tone - visibly lighter than --nav-ink's resting tone, not the same value, so the interaction reads as a real colour change. ~4.78:1 against --paper-2 (WCAG AA for normal-size text); the original #A09D95 measured ~2.28:1, confirmed by direct computation and fixed 2026-09-25 */
--on-dark: #E9E8E3;
--on-dark-mut:#BAB9B3; /* was #A6A59F, tuned for the old, darker --anthracite (~5.6:1 there) -
only ~3.93:1 against the new, lighter --earth-dark, failing WCAG AA
for the normal-size text it's actually used on (.eyebrow inside
.section--dark, .site-footer__legal) - lightened to restore ~4.94:1,
caught by an explicit contrast pass across every token pairing, not
assumed safe from the family shift alone */
/* One restrained accent — deep pine-slate. Reads as ink with a hint of green.
Tunable: if it ever reads sage/wellness, cut chroma (toward #363B38), never
toward copper/terracotta. Used only for: nav underline, focus ring, the one
section rule, link underline on hover. Never on buttons. */
--accent: #34423C;
--accent-ink: #2A3630;
--accent-soft:#E8ECE8;
--danger: #99342B;
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
--s5: 3rem; --s6: 4.5rem; --s7: 6.5rem; --s8: 9rem;
--radius: 2px;
--maxw: 1200px;
--measure: 34rem; /* body text */
--measure-serif: 30rem; /* serif lede — shorter */
--header-h: 74px;
--gutter: clamp(1.25rem, 5vw, 5.5rem);
--ease: cubic-bezier(.2,.6,.35,1);
/* Sitewide type scale (2026-09-27, consolidated per Felix's explicit
"one consistent size/system per role, no random page-specific sizes"
brief). Named tokens for the roles that already existed as scattered
rules across the file - documents the system rather than changing
it, except for the one genuine outlier found during the audit
(.legal h2's flat, non-responsive 1.3rem, fixed below to a real
token). Two deliberate, structurally-justified tiers remain, now
named instead of implicit: --text-h1-hero (large, used inside
.hero - every content page's own headline, all consistent with each
other) vs. --text-h1 (smaller, used for plain in-page h1s like legal
pages' "Datenschutzerklärung" - a document label, not a hero
headline). Same content-role always gets the same token everywhere;
nothing here is a one-off per-page value. */
--text-h1-hero: clamp(2.15rem, .6rem + 7.4vw, 7rem);
--text-h1: clamp(2.5rem, 1rem + 6.5vw, 5rem);
--text-h2: clamp(1.8rem, 1.1rem + 2.8vw, 3rem);
--text-h2-compact: clamp(1.15rem, 1rem + .8vw, 1.3rem); /* dense reference sections (legal-page subsections) - same fluid system, deliberately smaller role */
--text-h3: clamp(1.1rem, 1rem + .5vw, 1.3rem);
--text-body: clamp(1rem, .97rem + .18vw, 1.09rem); /* matches body{}'s own value below - one source of truth */
/* Brand-label voice (2026-09-27, formalized per Felix's explicit
follow-up brief) - the small uppercase/tracked typography of the
logo's own "PSYCHOLOGISCHE BERATUNG"/"PSYCHOLOGICAL COUNSELLING"
subline. That subline (.brand__word in the header) is real HTML
text, not an image, SVG or converted path - inspected directly
rather than assumed, so these tokens are copied verbatim from its
own long-settled values, not reverse-engineered or approximated.
.eyebrow and .brand__word both now read from these tokens instead
of each hardcoding its own copy of the same three values, so the
two can never drift apart again. Font-size is deliberately NOT
tokenized here - .brand__word (.66rem, wordmark-scale) and .eyebrow
(.74rem, section-label-scale) are different roles at a similar but
not identical size, and forcing one size on both would make one of
the two look wrong for its context. */
--brand-label-font: var(--font-body);
--brand-label-weight: 400;
--brand-label-tracking: .13em;
--brand-label-tracking-tight: .1em; /* narrow-viewport variant, already used by .eyebrow below 480px */
}
/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
margin: 0; background: var(--paper); color: var(--ink);
font-family: var(--font-body);
font-size: var(--text-body); line-height: 1.62;
-webkit-font-smoothing: antialiased; font-synthesis: none;
font-optical-sizing: auto; text-rendering: optimizeLegibility;
}
/* Destination-page entrance fade (2026-09-25) - only active when the
element carries this class, which a tiny blocking inline
script in (de/index.html, en/index.html,
de/einfache-sprache.html only) adds by reading a one-time
sessionStorage flag the gateway's own transition leaves behind before
navigating (assets/js/main.js triggers the reveal, two rAFs after
load so the browser has actually painted the hidden state first - see
that file). Every other visit - direct load, reload, back/forward,
any page without that inline script - never gets the class, so
nothing here ever applies; this is strictly additive, not a change to
normal page load. */
html.is-gateway-arrival body { opacity: 0; transform: translateY(4px); }
html.is-gateway-arrival body.is-gateway-revealed {
opacity: 1; transform: translateY(0);
transition: opacity .4s var(--ease), transform .4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
html.is-gateway-arrival body { opacity: 1; transform: none; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-ink); }
h1, h2, h3, h4 {
font-family: var(--font-display); color: var(--ink-2);
font-weight: 440; line-height: 1.06; letter-spacing: -0.02em;
margin: 0 0 .5em; font-optical-sizing: auto; text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: 360; line-height: 1.0; letter-spacing: -0.032em; }
h2 { font-size: var(--text-h2); font-weight: 400; letter-spacing: -0.026em; }
h3 { font-size: var(--text-h3); font-weight: 500; letter-spacing: -0.012em; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
ul, ol { margin: 0 0 var(--s3); padding-left: 1.15em; }
li { margin: .35em 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
::selection { background: var(--earth-dark); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
a:focus-visible { background: var(--accent-soft); outline-offset: 2px; }
.section--dark :focus-visible { outline-color: var(--on-dark); }
.section--dark a:focus-visible { background: rgba(233,232,227,.16); }
.skip-link {
position: absolute; left: var(--s2); top: -60px; z-index: 100;
background: var(--earth-dark); color: var(--on-dark); padding: .7rem 1.1rem; border-radius: var(--radius);
transition: top .16s var(--ease);
}
.skip-link:focus { top: var(--s2); }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
/* clip-path replaces the deprecated clip:rect() (2026-09-26, QA pass) -
same screen-reader-only effect, universally supported by evergreen
browsers, no stylelint property-no-deprecated finding. */
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ----- Layout ----- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* Sitewide section rhythm, raised 2026-09-25 per Felix's feedback that
consecutive sections read as too tight, especially below ~1600px where
the vw component hadn't yet caught up to the old --s5 floor. Same
clamp() expression as the --ground boundary case below, kept in sync -
floor raised --s5->--s6 and the vw coefficient bumped 9->10, so every
page gets more air between sections without touching the shared --s*
scale itself (only ≥1600px, already at the --s8 ceiling either way, is
unaffected). */
.section { padding-block: clamp(var(--s6), 10vw, var(--s8)); }
.section + .section { padding-top: 0; }
/* The About page's membership-logos section is much shorter content (one
row of small grayscale marks) than the standard .section padding-block
was tuned for - at the default rhythm it left a visibly oversized empty
band before the closing dark CTA. Scoped to just this section, on both
the DE and EN About pages, rather than changing the sitewide token. */
#mitgliedschaften, #memberships { padding-bottom: clamp(var(--s4), 5vw, var(--s6)); }
/* Homepage (DE+EN) closing-process section, same problem/fix as the
About-page membership section above: the "Wie eine Zusammenarbeit
beginnt" / "How a collaboration begins" section's own trailing note +
"Ablauf und Kosten"/"Process and fees" link read as a short, orphaned
tail against the sitewide section padding-bottom, leaving a visibly
oversized pale band before the dark closing CTA (2026-09-26,
Felix's explicit brief). Scoped to this section's own id, not the
shared .section rule. The trailing note+link are also centered here
(they read as left-aligned stray lines otherwise, against the
section's own centered heading/lede above) - own rule below, not a
change to .form__note or .link-arrow generally. */
#wie-eine-zusammenarbeit-beginnt, #how-a-collaboration-begins {
padding-bottom: clamp(var(--s4), 5vw, var(--s6));
}
#wie-eine-zusammenarbeit-beginnt > .wrap > .form__note,
#how-a-collaboration-begins > .wrap > .form__note,
#wie-eine-zusammenarbeit-beginnt > .wrap > p:last-child,
#how-a-collaboration-begins > .wrap > p:last-child {
text-align: center;
}
/* About page (DE+EN), local spacing harmonization after removing the
video section (2026-09-25): the video used to sit between the
portrait row and "Qualifikation und Erfahrung", and again between
that section and the video's own bottom margin before Mitgliedschaften
- removing it let both of those boundaries fall back to the sitewide
--ground-transition rule's FULL padding on both sides at once (a much
bigger gap than either section was designed to sit at alone). Scoped
to these ids, which only exist on the About pages, not a change to the
shared .section/.section--ground rules themselves. ID selectors (not
.section--botanical--about, which would tie the sitewide ground-
boundary rule's own specificity and could lose on source order) so
this reliably wins regardless of where it sits in the file. */
#qualifikation-erfahrung,
#mitgliedschaften, #memberships {
padding-top: clamp(var(--s4), 6vw, var(--s6));
}
#mitgliedschaften .affiliations, #memberships .affiliations {
gap: var(--s3) var(--s4);
}
.section--ground { background: var(--paper-2); }
.section--ground + .section,
.section + .section--ground { padding-top: clamp(var(--s6), 10vw, var(--s8)); }
/* The final-CTA dark section is a distinct, high-contrast component that
should never visually merge with whatever precedes it - unlike the
zero-padding rule above (meant for two plain sections stacking directly).
Without this, its padding-top depended on an incidental accident of
markup (whether a --ground section happened to precede it), producing a
measured 0px/144px top/bottom asymmetry on pages where it didn't, versus
a symmetric 144px/144px where it did. Pin padding-top explicitly so it's
always symmetric with the base .section padding-block, everywhere. */
.section + .section--dark { padding-top: clamp(var(--s6), 10vw, var(--s8)); }
.section--dark { background: var(--earth-dark); color: var(--on-dark); position: relative; overflow: hidden; }
.section--dark > .wrap { position: relative; z-index: 1; }
/* The final-CTA pattern (.section--dark > .wrap.prose: h2 + p + button)
otherwise inherits .prose's 34rem measure, which is meant for running
body text — on a short headline + button it collapses into a narrow,
center-floating column instead of sitting in the site's normal
left-aligned content grid. Widen the container back to the shared
--maxw here specifically (leaves every other .wrap.prose use, e.g.
Mögliche Erstattung, untouched); the heading and body paragraph keep
their own sensible reading widths via the rules below instead. */
.section--dark > .wrap.prose { max-width: var(--maxw); }
.section--dark > .wrap.prose h2 + p { max-width: 42rem; }
.section--dark::before {
content: ""; position: absolute; right: -3%; bottom: -12%;
width: clamp(220px, 28vw, 400px); aspect-ratio: 720 / 1064;
background: url("../img/botanical-editorial.webp") right bottom / contain no-repeat;
opacity: .1; pointer-events: none;
}
@media (max-width: 760px) { .section--dark::before { display: none; } }
/* ----- Botanical background motif — extremely subtle editorial watermark.
Same url()/no-repeat technique as .section--dark's own leaf accent
above, at much lower opacity for light paper backgrounds. Decorative
only: a CSS background on a ::before, never an ![]()
, so nothing is
exposed to screen readers and no alt text is needed. Used sparingly —
two placements only (Themen thematic transition, About professional
transition) — each with its own crop/position/scale so the motif
reads as a considered system rather than a repeated wallpaper. */
.section--botanical { position: relative; overflow: hidden; }
.section--botanical > .wrap { position: relative; z-index: 1; }
.section--botanical::before { content: ""; position: absolute; pointer-events: none; }
@media (max-width: 760px) { .section--botanical::before { display: none; } }
.section--botanical--themen::before {
right: -6%; top: -8%;
width: clamp(260px, 30vw, 460px); aspect-ratio: 720 / 1064;
background: url("../img/botanical-editorial.webp") right top / contain no-repeat;
opacity: .06;
}
@media (max-width: 1100px) { .section--botanical--themen::before { width: clamp(220px, 26vw, 360px); opacity: .05; } }
/* The source asset has an opaque white canvas around the leaves (not
transparent), so a plain low-opacity crop left a faint but visible
rectangle where that white met the paper background. mix-blend-mode:
multiply drops the white entirely (white × anything = anything) so
only the sepia leaf pixels tint the page, and the mask fades the
remaining crop edge to nothing instead of ending in a hard line. */
.section--botanical--about::before {
left: -9%; top: -7%;
width: clamp(300px, 32vw, 460px); height: clamp(400px, 40vw, 560px);
background: url("../img/botanical-editorial.webp") 30% 15% / 240% auto no-repeat;
opacity: .08; mix-blend-mode: multiply;
mask-image: radial-gradient(circle at 12% 10%, #000 0%, transparent 42%);
-webkit-mask-image: radial-gradient(circle at 12% 10%, #000 0%, transparent 42%);
}
@media (max-width: 1100px) { .section--botanical--about::before { width: clamp(230px, 28vw, 340px); height: clamp(300px, 34vw, 420px); opacity: .06; } }
/* Qualifikation und Erfahrung (About): each .wrap.prose child otherwise
inherits .prose's 34rem measure on the whole container (same bug as
the dark final-CTA above), collapsing the heading and list into a
narrow centred column with dead space either side. Widen both back to
the section's normal grid; only the intro lede keeps its own capped
reading width. */
.section--botanical--about > .wrap.prose { max-width: var(--maxw); }
.section--botanical--about > .wrap.prose:first-child .lede { max-width: 48rem; }
/* Themen "Meine Schwerpunkte" / "My focus areas" (2026-09-27, Felix's
explicit brief): same narrow-centred-column bug, same fix as
--about/.section--dark above. */
#lebensrealitaeten-im-fokus > .wrap.prose,
#lived-realities-in-focus > .wrap.prose { max-width: var(--maxw); }
#lebensrealitaeten-im-fokus > .wrap.prose p,
#lived-realities-in-focus > .wrap.prose p { max-width: 48rem; }
/* Fine-divider list, no bullets — same row technique as .rates/.timeline,
used for short editorial lists that would otherwise fall back to
browser-default disc markers (e.g. Qualifikation). */
.list-plain { list-style: none; margin: 0 0 var(--s3); padding: 0; border-top: 1px solid var(--line); max-width: 42rem; }
.list-plain li { padding: .6rem 0; border-bottom: 1px solid var(--line); margin: 0; line-height: 1.5; }
/* Qualification rows paired with an institution mark — same fine-divider
row technique as .list-plain, with a fixed logo column added. Logos sit
muted/grayscale at rest (quiet supporting element, never competing with
the text) and settle to full opacity+colour on hover — same restrained
interaction model as .affiliation, just without the click-to-open
label (there is nothing hidden here to reveal, so no extra keyboard
handling is needed beyond the default focus outline on any real link). */
.qual-list { list-style: none; margin: 0 0 var(--s3); padding: 0; border-top: 1px solid var(--line); max-width: 46rem; }
.qual-list li {
display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s3); align-items: center;
padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.qual-list__row--text-only .qual-list__text { grid-column: 2; }
.qual-list__logo { display: flex; align-items: center; justify-content: flex-start; height: 2.5rem; }
.qual-list__logo img {
display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
filter: grayscale(1); opacity: .55; transition: opacity .22s var(--ease), filter .22s var(--ease);
}
.qual-list li:hover .qual-list__logo img, .qual-list li:focus-within .qual-list__logo img { opacity: 1; filter: grayscale(0); }
.qual-list__text { color: var(--ink-2); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .qual-list__logo img { transition: none; } }
@media (max-width: 560px) {
.qual-list li { grid-template-columns: 2.75rem 1fr; gap: var(--s2); }
.qual-list__logo { height: 1.9rem; }
}
/* A heraldic crest (shield + crown) reads tall and narrow by nature — at
the shared logo height it would sit far narrower than the landscape
institution wordmarks beside it, unbalanced not because it's wrong but
because it's simply a different, correct shape. Give it more height
(never distorted, never forced to their width) so its visual weight
reads comparably instead of like an afterthought. */
.qual-list__logo--crest { height: 3.3rem; }
@media (max-width: 560px) { .qual-list__logo--crest { height: 2.5rem; } }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark a { color: var(--on-dark); }
.section--dark .lede { color: var(--on-dark); }
/* keep button label colours intact inside dark sections (beat `.section--dark a`) */
.section--dark a.btn--on-dark { color: var(--earth-dark); }
.section--dark a.btn:not(.btn--on-dark):not(.btn--ghost) { color: var(--on-dark); }
.section--dark a.btn--ghost { color: var(--on-dark); border-color: rgba(233,232,227,.5); }
.section--dark a.btn--ghost:hover { background: var(--paper); color: var(--earth-dark); border-color: var(--paper); }
.prose { max-width: var(--measure); }
.prose > * + h2, .prose > * + h3 { margin-top: 1.7em; }
/* Section opener: heading + a single accent rule. No eyebrow.
The rule is the brand's one chromatic mark — a short pine-slate bar set
above every section heading (not in the hero, not on dark sections). */
.opener { margin-bottom: var(--s5); }
.opener h2 { margin-bottom: 0; }
.rule {
width: 60px; height: 2px; background: var(--accent); border: 0; margin: var(--s3) 0 0;
transform-origin: left; transform: scaleX(1);
}
.opener .rule { margin-top: var(--s3); }
/* Automatic opener mark on section headings that lead a block of content */
.section:not(.hero):not(.section--dark) > .wrap > h2:first-child::before,
.section:not(.hero):not(.section--dark) > .wrap > .split:first-child > div:first-child > h2::before,
.section:not(.hero):not(.section--dark) > .wrap > .opener > h2::before {
content: ""; display: block; width: 44px; height: 2px;
background: var(--accent); margin-bottom: var(--s3);
}
/* Editorial section number — ONLY for genuine sequences (Ablauf) */
.seq { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.seq > li {
display: grid; grid-template-columns: minmax(3.5rem, 8vw) 1fr; gap: var(--s3) var(--s4);
padding: var(--s4) 0; border-top: 1px solid var(--line);
}
.seq > li:last-child { border-bottom: 1px solid var(--line); }
.seq .n {
font-family: var(--font-display); font-weight: 300; line-height: .8;
/* Was var(--line) (~1.3:1 on --paper-2) - a border/hairline token, not a
text colour, so this large decorative numeral was nearly invisible
and failed axe's WCAG 1.4.3 contrast check (2026-09-26, QA pass) even
though it's genuine visible text, not something aria-hidden could
exempt (that only affects screen readers, not sighted low-vision
perception). --nav-dimmed reaches ~4.78:1 here - the quietest token
in the palette that still passes, keeping the numeral as unobtrusive
as the design intends. */
font-size: clamp(2rem, 1rem + 4vw, 3.6rem); color: var(--nav-dimmed);
font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em;
}
.seq h3 { margin: 0 0 .35em; }
.seq p { margin: 0; color: var(--muted); }
.lede {
font-family: var(--font-display); font-weight: 380;
font-size: clamp(1.3rem, 1rem + 1.5vw, 1.85rem); line-height: 1.44;
letter-spacing: -0.015em; color: var(--ink-2); max-width: 40rem;
}
/* Homepage pillar headline as the whole link (Männergesundheit / Behinderung):
a quiet colour deepen + slight shift, same restrained idea as Themen's
.index__row, without a background-tone fill (these sit on differing
section backgrounds, ground and plain, so a fixed fill colour would be
invisible against one of them). Still looks like a headline first. */
.pillar-link {
display: inline-block; color: inherit; text-decoration: none;
transition: color .2s var(--ease), transform .2s var(--ease);
}
.pillar-link:hover, .pillar-link:focus-visible { color: var(--ink); transform: translateX(.3rem); }
.pillar-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { .pillar-link { transition: none; } }
/* Asymmetric split. Generous column gap, alignment left / ragged right. */
.split { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 900px) {
.split { grid-template-columns: 4fr 7fr; gap: clamp(var(--s5), 7vw, var(--s7)); align-items: start; }
.split--reverse { grid-template-columns: 5fr 6fr; }
.split--wide-media { grid-template-columns: 5fr 6fr; }
/* Near-even split — image and text column read as equal visual weight,
rather than one dominating. Order in the DOM decides which side each
sits on; no reordering here. */
.split--balanced { grid-template-columns: 1fr 1fr; }
}
/* Larger body copy for a text column meant to carry equal visual weight
next to an image (e.g. a .split--wide-media pairing), rather than
reading as short supporting copy beside a dominant photo. */
.prose--lg { max-width: 42rem; }
.prose--lg p { font-size: clamp(1.35rem, 1.1rem + .5vw, 1.5rem); line-height: 1.55; }
/* Controlled grid-break: pull an element to the page margin on wide screens */
@media (min-width: 1240px) {
.bleed-left { margin-left: calc((100% - 100vw) / 2 + var(--gutter)); }
}
/* ----- Header / nav ----- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--paper-2);
border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter);
min-height: var(--header-h); display: flex; align-items: center; gap: var(--s3);
justify-content: space-between;
}
/* Brand unit: logo + name, horizontal, both set in the site's own dark
earth-toned ink directly on the normal paper header - no background
block. The dark tone deliberately echoes "Mein Bereich" (same
var(--earth-dark)) so the two read as a family, but only as a letterform
colour: the filled dark rectangle is reserved for that one real action
button, keeping BRAND (dark lettering on paper) and ACTION (dark filled
button) visually distinct. The monogram is the ink-fill PNG variant
(opaque earth-dark on transparent, recoloured 2026-09-26 along with the
CSS token - it's a flat-fill raster silhouette, no vector master, so
the PNG itself was repainted pixel-for-pixel rather than just changing
a CSS value the image wouldn't otherwise pick up), matching the
lettering colour by construction - no CSS colour needed on the image
itself. Never dimmed by the nav's sibling-dimming (it isn't part of
.nav__list). */
/* Open horizontal word-and-image lockup (2026-09-25, third header version
this session, replacing the compact dark tile per Felix's explicit new
brief): monogram left, a two-line serif wordmark ("Psychologische" /
"Beratung", set in var(--font-display) like the rest of the site's
editorial type, not the tagline's old uppercase Inter treatment) right
of it - no background plate, ink directly on the paper header.
Precise bottom alignment to the monogram's "S" (the brief's central
requirement): logo-fs-mono-ink.png's own glyph (F + hands + S) sits
inside its 191x160 canvas with a measured ~6.25% transparent margin on
every side (alpha bbox: rows 10-149 of 160, cols 10-180 of 191 - both
letters' own bottoms land within 1px of each other at row ~149, i.e.
the tight glyph bbox's bottom IS effectively the S's bottom). Naive
align-items:flex-end would align the WORDMARK to the canvas's bottom
edge, which sits ~6.25% of the rendered height below the actual S - so
.brand__mark carries a negative margin-bottom (height x 0.0625) at
every breakpoint, pulling the flex alignment line up to the glyph's
real bottom instead of the canvas's. Confirmed by live measurement
(getBoundingClientRect, not eyeballing) that the wordmark's own last
line then lands within ~1px of that same edge. */
.brand {
display: inline-flex; align-items: flex-end; gap: .6rem;
text-decoration: none;
}
.brand__mark {
height: 44px; width: auto; display: block;
margin-bottom: -1.22px; /* 44px x ~2.78%: 6.25% canvas padding minus a
measured ~3.47% correction for the sans wordmark's own generous
line-height leaving real headroom below the caps' ink (net LESS
negative than the padding alone) - see note above */
}
/* Font corrected 2026-09-25: Felix pointed at the original source
artwork (the sage-green square the monogram itself was extracted
from) - its own "PSYCHOLOGISCHE BERATUNG" caption is a light
geometric sans, uppercase, wide-tracked, not a serif. That's the same
typography already baked into logo-fs-full-*.png, so this live-text
version matches it with the site's own sans (var(--font-body),
Inter - self-hosted only down to weight 400, the lightest available,
used here as the closest match to the source's lighter stroke).
text-transform:uppercase on mixed-case source text (not upper-cased
in the HTML) so a screen reader still says "Psychologische Beratung"
normally rather than risking a letter-by-letter acronym reading. */
.brand__word {
display: flex; flex-direction: column;
font-family: var(--brand-label-font); font-weight: var(--brand-label-weight); font-style: normal;
text-transform: uppercase; letter-spacing: var(--brand-label-tracking);
color: var(--earth-dark);
font-size: .66rem; line-height: 1.4; white-space: nowrap;
}
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
@media (min-width: 1191px) and (max-width: 1399px) {
.brand__mark { height: 38px; margin-bottom: -1.06px; }
.brand__word { font-size: .6rem; }
}
@media (max-width: 480px) {
.brand { gap: .45rem; }
.brand__mark { height: 32px; margin-bottom: -0.89px; }
.brand__word { font-size: .56rem; letter-spacing: var(--brand-label-tracking-tight); }
}
.nav { display: flex; align-items: center; gap: 1.15rem; }
.nav__list { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav__list a {
font-size: .96rem; font-weight: 500; letter-spacing: .005em;
color: var(--nav-ink); text-decoration: none; padding: .5rem 0; position: relative; white-space: nowrap;
transition: color .2s var(--ease);
}
/* Permanent active-page tone (no interaction needed): darker than the
resting --nav-ink, same weight as --nav-active below. Interaction
(below) temporarily overrides this at higher specificity, then lets it
fall back once the pointer/focus leaves the whole group. */
.nav__list a[aria-current="page"] { color: var(--nav-active); }
.nav__list a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1.5px; background: var(--accent);
transform: scaleX(0); transform-origin: right; transition: transform .28s var(--ease);
}
.nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
/* "Lebensrealitäten im Fokus" / "Therapie-Formen": each a real top-level
link to its own destination, that also reveals labelled sub-items on
hover/focus. The sub-items live inside the same as the trigger, so
(a) the hover area is continuous - no dead gap between trigger and
panel - and (b) keyboard tab order visits them immediately after their
trigger "for free", with no extra JS needed to redirect focus. At
≥1191px the panel is a full-width, header-coloured overlay band (see the
detailed note at the ≥1191px override below for why it stays an overlay
rather than genuinely joining document flow - a deliberate, permanent
decision, not a stopgap). Below 1191px it's the compact vertical
disclosure toggled by .nav__subtoggle. */
.nav__item--has-sub { position: relative; }
.nav__subtoggle { display: none; }
.nav__submenu {
list-style: none; margin: 0; padding: .4rem; position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(-4px); min-width: 12rem;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 6px 18px rgba(25,26,26,.07);
visibility: hidden; opacity: 0;
transition: opacity .2s var(--ease), visibility .2s var(--ease), transform .2s var(--ease);
}
/* The sitewide `li { margin: .35em 0; }` reset otherwise leaks ~12px of
extra vertical size into this band's height (both breakpoints size
their submenu rows off the 's own padding, not the 's margin). */
.nav__submenu li { margin: 0; }
/* No base (unscoped) open-state rule here on purpose - it's fully owned by
the two breakpoint-specific overrides below (mobile's own unconditional
visibility/opacity + max-height toggle; desktop's .is-pointer-open/
:focus-within rule). An older, unscoped `:hover ... { transform:
translateX(-50%) ... }` version of this rule used to live here and was
missed when the desktop submenu moved to explicit JS pointer-state and
full-width positioning - it kept winning the transform cascade at equal
specificity (same issue the mobile override below already had to work
around once), silently reintroducing the old centered-under-trigger
translateX on top of the new alignment logic in main.js. Removed
outright rather than patched, since both breakpoints are already
complete without it - one less place for "only one explicit system" to
quietly stop being true. */
.nav__submenu a {
display: block; padding: .45rem .65rem; font-size: .88rem; white-space: nowrap;
color: var(--ink-2); text-decoration: none; border-radius: var(--radius);
transition: color .2s var(--ease);
}
.nav__submenu a::after { display: none; }
.nav__submenu a[aria-current="page"] { color: var(--nav-active); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .nav__submenu, .nav__submenu a { transition: none; } }
/* Sibling-dimming / interaction-active state - ONE explicit, JS-driven
mechanism (main.js: wireNavFocusGroup), not CSS :has(). Earlier CSS-only
attempts (:hover, :focus-visible, :has()) read as correct against this
session's own testing tools, but Felix's own screen recordings showed
the colour change was not actually happening in his real browser - only
the underline moved. Rather than add a third parallel implementation on
top of that unreliable one, this replaces it outright: main.js adds
.is-interacting to the group and .is-interaction-active to the engaged
item on real pointer/focus events, and these three rules are the only
thing that colours grouped nav/submenu links. A has-sub trigger's
"engaged" scope is its whole (covers its own open submenu too), so
it stays active while its sub-items are being browsed, not just while
the trigger text itself is hovered. */
.nav__list a.is-interaction-active,
.nav__submenu a.is-interaction-active { color: var(--nav-active); }
.nav__list a.is-interaction-active::after { transform: scaleX(1); transform-origin: left; }
/* Scoped to `> li > a` (not a bare descendant selector) on purpose: a
.nav__submenu lives nested inside its trigger's own , so a plain
".nav__list.is-interacting a" would also match every submenu link the
moment the trigger's is engaged - dimming the submenu's own items
before the user has hovered/focused any of them, even though the
submenu's own separate wireFocusGroup() group hasn't done anything yet.
The direct-child chain matches only the top-level trigger/plain-link
, leaving submenu links to whatever colour the .nav__submenu group
below decides - fixed 2026-09-25, confirmed via real DOM structure
(.nav__list > li > a for triggers vs .nav__list > li > ul.nav__submenu >
li > a for sub-items, three levels deeper). */
.nav__list.is-interacting > li > a:not(.is-interaction-active),
.nav__submenu.is-interacting a:not(.is-interaction-active) {
color: var(--nav-dimmed);
}
.lang-switch { display: flex; gap: .4rem; font-size: .8rem; color: var(--muted); }
.lang-switch a { text-decoration: none; }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 600; }
/* Compact language/accessibility cluster: DE / EN on top, the quieter
Einfache Sprache link directly beneath it, both as one grid/flex item
in .nav so they read as a single unit next to Mein Bereich. */
.lang-cluster { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.lang-cluster__easy {
font-size: .72rem; font-weight: 500; color: var(--muted); text-decoration: none;
line-height: 1.2; padding: .2rem 0; transition: color .18s var(--ease);
}
.lang-cluster__easy:hover, .lang-cluster__easy:focus-visible { color: var(--ink); }
.lang-cluster__easy:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { .lang-cluster__easy { transition: none; } }
.nav-toggle { display: none; }
@media (max-width: 1190px) {
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border: 1px solid var(--line); background: var(--card);
border-radius: var(--radius); color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav {
position: fixed; inset: var(--header-h) 0 auto 0;
background: var(--paper-2); border-bottom: 1px solid var(--line);
flex-direction: column; align-items: stretch; gap: var(--s3);
padding: var(--s3) var(--gutter); transform: translateY(-8px); opacity: 0; pointer-events: none;
transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
.nav__list { flex-direction: column; gap: 0; }
.nav__list li { border-bottom: 1px solid var(--line-soft); }
.nav__list a { display: block; padding: .95rem 0; font-size: 1rem; }
.nav__list a::after { display: none; }
.btn--nav { align-self: flex-start; }
/* "Lebensrealitäten im Fokus" is a compact disclosure on mobile: the
link itself still navigates (it is a real destination), and a small
separate toggle button expands/collapses its two sub-items — collapsed
by default so the item takes one row, not three, until asked to open.
The group's own bottom border (inherited from .nav__list li) sits
after the sub-items, so the nested stays borderless to avoid a
doubled line. */
.nav__item--has-sub { position: static; display: flex; flex-wrap: wrap; align-items: center; }
.nav__item--has-sub > a { flex: 1 1 auto; }
.nav__subtoggle {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; margin: .2rem 0; padding: 0;
border: none; background: none; color: var(--muted); cursor: pointer;
}
.nav__subtoggle svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.nav__item--has-sub.is-open .nav__subtoggle svg { transform: rotate(180deg); }
.nav__submenu {
position: static; visibility: visible; opacity: 1; transform: none;
box-shadow: none; border: none; background: none; min-width: 0;
list-style: none; padding: 0 0 0 var(--s3); margin: 0; width: 100%;
max-height: 0; overflow: hidden; transition: max-height .22s var(--ease);
}
/* A real tap on .nav__subtoggle moves DOM focus onto the button, which
satisfies the desktop dropdown's `:focus-within` rule (centred,
absolutely positioned, translateX(-50%)) - same specificity as the
block above, so without this it wins on source order and the mobile
submenu renders shifted off-screen the moment it's opened by tapping
rather than by the (non-focusing) row link. Repeat the mobile reset
under the same states so mobile always wins regardless of focus. */
.nav__item--has-sub:hover .nav__submenu,
.nav__item--has-sub:focus-within .nav__submenu {
position: static; transform: none;
}
/* 7rem comfortably fit the original 2-item Lebensrealitäten submenu but
clips the 4-item Therapie-Formen one to ~2.75 rows (measured: 4 × 40.6px
≈ 162px of real content vs 112px of cap) - "Gruppen" was unreachable by
mobile disclosure. Raised for both groups; a 2-item group still just
renders at its own shorter content height, unaffected by the larger cap. */
.nav__item--has-sub.is-open .nav__submenu { max-height: 12rem; }
.nav__submenu li { border-bottom: none; }
.nav__submenu a { display: block; padding: .5rem 0; font-size: .95rem; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.nav__submenu, .nav__subtoggle svg { transition: none; }
}
}
/* Desktop header: brand / nav / actions as three true columns so the nav
sits genuinely centered and "Kontakt" + DE/EN + Mein Bereich never wrap.
Mirrors the >1190px breakpoint the mobile nav switches on - raised from
1120/1121 when the nav link font-size grew (.82rem -> .9rem), which
pushed the row's min-content width to ~1173px, leaving no room between
the old breakpoint and the content's real minimum. */
@media (min-width: 1191px) {
.site-header__inner {
max-width: 1460px;
padding-inline: 2.5rem;
display: grid;
grid-template-columns: max-content minmax(max-content, 1fr);
align-items: center;
column-gap: 2rem;
}
.nav {
display: grid;
grid-template-columns: minmax(max-content, 1fr) auto auto;
align-items: center;
column-gap: 1.1rem;
}
.nav__list {
justify-content: center;
flex-wrap: nowrap;
gap: 1.6rem;
white-space: nowrap;
}
.nav__list a { white-space: nowrap; }
.lang-switch, .btn--nav, .lang-cluster__easy { white-space: nowrap; }
/* Second row of the header — intentional, permanent architecture
(decided 2026-09-24, do not revisit without a real new bug): reads
visually as HEADER ROW 1 + HEADER ROW 2, but stays position:absolute,
anchored to .site-header (sticky, so a valid containing block) rather
than genuinely joining normal document flow. An in-flow version was
tried twice and reverted twice for real regressions: moving the
submenu out of its trigger's broke keyboard tab order (it landed
last in the whole nav instead of right after its trigger), and even a
nested, closed, zero-height in-flow submenu still counted its own
full width toward the trigger 's flex sizing, overflowing the
six-item nowrap row. The overlay has none of that: it never changes
the header's own height, so opening/closing a submenu causes no
layout shift, no scroll-position jump, and no anchor-offset
complications elsewhere on the page - an intentional benefit of this
model, not just a fallback. `.nav__item--has-sub` is reset to
position:static here (its base position:relative below only matters
below this breakpoint, where the submenu is an in-flow mobile
disclosure instead), so .nav__submenu's `left`/`right` resolve against
the full-width header rather than one trigger's narrow - this is
what makes the band span edge-to-edge instead of reading as a floating
pill under whichever word triggered it. */
.nav__item--has-sub { position: static; }
/* transition: none on the closed/default state on purpose - closing is
instant. Two adjacent submenus are both absolutely positioned overlays
sharing the same full-width band, so if closing faded out over the
same .2s the opening fades in over, a fast sweep of the pointer across
two triggers caught both submenus visible at once, each showing its
own items in one confusing merged-looking row (seen on video, not just
a hover test). The transition lives only on the :hover/:focus-within
(open) rule below, so opening still animates in but closing snaps away
the instant the pointer/focus leaves. */
.nav__submenu {
position: absolute; top: 100%; left: 0; right: 0; transform: translateY(-4px);
visibility: hidden; opacity: 0;
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
gap: .3rem 1.6rem; margin: 0;
max-width: 1460px; margin-inline: auto; padding: .5rem 2.5rem;
background: var(--paper-2); border: none; border-radius: 0; box-shadow: none;
border-top: 1px solid var(--line-soft);
transition: none;
}
/* Open state is .is-pointer-open (JS, main.js) OR :focus-within (native
keyboard) - deliberately NOT :hover. Plain :hover closed the instant
the pointer left the trigger 's own small box, including partway
through the real, measured ~24px gap between that box and the
full-width submenu band below it (a side effect of anchoring the band
to .site-header instead of the trigger's own - see the note
above), making the submenu practically unreachable by mouse. main.js
tracks pointerenter/pointerleave on the whole subtree (trigger +
its submenu) with a short close-delay, so briefly crossing that gap
no longer closes it. Named .is-pointer-open, not .is-open, to avoid
colliding with the mobile tap-disclosure's own .is-open on the same
(wireDisclosure() in main.js) - two different mechanisms, two
different classes, even though only one is ever active at a given
breakpoint. */
.nav__item--has-sub.is-pointer-open .nav__submenu,
.nav__item--has-sub:focus-within .nav__submenu {
visibility: visible; opacity: 1; transform: translateY(0);
transition: opacity .2s var(--ease), transform .2s var(--ease);
}
/* line-height set explicitly (not inherited from body's 1.62) so the
band's own height stays a restrained ~38-46px regardless of the
fluid base font-size, rather than growing with body's generous
reading line-height. */
.nav__submenu a {
display: block; padding: .2rem .9rem; font-size: .95rem; line-height: 1.2; white-space: nowrap;
color: var(--nav-ink); text-decoration: none; border-radius: 0;
transition: color .2s var(--ease);
}
/* Color is owned entirely by the base .nav__submenu a[aria-current] rule
and the .is-interaction-active / .is-interacting JS-class system above —
no :hover/:focus-visible color rule here, so there is exactly one
mechanism deciding nav link color. The focus-visible outline stays: it's
an accessibility affordance, independent of the color-dimming system. */
.nav__submenu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Matches the open-state rule's own selectors (line 617-618) exactly,
not just ".nav__submenu" - that lower-specificity version lost the
cascade to the open state's own explicit `transition: opacity .2s,
transform .2s`, so the submenu still animated open/closed under
prefers-reduced-motion:reduce (confirmed via computed specificity:
0,3,0 for the open-state rule vs. 0,1,0 for the old override - real
bug, not a false alarm from the original audit). Equal specificity +
later source order now wins correctly. */
@media (prefers-reduced-motion: reduce) {
.nav__item--has-sub.is-pointer-open .nav__submenu,
.nav__item--has-sub:focus-within .nav__submenu,
.nav__submenu {
transition: none;
}
}
}
/* 1191–1399px only: fewer/shorter labels than before ("Lebensrealitäten
im Fokus" is still the widest, but the row is six items instead of ten
now) leaves more headroom than the old ten-item row had, but the larger
§2 type size re-introduces some of that pressure back. Reduce gaps and
the header's own side padding first (order per the brief: gaps, then
layout spacing, only then typography); nothing here affects 1400px+,
where the row already fits with its full, more generous spacing. */
@media (min-width: 1191px) and (max-width: 1399px) {
.site-header__inner { padding-inline: 1rem; column-gap: 1.25rem; }
.nav { column-gap: .45rem; }
.nav__list { gap: .5rem .85rem; }
/* Last resort per the ordering above: only as far as needed once gaps
and padding are already trimmed, and only in this narrow range.
Previously .86rem, which sat BELOW the submenu's own .95rem and
.btn--nav's .82rem - an inverted hierarchy where the second nav level
read larger than the first. Raised main nav back above both, and
added matching submenu/button overrides so all three keep the same
relative order (main nav > submenu > utility button) as everywhere
else on the site - fixed 2026-09-25. */
.nav__list a { font-size: .93rem; }
.nav__submenu a { font-size: .88rem; }
/* No brand override needed in this range anymore - the compact tile
(fixed 2026-09-25, superseding the wider horizontal lockup that did
need one here) is narrow regardless of viewport width. */
}
/* A true full-header-width centering mode was tried above 1400px (nav__list
absolutely centered on the whole header, independent of the brand
column's width), but it collides with the lang-cluster's two-line
"DE / EN" + "Einfache Sprache" block once that block is wider than the
space its own flex track has to spare — verified colliding at 1440px and
1920px alike, since the header's own max-width (1300px) caps how far the
internal layout ever grows. Centering within the nav's own grid track
(the 1191px behaviour above) has no such collision at any tested width
and is used at all widths ≥1191px now. */
@media (prefers-reduced-motion: reduce) { .nav, .nav__list a, .nav__list a::after { transition: none; } }
/* ----- Buttons ----- */
.btn {
display: inline-flex; align-items: center; gap: .5rem; min-height: 46px;
font-family: var(--font-body); font-weight: 600; font-size: .95rem; line-height: 1;
padding: .9rem 1.6rem; border-radius: var(--radius);
border: 1.5px solid var(--earth-dark); background: var(--earth-dark); color: var(--on-dark);
text-decoration: none; cursor: pointer;
transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* --earth-hover replaces a hardcoded #101214 - that near-black had no
token at all and undid the whole point of a warm dark-neutral family
the instant a button was hovered. */
.btn:hover { background: var(--earth-hover); border-color: var(--earth-hover); color: var(--on-dark); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--earth-dark); color: var(--on-dark); }
.btn--nav { padding: .6rem 1.05rem; font-size: .82rem; min-height: 40px; }
/* Placed after the base .btn--nav rule on purpose: same specificity, so an
earlier occurrence (e.g. inside the 1191-1399px block above) would lose
the cascade to this later, unscoped one regardless of its own media
condition - the exact bug this override avoids. */
@media (min-width: 1191px) and (max-width: 1399px) {
.btn--nav { font-size: .88rem; }
}
/* Light button on a dark section - was pure #fff, now --paper (the
site's own warm off-white) so it reads as part of the same palette
instead of a stark white cutout; hover deepens one step to --paper-2,
matching the "surface -> ground" relationship those two tokens already
have everywhere else on the site. */
.btn--on-dark { background: var(--paper); border-color: var(--paper); color: var(--earth-dark); }
.btn--on-dark:hover { background: var(--paper-2); border-color: var(--paper-2); }
/* Editorial text link, site-wide: the title/row itself is the link, no
permanent arrow — a quiet close, not a CTA. Two usage shapes share this
one class: (a) the class sits directly on the itself (most pages —
"Mehr über mich", "Alle Themen im Überblick", etc.), where
.link-arrow:hover/:focus-visible fires naturally; (b) inside a .formate
card, .link-arrow is a and the whole card is the hit target,
so .formate a:hover/:focus-visible .link-arrow triggers the same state
from anywhere in the card, not just over the text. */
.link-arrow {
display: inline-flex; align-items: baseline;
font-weight: 500; color: var(--ink-2);
text-decoration: none; position: relative; padding-bottom: .2em;
transition: color .2s var(--ease), transform .2s var(--ease);
}
.link-arrow::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: currentColor; opacity: .35;
transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.link-arrow:hover, .link-arrow:focus-visible,
.formate a.is-interaction-active .link-arrow {
color: var(--ink); transform: translateX(3px);
}
.link-arrow:hover::before, .link-arrow:focus-visible::before,
.formate a.is-interaction-active .link-arrow::before {
transform: scaleX(1); transform-origin: left;
}
@media (prefers-reduced-motion: reduce) { .link-arrow, .link-arrow::before { transition: none; } }
/* ----- Hero — typography carries it ----- */
.hero { padding-block: clamp(var(--s5), 12vw, calc(var(--s8) + var(--s4))); position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.leaf-accent {
position: absolute; top: -10%; right: -6%; z-index: 0;
width: clamp(240px, 38vw, 560px); height: auto;
opacity: .09; pointer-events: none; user-select: none;
}
@media (max-width: 860px) { .leaf-accent { display: none; } }
.hero h1 {
font-size: var(--text-h1-hero);
font-weight: 320; line-height: .98; letter-spacing: -0.035em;
max-width: 16ch; margin-bottom: var(--s5);
}
@media (min-width: 640px) { .hero h1 { line-height: .96; letter-spacing: -0.04em; } }
/* Homepage hero motto (2026-09-27, Felix's explicit brief, confirmed
against an annotated screenshot of the exact current large-serif
treatment as the thing to replace): "Understand the present — Shape
the future" now uses the SAME typographic identity as its own
appearance on the language gateway's confirmation motto
(.gateway__confirm-line in index.html) - same font-family (Inter, not
Fraunces), same uppercase+tracking, same color, same em dash (not a
period, not a plain hyphen - the gateway's own text is built from
three spans, "Understand the present" / "—" / "Shape the future").
Scoped to this one homepage element via a dedicated class, not a
change to .hero h1 itself - every other page's hero headline (all
still large Fraunces serif) is untouched. `.hero h1.hero__motto`
(not just `.hero__motto` alone) is deliberate: `.hero h1`'s own
selector already has higher specificity than a single class, so this
needs the extra qualifier to reliably win regardless of source order.
Sized up from the gateway's own small confirmation-line scale
(2026-09-27, second pass, Felix's explicit follow-up brief): on the
gateway this text is a secondary confirmation once a language is
already chosen, but here it's the page's actual H1 and needs to read
as the dominant hero statement, so the size is deliberately larger
than .gateway__confirm-line's while every other typographic property
(family/weight/transform/color) stays identical - tuned via live
measurement so the full phrase still holds one line through the
1191-1600px range without shrinking to the gateway's own small
scale. */
.hero h1.hero__motto {
font-family: var(--font-body); font-weight: 400; font-style: normal;
text-transform: uppercase; letter-spacing: .08em;
font-size: clamp(1.2rem, .69rem + 2.41vw, 2.05rem);
color: var(--earth-dark);
line-height: 1.35; max-width: none;
}
.hero .lede { margin-bottom: var(--s5); max-width: var(--measure-serif); }
/* Narrow screens only: the hero's own padding plus the two large
margins below h1/lede added up to ~64% of a typical phone viewport
before any content was visible. Tightened here without touching the
headline size or the >=640px clamp above. */
@media (max-width: 600px) {
.hero { padding-block: var(--s2); }
.hero h1 { margin-bottom: var(--s3); }
.hero .lede { margin-bottom: var(--s3); }
}
.hero__kicker {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 1.05rem; color: var(--muted); margin: 0 0 var(--s4); letter-spacing: 0;
}
/* ----- Gateway — the root "/" language-entry screen, shown before any
language version. Deliberately quiet: no dark brand block (unlike the
in-site header, this is a first impression, not a navigation bar) - the
monogram is already anthracite-on-transparent by construction
(logo-fs-mono-ink.png), so it reads dark-on-paper with no extra colour
applied; the name below it is set in the same anthracite tone the
brief asked for ("oriented on Mein Bereich"), not the button treatment
itself. ----- */
.gateway {
min-height: 100svh; position: relative; overflow: hidden;
display: grid; place-items: center; text-align: center;
padding-inline: var(--gutter);
/* Vertical padding is viewport-HEIGHT-relative, not width-relative like
--gutter - the point is fitting the composition into one screen, which
is a height problem, so it needs to shrink on short viewports
regardless of how wide they are (a 1920×1080 window is wide but not
short; an 1808×372 recording is both). */
padding-block: clamp(1.5rem, 5vh, 3.5rem);
/* Built from the same two existing paper tokens, not a new colour -
an extremely subtle lift toward --paper behind the composition's own
centre so the page reads as having a little depth rather than one
flat fill, without becoming a visible "gradient design" moment
(2026-09-25, visual-polish pass). */
background: radial-gradient(ellipse 70% 60% at 50% 42%, var(--paper) 0%, var(--paper-2) 75%);
}
/* display:block overrides .leaf-accent's own @media(max-width:860px)
{display:none} - that rule is meant for the in-page hero motif (hidden
on mobile so it doesn't compete with hero text at narrow widths), but
the gateway's leaf is meant to survive down to phone width, just more
cropped/quieter there. Equal specificity to that rule, later in source
order, so this wins at every width.
Opacity (2026-09-25, second pass): the element was never actually
broken - confirmed via computed style (display:block, visibility:
visible, correct position/size, z-index:0, no transform/clip-path/
blend-mode) and a network check (200 OK, real decoded image data,
naturalWidth/Height both non-zero) - it was rendering exactly as
coded. The bug was perceptual: .03-.045 opacity is too faint to
register on a real monitor even though every technical property was
correct. Raised into the range confirmed visible in an actual
screenshot, not just in computed-style output.
Positioning (2026-09-25, third pass): reverted the bottom-right/
transform treatment above in favour of reusing .leaf-accent's own
default position untouched (top:-10%, right:-6%, same width clamp,
same opacity, same asset - botanical-editorial.webp, not the -2.webp
green variant the gateway used before) - per Felix's explicit
instruction to match the homepage hero's own leaf placement exactly
rather than invent a gateway-specific treatment. This override block
now only adds what the hero doesn't need: staying visible below
860px. Every position/size/opacity value comes from .leaf-accent
itself, unmodified - see that rule, not here. */
.gateway__leaf {
display: block;
}
.gateway__inner {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
max-width: 30rem;
}
/* Gateway brand composition (2026-09-25, visual-polish pass): logo,
heading and language chooser read as one connected block instead of
the logo sitting alone in a large gap above - "Choose Language" is
visible again (real