/* Styles for index.html. Shared bits: footer-logo.css (all pages), legal.css (impressum, datenschutz).
No inline styles anywhere: the Content-Security-Policy in _headers only allows style files from this site. */
/* Minimal reset (this is all the page needed from Tailwind's preflight) */
*, ::before, ::after { box-sizing:border-box; margin:0; padding:0; }
:root {
/* ================= TUNABLE PARAMETERS =================
"px" = reference pixel. On desktop 1px here is 100cqw / --ref-width, so everything scales
together with the video. On mobile (<640px) these are real pixels. */
/* Logo + navigation. The logo SVG is trimmed to its visible content, so these are real sizes. */
--logo-width: calc(1099 * var(--px)); /* visible logo width (desktop) */
--logo-width-mobile: 57.25cqw; /* visible logo width (mobile) */
--logo-offset-x: calc(0 * var(--px)); /* - = left, + = right (-46 reproduces the old, slightly left-of-centre position) */
--logo-nav-gap: calc(132 * var(--px)); /* distance logo -> navigation (desktop) */
--logo-nav-gap-mobile: 15.5cqw; /* distance logo -> navigation (mobile) */
--content-offset-y: calc(131 * var(--px)); /* moves logo + navigation together, desktop: - = up, + = down */
--content-offset-y-mobile: 0px; /* same, mobile */
/* Navigation: ADVISE BUILD LEAD */
--nav-size-desktop: calc(28 * var(--px));
--nav-size-mobile: 22px;
--nav-size-min: 14px; /* desktop floor, even when the video is small */
--nav-gap: calc(573 * var(--px)); /* horizontal distance between the items (desktop) */
--nav-gap-mobile: calc(32 * var(--px)); /* vertical distance between the items (mobile) */
--nav-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.35); /* text shadow of ADVISE / BUILD / LEAD / CONTACT; "none" = off */
--nav-shadow-icon: drop-shadow(0 1px 1.5px rgba(0,0,0,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.35)); /* the same shadow for the CONTACT arrow icon (blur values halved); "none" = off */
--nav-sub-gap: 1.3em; /* space on each side of the bar between ÜBER MICH and KONTAKT */
--nav-sep-height: 16px; /* height of that bar (mobile) */
--nav-sep-height-desktop: 22; /* same, desktop, in reference pixels (scales with the hero, minimum 14px) */
--nav-arrow-size: 1.5em; /* CONTACT arrow icon; em = relative to the CONTACT text size, so it scales with it */
/* Hero + video */
--ref-width: 1920; /* window width (px) the px-values above were tuned at */
--bleed: 3px; /* how far the video overshoots the hero edges (hides hairlines at the hero/page seam) */
--video-overlay: .2; /* dark overlay on the video, 0-1 */
--hero-min-height-desktop: 30rem; /* keeps logo + nav from being squeezed */
--hero-min-height-mobile: 100svh; /* full-screen hero on phones (video is cropped to fill) */
--hero-max-height: 100svh; /* "none" = always show the whole video, even if taller than the screen */
/* ================= INTERNAL (derived; mobile defaults, desktop overrides in the media query below) ================= */
--px: 1px;
--logo-w: var(--logo-width-mobile);
--gap: var(--logo-nav-gap-mobile);
--content-offset: var(--content-offset-y-mobile);
--nav-size: var(--nav-size-mobile);
--hero-min-height: var(--hero-min-height-mobile);
--video-aspect: 16 / 9; /* replaced by the real video's ratio (JS) */
--ar: 1.7778; /* same ratio as a number (JS) */
/* ================= THEME ================= */
--bg: #f4f2ee; --fg: #1c2530; --muted: #56626f; --rule: #d3cfc7; --ph: #e6e2da; --hero: #23384d;
--font: Aptos, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
:root { --bg:#11171e; --fg:#e8e6e1; --muted:#9ba6b2; --rule:#2a3541; --ph:#1a232d; }
}
html { scroll-behavior: smooth; scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body { margin:0; overflow-x:clip; background:var(--bg); color:var(--fg); font-family:var(--font), sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
a { color:inherit; text-decoration:none; }
/* Hero. Explicit width/min-width/max-width: otherwise aspect-ratio turns the min/max-height limits into width limits. */
.hero { position:relative; box-sizing:border-box; width:100%; min-width:0; max-width:none; aspect-ratio:var(--video-aspect); min-height:var(--hero-min-height); max-height:var(--hero-max-height); background:var(--hero); color:#fff; overflow:hidden; display:flex; flex-direction:column; container-type:size; isolation:isolate; }
.stage { position:absolute; inset:calc(-1 * var(--bleed)); isolation:isolate; }
.stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.stage::before { content:""; position:absolute; inset:0; background:rgb(0 0 0 / var(--video-overlay)); z-index:1; pointer-events:none; }
.lang { position:absolute; top:calc(env(safe-area-inset-top,0px) + 1.25rem); right:1.5rem; font-size:12px; letter-spacing:.08em; display:flex; gap:.5rem; align-items:center; z-index:2; }
.lang button { background:none; border:0; padding:.25rem; font:inherit; color:#fff; cursor:pointer; transition:opacity .2s; }
.lang button[aria-pressed="true"] { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.35em; }
.lang button:hover { opacity:.7; }
.lang { z-index:3; } /* above .hero-content (z-index 2, covers the whole hero): on phones it sat on top of the EN/DE buttons and swallowed every tap */
@media (pointer:coarse) { .lang button { padding:.7rem .55rem; margin:-.45rem -.3rem; } } /* finger-sized tap area (~44 px), same look and position */
/* Foreground layer (logo + navigation) lives in the hero itself, not in the video stage: the video may be cropped, the content must not be. */
.hero-content { position:absolute; inset:0; z-index:2; padding:5rem 1.5rem 3rem; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translateY(var(--content-offset)); }
.logo-wrap { width:var(--logo-w); margin:0 0 var(--gap); position:relative; left:var(--logo-offset-x); }
.logo-wrap .banner { display:block; width:100%; height:auto; }
.logo-wrap [hidden] { display:none; } /* one banner per language, switched by the EN/DE toggle */
.nav { display:grid; justify-items:center; row-gap:var(--nav-gap-mobile); text-shadow:var(--nav-shadow); }
.nav a { display:inline-block; font-size:var(--nav-size); letter-spacing:.25em; font-weight:500; color:#fff; transition:transform .2s cubic-bezier(.23,1,.32,1), opacity .2s; transform-origin:center; padding:.25rem .5rem; }
.nav-sub { display:flex; align-items:center; justify-content:center; gap:var(--nav-sub-gap); margin-top:.5rem; }
.nav .sep { flex:none; width:1px; height:var(--nav-sep-height); background:currentColor; opacity:.55; filter:var(--nav-shadow-icon); }
.nav .sub { font-size:13px; letter-spacing:.12em; font-weight:400; opacity:.78; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:.4em; transition:opacity .2s, text-decoration-color .25s; }
.nav .sub { display:inline-flex; align-items:center; gap:.55em; }
.nav .sub svg { display:block; flex:none; width:var(--nav-arrow-size); height:var(--nav-arrow-size); filter:var(--nav-shadow-icon); transition:transform .25s ease; }
.nav a:active { opacity:.65; }
@media (hover:hover) { .nav a:hover, .nav a:focus-visible { transform:scale(1.1); } .nav .sub:hover, .nav .sub:focus-visible { transform:none; opacity:1; text-decoration-color:currentColor; } .nav .contact:hover svg, .nav .contact:focus-visible svg { transform:translateX(3px); } }
@media (min-width:640px) {
/* desktop: switch the internal values */
:root {
--px: calc(min(100cqw, 100cqh * var(--ar)) / var(--ref-width)); /* "contain": content scales with the visible hero, never with the cropped video */
--logo-w: var(--logo-width);
--hero-min-height: var(--hero-min-height-desktop);
--gap: var(--logo-nav-gap);
--content-offset: var(--content-offset-y);
--nav-size: max(var(--nav-size-min), var(--nav-size-desktop));
}
.stage { --sw:max(100cqw, calc(100cqh * var(--ar))); inset:auto; width:calc(var(--sw) + 2 * var(--bleed)); height:calc(var(--sw) / var(--ar) + 2 * var(--bleed)); left:calc((100cqw - var(--sw)) / 2 - var(--bleed)); top:calc((100cqh - var(--sw) / var(--ar)) / 2 - var(--bleed)); }
.hero-content { padding:0; }
.nav { grid-template-columns:1fr auto 1fr; column-gap:var(--nav-gap); row-gap:calc(20 * var(--px)); align-items:center; width:max-content; max-width:100%; }
.nav .adv { justify-self:end; } .nav .led { justify-self:start; }
.nav-sub { grid-column:2; grid-row:2; margin-top:calc(16 * var(--px)); width:0; justify-self:center; white-space:nowrap; } /* width:0 = the sub-line does not take part in sizing the middle column, so ADVISE / LEAD keep their position in DE and EN (content overflows the 0-width box evenly to both sides) */
.nav .sub { font-size:max(11px, calc(13 * var(--px))); }
.nav .sep { height:max(14px, calc(var(--nav-sep-height-desktop) * var(--px))); }
}
/* Sections */
main section.pillar { max-width:1180px; margin:0 auto; padding:clamp(5rem,12vw,9rem) 1.5rem; display:grid; gap:2.5rem 4rem; align-items:center; border-bottom:1px solid var(--rule); }
@media (min-width:900px) {
.pillar.img-left { grid-template-columns:5fr 6fr; } .pillar.img-left figure { order:-1; }
.pillar.img-right { grid-template-columns:6fr 5fr; }
}
.pillar.wide { grid-template-columns:1fr; }
.lead-landscape .frame { aspect-ratio:3/2; } /* Justitia photo is 3:2 (landscape); other frames are 4:5 */
.lead-landscape .frame img { object-position:var(--lead-focus, 45% 50%); } /* which part stays visible if the frame is ever cropped */
@media (min-width:900px) { .pillar.img-right.lead-landscape { grid-template-columns:5fr 6fr; } } /* wider picture column for the landscape image */
.eyebrow { font-size:12px; letter-spacing:.2em; color:var(--muted); margin:0 0 1rem; }
.pillar h2 { margin:0; font-size:clamp(2.4rem,6vw,4rem); font-weight:600; letter-spacing:.06em; line-height:1.05; }
.subtitle { margin:.75rem 0 1.75rem; font-size:1.05rem; color:var(--muted); text-wrap:balance; }
.copy { margin:0; max-width:34rem; font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.65; text-align:left; text-wrap:pretty; }
.skills { margin:2rem 0 0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
figure { margin:0; }
.frame { position:relative; background:var(--ph); aspect-ratio:4/5; overflow:hidden; }
.wide .frame { aspect-ratio:21/9; }
.frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wide .text { max-width:40rem; }
.about .copy { margin-top:1.75rem; }
.about .certs-label { margin:2rem 0 .5rem; }
.cert-group { margin:1rem 0 .2rem; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cert-names { list-style:none; margin:0; padding:0; font-size:14px; line-height:1.75; letter-spacing:.02em; }
/* ================= BANNER ANIMATION =================
The two banners (DE/EN) are inline SVG in index.html; their parts are grouped and classed:
.nguyen .nam = name, .rule = the two lines, .t1 .t2 .t3 = tagline lines.
- Every page load: the visible banner animates (class "play" is in the HTML).
- Language switch: the other banner becomes visible. Browsers restart CSS animations when an element goes from
display:none to visible, so it plays again by itself - faster (--s), because .logo-wrap gets "switched".
- Back button: site.js removes and re-adds "play".
- Reduced motion: nothing animates. Every animation ends in the normal, static state ("backwards" fill only). */
@keyframes bn-in { from { opacity:0; transform:translateY(6px); } }
@keyframes bn-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: no-preference) {
.banner { --s:1; } /* speed factor: 1 = intro, .55 = language switch */
.logo-wrap.switched .banner { --s:.55; }
.banner .nam { --d:.15s; } .banner .t1 { --d:.85s; } .banner .t2 { --d:.95s; } .banner .t3 { --d:1.05s; }
.banner.play .ly { animation:bn-in calc(.7s * var(--s)) cubic-bezier(.23,1,.32,1) calc(var(--d, 0s) * var(--s)) backwards; }
.banner.play .rule { stroke-dasharray:1; animation:bn-draw calc(.8s * var(--s)) cubic-bezier(.65,0,.35,1) calc(.45s * var(--s)) backwards; }
.banner.play .rule.v { animation-duration:calc(.6s * var(--s)); animation-delay:calc(.6s * var(--s)); }
}
/* Navigation intro (only when arriving from outside, see intro.js): it waits for the banner (~1.3 s), then follows in a short stagger */
@keyframes nav-in { from { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: no-preference) {
.intro .nav > a, .intro .nav-sub { animation:nav-in .6s cubic-bezier(.23,1,.32,1) backwards; }
.intro .nav > a:nth-child(1) { animation-delay:1.1s; }
.intro .nav > a:nth-child(2) { animation-delay:1.17s; }
.intro .nav > a:nth-child(3) { animation-delay:1.24s; }
.intro .nav-sub { animation-delay:1.35s; }
}
/* Reveals (only applied when JS runs and motion is allowed) */
.js-motion [data-reveal] { opacity:0; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js-motion [data-reveal="left"] { transform:translateX(-28px); }
.js-motion [data-reveal="right"] { transform:translateX(28px); }
.js-motion [data-reveal="up"] { transform:translateY(28px); }
.js-motion [data-reveal].in { opacity:1; transform:none; }
main section.pillar, .contact-sec { position:relative; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Contact + footer */
.contact-sec { max-width:1180px; margin:0 auto; padding:clamp(5rem,12vw,8rem) 1.5rem; }
.contact-intro { max-width:34rem; margin:0; font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.65; text-align:left; text-wrap:pretty; }
.contact-list { list-style:none; margin-top:2rem; display:grid; gap:0 4rem; }
@media (min-width:760px) { .contact-list { grid-template-columns:1fr 1fr; } }
.contact-item { display:grid; grid-template-columns:auto 1fr auto; column-gap:1.25rem; align-items:center; padding:1.6rem 0; border-top:1px solid var(--rule); transition:border-color .25s; }
.contact-item > svg { display:block; width:1.5rem; height:1.5rem; color:var(--muted); transition:color .25s; }
.contact-item .ci-arrow { width:1.1rem; height:1.1rem; transition:transform .25s, color .25s; }
.ci-label { display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem; }
.ci-value { display:block; font-size:clamp(1.15rem,2.4vw,1.75rem); font-weight:500; line-height:1.3; overflow-wrap:anywhere; }
@media (hover:hover) { .contact-item:hover, .contact-item:focus-visible { border-color:var(--fg); } .contact-item:hover > svg, .contact-item:focus-visible > svg { color:var(--fg); } .contact-item:hover .ci-arrow, .contact-item:focus-visible .ci-arrow { transform:translate(3px,-3px); } }
footer { max-width:1180px; margin:0 auto; padding:2rem 1.5rem 3rem; border-top:1px solid var(--rule); display:flex; gap:2rem; flex-wrap:wrap; font-size:13px; color:var(--muted); }
footer a:hover { color:var(--fg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .nav a { transition:none; } }