/* ============================================================
   NovaWeb — premium dark system
   ============================================================ */

:root {
  /* surfaces */
  --void:    #050509;
  --deep:    #08080F;
  --raise:   #0C0C16;
  --panel:   #10101C;

  /* light */
  --txt:     #F4F5FA;
  --txt-2:   #A8ADBE;
  /* 5.35:1 on --void, 4.87:1 on the glass panels. The previous #6E7488 sat
     at 4.38:1 — legal-looking, but under AA for the 10px labels using it. */
  --txt-3:   #7E8397;

  /* spectrum */
  --violet:  #A855F7;
  --blue:    #6E8CFF;
  --cyan:    #22D3EE;
  --warm:    #FFB86B;
  /* lifted violet, for gradients only. #A855F7 measured 2.86:1 against the
     brightest part of the hero scrim — under the 3:1 large-text floor. */
  --violet-hi: #B07BFF;

  /* glass */
  --glass:        rgba(255, 255, 255, .045);
  --glass-2:      rgba(255, 255, 255, .028);
  --glass-line:   rgba(255, 255, 255, .085);
  --glass-line-2: rgba(255, 255, 255, .05);

  /* type */
  --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* floor for the whole system: mono labels never go below this */
  --micro:   .6875rem;

  /* rhythm */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 84rem;
  --sec: clamp(4rem, 9vh, 7.5rem);

  /* motion — two tiers only */
  --fast: 200ms;
  --slow: 520ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --luxury-line: rgba(184, 202, 255, .16);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--txt);
  font-family: var(--sans);
  font-size: clamp(1rem, .97rem + .16vw, 1.075rem);
  line-height: 1.62;
  letter-spacing: -.006em;
  /* long german compounds (Herausforderungen, Zusammenarbeit) must break
     instead of spilling past .hero / section boxes on ~320px viewports */
  overflow-wrap: anywhere;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}/* A restrained premium finish: depth, highlights and rhythm without covering
   content or depending on large decorative assets. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(110, 140, 255, .025), transparent 28%, transparent 72%, rgba(168, 85, 247, .025));
}

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.022em; text-wrap: balance; }
p { margin: 0 0 1.05em; max-width: 60ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }

::selection { background: var(--violet); color: var(--void); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  z-index: 2;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 400;
  padding: .8rem 1.5rem;
  background: var(--cyan); color: var(--void);
  font-size: .8rem; font-weight: 600;
  text-decoration: none; border-radius: 0 0 10px 10px;
  transition: transform var(--fast) var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }/* ── ambient field ───────────────────────────────────────── */

.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.ambient__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 120% 78% at 50% 0%, #000 8%, transparent 72%);
}

.ambient__glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.ambient__glow--a {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  top: -28vw; left: -14vw;
  background: radial-gradient(circle, rgba(110, 140, 255, .17), transparent 68%);
  animation: ambient-drift-a 28s ease-in-out infinite alternate;
}
.ambient__glow--b {
  width: 54vw; height: 54vw; max-width: 800px; max-height: 800px;
  top: 42vh; right: -20vw;
  background: radial-gradient(circle, rgba(168, 85, 247, .12), transparent 68%);
  animation: ambient-drift-b 34s ease-in-out infinite alternate;
}
@keyframes ambient-drift-a { to { transform: translate3d(3vw, 2vh, 0) scale(1.08); } }
@keyframes ambient-drift-b { to { transform: translate3d(-3vw, -2vh, 0) scale(1.06); } }/* grain: SVG turbulence, so it costs no request */

.ambient__grain {
  position: absolute; inset: -50%;
  opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}/* ── glass ───────────────────────────────────────────────── */

.glass {
  position: relative;
  background: linear-gradient(168deg, var(--glass), var(--glass-2));
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .07) inset,
    0 24px 70px -30px rgba(0, 0, 0, .85);
}
.glass::after {
  content: "";
  position: absolute;
  inset: -60% -40%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .12) 50%, transparent 58%);
  transform: translateX(-35%);
  transition: opacity 500ms ease, transform 800ms var(--ease-out);
}
.glass:hover::after { opacity: 1; transform: translateX(35%); }
.glass > * { position: relative; z-index: 1; }

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 350;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, .04);
}
.page-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--blue), var(--cyan));
  box-shadow: 0 0 13px rgba(34, 211, 238, .65);
  transform-origin: left;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .22), transparent 42%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.pill {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--mono); font-size: var(--micro);
  letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .55rem;
  border: 1px solid var(--glass-line);
  border-radius: 100px;
  color: var(--txt-2);
  background: rgba(255, 255, 255, .03);
}
.pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); flex: none; }
.pill--live i { animation: blink 2.2s var(--ease) infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* ── buttons ─────────────────────────────────────────────── */

.btn {
  --btn-py: .72rem;
  --btn-px: 1.25rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--btn-py) var(--btn-px);
  font-size: .875rem; font-weight: 600; letter-spacing: -.008em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 11px;
  white-space: nowrap;
  transition:
    transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    background-color var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  /* White measured 1.81:1 on the cyan end, 3.07:1 on the blue end, 3.96:1 on
     the violet end — nowhere near AA, and no amount of scrim helps because the
     background here is the button's own gradient. The label goes dark instead:
     #050509 is 5.1:1 at the violet end and 9.9:1 at the cyan end, so the
     gradient keeps its full brightness and the CTA still reads instantly. */
  color: var(--void);
  background: linear-gradient(112deg, var(--violet), var(--blue) 52%, var(--cyan));
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .28) inset,
    0 10px 34px -10px rgba(140, 100, 255, .62);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .26), transparent 34%);
  opacity: .7;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 0 rgba(255, 255, 255, .34) inset, 0 18px 46px -12px rgba(150, 110, 255, .74); }
.btn--primary:active { transform: translateY(0); }

/* A ghost button still has to read as a button: without a border it is
   indistinguishable from a plain link, and 51 of them sit on the site. */
.btn--ghost {
  color: var(--txt-2);
  background: rgba(255, 255, 255, .028);
  border-color: var(--glass-line);
}
.btn--ghost:hover {
  color: var(--txt);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(110, 140, 255, .5);
}

.btn--lg { --btn-py: .95rem; --btn-px: 1.6rem; font-size: .9375rem; }
.btn--xl { --btn-py: 1.2rem; --btn-px: 2.2rem; font-size: 1.0625rem; border-radius: 14px; }

.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--txt-2);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--txt); background: rgba(255, 255, 255, .06); border-color: var(--glass-line-2); }/* ── nav ──────────────────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--stuck {
  background: rgba(5, 5, 9, .72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--glass-line-2);
}
.nav--hidden { transform: translateY(-102%); }

.nav__inner {
  max-width: var(--max); margin-inline: auto;
  padding: .9rem var(--gut);
  display: flex; align-items: center; gap: clamp(.7rem, 1.2vw, 1.75rem);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }/* ellipsis instead of pushing .nav__actions past the right edge on tiny screens */

.brand__word {
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.022em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.nav__links { display: flex; gap: clamp(.55rem, 1.25vw, 1.3rem); margin-inline: auto; flex: none; }
.nav__links a {
  position: relative;
  font-size: .875rem; font-weight: 500;
  color: var(--txt-2); text-decoration: none;
  padding: .3rem 0;
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--fast) var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--txt); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.nav__burger { display: none; }
.nav__burger > span { display: grid; gap: 5px; width: 18px; }
.nav__burger i { height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--fast) var(--ease); }
.nav__burger[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  display: none;
  padding: 1rem var(--gut) 1.6rem;
  background: rgba(5, 5, 9, .96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-line-2);
  /* phones: keep every link reachable — scroll inside the panel instead of
     running past the viewport (menu is ~800px tall, viewports are not) */
  max-height: calc(100vh - 4.25rem);
  max-height: calc(100dvh - 4.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a {
  display: block; padding: .95rem 0;
  font-family: var(--display); font-weight: 600;
  font-size: 1.5rem; letter-spacing: -.022em;
  color: var(--txt); text-decoration: none;
  border-bottom: 1px solid var(--glass-line-2);
}
.mobile-menu__foot { display: grid; gap: .6rem; padding-top: 1.25rem; }/* ── eyebrow ─────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--txt-3);
  margin: 0 0 1.4rem;
}
.eyebrow--violet { color: var(--violet); }/* the hero eyebrow sits directly on the photo — 11px --txt-3 measured 2.5:1 */

.eyebrow--hero { color: var(--txt-2); }
.eyebrow__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); flex: none;
  box-shadow: 0 0 10px var(--cyan);
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse { 50% { box-shadow: 0 0 18px 3px rgba(34, 211, 238, .55); } }/* ── hero ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  /* Three headline lines make the copy column taller, so the top rhythm comes
     down a notch — otherwise the block collides with the fixed nav at 900px. */
  padding: clamp(7rem, 15vh, 10rem) 0 clamp(4rem, 9vh, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%;
  opacity: .74;
  transform: scale(1.04);
  animation: hero-scene-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-scene-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-.6%, -.4%, 0); }
}/* Measured against the ungraded photo: the sky behind the headline sits at
   luma 240/255 (p95) and the sun at 247 — brighter than any text colour can
   survive, at every reasonable alpha. So the grade is two-part: a wide, gentle
   wash here that keeps the massif and the lake reading, and a much stronger
   ellipse anchored to .hero__copy (next rule) so the dark follows the copy
   column instead of a hard-coded percentage of the frame. */

.hero__grade {
  position: absolute; inset: 0;
  background:
    /* 1 — bottom fade, frontmost so the hand-off to the page is clean */
    linear-gradient(180deg, transparent 52%, rgba(5, 5, 9, .55) 82%, var(--void) 99%),
    /* 2 — nav legibility at scroll 0 */
    linear-gradient(180deg, rgba(5, 5, 9, .92) 0%, rgba(5, 5, 9, 0) 24%),
    /* 3 — dark at the left edge, open across the massif on the right */
    linear-gradient(90deg,
      rgba(5, 5, 9, .40) 0%,
      rgba(5, 5, 9, .30) 34%,
      rgba(5, 5, 9, .16) 58%,
      rgba(5, 5, 9, .10) 76%,
      rgba(5, 5, 9, .26) 100%);
}/* The hero runs wider than the rest of the page. At 84rem the copy column is
   only 596px, and "Die ultimative" needs ~10.25em — the headline silently
   broke mid-phrase there. */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(2rem, 3.4vw, 3.5rem);
  align-items: center;
  width: 100%;
  max-width: 92rem;
  /* .hero__scene is z-index 0; without an explicit level the grid would fall
     back to paint-order luck and .hero__copy::before (z-index -1) would end up
     *behind* the photo instead of in front of it. */
  position: relative;
  z-index: 1;
}/* The profile cards sit below the hero buttons, alongside one another. */

.hero__grid--intro { grid-template-columns: minmax(0, 1fr); }
.hero__grid--intro .hero__copy { max-width: none; }/* "ICT, Medien" is the widest of the three lines (measured at 100px Inter
   800 / -.025em). 10.6cqi therefore fills at most ~94% of the column at any
   width, in either the two- or the one-column layout, with no breakpoint in
   between. */

.hero__title {
  /* --t-cqi is set per page on the <h1>: the widest hero__line differs wildly
     (8.8em "ICT, Medien" vs 16.8em "Meine Zertifizierungen") and .hero has
     overflow:hidden, so each page sizes its title to its own longest line.
     The 1rem floor only applies below ~300px containers. */
  font-size: clamp(.9rem, var(--t-cqi, 10.6cqi), 6.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.025em;
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
}/* The application page needs a confident, but not oversized, opening.
   The upper bound was raised from 5.35rem to 6rem because Inter is
   narrower than the previous display face - without it the start
   headline filled only 64% of the column. */

#top .hero__title {
  font-size: clamp(2.3rem, 8.6cqi, 6rem);
  line-height: .98;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.5rem);
}

/* Auf dem Handy war die Untergrenze von 2.3rem (37px) zu gross - ohne
   JavaScript (und als Ausgangswert vor dem Auto-Fit) lief der Titel ueber
   den Rand. Mit JS setzt main.js danach die passende Groesse. */
@media (max-width: 40rem) {
  #top .hero__title { font-size: clamp(1.7rem, 8.6cqi, 6rem); }
}/* the three lines are a designed unit, not a paragraph — never let them wrap */

.hero__line { display: block; white-space: nowrap; }
/* set by main.js when a line is too long to be shrunk any further: on a
   phone, one extra line reads better than a 22px headline */
.hero__line.is-wrapped {
  white-space: normal;
  text-wrap: balance;
  /* Ein einzelnes langes Wort (z. B. "Zertifizierungen.") darf dabei nie
     ueber den Rand laufen: der Browser trennt es mit Bindestrich. */
  overflow-wrap: break-word;
  hyphens: auto;
  /* Der Zeilenabstand von .95 gilt fuer die einzeilige Variante. Bricht
     eine Zeile auf dem Handy um, kleben die Zeilen sonst aneinander. */
  line-height: 1.06;
}

.hero__copy {
  /* The headline is nowrap by design, so its size has to follow the column it
     lives in — not the viewport. cqi makes "it always fits" a property of the
     layout instead of a clamp value I have to re-tune at every breakpoint. */
  container-type: inline-size;
}/* The scrim that actually carries the headline. A percentage-based radial in
   .hero__grade cannot follow the copy column — on a 2560px viewport the shell
   is centred and the column lands somewhere else than at 1440px. Anchoring the
   dark ellipse to the copy box means the dark always sits exactly where the
   words are, at every width, and leaves the massif on the right untouched.
   Measured: ungraded backdrop behind the three lines is luma 240/255; this
   brings it to 18-37, which is 10:1+ for --txt and 3.4:1+ for the gradient. */

.hero__copy::before {
  content: "";
  position: absolute;
  inset: -28% -22% -30% -34%;
  z-index: -1;
  pointer-events: none;
  /* ellipse 50%/50% centred is the INSCRIBED case: r reaches exactly 1.0 at
     every edge midpoint and is >1 everywhere else on the boundary, so alpha
     is 0 along all four sides. Any other size or offset leaves alpha > 0
     where the box ends and you see the rectangle — which is what the first
     version did, as a hard seam across the sky. */
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5, 5, 9, .92) 0%,
    rgba(5, 5, 9, .88) 45%,
    rgba(5, 5, 9, .70) 70%,
    rgba(5, 5, 9, .34) 88%,
    rgba(5, 5, 9, 0) 100%);
}
.hero__line--grad {
  background: linear-gradient(96deg, var(--blue) 4%, var(--violet-hi) 46%, var(--cyan) 96%);
  background-size: 180% 100%;
  animation: headline-spectrum 8s ease-in-out infinite alternate;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: .06em;
}
@keyframes headline-spectrum {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.hero__tag {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 500; letter-spacing: -.02em;
  color: var(--txt-2);
  margin: 0 0 1.35rem;
}
#top .hero__tag { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }

.hero__lede {
  color: var(--txt-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  max-width: 47ch;
  margin-bottom: clamp(2rem, 4vw, 2.6rem);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: clamp(2rem, 4vw, 2.8rem); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-line-2);
}
.hero__proof li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .8125rem;
  /* --txt-3 (5.35:1 on --void) cannot clear AA at 13px over a photo, no matter
     how strong the grade gets — the backdrop would have to be nearly black. */
  color: var(--txt-2);
}
.hero__proof li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); opacity: .8;
}
.hero__proof li a {
  color: var(--txt); text-decoration: none;
  border-bottom: 1px solid var(--glass-line);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.hero__proof li a:hover { color: var(--cyan); border-bottom-color: currentColor; }/* floating surfaces */

.hero__fleet {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.15rem);
  align-content: start;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  /* every card sits over open sky, so lift the tertiary tone one step: at
     11-13px --txt-3 measured 4.2-4.5:1 against the blurred backdrop, --txt-2
     measures 7.0-7.5:1. */
  --txt-3: var(--txt-2);
}
.hero__copy { animation: hero-copy-arrive 850ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hero-copy-arrive {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}/* Subtle card motion stays inside its own grid cell, away from the copy. */

.hero__fleet .glass { animation: bob 8s ease-in-out infinite; transition: border-color 220ms ease, box-shadow 220ms ease; overflow: hidden; }
.hero__fleet .glass--ai { animation-delay: -2.7s; }
.hero__fleet .glass--checks { animation-delay: -5.3s; }
.hero__fleet .glass:hover { animation-play-state: paused; border-color: rgba(110, 140, 255, .42); box-shadow: 0 18px 42px -26px rgba(72, 139, 255, .55); }
#top .hero__cta .btn--primary { animation: cta-breathe 3.8s ease-in-out infinite; }
@keyframes cta-breathe {
  50% { box-shadow: 0 0 26px -10px rgba(110, 140, 255, .75); }
}/* The cards sit on the open, sunlit half of the photo, where the grade only
   takes ~.16-.30 off (it is deliberately weakest there so the massif stays
   alive). Their own .glass gradient is ~96% transparent, so the backing plate
   is what the type actually reads against — measured 23-40/255 with it,
   87/255 without. */

.hero__fleet .glass {
  background: linear-gradient(168deg, rgba(8, 8, 16, .92), rgba(8, 8, 16, .84));
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.glass--analytics { padding: 1.3rem; grid-column: 1; grid-row: 1; justify-self: stretch; width: auto; }

.glass__num { font-family: var(--display); font-size: 1.85rem; font-weight: 700; letter-spacing: -.025em; color: var(--txt); }
.glass__num em { font-style: normal; font-size: .58em; margin-left: .04em; color: var(--violet-hi); }
/* real figures, no invented time series */

.glass__rows { display: grid; gap: .1rem; margin: 0; list-style: none; padding: 0; }
.glass__rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .4rem 0;
  border-top: 1px solid var(--glass-line-2);
  font-size: .8125rem; color: var(--txt-3);
}
.glass__rows strong {
  font-family: var(--display); font-size: .9375rem; font-weight: 700;
  letter-spacing: -.022em; color: var(--txt);
}

.is-in .spark__line { animation: draw 1.5s var(--ease-out) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.glass--ai {
  padding: 1.3rem;
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch; width: auto;
}
.glass--ai .glass__hd { gap: .6rem; justify-content: flex-start; margin-bottom: .8rem; }

/* ── fleet card heads + competency bars (index hero only) ── */

.glass__label {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--glass-line-2);
}

.glass--checks { padding: 1.3rem; grid-column: 3; grid-row: 1; justify-self: stretch; width: auto; }
.glass--checks .glass__title { display: block; margin-bottom: .7rem; }
.checks { display: grid; gap: .42rem; }
.checks li { display: flex; align-items: center; gap: .55rem; font-size: .8125rem; color: var(--txt-2); }
.checks--skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; }
.checks--skills li { align-items: flex-start; font-size: .75rem; line-height: 1.35; }
.checks--skills .checks__mark { width: 13px; height: 13px; margin-top: .06rem; border-radius: 4px; }
.checks--skills .checks__mark::after { left: 3px; top: 1px; width: 3px; height: 6px; }
.checks--detail { gap: .75rem; }
.checks--detail li { align-items: flex-start; line-height: 1.35; }
.checks--detail li + li { padding-top: .75rem; border-top: 1px solid var(--glass-line-2); }
.checks--detail strong { display: block; margin-bottom: .16rem; color: var(--txt); font-size: .77rem; line-height: 1.25; }
.checks--detail .checks__mark { margin-top: .18rem; }
.checks__mark {
  width: 15px; height: 15px; flex: none;
  border-radius: 5px;
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .3);
  position: relative;
}
.checks__mark::after {
  content: ""; position: absolute; left: 4px; top: 2px;
  width: 4px; height: 7px;
  border: solid var(--cyan); border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.is-in .checks__bar span { transform: scaleX(1); }/* handwritten annotation */

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  width: 22px; height: 34px;
  border: 1px solid var(--glass-line); border-radius: 100px;
  display: grid; place-items: start center; padding-top: 7px;
}
.hero__scroll i { width: 2px; height: 7px; border-radius: 2px; background: var(--txt-3); animation: drop 2s var(--ease) infinite; }
@keyframes drop {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}/* ── trust strip ──────────────────────────────────────────── */

/* minmax(0, ·) throughout: a bare 1fr floors at min-content, so one long
   unbreakable number could push the whole grid wider than the viewport. */

/* ── generic section ──────────────────────────────────────── */

.section { position: relative; z-index: 2; padding-block: var(--sec); }
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  width: clamp(2.25rem, 5vw, 4.5rem);
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--luxury-line), transparent);
  opacity: .72;
}
/* Magazin-Kopf: der Titel steht links, der Einstieg in der zweiten Spalte
   rechts. Vorher sass der Text allein in der linken Hälfte und liess auf
   breiten Schirmen die halbe Breite leer. */
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  row-gap: 1.35rem;
  align-items: start;
  max-width: none;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section__head > .eyebrow { grid-column: 1 / -1; }
.section__head > .section__title { grid-column: 1; position: relative; }
/* A hairline in the gutter ties the two columns together and makes the
   space below the short title read as deliberate rather than empty. */
.section__head > .section__title::after {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: 0;
  right: calc(-0.5 * clamp(2rem, 4.5vw, 4.5rem));
  width: 1px;
  background: linear-gradient(180deg, var(--glass-line) 0%, transparent 88%);
  pointer-events: none;
}
/* ein Kopf, der nur aus Eyebrow und Titel besteht, spannt die volle Breite */
.section__head > .section__title:last-child { grid-column: 1 / -1; }
.section__head > .section__lede {
  grid-column: 2;
  margin-top: .35rem;
  max-width: 48ch;
}
/* der Fliesstext ersetzt die Lede, wenn der Kopf keine hat */
.section__head > .section__prose {
  grid-column: 2;
  margin-top: 0;
  max-width: 52ch;
}
/* steht eine Lede darueber, laeuft der Text als Zitat darunter durch */
.section__head > .section__lede + .section__prose {
  grid-column: 1 / -1;
  max-width: 68ch;
  margin-top: .25rem;
}

/* Der FAQ-Kopf steht in einer schmalen Spalte; "beantwortet." passt dort
   nicht in der Grossziffer der Ueberschrift. */
.faq .section__title { font-size: clamp(1.45rem, 4.6vw, 2.9rem); }

/* zentrierte Koepfe bleiben ein Block */
.section__head--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.section__head--center > .eyebrow,
.section__head--center > .section__title,
.section__head--center > .section__lede,
.section__head--center > .section__prose { grid-column: 1; }
.section__head--center > .section__title:last-child { grid-column: 1; }
.section__head--center > .section__title::after,
.section__head--stacked > .section__title::after { content: none; }

/* ein Kopf in einer bereits mehrspaltigen Shell darf sich nicht nochmal
   teilen - im FAQ sass er in einer schmalen Spalte und "Kurz beantwortet."
   zerfiel in acht Zeilen. */
.section__head--stacked {
  grid-template-columns: minmax(0, 1fr);
}
.section__head--stacked > .section__title,
.section__head--stacked > .section__title:last-child,
.section__head--stacked > .section__lede,
.section__head--stacked > .section__prose,
.section__head--stacked > .section__lede + .section__prose { grid-column: 1; }
.section__head--stacked > .section__lede { margin-top: 1.35rem; }
.section__head--center .eyebrow { justify-content: center; }
.section__title {
  /* Die Untergrenze war zu hoch: auf einem 375px-Handy gewann 2.2rem (35px)
     gegen den eigentlichen 5.2vw-Wert (19px) - der Titel lief dabei ueber
     seine Spalte hinaus. Die Skala startet jetzt bei 1.6rem; die Kurve
     oberhalb von 492px bleibt unveraendert. */
  font-size: clamp(1.6rem, 5.2vw, 4.2rem);
  /* The body sets overflow-wrap: anywhere so that long German compounds
     can break in running text. In a headline that looks like a typo -
     "Kurz beantwortet." became "beantwort / et.". Headlines hyphenate
     instead, and only break as a last resort. */
  overflow-wrap: break-word;
  hyphens: auto;
}/* a title that sits inside a section which already owns an h2 */

.section__title--sub { font-size: clamp(1.35rem, 4.4vw, 2.6rem); }
/* keeps compound words with a hyphen together - "Ajax-Kompetenzen" was
   breaking after the dash in the middle of the headline */
.nowrap { white-space: nowrap; }
.section__lede { margin-top: 1.35rem; color: var(--txt-2); font-size: clamp(1rem, .97rem + .2vw, 1.1rem); max-width: 52ch; }
.section__head--center .section__lede { margin-inline: auto; }/* Create a calm editorial rhythm: each layer of a section begins a little
   farther in, rather than forming one rigid left edge. */

.section__head:not(.section__head--center) .section__title { margin-left: clamp(.7rem, 1.8vw, 1.5rem); }
.section__head:not(.section__head--center) .section__lede { margin-left: clamp(1.35rem, 3.8vw, 3.2rem); }/* longer editorial copy — two to three paragraphs that must read as one block */

.section__prose {
  display: grid; gap: 1.35rem;
  max-width: 68ch;
  color: var(--txt-2);
  font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
  line-height: 1.72;
}
.section__prose p { margin: 0; }
.section__prose p:nth-child(even) {
  margin-left: clamp(.9rem, 2.8vw, 2.5rem);
  padding-left: clamp(.75rem, 1.8vw, 1.25rem);
  border-left: 1px solid rgba(34, 211, 238, .28);
}

.feature-list { display: grid; gap: .05rem; }
.feature-list li {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  padding: 1.02rem .2rem;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em;
  color: var(--txt-2);
  border-bottom: 1px solid var(--glass-line-2);
  transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.feature-list li:first-child { border-top: 1px solid var(--glass-line-2); }
.feature-list li:hover { color: var(--txt); padding-left: .7rem; }
.feature-list i {
  width: 19px; height: 19px; flex: none;
  border-radius: 6px;
  background: rgba(168, 85, 247, .11);
  border: 1px solid rgba(168, 85, 247, .26);
  position: relative;
}
.feature-list i::after {
  content: ""; position: absolute; left: 5.5px; top: 3.5px;
  width: 5px; height: 8px;
  border: solid var(--violet); border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}/* ── final CTA ────────────────────────────────────────────── */

.section--services { background: linear-gradient(180deg, transparent, rgba(12, 12, 22, .6) 40%, transparent); }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
.svc {
  display: grid;
  /* Without an explicit row track the free space of a stretched card is
     distributed over the auto rows - the media row then grows and the body
     starts lower in one card than in the next, which knocked the card
     titles out of line. The media keeps its aspect ratio, the body takes
     what is left. */
  grid-template-rows: auto 1fr;
  align-content: start;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(170deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.svc:hover { border-color: rgba(110, 140, 255, .42); transform: translateY(-4px); box-shadow: 0 24px 55px -38px rgba(81, 112, 255, .75); }
.svc__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0A0A14; }
.svc__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) brightness(.72);
  transition: transform var(--slow) var(--ease-out), filter var(--slow) var(--ease-out);
}

/* Die Mechanik-Grafik ist 3:2 und traegt ihren eigenen Text. Im 4:3-Medienslot
   wuerde sie beschnitten - deshalb vollstaendig zeigen; die schmalen Balken
   oben und unten fallen auf dem dunklen Kartenhintergrund nicht auf. */
.svc__media.svc__media--voll img { object-fit: contain; }
.svc:hover .svc__media img { transform: scale(1.05); filter: saturate(1) brightness(.86); }
.svc__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 9, .08), rgba(5, 5, 9, .7));
}
.svc__body { display: grid; gap: .65rem; padding: clamp(1.15rem, 2.2vw, 1.5rem); align-content: start; }

.svc h3 { margin: .3rem 0 0; font-family: var(--display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.022em; }
.svc p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--txt-3); }
.svc__gain {
  margin-top: .35rem;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan);
  padding-top: .85rem; border-top: 1px solid var(--glass-line-2);
}/* ── Über mich ──────────────────────────────────────────────── */

.section--about { background: linear-gradient(180deg, transparent, rgba(12, 12, 22, .45) 55%, transparent); }
.about {
  display: grid;
  grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about__media { position: relative; }
.about__media img {
  display: block; width: 100%; height: auto;
  border-radius: 22px;
  border: 1px solid var(--glass-line);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95);
  filter: saturate(.92) contrast(1.03);
}
.about__pill {
  position: absolute; left: .9rem; bottom: .9rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.about__lede { color: var(--txt-2); font-size: clamp(1rem, .97rem + .2vw, 1.1rem); line-height: 1.65; margin: 1.35rem 0 0; }
.feature-list--about { margin-top: 1.75rem; }

.section__head--tight { margin-top: clamp(4rem, 8vw, 6.5rem); }

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
.benefit {
  display: grid; gap: .7rem; align-content: start;
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.benefit:hover { border-color: rgba(168, 85, 247, .4); transform: translateY(-3px); box-shadow: 0 22px 48px -38px rgba(168, 85, 247, .82); }

.benefit h3 { margin: .1rem 0 0; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.022em; }
.benefit p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--txt-3); }/* ── Ablauf ─────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.step {
  display: grid; align-content: start; gap: .35rem;
  /* the steps were the only block on the site without a frame; they now
     use the same surface as .benefit, .cert, .lm and .soc */
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.step:hover { border-color: rgba(168, 85, 247, .3); transform: translateY(-2px); }
/* The stylesheet had ".step__no" while the markup uses ".step__num" - the
   numbers had no styling at all. */
.step__num {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .16em;
  color: var(--cyan);
  margin-bottom: .35rem;
}

.step h3 { margin: .6rem 0 0; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.022em; }
.step p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--txt-3); }/* ── Referenzen ─────────────────────────────────────────────── */

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
  list-style: none; margin: 0; padding: 0;
}
.project {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  border: 1px solid var(--glass-line);
  border-radius: 20px; overflow: hidden;
  background: rgba(255, 255, 255, .025);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.project:hover { border-color: rgba(110, 140, 255, .42); transform: translateY(-4px); }
.project__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0A0A14; }
.project__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) brightness(.8);
  transition: transform var(--slow) var(--ease-out), filter var(--slow) var(--ease-out);
}
.project:hover .project__media img { transform: scale(1.06); filter: saturate(1) brightness(.95); }
.project__badge {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 2;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt);
  padding: .32rem .6rem; border-radius: 7px;
  background: rgba(8, 8, 16, .8);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.project__body { display: grid; gap: .6rem; padding: clamp(1.15rem, 2.2vw, 1.5rem); align-content: start; }
.project__cat {
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--violet-hi);
}
.project h3 { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 700; letter-spacing: -.022em; }
.project p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--txt-3); }
.project__tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: .35rem 0 0; padding: 0; }
.project__tags li {
  font-family: var(--mono); font-size: var(--micro); color: var(--txt-3);
  padding: .26rem .5rem; border-radius: 6px;
  border: 1px solid var(--glass-line-2);
  background: rgba(255, 255, 255, .022);
}/* ── Marquee ────────────────────────────────────────────────── */

.marquee {
  position: relative; z-index: 2;
  overflow: hidden;
  padding-block: clamp(.95rem, 1.9vw, 1.3rem);
  border-block: 1px solid var(--glass-line-2);
  background: rgba(8, 8, 15, .5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}/* two identical spans, so -50% lands exactly on the seam */

.marquee__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee__track span {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.5rem); letter-spacing: -.022em;
  /* No opacity here: it dimmed --txt-3 (which the palette defines as AA
     safe at 5.35:1) down to 2.11:1 and failed the contrast check. */
  color: var(--txt-3);
  white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }/* ── Zertifikate ────────────────────────────────────────────── */

.certs {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.certs__legal {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--glass-line-2);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-3);
}
.certs__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(.8rem, 1.6vw, 1.1rem);
  list-style: none; margin: 0; padding: 0;
}
.cert {
  display: grid;
  gap: .85rem;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.cert:hover { border-color: rgba(168, 85, 247, .35); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.25); }
.cert__thumb {
  position: relative;
  display: block;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  background: var(--void);
}
.cert__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--slow) var(--ease-out), filter var(--fast) var(--ease);
}
.cert:hover .cert__thumb img { transform: scale(1.03); filter: saturate(1.1); }
.cert__overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(5,5,9,0) 40%, rgba(5,5,9,.82) 100%);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.cert:hover .cert__overlay { opacity: 1; }
.cert__overlay span {
  padding: .6rem 1.1rem;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt);
  background: rgba(168, 85, 247, .88);
  border-radius: 8px;
  transform: translateY(8px);
  transition: transform var(--fast) var(--ease-out), background var(--fast) var(--ease);
}
.cert:hover .cert__overlay span { transform: none; }
.cert__body { padding: 0 1.1rem 1.1rem; }
.cert__badge {
  display: inline-block;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--violet-hi);
  padding: .2rem .5rem; border-radius: 6px;
  background: rgba(168, 85, 247, .12);
  border: 1px solid rgba(168, 85, 247, .25);
  margin-bottom: .5rem;
}
.cert__badge.fibra { color: var(--cyan); background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .25); }
.cert__badge.outdoor { color: var(--warm); background: rgba(255, 184, 107, .12); border-color: rgba(255, 184, 107, .25); }
.cert__badge.basic { color: var(--txt-2); background: rgba(255,255,255,.06); border-color: var(--glass-line-2); }
.cert__badge.drone { color: var(--warm); background: rgba(255, 184, 107, .12); border-color: rgba(255, 184, 107, .25); }
.cert__badge.education { color: var(--violet-hi); background: rgba(168, 85, 247, .12); border-color: rgba(168, 85, 247, .25); }
.cert__badge.ict { color: var(--blue); background: rgba(110, 140, 255, .12); border-color: rgba(110, 140, 255, .25); }
.cert__body h3 {
  margin: 0 0 .25rem;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.022em; color: var(--txt);
}
.cert__subtitle {
  margin: 0;
  font-size: .875rem; line-height: 1.55; color: var(--txt-2);
}
.cert__desc {
  margin: .65rem 0 0;
  font-size: .875rem; line-height: 1.6; color: var(--txt-2);
}
.cert__tags {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .85rem 0 0; padding: 0; list-style: none;
}
.cert__tags li {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-3);
  padding: .22rem .5rem; border-radius: 6px;
  border: 1px solid var(--glass-line-2);
  background: rgba(255,255,255,.03);
}/* ── link rows after grids ────────────────────────────── */

.svc__more, .projects__more, .certs__more {
  display: flex; justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}/* ── legal (impressum / privacy) ─────────────────────── */

.legal {
  max-width: 62rem; margin-inline: auto;
  display: grid; gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
  font-size: .9375rem; line-height: 1.7; color: var(--txt-2);
}
.legal h2,
.legal h3 {
  margin: .5rem 0 0;
  font-family: var(--display); font-size: 1.125rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--txt);
}
.legal p { margin: .4rem 0 0; }
.legal ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.legal li { margin: .15rem 0; }
.legal a { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }/* ── timeline (about) ─────────────────────────────────── */

.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; }
.tl::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 1.5px; background: linear-gradient(180deg, var(--blue), var(--violet), var(--cyan));
  opacity: .4;
}
.tl__item { position: relative; padding-left: 2.5rem; }
.tl__date {
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .06em;
  color: var(--violet-hi); white-space: nowrap;
  transform: translateX(-100%); margin-left: -10px;
  display: none;
}
.tl__card {
  position: relative;
  padding: clamp(1rem, 2vw, 1.3rem);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.tl__card::before {
  content: ""; position: absolute; left: -1.82rem; top: 1.35rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--violet-hi);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, .2);
}
.tl__card:hover { border-color: rgba(168, 85, 247, .35); transform: translateX(4px); }
.tl__icon { font-size: 1.25rem; }
.tl__card h3 {
  margin: .35rem 0 .3rem;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--txt);
}
.tl__card p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--txt-2); }/* ── skill categories ─────────────────────────────────── */

/* ── bars (competency) ─────────────────────────────────── */

/* ── toolbox ────────────────────────────────────────────── */

/* ── education ──────────────────────────────────────────── */

/* ── areas (portfolio categories) ────────────────────── */

.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.area a {
  position: relative; display: grid; gap: .4rem;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border-radius: 18px; text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.area a:hover { border-color: rgba(110, 140, 255, .4); transform: translateY(-3px); }
.area span:first-child { font-size: 1.5rem; }
.area h3 {
  margin: 0;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--txt);
}
.area p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--txt-2); }
.area__more {
  margin-top: .5rem;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--violet-hi);
}/* ── video grid (gallery) ────────────────────────────── */

.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.vid { margin: 0; }
.vid video {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--glass-line);
  background: #0A0A14; display: block;
}
.vid figcaption {
  margin-top: .55rem;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-3);
}/* ── gallery grid ────────────────────────────────────── */

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.gal {
  position: relative; display: block; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--glass-line);
  text-decoration: none; aspect-ratio: 3 / 2;
}
.gal img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--slow) var(--ease-out);
}
.gal:hover img { transform: scale(1.04); }
.gal span {
  position: absolute; inset: auto 0 0 0;
  padding: 1.25rem 1rem .7rem;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt);
  background: linear-gradient(180deg, transparent, rgba(5,5,9,.85));
}/* ── live manager grid ───────────────────────────────── */

.lm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.lm {
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.lm:hover { border-color: rgba(34, 211, 238, .35); transform: translateY(-3px); }
.lm h3 {
  margin: 0 0 .35rem;
  font-family: var(--display); font-size: 1.125rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--txt);
}
.lm p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--txt-2); }
.lm__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; }
.lm__tags span {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-3);
  padding: .22rem .5rem; border-radius: 6px;
  border: 1px solid var(--glass-line-2);
  background: rgba(255,255,255,.03);
}
.lm-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.lm-fig { margin: 0; }
.lm-fig img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--glass-line); display: block;
}
.lm-fig figcaption {
  margin-top: .55rem;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-3);
}/* ── social grid ─────────────────────────────────────── */

.soc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.soc {
  display: grid; gap: .5rem; align-content: start;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.soc:hover { border-color: rgba(168, 85, 247, .35); transform: translateY(-3px); }
.soc__platform {
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--violet-hi);
}
.soc h3 {
  margin: 0;
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--txt);
}
.soc p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--txt-2); }/* ── contact grid ────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.contact-card {
  display: grid; gap: .5rem; align-content: start;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
}
.contact-card__label {
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--violet-hi);
}
.contact-card h3 {
  margin: 0;
  font-family: var(--display); font-size: 1.125rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--txt);
}
.contact-card p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--txt-2); }
.contact-card .btn { justify-self: start; }/* the card holds long unbreakable tokens (e-mail address) — they have to be
   allowed to wrap or the grid item's min-content pushes past the track */

.contact-card .btn { white-space: normal; }
.contact__fine {
  margin: 1.5rem 0 0; text-align: center;
  font-size: .8125rem; color: var(--txt-3);
}/* ── feature list center ─────────────────────────────── */

.feature-list--center { max-width: 46rem; margin: 1.75rem auto 0; text-align: left; }/* ── FAQ ────────────────────────────────────────────────────── */

.faq { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: start; }
.faq .section__head { margin-bottom: 0; }
.faq__list { display: grid; gap: .7rem; }
.faq__item {
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  transition: border-color var(--fast) var(--ease);
}
.faq__item[open] { border-color: rgba(168, 85, 247, .38); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.2rem) clamp(1.1rem, 2.2vw, 1.4rem);
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__q {
  font-family: var(--display);
  font-size: clamp(.98rem, 1.5vw, 1.075rem); font-weight: 600;
  letter-spacing: -.022em; color: var(--txt);
  transition: color var(--fast) var(--ease);
}
.faq__item summary:hover .faq__q { color: var(--violet-hi); }
.faq__chev {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--glass-line-2);
}
.faq__chev::before, .faq__chev::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px; border-radius: 2px;
  background: var(--txt-2);
  transform: translate(-50%, -50%);
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.faq__chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__chev::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item[open] .faq__chev::before { background: var(--violet-hi); }/* height is tweened from main.js; without JS <details> just opens */

.faq__body p {
  margin: 0;
  padding: 0 clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.3rem);
  font-size: .9375rem; line-height: 1.65; color: var(--txt-3);
}/* ── Kontakt ────────────────────────────────────────────────── */

/* .cta__fine keeps the actionable contact details one step brighter than the
   legal line below them. */

.cta__fine { margin-top: 1.6rem; font-family: var(--mono); font-size: var(--micro); letter-spacing: .1em; color: var(--txt-2); }/* was `color: var(--txt-3); opacity: .78` — the opacity doubled up on an
   already-tertiary tone and measured 3.53:1 over the photo. The quietness
   comes from the size, tracking and uppercase instead, which costs nothing
   in contrast. */

.cta__legal { margin: .6rem 0 0; font-family: var(--mono); font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }

/* ── footer ───────────────────────────────────────────────── */

.foot { position: relative; z-index: 2; border-top: 1px solid var(--glass-line-2); background: rgba(8, 8, 15, .55); }
.foot__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* The footer repeats the wordmark on purpose — but as a closing signature,
   not as a second copy of the header logo. */
.foot__brand .brand { gap: .75rem; }
.foot__brand .brand__mark { width: 30px; height: 30px; }
.foot__brand .brand__word {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--txt);
}

.foot__claim { margin-top: 1rem; font-family: var(--sans); font-size: .9375rem; font-weight: 400; line-height: 1.6; letter-spacing: -.01em; color: var(--txt-2); }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.foot__col h3 { font-family: var(--mono); font-size: var(--micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 1.05rem; }
.foot__col ul { display: grid; gap: .62rem; }
.foot__col a { font-size: .875rem; color: var(--txt-2); text-decoration: none; transition: color var(--fast) var(--ease); }
.foot__col a:hover { color: var(--txt); }

.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--glass-line-2);
}
.foot__bar p { margin: 0; font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; color: var(--txt-3); }
.foot__legal { display: flex; gap: 1.35rem; }
.foot__legal a { font-size: .8125rem; color: var(--txt-3); text-decoration: none; transition: color var(--fast) var(--ease); }
.foot__legal a:hover { color: var(--txt); }
.foot__cookies {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-3);
}
.foot__note {
  margin: 0; padding-top: 1.25rem;
  font-size: .8125rem; color: var(--txt-3);
}
.foot__note a { color: var(--txt-3); text-decoration: underline; text-underline-offset: 3px; }
.foot__note a:hover { color: var(--txt); }
.social { display: flex; gap: .4rem; margin-left: auto; }
/* the Swiss flag as an inline SVG - an emoji would depend on an emoji font
   being installed and broke into two letters where it was missing */
.flag {
  display: inline-block;
  vertical-align: -.1em;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.social a {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  color: var(--txt-3);
  border: 1px solid transparent;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.social a svg { width: 16px; height: 16px; }
.social a:hover { color: var(--txt); background: rgba(255, 255, 255, .05); border-color: var(--glass-line-2); }/* ── search overlay ───────────────────────────────────────── */

.search {
  position: fixed; inset: 0; z-index: 350;
  display: grid; place-items: start center;
  padding: 16vh var(--gut) var(--gut);
  background: rgba(5, 5, 9, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.search[hidden] { display: none; }
.search__panel {
  width: min(100%, 34rem); padding: 1.15rem; border-radius: 18px;
  max-height: min(70vh, 40rem); overflow-y: auto; overscroll-behavior: contain;
  position: relative;
  background: linear-gradient(168deg, var(--glass), var(--glass-2));
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .07) inset,
    0 24px 70px -30px rgba(0, 0, 0, .85);
}
.search__panel > * { position: relative; z-index: 1; }/* The markup is .search__head > .search__icon + input.search__field + button,
   so the rules have to target those elements directly. */

.search__head {
  display: flex; align-items: center; gap: .7rem;
  padding: .3rem .2rem .85rem;
  border-bottom: 1px solid var(--glass-line);
}
.search__icon { display: grid; place-items: center; flex: none; color: var(--txt-3); }
.search__icon svg { width: 18px; height: 18px; display: block; }
.search__field {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-family: var(--sans); font-size: 1.05rem; color: var(--txt);
  padding: 0;
}
.search__field::placeholder { color: var(--txt-3); }
.search__field::-webkit-search-cancel-button { filter: invert(.6); }
.search__results { display: grid; gap: .1rem; margin-top: .85rem; }
.search__results a {
  display: block; padding: .7rem .8rem;
  font-size: .9375rem; color: var(--txt-2); text-decoration: none;
  border-radius: 9px;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.search__results a:hover,
.search__results a:focus-visible { background: rgba(255, 255, 255, .06); color: var(--txt); }
.search__result-title { display: block; color: var(--txt); font-weight: 500; }
.search__result-meta {
  display: block; margin-top: .18rem;
  font-family: var(--mono); font-size: var(--micro); color: var(--txt-3); letter-spacing: .04em;
}
.search__group {
  margin: .7rem 0 .3rem; padding: 0 .8rem;
  font-family: var(--mono); font-size: var(--micro); text-transform: uppercase;
  letter-spacing: .12em; color: var(--txt-3);
}
.search__group:first-child { margin-top: 0; }
.search__empty {
  margin: 0; padding: .8rem;
  font-size: .9375rem; color: var(--txt-3);
}
.search__hint { margin: .9rem 0 0; font-family: var(--mono); font-size: var(--micro); color: var(--txt-3); letter-spacing: .06em; }
.search__hint kbd {
  font-family: var(--mono); font-size: var(--micro);
  padding: .12rem .35rem; border-radius: 4px;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .04);
}/* ── to top ───────────────────────────────────────────────── *//* Visibility, not just opacity: a 0-opacity button is still in the tab
   order, which would put keyboard users on an invisible target. */

.to-top {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 180;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(12, 12, 22, .78);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--txt-2);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--fast) var(--ease),
    transform var(--fast) var(--ease),
    color var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    visibility var(--fast);
}
.to-top svg { width: 16px; height: 16px; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--txt); border-color: rgba(110, 140, 255, .55); }/* ── reveal ───────────────────────────────────────────────── *//* Content must never depend on a scroll observer or JavaScript to become
   readable. Keep the former reveal targets visible and in normal flow. */

[data-rise],
[data-rise].is-in { opacity: 1; transform: none; transition: none; }/* ── responsive ───────────────────────────────────────────── *//* Nav: full 10-item link row only fits from 86rem up — below that the burger
   takes over (links are white-space:nowrap + flex:none, so without the
   compaction below the brand would ellipsize instead of the row wrapping). *//* Kompaktstufe: hält Marke + 10 Links + Aktionen bis zum Burger-Breakpoint
   in einer Zeile, damit „Michael Zettelmaier" immer voll lesbar bleibt. */

@media (max-width: 100rem) {
  .nav__inner { gap: .9rem; }
  .nav__links { gap: .65rem; }
  .nav__links a { font-size: .8125rem; }
  .brand__mark { width: 24px; height: 24px; }
  .brand__word { font-size: .9375rem; }}
@media (max-width: 86rem) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__actions { margin-left: auto; }
  .mobile-menu { display: block; }}

@media (max-width: 74rem) {
  /* the magazine head needs room for two columns */
  .section__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.15rem;
  }
  .section__head > .section__title,
  .section__head > .section__title:last-child,
  .section__head > .section__lede,
  .section__head > .section__prose,
  .section__head > .section__lede + .section__prose { grid-column: 1; }
  .section__head > .section__lede { margin-top: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); }
  .hero__grid--intro { grid-template-columns: minmax(0, 1fr); }
  .hero__fleet { min-height: 0; max-width: none; }
  

  
  .about { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); }
  .about__media { max-width: 24rem; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 2.4rem); }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certs { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq .section__head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }}

@media (max-width: 62rem) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}/* Search + Burger brauchen wenig Platz, der CTA-Button ist zusätzlich im
   Mobile-Menü. Darum wird der Header-Button früh ausgeblendet und die Marke
   leicht verkleinert, damit der Name auch auf schmalen Geräten komplett
   lesbar bleibt (kein Ellipsen-Abschnitt). */

@media (max-width: 40rem) {
  .nav__actions > .btn { display: none; }
  .nav__inner { padding-inline: 1rem; }
  .brand__mark { width: 22px; height: 22px; }
  .brand__word { font-size: .875rem; }}
@media (max-width: 22rem) {
  .brand__word { font-size: .8125rem; }}

@media (max-width: 52rem) {
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__media { max-width: 21rem; }}

@media (max-width: 40rem) {
  .section__head:not(.section__head--center) .section__title,
  .section__head:not(.section__head--center) .section__lede,
  .section__prose p:nth-child(even) { margin-left: 0; }
  .section__prose p:nth-child(even) { padding-left: .75rem; }
  .hero__fleet { grid-template-columns: minmax(0, 1fr); }
  .hero__fleet .glass--analytics,
  .hero__fleet .glass--ai,
  .hero__fleet .glass--checks { grid-column: 1; grid-row: auto; justify-self: stretch; width: auto; }
  
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .benefits { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 2.2rem); }
  .projects { grid-template-columns: minmax(0, 1fr); }
  .hero__proof { gap: .5rem .9rem; }
  .hero__cta .btn { width: 100%; }
  .cta__actions .btn { width: 100%; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
  .social { margin-left: 0; }}/* ── reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .hero__fleet .glass,
  .hero__scroll i, .pill--live i, .glass__caret { animation: none !important; }
  .ambient__glow--a, .ambient__glow--b, .hero__scene img,
  .hero__copy, .hero__line--grad, #top .hero__cta .btn--primary { animation: none !important; }
  .marquee__track { animation: none !important; }
  
  .to-top { transition: none; }}/* Zweisprachig (about): englisches Original als kompakte Nebenzeile
   unter dem deutschen Haupttext. --txt-3 = 5.35:1 auf --void (AA). */

/* ════════════════════════════════════════════════════════════
   Lohnvorstellung (lv-*) — persönliche, arbeitgeber-taugliche
   Lohnseite. Nutzt ausschliesslich die bestehenden Design-Tokens.
   ════════════════════════════════════════════════════════════ */

.section--certs { background: linear-gradient(180deg, transparent, rgba(12, 12, 22, .5) 45%, transparent); }
.section--cta   { background: linear-gradient(180deg, transparent, rgba(12, 12, 22, .42)); }/* ── Hero-Ankernummer ──────────────────────────────────────── */

/* ── Regionskarten ─────────────────────────────────────────── */

/* ── Grundlage (Qualifikationen) ───────────────────────────── */

/* ── Markt-Skala ───────────────────────────────────────────── */

/* ── Einflussfaktoren ──────────────────────────────────────── */

/* ── Ehrlich gesagt ────────────────────────────────────────── */

/* ── Responsiv ─────────────────────────────────────────────── */

@media (max-width: 74rem) {
  
  }
@media (max-width: 68rem) {
  
  
  
  
  
  }
@media (max-width: 46rem) {
  
  
  }

@media (prefers-reduced-motion: reduce) {
  }/* ── i18n Sprach-Umschalter ─────────────────────────────── */

.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; padding: .45rem .7rem;
  border: 1px solid var(--glass-line); border-radius: 100px;
  background: rgba(255, 255, 255, .03); color: var(--txt-2);
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.lang-toggle:hover { border-color: rgba(110, 140, 255, .55); color: var(--txt); background: rgba(110, 140, 255, .1); }
.lang-toggle:focus-visible { outline: none; border-color: rgba(110, 140, 255, .7); box-shadow: 0 0 0 3px rgba(110, 140, 255, .2); }
.lang-toggle[aria-pressed="true"] { border-color: rgba(34, 211, 238, .5); color: var(--cyan); }

/* ============ dropdown (Mehr) ============ */

.nav__dropdown { position: relative; display: inline-flex; align-items: center; }
.nav__dropdown-trigger {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .875rem; font-weight: 500; color: var(--txt-2);
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.nav__dropdown-trigger:hover,
.nav__dropdown.is-open .nav__dropdown-trigger { color: var(--txt); }
.nav__dropdown-arrow {
  width: 9px; height: 9px; display: inline-block;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--fast) var(--ease);
}
.nav__dropdown.is-open .nav__dropdown-arrow { transform: rotate(225deg) translateY(-2px); }

.nav__dropdown-menu {
  position: absolute; top: calc(100% + .8rem); right: 0;
  list-style: none; margin: 0; padding: .55rem;
  min-width: 11rem;
  background: rgba(8, 8, 15, .94);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .85), 0 1px 0 0 rgba(255, 255, 255, .06) inset;
  z-index: 60;
  display: grid; gap: .1rem;
  animation: navdd-in 180ms var(--ease-out) both;
}
.nav__dropdown-menu[hidden] { display: none !important; }
.nav__dropdown-menu a {
  display: block; padding: .65rem .9rem;
  font-size: .875rem; font-weight: 500; color: var(--txt-2);
  text-decoration: none; border-radius: 9px; white-space: nowrap;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__dropdown-menu a:hover, .nav__dropdown-menu a:focus-visible {
  background: rgba(110, 140, 255, .12); color: var(--txt);
}
.nav__dropdown-menu a[aria-current="page"] { color: var(--txt); font-weight: 600; }

@keyframes navdd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { @keyframes navdd-in { from, to { opacity: 1; transform: none; } }}

@media (max-width: 86rem) {
  .nav__dropdown { display: none; }}/* ============ dropdown (Mehr) ============ */

.nav__dropdown { position: relative; display: inline-flex; align-items: center; }
.nav__dropdown-trigger {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .875rem; font-weight: 500; color: var(--txt-2);
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.nav__dropdown-trigger:hover,
.nav__dropdown.is-open .nav__dropdown-trigger { color: var(--txt); }
.nav__dropdown-arrow {
  width: 9px; height: 9px; display: inline-block;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--fast) var(--ease);
}
.nav__dropdown.is-open .nav__dropdown-arrow { transform: rotate(225deg) translateY(-2px); }

.nav__dropdown-menu {
  position: absolute; top: calc(100% + .8rem); right: 0;
  list-style: none; margin: 0; padding: .55rem;
  min-width: 11rem;
  background: rgba(8, 8, 15, .94);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .85), 0 1px 0 0 rgba(255, 255, 255, .06) inset;
  z-index: 60;
  display: grid; gap: .1rem;
  animation: navdd-in 180ms var(--ease-out) both;
}
.nav__dropdown-menu[hidden] { display: none !important; }
.nav__dropdown-menu a {
  display: block; padding: .65rem .9rem;
  font-size: .875rem; font-weight: 500; color: var(--txt-2);
  text-decoration: none; border-radius: 9px; white-space: nowrap;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__dropdown-menu a:hover, .nav__dropdown-menu a:focus-visible {
  background: rgba(110, 140, 255, .12); color: var(--txt);
}
.nav__dropdown-menu a[aria-current="page"] { color: var(--txt); font-weight: 600; }

@keyframes navdd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { @keyframes navdd-in { from, to { opacity: 1; transform: none; } }}

@media (max-width: 86rem) {
  .nav__dropdown { display: none; }}

/* ── Per-section accent ────────────────────────────────────────
   Design pass: the dark stage reads as one long monochrome band when
   scrolled. Every section now owns one of the palette's own colours —
   carried by the eyebrow, the gutter hairline and a soft wash — so the
   scroll becomes a sequence of accents instead of a list of grey bands. */
.section { --acc: var(--violet); --acc-rgb: 168, 85, 247; }
#willkommen   { --acc: var(--violet-hi); --acc-rgb: 176, 123, 255; }
#warum        { --acc: var(--cyan);      --acc-rgb: 34, 211, 238; }
#leistungen  { --acc: var(--cyan);      --acc-rgb: 34, 211, 238; }
#ueber-mich  { --acc: var(--violet);    --acc-rgb: 168, 85, 247; }
#ablauf      { --acc: var(--blue);      --acc-rgb: 110, 140, 255; }
#referenzen  { --acc: var(--warm);      --acc-rgb: 255, 184, 107; }
#zertifikate { --acc: var(--violet);    --acc-rgb: 168, 85, 247; }
#faq         { --acc: var(--cyan);      --acc-rgb: 34, 211, 238; }
#kontakt    { --acc: var(--violet);    --acc-rgb: 176, 123, 255; }

/* the wash paints above the section background but below its content */
.section::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(var(--acc-rgb), .05) 45%, transparent);
  pointer-events: none;
}

/* violet eyebrows take on whatever the section owns */
.eyebrow--violet { color: var(--acc); }
.section .section__head > .eyebrow { color: var(--acc); }

/* the gutter hairline gets the section accent, softly */
.section__head > .section__title::after { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 55%, transparent) 0%, transparent 88%); }

/* step numbers and card hover borders follow the section too */
.step__num { color: var(--acc); }
.svc:hover, .benefit:hover, .step:hover, .cert:hover, .project:hover {
  border-color: color-mix(in srgb, var(--acc) 40%, transparent);
}
.faq__item[open] { border-color: color-mix(in srgb, var(--acc) 38%, transparent); }