/*
Theme Name: Olena Shchuka
Version: 0.1.0
Text Domain: olena
Description: Gutenberg theme for Olena Shchuka. German prototype migration.
*/
/* ===========================================================
   Olena Shchuka — high-fidelity design, Axentix system
   Single visual source: https://axentix.webflow.io/ (/home-one).
   Tokens below come from measured computed styles, documented in
   axentix-design.md / axentix-design.json / axentix-sections.md
   and design-brief.md. No Unilook, no lavender, no warm-cream
   surfaces, no pill glass header — see design-brief.md for what
   was removed and why.
   =========================================================== */

/* ===========================================================
   Fonts — self-hosted (no Google Fonts requests, DSGVO), variable
   woff2, Latin + Cyrillic subsets so DE/EN/UK/RU share one look.
   Onest: headings, buttons, numbers. Roboto: body text.
   Licences: assets/fonts/*-OFL.txt (SIL Open Font License 1.1).
   =========================================================== */
/* Onest – cyrillic-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/onest-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Onest – cyrillic */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Onest – latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Onest – latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Roboto – cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/roboto-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Roboto – cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/roboto-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Roboto – latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto – latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---------- color (Axentix: dark bar, white sections, one mint accent) ---------- */
  --ink: rgb(32, 40, 45);
  --ink-soft: rgb(63, 77, 86);
  --ink-faint: rgb(187, 194, 196);
  --paper: #ffffff;
  --paper-alt: #f4f6f6;
  --border: rgba(32, 40, 45, 0.1);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --dark: rgb(32, 40, 45);
  --dark-surface: rgb(41, 50, 56);
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.68);

  --mint: rgb(16, 236, 176);
  --mint-on: var(--ink);
  --mint-tint: rgba(16, 236, 176, 0.12);

  /* Primary CTA surface: one reusable gradient, not a flat fill — left
     stop is the existing mint token (not re-picked from a screenshot),
     right stop a clear light blue. Dark ink text/icons stay readable
     across the whole span (checked ~9:1 at both ends). */
  --gradient-primary: linear-gradient(110deg, var(--mint) 0%, #65c7f7 100%);
  --gradient-primary-hover: linear-gradient(110deg, #3ff0c4 0%, #7fd0f8 100%);

  --focus-ring: rgb(16, 176, 132);

  /* Dark glass surface (cards on light sections). Same family as the
     header glass, softer: graphite with a faint top sheen, a light top
     edge and a hairline border — no blur, since flat light sections
     give a backdrop filter nothing to work with. */
  --glass-dark-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(160deg, rgb(46, 56, 63) 0%, rgb(26, 32, 37) 100%);
  --glass-dark-border: rgba(255, 255, 255, 0.10);
  --glass-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 24px -18px rgba(9, 11, 13, 0.55);

  /* ---------- typography ---------- */
  --font-display: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  --fs-hero: clamp(2rem, 1.1rem + 2.6vw, 3.375rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.6;

  /* ---------- spacing ---------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* ---------- layout ---------- */
  --container-width: 1280px;
  --container-narrow: 720px;

  /* fixed header: own top inset + bar height + breathing gap before content */
  --header-top-inset: 0.85rem;
  --header-bar-height: 4.4rem;
  --header-clearance: calc(var(--header-top-inset) + var(--header-bar-height) + 1.1rem);
  --header-offset: calc(var(--header-clearance) + 1rem);

  /* ---------- radius: one shared UI radius, everywhere it applies at
     all — no pill/capsule shapes anywhere anymore. Full-bleed section
     backgrounds, the hero, table rules and hairline dividers stay
     sharp; that's a deliberate omission, not an oversight. ---------- */
  --radius-ui: 8px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================================
   Reset & base
   =========================================================== */

* { box-sizing: border-box; }

html {
  padding-top: env(safe-area-inset-top, 0px);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: inherit;
  /* last-resort safety only: breaks a word solely if it can't fit on a
     line of its own (no automatic hyphenation of headings) */
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); }
/* very narrow phones: long German compounds ("Sprachkombinationen")
   must fit on one line at section-heading size */
@media (max-width: 360px) {
  h2 { font-size: 1.625rem; }
}
h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 var(--space-2); }

a {
  color: var(--ink);
  text-underline-offset: 0.15em;
}
a:not([class]):hover { color: var(--ink-soft); }

::selection { background: var(--mint); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--space-1) var(--space-2);
  z-index: 200;
  font-size: var(--fs-xs);
}
.skip-link:focus {
  left: 0;
}

/* Root cause of the white gap above the header: an <svg> is an inline
   replaced element by default. Even at width/height 0, a *static*
   inline element still sits inside a line box sized by the parent's
   font metrics (here: body's line-height, ~27px) — that invisible line
   box was pushing <main> (and the hero) down from the true page top,
   exposing body's white background above the fixed header. Taking it
   out of flow removes that phantom line box entirely; the <filter> it
   holds is still referenced by id from CSS regardless of layout. */
.glass-defs {
  position: absolute;
  top: 0;
  left: 0;
}

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
.container--narrow { max-width: var(--container-narrow); }

/* ===========================================================
   Buttons — one shared radius (--radius-ui), no capsule shapes.
   .btn--primary is the single "main action" surface (gradient); every
   other button variant is secondary by design (outline/glass/plain).
   =========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-ui);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn svg { width: 32px; height: 32px; flex-shrink: 0; transition: transform 0.2s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
  .btn:hover svg { transform: none; }
}

.btn--primary {
  background: var(--gradient-primary);
  color: var(--mint-on);
}
.btn--primary:hover { background: var(--gradient-primary-hover); }

.btn--outline-dark {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--border-on-dark);
}
.btn--outline-dark:hover { background: rgba(255, 255, 255, 0.08); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(32, 40, 45, 0.22);
}
.btn--outline:hover { background: var(--paper-alt); }

/* Plain text link with a trailing arrow — Axentix's secondary action style */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-decoration: none;
  /* reset native <button> chrome — this class is used on both <a> and
     <button>, and only the border-bottom below is ever intended */
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 0 0 0.15em;
  cursor: pointer;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform 0.2s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .link-arrow svg { transition: none; }
  .link-arrow:hover svg { transform: none; }
}

/* ===========================================================
   Header — transparent liquid glass, strict rectangle
   Layer order (see index.html): glass (blur+refraction) → tint
   (the actual transparency level) → shine (edge highlight) →
   bar (real content, never blurred/distorted — separate DOM
   layer, exactly like the svg-glass-navbar reference in
   glass-effects.md). The bar stays dark everywhere (the logo's
   wordmark is white), so text/icon colors never flip.
   =========================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  /* small top inset + the same side gutter as .container, so the pill's
     edges line up with the rest of the page's content grid */
  padding: 0.85rem var(--space-3) 0;
  pointer-events: none;
}
.site-header__bar,
.site-header .nav-toggle,
.site-header .primary-nav a,
.site-header .lang-switch { pointer-events: auto; }

.site-header__pill {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  height: var(--header-bar-height);
  border-radius: var(--radius-ui);
  pointer-events: auto;
}

/* Clips the glass layers (and rounds them to match the pill) only, not
   .site-header__bar (the mobile nav dropdown is positioned relative to
   the bar, top:100%, and must be able to extend below the pill without
   being clipped by it). The distortion filter's region intentionally
   extends past its own box (so the turbulence/blur doesn't hard-cut at
   the edge) — without this clip, that shows up as a visible color smear
   bleeding past the pill's rounded corners. */
.site-header__surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* Black glass. The darkening is split between the backdrop itself
   (brightness) and a lighter tint, so content behind stays visible as
   soft, saturated colour while white text keeps ~9:1 contrast even
   over a pure white section. Same values at every width. */
.site-header__glass {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(0.55);
  backdrop-filter: blur(22px) saturate(170%) brightness(0.55);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header__glass { filter: url(#glass-distortion); }
}

.site-header__tint {
  position: absolute;
  inset: 0;
  /* Always dark (white wordmark) but translucent — see .site-header__glass */
  background: rgba(9, 11, 13, 0.5);
  transition: background-color 0.25s var(--ease-out);
}

.site-header__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* box-shadow (not border) so the highlight follows the pill's curve
     at the corners instead of running into it as a straight edge */
  /* hairline edge + top-left highlight (after the glass-navbar
     reference's two-corner inset), plus a faint top sheen */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1px 1px 0 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
  transition: box-shadow 0.25s var(--ease-out);
}

/* Readable fallback: no backdrop-filter support → solid, no distortion,
   no reliance on the light/dark adaptive text-color trick. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__glass { display: none; }
  .site-header__tint { background: var(--dark); }
  .site-header__shine { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__tint, .site-header__shine { transition: none; }
}

.site-header__bar {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 0;
}
.logo img {
  display: block;
  /* olena-shchuka-logo.svg (5.18:1, no padding around the artwork) */
  height: 2.5rem;
  width: auto;
}
/* Phones: logo + menu button + language switch must fit inside the
   bar. Tighter gaps, logo height follows the viewport (26–34px), and
   below 380px the switch drops its globe icon (the "DE" label stays). */
@media (max-width: 720px) {
  .site-header__bar { gap: 0.75rem; }
  .site-header .lang-switch { margin-left: 0; }
  .site-header .logo img { height: clamp(1.6rem, calc((100vw - 11.5rem) / 5.3), 2.1rem); }
}
@media (max-width: 380px) {
  .site-header .lang-switch__icon { display: none; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-on-dark);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.25s var(--ease-out);
}
.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--on-dark);
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle, .nav-toggle__bar { transition: none; }
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  color: var(--on-dark);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.2s var(--ease-out);
}
.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--on-dark-soft);
}

/* Secondary by design: the header's "Kontakt" link is a glass chip, not
   a bright accent button — the one bright CTA on the first screen is
   "Anfrage senden" inside the hero, not up here competing with it. */
.primary-nav__cta {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--on-dark) !important;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-ui);
  font-weight: 500;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.primary-nav__cta:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav__cta { transition: none; }
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: var(--space-1);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-ui);
}

.lang-switch__icon { width: 16px; height: 16px; color: var(--on-dark-soft); }

.lang-switch__current {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-dark-soft);
}

/* ===========================================================
   Sections
   =========================================================== */

.section {
  position: relative;
  padding-block: var(--space-6);
  scroll-margin-top: var(--header-offset);
  overflow: hidden;
}

.section--tight { padding-block: var(--space-5); }

.section--paper { background-color: var(--paper); }
.section--paper-alt { background-color: var(--paper-alt); }
.section--dark {
  background-color: var(--dark);
  color: var(--on-dark);
}
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-soft); }

.section--narrow .container { max-width: var(--container-narrow); }

.section__head {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin-bottom: var(--space-5);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0 0 var(--space-1);
}
.section--dark .eyebrow,
.hero .eyebrow,
.clients .eyebrow { color: var(--on-dark-soft); }

.section-lead {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 40rem;
  margin-bottom: 0;
}
.section--dark .section-lead,
.hero .section-lead,
.clients .section-lead { color: var(--on-dark-soft); }

.section-lead--tight { margin-top: var(--space-4); }

/* reveal-on-scroll: progressive enhancement, content visible without JS */
.reveal { opacity: 1; transform: none; }
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* Typing variant (see script.js): the text is split into per-character
   spans that keep their space while hidden, so the final layout and
   line breaks are reserved from the start. Each character switches on
   after its own delay (--type-i × --type-step); the gradient stays on
   the parent, so it runs once across the whole phrase. */
.type-word { white-space: nowrap; }
.js-reveal-ready .reveal-type .type-ch { visibility: hidden; }
.js-reveal-ready .reveal-type.is-visible .type-ch {
  visibility: visible;
  transition: visibility 0s linear calc(var(--type-i) * var(--type-step, 48ms));
}

/* Staggered variant: the container stays put, its children rise one
   after another (DOM order = reading order). A keyframe animation with
   fill-mode "backwards" only holds the start frame during the delay and
   then hands control back to the element's own styles — so hover
   transitions afterwards aren't affected by the stagger delays. */
.js-reveal-ready .reveal-stagger:not(.is-visible) > * { opacity: 0; }
.js-reveal-ready .reveal-stagger.is-visible > * {
  animation: reveal-rise 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--stagger-i, 0) * 170ms);
}
.reveal-stagger > :nth-child(2) { --stagger-i: 1; }
.reveal-stagger > :nth-child(3) { --stagger-i: 2; }
.reveal-stagger > :nth-child(4) { --stagger-i: 3; }
.reveal-stagger > :nth-child(5) { --stagger-i: 4; }
.reveal-stagger > :nth-child(6) { --stagger-i: 5; }
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
  .js-reveal-ready .reveal-stagger > * { opacity: 1; animation: none; }
  .js-reveal-ready .reveal-type .type-ch { visibility: visible; transition: none; }
}

/* ===========================================================
   Hero + trust strip = first screen
   =========================================================== */

.hero-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-top: var(--header-clearance);
  /* Asymmetric: bottom padding reserves clearance for .hero-marquee
     (position: absolute, bottom: 0, inside this padding band) without
     growing the hero's own height — align-items: center just shifts
     the text/button column up within the same box. */
  padding-bottom: clamp(4.5rem, 3rem + 5vw, 7rem);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hero photo (IMG_6267) has natural headroom above her, so no
     scale/offset trick is needed: cover fills the box, the subject sits
     right of the text column, and on very wide screens (where cover
     crops vertically) 35% keeps her face rather than the table. */
  object-position: 80% 35%;
  /* Slow zoom-out on load (once). Scaling around the photo's own
     focus point keeps the composition where it rests; .hero clips the
     overflow, so no edges show while it is enlarged. */
  transform-origin: 80% 35%;
  animation: hero-zoom-out 5.8s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@keyframes hero-zoom-out {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(32, 40, 45, 0.96) 0%, rgba(32, 40, 45, 0.88) 32%, rgba(32, 40, 45, 0.5) 54%, rgba(32, 40, 45, 0.14) 68%, rgba(32, 40, 45, 0.22) 100%);
}

.hero .container { width: 100%; position: relative; z-index: 1; }

.hero__inner {
  max-width: 34rem;
}

.hero h1 { color: var(--on-dark); margin-bottom: var(--space-3); }

.hero__lead {
  font-size: var(--fs-md);
  color: var(--on-dark-soft);
  max-width: 30rem;
  margin-bottom: var(--space-4);
}

/* Intro group: official BDÜ logo (as supplied) on the left, both
   eyebrow lines stacked on the right and centred on it, a hairline
   divider underneath. The headline keeps its own left edge. */
.hero__intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.375rem;
  margin-bottom: var(--space-3);
}
.hero__intro .eyebrow { margin: 0; }
/* the two eyebrow lines stay stacked at every width inside the group */
.hero__intro .hero__sep { display: none; }
.hero__intro .hero__line { display: block; }
.hero__bdu {
  display: block;
  height: 51.2px; /* 64px × 0.8 */
  width: auto;
}
.hero__intro::after {
  content: "";
  grid-column: 1 / -1;
  width: 35%;
  height: 1px;
  margin-top: 1.375rem;
  background: var(--border-on-dark);
}

/* Desktop only: languages and region each start their own line.
   Below 901px the spans stay inline and the text flows as before. */
@media (min-width: 901px) {
  .hero__sep { display: none; }
  .hero__line { display: block; }
  .hero__line--nowrap { white-space: nowrap; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ===========================================================
   Hero marquee — decorative service listing, sized far down from
   Axentix's own huge (347px) reference version. Sits in the padding
   band reserved by .hero's padding-bottom, over the photo's lower
   (table/laptop) area, never behind the headline/CTAs or her face.
   =========================================================== */

.hero-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: clamp(3.75rem, 2.4rem + 3.2vw, 5.75rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* The track/toggle handle their own pointer targets; the decorative
     text itself must never intercept clicks meant for the photo/hero. */
  pointer-events: none;
}

.hero-marquee__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Soft fade at the left/right edges of the viewport itself. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.hero-marquee__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  /* 49.3s, not the old 36s: removing "Projektmanagement für
     Übersetzungsprojekte" shortened the looped string (measured
     ~68.5% of its old width), and a shorter string over the same
     duration would itself move faster in px/s. Duration is scaled up
     to land on exactly half the ORIGINAL px/s speed, not just
     whatever falls out of leaving 36s untouched. */
  animation: hero-marquee-scroll 49.3s linear infinite;
}
.hero-marquee.is-paused .hero-marquee__track,
.hero-marquee.is-offscreen .hero-marquee__track {
  animation-play-state: paused;
}
@keyframes hero-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hero-marquee__item {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(3.5rem, 2rem + 3.2vw, 5rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  /* Soft vertical fade — top of the letters reads clearly, they thin
     out toward the baseline. A mask (not a background-clip gradient
     like the language marquee uses) because this sits over a photo,
     not a flat page background it could blend into. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.05) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.05) 100%);
}

.hero-marquee__toggle {
  position: absolute;
  right: var(--space-3);
  bottom: 0.4rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-ui);
  border: 1px solid var(--border-on-dark);
  background: rgba(9, 11, 13, 0.3);
  color: var(--on-dark-soft);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.hero-marquee__toggle:hover { background: rgba(9, 11, 13, 0.48); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.32); }
.hero-marquee__toggle .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-marquee__track { animation: none; }
  .hero-marquee__item:nth-child(2) { display: none; }
  .hero-marquee__toggle { display: none; }
}

@media (max-width: 720px) {
  .hero-marquee { height: clamp(2.25rem, 1.6rem + 3vw, 3rem); }
  .hero-marquee__item { font-size: clamp(1.5rem, 1.1rem + 3vw, 2.25rem); }
  .hero-marquee__toggle { width: 28px; height: 28px; right: var(--space-2); bottom: 0.3rem; }
  .hero-marquee__toggle .icon { width: 12px; height: 12px; }
}

/* ===========================================================
   Trust strip
   =========================================================== */

.trust-strip {
  /* Plain --paper-alt grey (no grid pattern) — a flat, distinct band
     against the white Leistungen section below it. */
  background-color: var(--paper-alt);
  border-top: 1px solid var(--border);
  padding-block: 1.85rem;
}

.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-strip__list li {
  display: flex;
  /* All three columns now carry the same shape — one title + exactly
     two description lines — so centering the icon against that whole
     block keeps titles level *and* centers the icon, without the
     flex-start workaround the old mismatched (1-line vs 2-line)
     descriptions needed. */
  align-items: center;
  gap: 1.1rem;
  text-align: left;
  color: var(--ink);
}

.trust-strip__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.trust-strip__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.trust-strip__desc {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}

.trust-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  color: var(--ink);
}
.trust-strip__icon svg {
  width: 100%;
  height: 100%;
}

/* ===========================================================
   Icons (inline SVG, single stroke family)
   =========================================================== */

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Second, newer icon set (contacts, CTA/carousel arrows, accordion
   plus/minus, language switch, process steps): each file already
   authors its own fill/stroke/stroke-width presentation attributes
   (thin 1.25 line on a 40-unit grid), so — unlike .icon above — this
   class never overrides stroke-width. It only sizes the icon and
   keeps it from shrinking next to long button/label text; the drawn
   color always follows the element's own `color` via currentColor. */
.icon-line {
  display: block;
  flex-shrink: 0;
}
.icon-line--40 { width: 40px; height: 40px; }

/* ===========================================================
   Services (Leistungen): editorial accordion
   One full-width row per service: number | title | short description
   | arrow. The whole row is the hit area (the title's <button> is
   stretched over it via ::after), details open directly below, only
   one at a time (script.js). Without JS every panel simply shows.
   =========================================================== */

.service-list {
  --service-cols: 5.5rem minmax(0, 22rem) minmax(0, 1fr) 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.service-row {
  border-bottom: 1px solid var(--border);
  /* clears the fixed header when an opened row is scrolled into view */
  scroll-margin-top: var(--header-offset);
}

.service-row__head {
  position: relative;
  display: grid;
  grid-template-columns: var(--service-cols);
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
}

/* Number fill: a gradient clipped to the glyphs. Its two stops are
   registered colors so they can transition (a gradient itself can't):
   both stops = the resting grey, then on row hover / open they move
   to the --gradient-primary stops (mint → light blue, same 110deg).
   Browsers without @property simply switch without the fade. */
@property --num-from {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(32, 40, 45, 0.28);
}
@property --num-to {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(32, 40, 45, 0.28);
}

.service-row__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 2.4rem + 1.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(32, 40, 45, 0.28);
  font-variant-numeric: tabular-nums;
  --num-from: rgba(32, 40, 45, 0.28);
  --num-to: rgba(32, 40, 45, 0.28);
  transition: --num-from 0.25s var(--ease-out), --num-to 0.25s var(--ease-out);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .service-row__num {
    background-image: linear-gradient(110deg, var(--num-from) 0%, var(--num-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.service-row__title h3 {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 0.5vw, 1.75rem);
  line-height: 1.2;
}

.service-row__toggle {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* whole words; if a compound still doesn't fit, hyphenate it at a
     proper German break point (lang="de") instead of mid-syllable */
  overflow-wrap: break-word;
  hyphens: auto;
  transition: color 0.22s var(--ease-out);
}
/* stretched hit area: the whole row toggles, but there's still only
   one focusable control per row. z-index keeps it above row content
   that gets its own paint layer (the rotated arrow, when open). */
.service-row__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.service-row__toggle:focus-visible { outline: none; }
.service-row__toggle:focus-visible::after {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.service-row__badge {
  margin: 0.5rem 0 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.service-row__desc { color: var(--ink-soft); }
.service-row__desc > :last-child { margin-bottom: 0; }

.service-row__list-label {
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 0.4rem;
}
/* Summary items as wrapped informational tags (still a real <ul>, so
   screen readers announce the item count). Smaller radius and no
   fill/hover keep them from reading as the site's 8px buttons. */
.service-row__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}
.service-row__list li,
.lang-groups__list li {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--ink);
  padding: 0.3rem 0.7rem;
  /* Brand-derived tint: the same two stops as --gradient-primary
     (mint → #65c7f7 light blue) at ~7% strength, border from the
     darker mint (--focus-ring) — reads as a quiet label, not the CTA. */
  border: 1px solid color-mix(in srgb, var(--focus-ring) 30%, transparent);
  border-radius: 4px;
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--mint) 7%, transparent) 0%,
    color-mix(in srgb, #65c7f7 9%, transparent) 100%);
}

.lang-pair { white-space: nowrap; }

.service-row__langs {
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Client request: heavier separator dots in the language lines.
   line-height: 0 keeps the larger glyph from changing the line box. */
@media (min-width: 901px) {
  .lang-sep {
    font-size: 1.4em;
    font-weight: 700;
    line-height: 0;
    vertical-align: -0.06em;
  }
}

.service-row__arrow {
  justify-self: end;
  width: 32px;
  height: 32px;
  color: var(--ink);
  transition: transform 0.4s var(--ease-out);
  pointer-events: none; /* decorative: clicks fall through to the row toggle */
}
.service-row__arrow .icon-line { width: 100%; height: 100%; }

/* Title: graphite → black on row hover, while open, and on keyboard focus */
.service-row:hover .service-row__toggle,
.service-row.is-open .service-row__toggle,
.service-row__toggle:focus-visible { color: #000; }

.service-row:hover .service-row__num,
.service-row.is-open .service-row__num {
  --num-from: var(--mint);
  --num-to: #65c7f7; /* right stop of --gradient-primary */
  color: var(--ink); /* fallback where text clipping is unsupported */
}
.service-row.is-open .service-row__arrow { transform: rotate(180deg); }

/* Details panel, aligned to the description column. */
.service-row__body {
  display: grid;
  grid-template-columns: var(--service-cols);
  column-gap: var(--space-4);
  padding-bottom: var(--space-4);
}
.service-row__body > * { grid-column: 3; max-width: 46rem; }
.service-row__body p { color: var(--ink-soft); }
.service-row__body > :last-child { margin-bottom: 0; }
.service-row__body strong { color: var(--ink); }

/* Collapsed state only once JS is ready. 0fr→1fr grid rows animate
   height without measuring; visibility keeps closed panels out of the
   tab order and accessibility tree once the collapse has finished. */
.js-services-ready .service-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.js-services-ready .service-row.is-open .service-row__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s linear 0s;
}
.service-row__panel-clip { overflow: hidden; min-height: 0; }
.js-services-ready .service-row__body {
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.js-services-ready .service-row.is-open .service-row__body {
  opacity: 1;
  transition: opacity 0.35s var(--ease-out) 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .service-row__num,
  .service-row__toggle,
  .service-row__arrow,
  .js-services-ready .service-row__panel,
  .js-services-ready .service-row.is-open .service-row__panel,
  .js-services-ready .service-row__body,
  .js-services-ready .service-row.is-open .service-row__body { transition: none; }
}

/* Stacked rows (number | title | arrow, description below) up to
   1100px: the 4-column desktop row gets too narrow on tablets. */
@media (max-width: 1100px) {
  .service-list { --service-cols: 3rem minmax(0, 1fr) 2rem; }
  .service-row__head { column-gap: var(--space-2); row-gap: var(--space-2); align-items: start; padding: var(--space-3) 0; }
  .service-row__num { font-size: 2rem; grid-row: 1; }
  .service-row__title { grid-column: 2; grid-row: 1; align-self: center; }
  .service-row__arrow { grid-column: 3; grid-row: 1; align-self: center; width: 28px; height: 28px; }
  .service-row__desc { grid-column: 2 / -1; grid-row: 2; }
  .service-row__body { column-gap: var(--space-2); padding-bottom: var(--space-3); }
  .service-row__body > * { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .service-list { --service-cols: 2.5rem minmax(0, 1fr) 1.75rem; }
  .service-row__head { column-gap: 0.75rem; }
  .service-row__num { font-size: 1.75rem; }
  .service-row__title h3 { font-size: 1.25rem; }
  .service-row__body { column-gap: 0.75rem; }
}

@keyframes details-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===========================================================
   Decorative language marquee — purely visual transition between the
   service details and the language table. All content is duplicated
   for a seamless loop and hidden from assistive tech; the languages
   themselves are already accessible in the table right below.
   =========================================================== */

.lang-marquee {
  position: relative;
  background: var(--paper);
  padding-block: 1.5rem;
  overflow: hidden;
}

.lang-marquee__viewport { overflow: hidden; }

.lang-marquee__track {
  display: flex;
  width: max-content;
  animation: lang-marquee-scroll 32s linear infinite;
}
.lang-marquee.is-paused .lang-marquee__track,
.lang-marquee:hover .lang-marquee__track {
  animation-play-state: paused;
}
@keyframes lang-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.lang-marquee__item {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding-inline: 2rem;
  /* light-grey at the top of each glyph, fading toward the page's own
     white as it reaches the baseline — a decorative, secondary read */
  background-image: linear-gradient(180deg, rgba(32, 40, 45, 0.34) 0%, rgba(32, 40, 45, 0.05) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(32, 40, 45, 0.16);
  -webkit-text-fill-color: transparent;
}

/* fade the marquee out at the section's own edges */
.lang-marquee::before,
.lang-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10rem;
  max-width: 18vw;
  z-index: 1;
  pointer-events: none;
}
.lang-marquee::before { left: 0; background: linear-gradient(90deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%); }
.lang-marquee::after { right: 0; background: linear-gradient(270deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%); }

.lang-marquee__toggle {
  position: absolute;
  right: var(--space-3);
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(32, 40, 45, 0.18);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}
.lang-marquee__toggle:hover { color: var(--ink); border-color: rgba(32, 40, 45, 0.32); }
.lang-marquee__toggle .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .lang-marquee__track { animation: none; }
  /* nothing to pause/play when reduced motion already keeps it static */
  .lang-marquee__toggle { display: none; }
}

@media (max-width: 720px) {
  .lang-marquee { padding-block: 1rem; }
  .lang-marquee__toggle { right: var(--space-2); bottom: 0.4rem; width: 32px; height: 32px; }
}

/* ===========================================================
   Language matrix
   =========================================================== */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.lang-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.lang-matrix th,
.lang-matrix td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border);
}
.lang-matrix tbody tr:last-child th,
.lang-matrix tbody tr:last-child td { border-bottom: none; }

.lang-matrix thead th {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-weight: 500;
  background: var(--paper-alt);
}

.lang-matrix td { text-align: center; }

.lang-matrix .yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ink);
  font-weight: 600;
}
.lang-matrix .no { color: var(--ink-faint); }

/* Mobile language groups (tag style shared with .service-row__list li) */
.lang-groups { display: none; }
.lang-groups__group + .lang-groups__group { margin-top: var(--space-3); }
.lang-groups h3 {
  font-size: var(--fs-md);
  margin: 0 0 0.6rem;
}
.lang-groups__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767px) {
  .table-scroll { display: none; }
  .lang-groups { display: block; }
}

/* ===========================================================
   Card grids (Einsatzbereiche, Ablauf & Kosten request cards)
   =========================================================== */

.card-grid {
  display: grid;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cred-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-ui);
  padding: var(--space-3);
}
.cred-card h3 { margin-bottom: 0.4rem; }
.cred-card p { color: var(--ink-soft); margin: 0; }

.card-grid--3 .cred-card:nth-child(1) { grid-column: span 2; }
/* "Privatpersonen" closes the grid across the full row (no orphan) */
.clients .card-grid--3 .cred-card:last-child { grid-column: 1 / -1; }

.section--dark .cred-card,
.clients .cred-card {
  background: var(--dark-surface);
  border-color: var(--border-on-dark);
}

/* Informational cards, not links: quiet lift + accent edge, no cursor */
.clients .cred-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
@media (hover: hover) {
  .clients .cred-card:hover {
    transform: translateY(-3px);
    background-color: color-mix(in srgb, var(--dark-surface) 90%, #ffffff);
    border-color: color-mix(in srgb, var(--mint) 25%, #65c7f7 20%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .clients .cred-card { transition: none; }
  .clients .cred-card:hover { transform: none; }
}
.section--dark .cred-card h3,
.clients .cred-card h3 { color: var(--on-dark); }
.section--dark .cred-card p,
.clients .cred-card p { color: var(--on-dark-soft); }

/* ===========================================================
   Areas of work — dark, full-bleed photo section
   =========================================================== */

.clients {
  background: var(--dark);
  color: var(--on-dark);
}

.clients__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.clients__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 25%;
}
.clients__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32,40,45,0.9) 0%, rgba(32,40,45,0.94) 40%, rgba(32,40,45,0.98) 100%);
}

.clients .container { position: relative; z-index: 1; }

/* Typographic accent directly on the section background (no panel). */
.clients__quote {
  max-width: 28rem;
  margin: 0 0 var(--space-5) auto;
  padding: 0;
}
.clients__quote p {
  font-family: var(--font-display);
  font-size: var(--fs-xl); /* 1.75rem, client request */
  font-weight: 500;
  color: var(--on-dark); /* fallback if text clipping is unsupported */
  margin: 0;
  line-height: 1.25;
}
/* Brand gradient on the letters only (same --gradient-primary as the
   primary buttons). inline-block so the gradient spans the text's own
   width, not the whole panel — both ends of it stay visible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .clients__quote p {
    display: inline-block;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ===========================================================
   About — split portrait layout
   =========================================================== */

.about__layout {
  display: grid;
  /* Fixed photo column (not fr-based): the offset photo overhangs the
     main photo's own right/bottom edge by design (see .about__media-
     offset), so the column needs a predictable width to reserve real
     room for that overhang — a fr-based track can't guarantee that.
     The wide gap is what actually keeps the overhang clear of the text
     column (28rem × 12% ≈ 54px overhang against an 80px gap). */
  grid-template-columns: 28rem minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

.about__media {
  position: relative;
  /* Column width is fixed by .about__layout's grid-template-columns
     (28rem); this element simply fills it. */
}
.about__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-ui);
}
/* The smaller photo deliberately overhangs the main photo's own
   bottom-right corner (negative inset) — the earlier, preferred
   composition. Clearance from the text column is handled by the grid
   (see .about__layout's fixed column + wide gap), not by shrinking or
   containing this overhang. */
.about__media-offset {
  position: absolute;
  width: 46%;
  bottom: -8%;
  right: -12%;
  overflow: hidden;
  border: 6px solid var(--paper);
  border-radius: var(--radius-ui);
  box-shadow: 0 10px 26px -12px rgba(32, 40, 45, 0.4);
}
.about__media-offset img {
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-ui);
}

.about__bio > p { max-width: 56ch; }

/* ---------- collapsible biography ---------- */
.about__bio {
  position: relative;
  overflow: hidden;
}
/* Only collapse with JS available (mirrors .reveal's own progressive
   enhancement): without it, .about__bio-toggle stays [hidden] and the
   full text is simply shown, unclipped. */
.js-bio-ready .about__bio {
  max-height: 15.5rem;
  transition: max-height 0.35s var(--ease-out);
}
.js-bio-ready .about__bio.is-expanded { max-height: none; }

.about__bio-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--paper) 85%);
  pointer-events: none;
  opacity: 0;
}
.js-bio-ready .about__bio-fade { opacity: 1; }
.js-bio-ready .about__bio.is-expanded .about__bio-fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js-bio-ready .about__bio { transition: none; }
}

.about__bio-toggle {
  margin: 0 0 var(--space-4);
}

.qualifications-detail { margin-top: var(--space-4); }
.accordion-item.qualifications-detail {
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  box-shadow: var(--glass-dark-shadow);
}
.accordion-item.qualifications-detail summary,
.qualifications-detail .service-detail__plus { color: var(--on-dark); }
.qualifications-detail .qualifications-list { color: var(--on-dark-soft); }

/* Official BDÜ membership logo, shown as supplied (no filter/recolor);
   only its display height is set, width follows the SVG's ratio. */
.about__membership {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.about__membership img {
  display: block;
  height: 56px;
  width: auto;
  flex-shrink: 0;
}
.about__membership p {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
}
.qualifications-list {
  margin: var(--space-2) 0 0;
  padding-left: 0;
  list-style: none;
  color: var(--ink-soft);
  display: grid;
  gap: 0.6rem;
}
.qualifications-list li {
  padding-left: 1.4rem;
  position: relative;
}
.qualifications-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--mint);
}

/* ===========================================================
   Process & pricing
   =========================================================== */

.process { position: relative; }
.process .container { position: relative; z-index: 1; }

.process .cred-card {
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  box-shadow: var(--glass-dark-shadow);
}
.process .cred-card h3 { color: var(--on-dark); }
.process .cred-card p { color: var(--on-dark-soft); }

.process-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-4);
  max-width: 42rem;
  position: relative;
}
.process-steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(32, 40, 45, 0.18);
}
.process-steps li {
  position: relative;
  /* Flex + align-items: center (not absolute-positioned icon + text
     starting at the top) so the text — one line or several — is
     always centered against the icon's own height, not pinned to
     its top edge. Equal 12px gap replaces the old padding-left,
     matching the previous 3.25rem (40px icon + 12px) spacing. */
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--space-3);
  font-size: var(--fs-md);
}
.process-steps li:last-child { padding-bottom: 0; }
/* step-N.svg already bakes in its own square frame + white backing
   (a <rect> that inherits the currentColor stroke) — this wrapper
   only sizes it, no separate border/background/digit of its own
   (that would double up the square and show two numbers). */
.process-steps__num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  color: var(--on-dark);
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  border-radius: 8px;
  box-shadow: var(--glass-dark-shadow);
}
.process-steps__num svg { width: 100%; height: 100%; }
/* the step SVGs carry their own white, ink-stroked square — the glass
   box above replaces it, so only the digit stroke stays visible */
.process-steps__num svg rect { fill: none; stroke: none; }

/* Digits light up 1 → 4 once the list is revealed (script.js adds the
   gradient copies; .is-visible comes from the shared reveal observer).
   Opacity-only crossfade: no movement, no layout change, runs once. */
.step-digit-grad { opacity: 0; }
.js-reveal-ready .process-steps.is-visible .step-digit-grad,
.js-reveal-ready .process-steps.is-visible .step-digit-base {
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(450ms + var(--step-i, 0) * 400ms);
}
.js-reveal-ready .process-steps.is-visible .step-digit-grad { opacity: 1; }
.js-reveal-ready .process-steps.is-visible .step-digit-base { opacity: 0; }
/* reduced motion: final state straight away */
@media (prefers-reduced-motion: reduce) {
  .step-digit-grad { opacity: 1; transition: none; }
  .step-digit-base { opacity: 0; transition: none; }
}

.process-note {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  max-width: 42rem;
  margin-bottom: var(--space-4);
}

.pricing-heading { margin-top: var(--space-2); }

.accordion-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* Solid opaque rectangles, not a shared-hairline list — reads clearly
   against the section's plain grey background. The open answer stays
   inside this same box, not a separate panel. */
/* Plus/minus icon used by the remaining <details> accordions
   (Qualifikationen, Kosten). Two static line SVGs toggled purely by
   the native [open] state. */
.service-detail__plus {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--ink);
}
.service-detail__plus .icon-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.service-detail__plus .service-detail__minus-icon { display: none; }
details[open] .service-detail__plus .service-detail__plus-icon { display: none; }
details[open] .service-detail__plus .service-detail__minus-icon { display: block; }

.accordion-item {
  background: var(--paper);
  border: 1px solid rgba(32, 40, 45, 0.24);
  border-radius: var(--radius-ui);
  padding: 1.1rem 1.35rem;
}
.accordion-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item p { color: var(--ink-soft); margin-top: var(--space-2); }
.accordion-item[open] > *:not(summary) { animation: details-in 0.2s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .accordion-item[open] > *:not(summary) { animation: none; }
}

/* ===========================================================
   Back to top — floating liquid-glass button
   Lighter than the header glass: the darkening sits mostly in the
   backdrop (brightness) with a thin tint, so the white arrow keeps
   ≥3:1 even over pure white, while content stays visible through it.
   =========================================================== */

.to-top {
  position: fixed;
  right: calc(28px + env(safe-area-inset-right, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 90; /* above content, below the header (100) */
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--on-dark);
  cursor: pointer;
  background:
    radial-gradient(90% 55% at 50% 4%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(80% 40% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%),
    rgba(18, 22, 26, 0.4);
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(0.72);
  backdrop-filter: blur(18px) saturate(180%) brightness(0.72);
  /* top specular edge, soft refracted rim light at the bottom,
     hairline inner ring, and a low, soft drop for lift */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 12px -8px rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 22px -12px rgba(9, 11, 13, 0.5);
  /* hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    visibility 0s linear 0.35s,
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    visibility 0s linear 0s,
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}
.to-top .icon-line {
  width: 26px;
  height: 26px;
  transition: transform 0.3s var(--ease-out);
}
.to-top:hover {
  background:
    radial-gradient(90% 55% at 50% 4%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(80% 40% at 50% 100%, rgba(101, 199, 247, 0.18) 0%, rgba(101, 199, 247, 0) 70%),
    rgba(18, 22, 26, 0.52);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -10px 18px -12px rgba(101, 199, 247, 0.6),
    inset 0 0 0 1px rgba(16, 236, 176, 0.12),
    0 8px 22px -12px rgba(9, 11, 13, 0.5);
}
.to-top:hover .icon-line { transform: translateY(-2px); }
.to-top:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .to-top { background: rgba(32, 40, 45, 0.88); }
}
@media (max-width: 720px) {
  .to-top {
    width: 48px;
    height: 48px;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .to-top .icon-line { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top.is-visible { transform: none; transition: none; }
  .to-top .icon-line { transition: none; }
  .to-top:hover .icon-line { transform: none; }
}

/* ===========================================================
   Contact
   =========================================================== */

.contact { position: relative; }
.contact .container { position: relative; z-index: 1; }

/* Form left, photo right. The row's height comes from the form alone:
   the photo column stretches to it and the image fills that box
   absolutely (cover), so both share the same top and bottom edge
   whatever the form's length. */
.contact__layout {
  display: grid;
  /* ~62/38 across the full content width, so the photo column runs to
     the same right edge as the rest of the page instead of stopping
     short and leaving an empty strip beside it. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

/* Right column: photo on top, contact cards below. The cards take
   their natural height; the photo fills whatever is left so the column
   ends level with the form — no fixed heights. */
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.contact__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 15rem;
}
.contact__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keeps laptop, glasses and the full handwritten notebook page */
  object-position: 74% 50%;
  border-radius: var(--radius-ui);
}

.contact-panel {
  /* No card frame — the form sits directly on the section's own white
     background next to the photo, not inside a bordered panel. Removing
     the old card padding too, so the form's top lines up with the
     photo's top instead of floating lower where the card inset used to
     push it. */
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-2);
}

.form-field { margin-bottom: 0.9rem; }

.form-field label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(32, 40, 45, 0.22);
  border-radius: var(--radius-ui);
  background: var(--paper);
  color: var(--ink);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-faint); }

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--focus-ring);
}

.form-field textarea { resize: vertical; display: block; }

/* Privacy notice above the submit button. Link keeps graphite text
   (mint text would fail contrast on white) and carries the brand
   accent in its underline instead. */
.form-privacy {
  margin: 0.25rem 0 var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}
.form-privacy a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease-out);
}
.form-privacy a:hover { text-decoration-color: var(--focus-ring); }
.form-privacy a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .form-privacy a { transition: none; }
}


.contact-alt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* Dark graphite cards, same surface/border tokens as the dark sections */
.contact-alt__item {
  background: var(--dark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-ui);
  padding: 1rem 1.25rem;
}
.contact-alt__item h3 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  color: var(--on-dark-soft);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.contact-value {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-weight: 500;
  color: var(--on-dark);
  /* long placeholder addresses shouldn't force the card wider than the grid */
  word-break: break-word;
}
.contact-value [data-contact-email] { white-space: nowrap; }
/* tablets: the right column is narrow — tighter gap/padding so the
   one-line address still fits inside its card */
@media (max-width: 900px) {
  .contact__layout { gap: var(--space-3); }
  .contact-alt__item { padding: 1rem; }
  .contact-value { font-size: var(--fs-sm); }
}
.contact-value .icon { color: var(--on-dark-soft); flex-shrink: 0; }
.contact-value .icon-line { color: var(--on-dark-soft); }
.contact-value a { color: inherit; text-decoration: none; }
.contact-value a:hover { color: var(--on-dark-soft); text-decoration: underline; }
.contact-value a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.contact-alt__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}


/* ===========================================================
   Footer
   =========================================================== */

/* Footer as a closing brand statement: the full final logo as a large
   translucent watermark (decorative layer, ignores pointer + AT),
   social icons on top, legal links at the bottom (foreground). The
   min-height follows the watermark's own size, so it always fits. */
.site-footer {
  --footer-mark-w: min(78vw, 980px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--footer-mark-w) / 5.18 + 11rem); /* logo ratio 1502:290 */
  background: var(--dark);
  color: var(--on-dark-soft);
  padding-block: var(--space-5) var(--space-4);
}
.site-footer__mark {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--footer-mark-w);
  transform: translate(-50%, -50%);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.site-footer__mark img { display: block; width: 100%; height: auto; }
.site-footer > .container {
  position: relative;
  z-index: 1;
  /* full container width (auto side margins would shrink-wrap it
     inside the flex column) */
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.footer-social {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44×44 hit area (a11y target size) around a visually smaller
     28–32px glyph — no visible padding/plate, just a bigger
     clickable box than the icon itself. */
  width: 44px;
  height: 44px;
  color: var(--on-dark-soft);
  border-radius: var(--radius-ui);
  transition: color 0.2s var(--ease-out);
}
.footer-social a:hover { color: var(--on-dark); }
.footer-social a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.footer-social .icon-line { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) {
  .footer-social a { transition: none; }
}

.site-footer__bottom {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-on-dark);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
}
.footer-legal a { color: var(--on-dark-soft); text-decoration: none; }
.footer-legal a:hover { color: var(--on-dark); text-decoration: underline; }
.footer-legal a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* ===========================================================
   Legal pages (Impressum, Datenschutz) — minimal, shared header
   distinct from the full glass site header (no fixed nav/theme
   logic needed for a single short content page).
   =========================================================== */

.legal-header {
  background: var(--dark);
  padding-block: var(--space-2);
}
.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.legal-header .logo img { height: 2.1rem; width: auto; }
.legal-header__back {
  color: var(--on-dark-soft);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.legal-header__back:hover { color: var(--on-dark); }
.legal-header__back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.legal-page { padding-block: var(--space-6); min-height: 45vh; }
.legal-page h1 { margin-top: 0.25rem; }
.legal-page__notice { color: var(--ink-soft); font-size: var(--fs-md); margin-top: var(--space-3); }

/* ===========================================================
   Responsive behaviour
   =========================================================== */

@media (max-width: 1100px) {
  /* narrower photo column + gap so two columns still fit at ~1024px */
  .about__layout { grid-template-columns: 22rem minmax(0, 1fr); gap: 4rem; }
}
@media (max-width: 900px) {
  .about__layout { grid-template-columns: 1fr; gap: var(--space-4); }
  /* Single column now: the offset photo still overhangs the main
     photo's bottom edge (~8% of its height, ~2.6rem here), so the
     margin below it has to clear that overhang, not just look like
     normal paragraph spacing — otherwise it pokes into the bio text
     stacked underneath. */
  .about__media { max-width: 24rem; margin-bottom: 3.5rem; }
}

@media (max-width: 900px) {
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3 .cred-card:nth-child(1) { grid-column: span 2; }
  :root { --space-6: 3.5rem; }

  .primary-nav__cta { display: none; }
  .site-header__bar { justify-content: flex-start; padding-inline: 1rem 0.75rem; }
  .logo { margin-right: auto; }
  .nav-toggle { display: flex; }
  .lang-switch { padding: 0.3rem 0.6rem; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark);
    border-top: 1px solid var(--border-on-dark);
    display: none;
    padding: var(--space-2);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--border-on-dark); }
  .primary-nav li:last-child { border-bottom: none; }
  .primary-nav a { display: block; padding: var(--space-2) 0.5rem; font-size: var(--fs-sm); }
  .primary-nav .primary-nav__cta {
    display: block;
    text-align: center;
    margin: var(--space-1) 0.25rem 0.25rem;
  }
}

@media (max-width: 720px) {
  :root {
    --fs-md: 1.05rem;
    --header-offset: 8rem;
    --hero-photo-band: min(72vw, 340px);
  }

  .card-grid--2,
  .card-grid--3 { grid-template-columns: 1fr; }
  .card-grid--3 .cred-card:nth-child(1) { grid-column: span 1; }

  .form-row { grid-template-columns: 1fr; }
  .contact__layout { grid-template-columns: 1fr; gap: var(--space-3); }
  /* same full-width primary button as in the hero on phones */
  .contact-form .btn { width: 100%; justify-content: center; }
  .contact__media { flex: none; min-height: 0; }
  .contact__media img { position: static; height: auto; aspect-ratio: 16 / 9; object-position: 55% 45%; }

  /* Sequential order: logo, then social icons, then legal links —
     not a space-between row that could wrap unpredictably. */
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .footer-social { margin-left: -0.6rem; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }


  /* Mobile hero: photo band across the top (full face, uncropped),
     text below on solid dark — a full-width headline over a portrait
     this size would otherwise cross straight over her face. */
  .hero-screen { min-height: auto; }
  /* padding-bottom reserves room for .hero-marquee (see its own
     mobile height override below) plus a clear gap above the CTAs. */
  .hero { padding-top: 0; padding-bottom: clamp(3.25rem, 2.4rem + 3vw, 4rem); }
  .hero__bg { height: var(--hero-photo-band); bottom: auto; }
  .hero__bg img { object-position: 82% 30%; transform: none; }
  .hero__scrim {
    height: var(--hero-photo-band);
    bottom: auto;
    background: linear-gradient(180deg, rgba(32,40,45,0.32) 0%, rgba(32,40,45,0.1) 40%, var(--dark) 100%);
  }
  .hero__inner { max-width: none; padding-top: calc(var(--hero-photo-band) + 1.5rem); }
  .hero__intro { column-gap: 1rem; margin-bottom: var(--space-2); }
  .hero__intro::after { margin-top: 1rem; }
  .hero__bdu { height: 38.4px; } /* 48px × 0.8 */

  .trust-strip__list { grid-template-columns: 1fr; gap: var(--space-3); }
  .trust-strip__icon { width: 52px; height: 52px; }

  .about__media-offset { display: none; }

  .clients__quote { margin-inline: auto; max-width: 100%; }

}

/* WordPress integration */
body.admin-bar .site-header { top: 46px; }
@media(min-width:783px){ body.admin-bar .site-header { top:32px; } }
.primary-nav .menu-item-contact > a { border:1px solid var(--border-on-dark); padding:.6rem 1.25rem; border-radius:6px; }
.olena-editor-preview { pointer-events:none; }
.editor-styles-wrapper .hero-screen { min-height:0; }
.editor-styles-wrapper .hero { min-height:650px; }
.editor-styles-wrapper .hero-marquee__track { animation:none; }
.editor-styles-wrapper .reveal { opacity:1; transform:none; }

.editor-styles-wrapper .about__bio {max-height:none!important;}
.editor-styles-wrapper .about__bio-fade {display:none;}

/* Contact Form 7 keeps the original Gutenberg-controlled design. */
.contact-form .wpcf7-form-control-wrap { display:block; }
.contact-form .wpcf7-not-valid-tip { margin-top:.4rem; font-size:.9rem; }
.contact-form .wpcf7-response-output { margin:1.5rem 0 0!important; padding:1rem!important; font-size:1rem; }
.contact-form .wpcf7-spinner { vertical-align:middle; }
.contact-form.submitting .wpcf7-submit { opacity:.65; cursor:wait; }

.olena-language-switch { position:relative; display:block; }
.olena-language-switch summary { display:flex; align-items:center; gap:.4rem; list-style:none; cursor:pointer; }
.olena-language-switch summary::-webkit-details-marker { display:none; }
.olena-language-switch summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:5px; }
.olena-language-switch ul { position:absolute; top:calc(100% + .5rem); right:0; min-width:13rem; margin:0; padding:.4rem; list-style:none; background:var(--dark); border:1px solid var(--border-on-dark); border-radius:6px; box-shadow:0 10px 30px #0004; z-index:1002; }
.olena-language-switch li { margin:0; }
.olena-language-switch a { display:block; padding:.7rem .9rem; color:var(--on-dark); text-decoration:none; white-space:nowrap; }
.olena-language-switch a:hover,.olena-language-switch a[aria-current] { background:#ffffff15; }

/* Approved photography and glass refinement — 2026-10-14 */
/* Audience cards: restrained translucent graphite over the photograph.
   The existing opaque surface remains the fallback without backdrop blur. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .clients .cred-card {
    background-color: color-mix(in srgb, var(--dark-surface) 56%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  @media (hover: hover) {
    .clients .cred-card:hover {
      background-color: color-mix(in srgb, var(--dark-surface) 60%, transparent);
    }
  }
}


.clients__photo::after { background: linear-gradient(180deg, rgba(32,40,45,0.63) 0%, rgba(32,40,45,0.658) 40%, rgba(32,40,45,0.686) 100%); }
/* Photo fitting for the current local selection. */
.about__media > img { object-position: 38% 100%; }
.about__media-offset img { object-position: 50% 44%; }
.contact__media img { object-position: 55% 50%; }

/* Contact photograph with the same translucent card family as audiences. */
.contact__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-ui);
  padding: var(--space-3);
  min-height: 28rem;
  justify-content: flex-end;
}
.contact__aside .contact__media {
  position: absolute;
  inset: 0;
  min-height: 0;
  z-index: -1;
}
.contact__aside .contact__media img {
  position: absolute;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 55%;
}
.contact__aside .contact__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(32,40,45,0.36);
}
.contact__aside .contact-alt__item {
  background: var(--dark-surface);
  border-color: var(--border-on-dark);
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.contact__aside .contact-alt__note { color: var(--on-dark-soft); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact__aside .contact-alt__item {
    background-color: color-mix(in srgb, var(--dark-surface) 56%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  @media (hover: hover) {
    .contact__aside .contact-alt__item:hover {
      background-color: color-mix(in srgb, var(--dark-surface) 60%, transparent);
      border-color: color-mix(in srgb, var(--mint) 25%, #65c7f7 20%);
    }
  }
}
@media (max-width: 720px) {
  .contact__aside { min-height: 30rem; }
}
@media (prefers-reduced-motion: reduce) {
  .contact__aside .contact-alt__item { transition: none; }
}

/* Contact visual spans the heading and form; rotate only the photograph. */
.contact__aside .contact__media img { transform: rotate(180deg); }

/* Approved header transparency and mobile refinements — 2026-10-14. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__tint { background: rgba(9,11,13,0.425); }
}
@media (max-width: 720px) {
  .hero__bg img { animation: none; transform: none; }
  .clients__photo img { object-position: 75% center; }
  .about__media { margin-bottom: 5rem; }
  .about__media-offset {
    display: block;
    width: 36%;
    right: 0;
    bottom: -12%;
    border-width: 4px;
  }
  .site-footer .footer-social { transform: translateY(-20px); }
}

/* Mobile audience photo: crop out the upper hair area and retain the working details. */
@media (max-width: 720px) {
  .clients__photo { overflow: hidden; }
  .clients__photo img { transform: scale(1.5); transform-origin: 75% 100%; }
}

@media (max-width: 720px) { .clients__photo img { object-position: 63% center; transform-origin: 50% 100%; } }

/* Client corrections from Website-Texte_DE-EN-UK-RU.xlsx, 2026-10-15.
   Conditional classes/fields keep other language versions unchanged. */
.services--pair-chips .service-row__langs .lang-pair {
  display: inline-block;
  max-width: 100%;
  padding: 0.2rem 0.45rem;
  margin-block: 0.15rem;
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 4px;
  white-space: normal;
}
.about__profile-intro { color: var(--ink-soft); }
.about__facts { margin-top: var(--space-2); }
.about__facts > li:last-child { display: flex; align-items: center; gap: 0.75rem; }
.about__fact-logo { display: block; height: 44px; width: auto; flex-shrink: 0; }
.client-work-list strong { display: block; color: var(--on-dark); }
.qualifications-detail .client-work-list p { margin: 0.25rem 0 0; color: var(--on-dark-soft); }

/* Language pairs: dark graphite labels, without dot separators. */
.services--pair-chips .service-row__langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.services--pair-chips .service-row__langs .lang-pair { margin-block: 0; }

/* Softer medium graphite for service language labels. */
.services--pair-chips .service-row__langs .lang-pair { background: var(--ink-soft); }

/* Small multilingual design credit, 2026-10-23. */
.footer-credit { margin: 0.75rem 0 0; font-size: var(--fs-xs); color: var(--on-dark-soft); }
.footer-credit a { color: inherit; text-decoration: none; }
.footer-credit a:hover { color: var(--on-dark); text-decoration: underline; }
.footer-credit a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }