/* ==========================================================================
   grenadebyte. — Software Solutions
   Production stylesheet · light-first Swiss hairline system

   1  Fonts
   2  Design tokens (light / dark)
   3  Base & utilities
   4  Layout: frame, sections, section heads
   5  Buttons & links
   6  Header, navigation, mobile menu
   7  Hero & logo lockup (+ intro start state)
   8  Leistungen (services)
   9  Warum grenadebyte (values)
   10 Vorgehen (process timeline)
   11 Technologien
   12 CTA band
   13 FAQ
   14 Kontakt & form
   15 Footer
   16 Subpages: legal texts, 404
   17 Scroll reveals
   18 Reduced motion, forced colors, print
   ========================================================================== */

/* 1 · Fonts (self-hosted, no external requests) --------------------------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/plus-jakarta-sans-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}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/plus-jakarta-sans-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}
/* Metric-matched stand-in while the web font loads: the device's Arial, scaled per weight class to the
   widths of this site's text in Plus Jakarta Sans (light 106 %, regular 105 %, bold 103 % with Arial Bold;
   ascent/descent = Plus Jakarta Sans' 1.038 / .222 ÷ size-adjust), so the swap barely moves the page.
   Nothing is downloaded (CSP-neutral); devices without Arial simply use the next font in --font-sans. */
@font-face{font-family:"Plus Jakarta Sans Fallback";font-weight:200 300;src:local("Arial"),local("ArialMT");size-adjust:106%;ascent-override:97.9%;descent-override:20.9%;line-gap-override:0%}
@font-face{font-family:"Plus Jakarta Sans Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT");size-adjust:105%;ascent-override:98.9%;descent-override:21.1%;line-gap-override:0%}
@font-face{font-family:"Plus Jakarta Sans Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:103%;ascent-override:100.8%;descent-override:21.6%;line-gap-override:0%}
/* JetBrains Mono is a subset (README §8): weights 400–500, ASCII + German letters and quotes.
   Characters outside it fall back to the next font in --font-mono. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A7,U+00B7,U+00C4,U+00D6,U+00DC,U+00DF,U+00E4,U+00F6,U+00FC,U+2013-2014,U+2018-2019,U+201A,U+201C-201E,U+2026}
/* Lexend is the logo face only (README §8): a 9 KB subset, weights 300–700, a–z A–Z . -
   "block": the logo is never drawn in a stand-in font (the file is preloaded on every page). */
@font-face{font-family:"Lexend";font-style:normal;font-weight:300 700;font-display:block;
  src:url("../fonts/lexend-logo.woff2") format("woff2")}
/* Orbitron: the display face of the neon design – headings, buttons, card titles (README §8).
   The original font file, only re-packed as WOFF2 (its Reserved Font Name allows no changes). */
@font-face{font-family:"Orbitron";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("../fonts/orbitron.woff2") format("woff2")}

/* 2 · Design tokens ------------------------------------------------------- */
/* Colours: change them here only. One dark neon palette – the site has no light theme.
   Neon trio: the brand green leads, cyan and violet accompany it. */
:root {
  color-scheme: dark;

  /* Surfaces & lines */
  --bg: #05070D;
  --bg-soft: #0A0F1C;
  --bg-muted: #111827;
  --bg-tint: rgba(8, 13, 26, .6);     /* the one tinted band (Warum grenadebyte) */
  --cell-hover: rgba(34, 211, 238, .05);
  --panel: rgba(12, 19, 36, .72);     /* form panel */
  --line: rgba(148, 163, 184, .13);
  --line-soft: rgba(148, 163, 184, .08);
  --line-strong: rgba(148, 163, 184, .26);
  --field-border: #5B6B82;            /* ≥ 3:1 against every surface it sits on */
  --raise: inset 0 1px 0 rgba(255, 255, 255, .04);

  /* Text */
  --ink: #E8EEF7;
  --ink-2: #CBD5E1;
  --muted: #94A3B8;
  --subtle: #7C8BA1;                  /* ≥ 5:1 on all surfaces */

  /* Brand + neon */
  --accent: #22C55E;                  /* the dot */
  --accent-text: #4ADE80;
  --accent-wash: rgba(34, 197, 94, .1);
  --success-text: #4ADE80;
  --focus: #22D3EE;
  --danger: #F87171;
  --neon-green: #22C55E;
  --neon-cyan: #22D3EE;
  --neon-violet: #8B5CF6;
  --violet-text: #A78BFA;             /* violet on dark text (7:1) */
  --neon-grad: linear-gradient(110deg, #22C55E 0%, #22D3EE 50%, #8B5CF6 100%);
  --glass: rgba(12, 19, 36, .62);
  --glass-border: rgba(34, 211, 238, .14);

  /* Logo */
  --logo-ink: #F8FAFC;
  --logo-dot: #22C55E;
  --logo-tag: #94A3B8;
  --logo-rule: rgba(34, 211, 238, .45);

  /* Components */
  --btn-bg: #E8EEF7;
  --btn-ink: #04070D;                 /* dark text on the neon gradient (≥ 4.7:1 on every stop) */
  --btn-bg-hover: #FFFFFF;
  --btn-dot: #04070D;
  --header-bg: rgba(5, 7, 13, .72);
  --canvas: rgba(8, 13, 26, .7);
  --canvas-grid: rgba(34, 211, 238, .07);
  --input-bg: rgba(5, 8, 16, .8);
  --bracket: #22D3EE;                 /* hover corner marks */
  --mark-ink-top: rgba(232, 238, 247, .08);   /* faint sign-off wordmark in the footer */
  --mark-ink-bottom: rgba(232, 238, 247, .015);
  --mark-dot: rgba(34, 197, 94, .45);
  --placeholder-bg: rgba(251, 191, 36, .14);
  --placeholder-ink: #FCD34D;

  /* CTA band */
  --band-bg: #0A1020;
  --band-bg-2: #070B16;
  --band-edge: rgba(34, 211, 238, .16);
  --band-glow: rgba(34, 197, 94, .24);
  --band-line: rgba(34, 211, 238, .07);

  /* Illustrations */
  --i-paper: #0E1628;
  --i-edge: #7DD3FC;
  --i-line: #1E2A3F;
  --i-fill: #121C31;
  --i-fill-2: #1E2A40;
  --i-ink: #CBD5E1;
  --i-accent: #22C55E;
  --i-shadow: rgba(0, 0, 0, .45);
  --i-sel: rgba(34, 197, 94, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);

  /* Type */
  --font-display: "Orbitron", var(--font-sans);
  --font-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-logo: "Lexend", var(--font-sans);
  --fs-mono: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1rem;
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-h3: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.3vw, 3.25rem);
  --fs-h1: clamp(2.125rem, 1.35rem + 2.75vw, 3.625rem);
  --ws-display: .08em;                /* Plus Jakarta's space is narrow: opened up in the hero headline only.
                                         Never combine with text-wrap: balance – Safari then breaks lines that fit. */

  /* Space & layout */
  --pad-x: clamp(1rem, .4rem + 3vw, 3rem);
  --section-y: clamp(4.5rem, 3rem + 5vw, 8rem);
  --gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  --frame-max: 80rem;
  --header-h: 4rem;
  --tap: max(44px, min(2.75rem, 13vw)); /* touch target that never pushes the header off a 320 px screen */

  /* Shape */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-out-2: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Hero logo size: never wider than the phone (wordmark box ≈ 6.01em) */
  --logo-fs: min(13.5vw, 8rem, 17.5vh);
  --cue-h: 3rem;
}
@media (min-width: 64em) {
  :root { --header-h: 4.5rem; }
}
@media (min-width: 100em) and (min-height: 62em) {
  :root { --logo-fs: min(13.5vw, 9.25rem, 17.5vh); }   /* large, tall screens: the logo grows with the hero */
}

/* 3 · Base & utilities --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--bg);
}
body {
  margin: 0;
  min-width: 320px;
  background: transparent;              /* html carries --bg, so the neon backdrop (§16b) shows through */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
/* Touch: no grey tap flash – controls give their own feedback (:active, states).
   Hover effects throughout are limited to @media (hover: hover), so they never stick after a tap. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
::selection { background: rgba(34, 211, 238, .3); color: #FFFFFF; }

html.no-transitions *, html.no-transitions *::before, html.no-transitions *::after { transition: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* programmatic focus targets (sections, main, status) need no ring */
[tabindex="-1"]:focus { outline: none; }

.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 100;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }
.scroll-sentinel {                       /* JS: header "scrolled" state */
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 6px;
  pointer-events: none;
}

/* Brand typographic devices: light/bold pairs and the green "period" */
.t-light { font-weight: 300; }
.t-bold { font-weight: 800; }
.t-dot {
  display: inline-block;
  width: .214em;
  height: .214em;
  margin-left: .06em;
  border-radius: .052em;
  background: var(--accent);
  color: transparent;
  overflow: hidden;            /* baseline = bottom edge → the square sits on the baseline */
  vertical-align: baseline;
}
.pd { margin-left: -.06em; }            /* optical kerning: a heavy period sits closer */
.nowrap { white-space: nowrap; }        /* keeps a word with its green period, or a short compound, on one line */

.text-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color .2s;
}
@media (hover: hover) {
  .text-link:hover { text-decoration-color: currentColor; }
}

/* Unfilled data before go-live: visible, but calm */
.placeholder {
  padding: 0 .3em;
  border-radius: 4px;
  background: var(--placeholder-bg);
  color: var(--placeholder-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Phones: long running text may hyphenate, but only words of 10+ letters and never
   into fragments under 4 letters (Chromium/Firefox: hyphenate-limit-chars; Safari: the -webkit- limits).
   Short UI text and the hero lead are not hyphenated at all. */
@media (max-width: 39.99em) {
  p, li, dd {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    overflow-wrap: break-word;
  }
  .ticks li, .chips li, .footer-col li, .next-steps li, .hero-lead { -webkit-hyphens: manual; hyphens: manual; }
}

/* 4 · Layout ------------------------------------------------------------- */
.frame {
  position: relative;
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
}
@media (min-width: 48em) {
  .frame {
    width: min(100% - 3rem, var(--frame-max));
    border-inline: 1px solid var(--line);
  }
}
.section { border-top: 1px solid var(--line); }
.section--tint { background: var(--bg-tint); }
/* Anchor jumps: the target's top rule lands exactly on the header rule (one hairline,
   no sliver of the previous section). html keeps its scroll-padding for focus rings. */
.section[id]:not(#top), .service[id], .contact-form-wrap { scroll-margin-top: calc(-1rem - 1px); }

/* Registration marks where the section rules cross the frame */
@media (min-width: 64em) {
  .section > .frame::before,
  .section > .frame::after,
  .site-footer > .frame::before,
  .site-footer > .frame::after {
    content: "";
    position: absolute;
    top: -6px;
    z-index: 2;
    width: 11px;
    height: 11px;
    pointer-events: none;
    background:
      linear-gradient(var(--field-border), var(--field-border)) center / 1px 100% no-repeat,
      linear-gradient(var(--field-border), var(--field-border)) center / 100% 1px no-repeat;
    opacity: .55;
  }
  .section > .frame::before, .site-footer > .frame::before { left: -6px; }
  .section > .frame::after, .site-footer > .frame::after { right: -6px; }
}

.section-head {
  display: grid;
  gap: 1.25rem;
  padding: var(--section-y) var(--pad-x) clamp(2.75rem, 1.75rem + 3vw, 4.5rem);
}
@media (min-width: 56.25em) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: first baseline;
  }
  .section-head > .eyebrow { grid-column: 1 / span 3; }
  .section-head > .head-main { grid-column: 4 / -1; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--muted);
}
.eyebrow-num { color: var(--accent-text); font-weight: 500; }
.eyebrow-num::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-left: .75rem;
  vertical-align: middle;
  background: var(--line-strong);
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.032em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 .t-light { font-weight: 300; letter-spacing: -.03em; }
.h2 .t-bold { font-weight: 780; }
.h2 > span { display: block; }
.section-intro {
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* 5 · Buttons & links ---------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--sm { height: 2.75rem; padding: 0 1rem; font-size: .875rem; }
.btn--lg { height: 3.25rem; padding: 0 1.375rem; font-size: 1rem; border-radius: var(--r-lg); }
.btn--block { width: 100%; }

.btn--primary { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--shadow-sm); }
.btn--ghost { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }

.btn-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--btn-dot);
  transition: transform .35s var(--ease-out);
}
.btn .icon { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--btn-bg-hover); }
  .btn--ghost:hover { border-color: var(--field-border); background: var(--bg-soft); }
  .btn:hover .btn-dot { transform: translateX(2px) scale(1.15); }
  .btn:hover .icon-down { transform: translateY(2px); }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s;
}
.link-arrow .icon { transition: transform .3s var(--ease-out); }
@media (hover: hover) {
  .link-arrow:hover { text-decoration-color: currentColor; }
  .link-arrow:hover .icon { transform: translateX(3px); }
  .link-arrow--back:hover .icon { transform: translateX(-3px); }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  color: var(--ink-2);
  transition: background-color .2s, color .2s;
}
.icon-btn:active { background: var(--bg-muted); color: var(--ink); }   /* touch feedback while pressed */
@media (hover: hover) {
  .icon-btn:hover { background: var(--bg-muted); color: var(--ink); }
}

/* 6 · Header, navigation, mobile menu ------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.site-header.is-scrolled {
  background: var(--header-bg);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}
/* Over the dark CTA band a frosted header would turn into a grey haze → solid */
.site-header.is-scrolled.on-band,
.site-header.menu-open {
  background: var(--bg);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: var(--bg); }
}
.header-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding-inline: var(--pad-x);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 2.75rem;
  margin-left: -.25rem;
  padding: 0 .25rem;
  border-radius: var(--r-sm);
  color: var(--logo-ink);
}
.brand-mark {
  font-family: var(--font-logo);
  font-size: min(1.375rem, 5.8vw);
  line-height: 1;
  white-space: nowrap;
}
.bm-light { font-weight: 300; letter-spacing: -.0415em; }
.bm-bold { font-weight: 700; letter-spacing: -.0415em; }
.bm-light, .bm-bold { display: inline-block; }
.bm-dot {
  display: inline-block;
  width: .245em;
  height: .245em;
  margin-left: .061em;
  border-radius: .061em;
  background: var(--logo-dot);
}
@media (hover: hover) {
  .brand:hover .bm-dot { animation: cb-blink .9s steps(1, end) 1; }   /* blinks once, like a cursor */
}
@keyframes cb-blink { 0%, 80%, 100% { opacity: 1; } 40% { opacity: 0; } }

/* Desktop hand-off: the small logo steps aside while the big hero lockup is on
   screen and is "built" again (letters, then the dot) when the lockup leaves. */
@media (min-width: 64em) {
  html.js .site-header[data-handoff] .brand { transition: visibility 0s; }
  html.js .site-header[data-handoff] .brand-mark > span {
    transition: opacity .4s var(--ease-out), transform .55s var(--ease-out);
  }
  html.js .site-header[data-handoff]:not(.show-brand) .brand {
    visibility: hidden;
    transition: visibility 0s linear .35s;
  }
  html.js .site-header[data-handoff]:not(.show-brand) .brand-mark > span {
    opacity: 0;
    transform: translateX(-.35em);
    transition-duration: .25s;
  }
  html.js .site-header[data-handoff]:not(.show-brand) .bm-dot { transform: translateY(-.45em) scale(.5); }
  html.js .site-header[data-handoff].show-brand .bm-bold { transition-delay: .06s; }
  html.js .site-header[data-handoff].show-brand .bm-dot {
    transition: opacity .2s linear .22s, transform .5s cubic-bezier(.34, 1.45, .64, 1) .22s;
  }
}
/* Logo flight (main.js §2, home page, not with reduced motion): the big logo flies into
   the header and lands on the small one, which only then appears – no build-up of its own.
   In flight the wordmark rises above the header (the hero has no stacking context of its
   own); with the mobile menu open it stays below. */
html.logo-fly .site-header .brand { visibility: hidden; opacity: 1 !important; transition: none !important; }
html.logo-fly.logo-landed .site-header .brand { visibility: visible; }
html.logo-fly .site-header .brand-mark > span,
html.logo-fly .site-header .bm-dot { opacity: 1 !important; transform: none !important; transition: none !important; }
html.logo-fly.logo-flying .wordmark { position: relative; z-index: 60; pointer-events: none; will-change: transform; transform-origin: 0 0; }
html.logo-fly .wordmark { transform-origin: 0 0; }
html.logo-fly.logo-landed .wordmark { visibility: hidden; }
html.menu-open .wordmark { z-index: auto; }
/* Phones/tablets keep the logo in the header; on the home page it fades in
   once the hero logo has been built (pre-intro state hidden here, JS fades it in;
   html.intro-skip = theme-init.js gave up waiting for main.js: the logo fades in). */
@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  html.js:not(.intro-skip):has(.hero:not(.is-intro)) .site-header[data-handoff] .brand { opacity: 0; }
  html.intro-skip .site-header[data-handoff] .brand { transition: opacity .5s var(--ease-out-2); }
}

.site-nav { display: none; }
.nav-list { display: flex; gap: .125rem; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding: 0 .875rem;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s;
}
.nav-link.is-active { color: var(--ink); }
@media (hover: hover) {
  .nav-link:hover { color: var(--ink); }
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .375rem;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
}
.nav-link.is-active::after { opacity: 1; transform: none; }

.header-actions { display: flex; align-items: center; gap: .375rem; margin-left: auto; }
.header-cta { display: none; margin-left: .375rem; }

/* Language switch (right of the button; on phones left of the menu button): DE | EN,
   the current language is lit. The other language opens at the same place (main.js §3). */
.lang-switch { flex: none; }
.lang-list {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lang-link {
  display: inline-grid;
  place-items: center;
  min-width: 2.375rem;
  height: 2.125rem;
  padding: 0 .5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .2s, background-color .2s, text-shadow .2s;
}
.lang-link[aria-current] { color: var(--ink); background: rgba(34, 211, 238, .14); text-shadow: 0 0 14px rgba(34, 211, 238, .55); }
a.lang-link:active { color: var(--ink); }
@media (hover: hover) {
  a.lang-link:hover { color: var(--ink); text-shadow: 0 0 14px rgba(34, 211, 238, .55); }
}

.menu-toggle { color: var(--ink); }
.burger { position: relative; display: block; width: 18px; height: 10px; }
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}
.burger span:first-child { top: 0; }
.burger span:last-child { top: calc(100% - 1.5px); }
.menu-toggle[aria-expanded="true"] .burger span:first-child { top: calc(50% - .75px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger span:last-child { top: calc(50% - .75px); transform: rotate(-45deg); }

@media (min-width: 40em) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 64em) {
  /* The links sit in the middle; when the logo or the buttons on the right need more room
     (1024–1280 px), the links move aside instead of running into them. */
  .header-bar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .brand { justify-self: start; }
  .site-nav { display: block; }
  .header-actions { justify-self: end; margin-left: 0; }
  .menu-toggle { display: none; }
}
/* 1024–1199 px (iPad landscape, laptops at 125 %): a tighter nav keeps the centred
   links clear of the actions on the right */
@media (min-width: 64em) and (max-width: 74.99em) {
  .nav-link { padding-inline: .5rem; }
}

/* Without JS: an always-solid header; below 64em the burger gives way to the nav links,
   wrapped onto extra rows under the logo. That header is up to ~170 px tall, so there it
   scrolls away with the page instead of sticking: anchor targets and the form result
   (#kontakt-gesendet …) would otherwise land underneath it. */
html:not(.js) .site-header { background: var(--bg); border-bottom-color: var(--line); }
html:not(.js) .menu-toggle { display: none; }
@media (max-width: 63.99em) {
  html:not(.js) { scroll-padding-top: 1rem; }
  html:not(.js) .site-header { position: relative; height: auto; }
  html:not(.js) .header-bar { flex-wrap: wrap; padding-block: .5rem; }
  html:not(.js) .site-nav { display: block; order: 3; width: 100%; }
  html:not(.js) .nav-list { flex-wrap: wrap; margin-inline: -.625rem; }
  html:not(.js) .nav-link { padding: 0 .625rem; }
}

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 49;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.25rem var(--pad-x) 2rem;
}
.mm-list { border-top: 1px solid var(--line); }
.mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--ink);
}
.mm-link::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background-color .2s, transform .3s var(--ease-out);
}
.mm-link.is-active::after { background: var(--accent); transform: scale(1.2); }
@media (hover: hover) {
  .mm-link:hover::after { background: var(--accent); transform: scale(1.2); }
}
.mm-foot { margin-top: auto; padding-top: 2.5rem; }
.mm-claim {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--subtle);
  text-align: center;
}
html.menu-open { overflow: hidden; }
/* Classic scrollbars (Windows, narrow windows or zoomed in): the page keeps its
   width while the open menu locks scrolling – the header does not jump sideways */
@media (max-width: 63.99em) {
  html { scrollbar-gutter: stable; }
}
@media (min-width: 64em) {
  .mobile-menu { display: none; }
}

/* 7 · Hero & logo lockup -------------------------------------------------- */
/* header + hero = the first screen, up to very tall monitors (the content is centred) */
.hero-frame {
  display: flex;
  flex-direction: column;
  min-height: clamp(34rem, 100vh - var(--header-h), 90rem);
}
@supports (height: 100svh) {
  .hero-frame { min-height: clamp(34rem, 100svh - var(--header-h), 90rem); }
}
.hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* the bottom padding always leaves room for the scroll cue above the strip */
  padding: clamp(1.5rem, 4vh, 4.5rem) var(--pad-x) calc(var(--cue-h) + clamp(1.25rem, 3vh, 2.25rem));
  text-align: center;
}
@media (min-width: 48em) {
  .hero-inner { padding-top: clamp(2.5rem, 1rem + 5vh, 4.5rem); }
}

/* Lockup geometry — relative to the logo font-size F (pixel-matched to the reference) */
.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-logo);
  font-size: var(--logo-fs);
  line-height: 1;
  color: var(--logo-ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.wordmark { display: block; white-space: nowrap; font-kerning: normal; isolation: isolate; }   /* the ring paints behind the letters */
.wm-light { font-weight: 300; letter-spacing: -.0415em; }
.wm-bold { font-weight: 700; letter-spacing: -.0415em; }
.wordmark .ch { display: inline-block; }
/* single letters lose the font's kerning pairs: r→e, b→y and t→e are restored by hand */
.ch--re { margin-left: -.022em; }
.ch--y { margin-left: -.02em; }
.ch--e { margin-left: -.005em; }
/* fixed letter boxes = final advance at weight 700, so the weight build-up never reflows */
.wm-bold .ch { text-align: center; }
.ch--b { width: .6165em; }
.ch--y { width: .5785em; }
.ch--t { width: .3565em; }
.ch--e { width: .5445em; }
.wm-dot {
  display: inline-block;
  width: .245em;
  height: .245em;
  margin-left: .061em;
  border-radius: .061em;
  background: var(--logo-dot);
  transform-origin: 50% 100%;
}
/* The "click" ring of the landing dot, in the logo's own shape: laid exactly over the
   dot (a sibling, so the dot's own transform never lifts it above the letters) and
   painted behind all letters. Its stroke stays a hairline while it grows. */
.wm-ring {
  position: relative;
  z-index: -1;
  display: inline-block;
  width: .245em;
  height: .245em;
  margin-left: -.245em;
  overflow: visible;
  pointer-events: none;
}
.wm-ring rect {
  fill: none;
  stroke: var(--logo-dot);
  stroke-width: max(1px, .011em);
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.lockup-rule {
  display: block;
  width: 1.223em;
  height: max(1px, .0203em);
  margin-top: .2284em;                  /* top edge .3534em below the baseline (the line box ends .125em below it) */
  background: var(--logo-rule);
}
.lockup-tag {
  display: block;
  margin-top: 1.43em;                   /* caps start .276em (of F) below the rule */
  margin-right: -.3417em;               /* cancels the trailing letter-spacing for true centring */
  font-size: .1752em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .3417em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--logo-tag);
}
.lockup-tag .tag-ch { display: inline-block; }

/* Intro start state: only with JS and motion allowed; JS adds .is-intro in the
   same task in which it creates the whole choreography (WAAPI, all at t = 0).
   Headline and lead are never hidden (largest text on screen = LCP): they wait
   12 px low – the first keyframe in main.js – and settle. html.intro-skip:
   theme-init.js gave up waiting for main.js, so everything eases into its final
   state (short transitions; the start rules no longer match). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.intro-skip) .hero:not(.is-intro) .wordmark .ch,
  html.js:not(.intro-skip) .hero:not(.is-intro) .wm-dot,
  html.js:not(.intro-skip) .hero:not(.is-intro) .lockup-rule,
  html.js:not(.intro-skip) .hero:not(.is-intro) .lockup-tag,
  html.js:not(.intro-skip) .hero:not(.is-intro) .hero-title .t-dot,
  html.js:not(.intro-skip) .hero:not(.is-intro) [data-intro-step="fade"] { opacity: 0; }
  html.js:not(.intro-skip) .hero:not(.is-intro) [data-intro-step="settle"] { transform: translateY(12px); }
  html.intro-skip [data-intro-step="settle"] { transition: transform .6s var(--ease-out-2); }
  /* … and what was hidden fades in, instead of appearing in one frame */
  html.intro-skip .wordmark .ch, html.intro-skip .wm-dot, html.intro-skip .lockup-rule, html.intro-skip .lockup-tag,
  html.intro-skip .hero-title .t-dot, html.intro-skip [data-intro-step="fade"] { transition: opacity .5s var(--ease-out-2); }
}
/* A click on the big logo builds it again (main.js) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.js:not(.intro-skip) .lockup { cursor: pointer; }
}

.hero-title {
  margin-top: clamp(1.75rem, 5vh, 3rem);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  word-spacing: var(--ws-display);
  color: var(--ink);
}
@media (min-width: 48em) {
  .hero-title { margin-top: clamp(2.25rem, 1rem + 4.5vh, 4rem); }
}
.hero-title .t-light { font-weight: 250; letter-spacing: -.03em; }
.hero-title .t-dot { transform-origin: 50% 100%; }   /* the period's echo of the logo dot grows from the baseline */
@media (max-width: 47.99em) {
  .hero-title > span { display: block; }
}
.hero-lead {
  max-width: 37rem;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2.25rem;
}
@media (max-width: 39.99em) {
  .hero-ctas { flex-direction: column; width: 100%; max-width: 22rem; }
  .hero-ctas .btn { width: 100%; }
}
/* Laptops (≤ 896 px tall): tighter rhythm, so the service strip stays on the first screen */
@media (min-width: 48em) and (max-height: 56em) {
  :root { --cue-h: 2.5rem; }
  .hero-inner { padding-top: clamp(1.25rem, 5vh - 1rem, 3rem); padding-bottom: calc(var(--cue-h) + 1rem); }
  .hero-title { margin-top: max(1.25rem, var(--logo-fs) * .26); }   /* stays in proportion to the lockup */
  .hero-lead { margin-top: 1rem; }
  .hero-ctas { margin-top: 1.75rem; }
}

.hero-foot { position: relative; border-top: 1px solid var(--line); }
.hero-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-strip li:nth-child(even) { border-left: 1px solid var(--line); }
.hero-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
.hs-cell {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 100%;
  min-height: 3.5rem;
  padding: .5rem var(--pad-x);
  line-height: 1.25;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .2s;
}
.hs-text { display: inline-flex; align-items: baseline; gap: .625rem; min-width: 0; }
.hs-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--subtle);
  transition: color .2s;
}
.hs-arrow {
  display: none;
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
}
.hs-cell:focus-visible .hs-arrow { opacity: 1; transform: none; }
.hs-cell:focus-visible { outline-offset: -2px; }
.hs-cell:active { color: var(--ink); }                 /* touch feedback while pressed */
.hs-cell:active .hs-num { color: var(--accent-text); }
@media (hover: hover) {
  .hs-cell:hover { color: var(--ink); }
  .hs-cell:hover .hs-num { color: var(--accent-text); }
  .hs-cell:hover .hs-arrow { opacity: 1; transform: none; }
}
@media (min-width: 48em) {
  .hero-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-strip li + li { border-left: 1px solid var(--line); }
  .hero-strip li:nth-child(n+3) { border-top: 0; }
  .hs-cell { min-height: 4rem; padding: .5rem 1.25rem; white-space: nowrap; }
}
@media (min-width: 64em) {
  .hs-cell { padding-inline: var(--pad-x); }
  .hs-arrow { display: block; }
}

/* Scroll cue: a plumb line on the centre axis; the green square runs down it and
   comes to rest on the strip's rule (finite: two runs, then it rests).
   The link stays ≥ 44 px tall to tap, even where the line itself is shorter. */
.scroll-cue {
  position: absolute;
  bottom: 100%;
  left: calc(50% - 1.375rem);
  display: block;
  width: 2.75rem;
  height: max(2.75rem, var(--cue-h));
}
.scroll-cue-track {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: var(--cue-h);
  background: var(--line-strong);
  transition: background-color .2s;
}
.scroll-cue-dot {
  position: absolute;
  left: calc(50% - 2px);
  bottom: 1px;
  width: 5px;
  height: 5px;
  border-radius: 1.25px;
  background: var(--accent);
}
@media (hover: hover) {
  .scroll-cue:hover .scroll-cue-track { background: var(--field-border); }
}
.scroll-cue:focus-visible { outline-offset: 2px; border-radius: var(--r-sm); }

/* 8 · Leistungen ----------------------------------------------------------- */
.services {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.service-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(13.5rem, 11rem + 5vw, 16rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  box-shadow: var(--raise);
  isolation: isolate;
}
.service-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--canvas-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.illu {
  width: 320px;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.illu * { fill: none; stroke-width: 1px; }
.illu .i-paper { fill: var(--i-paper); }
.illu .i-edge { stroke: var(--i-edge); }
.illu .i-line { stroke: var(--i-line); }
.illu .i-fill { fill: var(--i-fill); }
.illu .i-fill-2 { fill: var(--i-fill-2); }
.illu .i-ink { fill: var(--i-ink); }
.illu .i-accent { fill: var(--i-accent); }
.illu .i-shadow { fill: var(--i-shadow); }
.illu .i-sel { fill: var(--i-sel); }
.illu .i-track { fill: none; stroke: var(--i-fill-2); stroke-width: 3px; }
.illu .i-arc { fill: none; stroke: var(--i-accent); stroke-width: 3px; stroke-linecap: round; }
.illu .i-check { fill: none; stroke: var(--i-accent); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.illu .i-accent-stroke { fill: none; stroke: var(--i-accent); stroke-width: 2px; stroke-linecap: round; }
.illu .i-dash { stroke-dasharray: 3 4; }
/* hover: the "satellite" elements lift, the cursor moves, the progress completes */
.illu .i-cursor, .illu .i-float { transition: transform .6s var(--ease-out); }
.illu .i-float--slow { transition-duration: .9s; }
.illu .i-progress {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(.62);
  transition: transform 1.4s var(--ease-out);
}
@media (hover: hover) {
  .service:hover .illu .i-cursor { transform: translate(4px, 3px); }
  .service:hover .illu .i-float { transform: translateY(-4px); }
  .service:hover .illu .i-float--down { transform: translateY(3px); }
  .service:hover .illu .i-progress { transform: scaleX(1); }
}

.service-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem) var(--pad-x) clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.service-index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--subtle);
}
.service-title {
  margin-top: .875rem;
  font-size: var(--fs-h3);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.service-sub {
  margin-top: .375rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
.service-text {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.ticks {
  display: grid;
  align-content: start;
  gap: .625rem;
  margin: 1.5rem 0 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.ticks li { position: relative; padding-left: 1.375rem; }
.ticks li::before {                    /* the brand's rounded square as bullet */
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--accent);
}
.service-body .link-arrow { align-self: flex-start; margin-top: auto; }

/* Desktop: the four cards share their rows (subgrid), so dividers, lists and
   links line up across each pair of cards. */
@media (min-width: 48em) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48em) {
    .services { row-gap: 0; }
    .service:nth-child(n+3) { border-top: 1px solid var(--line); }
    .service {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .service-body {
      display: grid;
      grid-row: 2 / span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .service-body .link-arrow { justify-self: start; align-self: end; margin-top: 0; }
  }
}

/* Viewfinder corners: hover feedback for service and value cells (ink),
   green while something inside has keyboard focus. */
.service::before,
.value::before {
  --c: var(--bracket);
  content: "";
  position: absolute;
  inset: .875rem;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 12px no-repeat;
  opacity: 0;
  transition: opacity .25s var(--ease-out), inset .45s var(--ease-out);
}
@media (hover: hover) {
  .service:hover::before,
  .value:hover::before { opacity: 1; inset: .5rem; }
}
.service:focus-within::before,
.value:focus-within::before { --c: var(--accent); opacity: 1; inset: .5rem; }

/* 9 · Warum grenadebyte ------------------------------------------------------ */
.values {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
@media (min-width: 40em) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value {
  position: relative;
  background: var(--bg-tint);
  transition: background-color .35s var(--ease-out);
}
@media (hover: hover) {
  .value:hover { background: var(--cell-hover); }
}
.value-inner { height: 100%; padding: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem) var(--pad-x) clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.value-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--cell-hover);
  box-shadow: var(--raise);
  color: var(--ink);
}
/* glyphs ≈ 16–18 px in the 44 px tile; 1.27 keeps the 1.375 px line of the former 22 px size */
.value-icon .icon { width: 26px; height: 26px; stroke-width: 1.27; }
.value-title {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.value-text {
  max-width: 30rem;
  margin-top: .5rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* 10 · Vorgehen -------------------------------------------------------------- */
.process {
  display: grid;
  gap: 0;
  padding: 0 var(--pad-x) var(--section-y);
  --num-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem);
}
/* mobile-first: vertical timeline */
.step {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-bottom: 2.25rem;
}
.step:last-child { padding-bottom: 0; }
.step-num, .step-title, .step-text { grid-column: 2; }
.step-rail {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--num-size) * .42);
  margin-bottom: -2.25rem;
}
.step:last-child .step-rail { margin-bottom: 0; }
.step-num {
  font-size: var(--num-size);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.step-node {
  flex: none;
  width: 11px;
  height: 11px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .45s var(--ease-out);
  transition-delay: calc(var(--i) * .3s);
}
.step--last .step-node { background: var(--accent); border-color: var(--accent); }
.step-line {
  position: relative;
  flex: 1;
  width: 1px;
  margin-top: 6px;
  background: var(--line);
}
.step-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 50% 0;
  transition: transform .3s var(--ease-io);
  transition-delay: calc(var(--i) * .3s + .05s);
}
.step--last .step-line { display: none; }
.step-title {
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.step-text {
  max-width: 30rem;
  margin-top: .5rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.step-num, .step-title, .step-text {
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * .3s);
}
/* desktop: horizontal timeline */
@media (min-width: 64em) {
  .process { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .step { display: block; padding-bottom: 0; }
  .step-rail {
    flex-direction: row;
    padding-top: 0;
    margin: 1.75rem calc(-1 * var(--gap)) 0 0;
  }
  .step--last .step-rail { margin-right: 0; }
  .step-line { width: auto; height: 1px; margin: 0 0 0 6px; }
  .step-line::after { transform-origin: 0 50%; }
  .step-title { min-height: 2.6em; margin-top: 1.5rem; }   /* two lines reserved: all five descriptions start on one line */
  .step-text { padding-right: .5rem; }
}
/* scroll-triggered build-up (only when JS reveals are active). It replays each time the
   timeline comes into view (main.js §6). The reset happens out of view and at once – the
   delays only apply on the way in – so every build-up starts at step 1, also after fast
   scrolling up and down. */
html.reveal-on .process:not(.is-in) .step-node { background: var(--bg); border-color: var(--line-strong); transform: scale(.8); }
html.reveal-on .process:not(.is-in) .step-line::after { transform: scaleY(0); }
html.reveal-on .process:not(.is-in) .step-num,
html.reveal-on .process:not(.is-in) .step-title,
html.reveal-on .process:not(.is-in) .step-text { opacity: 0; transform: translateY(.75rem); }
html.reveal-on .process:not(.is-in) .step-node,
html.reveal-on .process:not(.is-in) .step-line::after,
html.reveal-on .process:not(.is-in) .step-num,
html.reveal-on .process:not(.is-in) .step-title,
html.reveal-on .process:not(.is-in) .step-text { transition: none; }
@media (min-width: 64em) {
  html.reveal-on .process:not(.is-in) .step-line::after { transform: scaleX(0); }
}

/* 11 · Technologien -------------------------------------------------------- */
.stack { border-top: 1px solid var(--line); }
.stack-row {
  display: grid;
  gap: 1rem;
  padding: 1.5rem var(--pad-x) 1.75rem;
  border-bottom: 1px solid var(--line);
}
.stack-row:last-child { border-bottom: 0; }
.stack-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.012em;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  display: inline-flex;
  align-items: center;
  height: 2.125rem;
  padding: 0 .8125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  box-shadow: var(--raise);
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-2);
  white-space: nowrap;
}
@media (min-width: 56.25em) {
  .stack-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
    padding-block: 1.875rem;
  }
  .stack-title { grid-column: 1 / span 3; }
  .chips { grid-column: 4 / -1; }
}

/* 12 · CTA band ---------------------------------------------------------- */
.section--cta > .frame { position: relative; }
.band-sentinel {                        /* JS: makes the header solid while the band passes underneath */
  position: absolute;
  top: calc(1px - var(--header-h));      /* 1 px insets: edge contact does not count */
  bottom: 1px;
  left: 0;
  width: 1px;
  pointer-events: none;
}
.band {
  /* surface remap: every component inside the band uses the dark palette */
  --ink: #FAFAF7;
  --ink-2: #D4D4D8;
  --muted: #A1A1AA;
  --line: rgba(250, 250, 247, .1);
  --accent: #22C55E;
  --accent-text: #4ADE80;
  --focus: #22C55E;
  --btn-bg: #FAFAF7;
  --btn-ink: #18181B;
  --btn-bg-hover: #E4E4E7;
  --btn-dot: #16A34A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  position: relative;
  display: grid;
  gap: 2rem;
  padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) var(--pad-x);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--band-bg), var(--band-bg-2));
  box-shadow: inset 0 1px 0 var(--band-edge);
  color: var(--ink);
}
.band::before {                         /* soft green under-glow behind the call to action */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 95% at 76% 128%, var(--band-glow), transparent 72%);
}
.band::after {                          /* green hairline highlight on the top edge */
  content: "";
  position: absolute;
  top: 0;
  left: 52%;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0), rgba(74, 222, 128, .6) 50%, rgba(74, 222, 128, 0));
}
/* Guides on the band's own grid, in the gutters – never on the type: half a gutter outside
   the content edges (in the outer margins) … */
.band-guides {
  position: absolute;
  inset: 0 calc(var(--pad-x) - var(--gap) / 2);
  z-index: -1;
  pointer-events: none;
  border-inline: 1px solid var(--band-line);
}
.band-title {
  font-size: clamp(2.25rem, 1.35rem + 3.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.036em;
  text-wrap: balance;
}
.band-title > span { display: block; }
.band-title .t-light { font-weight: 250; letter-spacing: -.03em; }
.band-text {
  max-width: 28rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.band-side .btn { margin-top: 1.75rem; }
@media (min-width: 56.25em) {
  .band {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }
  .band-title { grid-column: 1 / span 7; }
  .band-side { grid-column: 9 / -1; }
  /* … and the centre of the gutter before the side column (col 9): the widened box is
     exactly 12 column steps of (column + gap), so that centre lies 8 steps in */
  .band-guides::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% * 8 / 12 - .5px);
    width: 1px;
    background: var(--band-line);
  }
}

/* 13 · FAQ ------------------------------------------------------------------ */
.faq {
  display: grid;
  gap: 2.5rem;
  padding: var(--section-y) var(--pad-x);
}
.faq-aside .h2 { margin-top: 1.25rem; }
.faq-note { margin-top: 1.5rem; color: var(--muted); }
@media (min-width: 56.25em) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .faq-aside { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 2rem); }
  .faq-list { grid-column: 7 / -1; }
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
  padding: 1.125rem 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.012em;
  word-spacing: .03em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:focus-visible { outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .35s var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
@media (hover: hover) {
  .faq-q:hover .faq-icon { border-color: var(--field-border); }
}
.faq-item[open] .faq-icon { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 3.5rem 1.75rem 0; }
.faq-a p { max-width: 42rem; color: var(--muted); line-height: 1.7; text-wrap: pretty; }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-list { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      height: 0;
      overflow: clip;
      transition: height .4s var(--ease-out), content-visibility .4s allow-discrete;
    }
    .faq-item[open]::details-content { height: auto; }
  }
}

/* 14 · Kontakt & form -------------------------------------------------------- */
.contact {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
@media (min-width: 56.25em) {
  .contact { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.contact-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
}

/* Direct contact: one strip across the full width, above the steps and the form.
   Phones: label over value, one item per row. From 40em: three cells side by side;
   from 80em the kicker takes the steps column and the cells line up with the form. */
.contact-direct { background: var(--bg); }
.contact-direct > .contact-kicker { padding: clamp(1.5rem, 1.25rem + 1vw, 2rem) var(--pad-x) .75rem; }
.contact-list { display: grid; }
.contact-item {
  position: relative;
  display: grid;
  align-content: end;
  gap: .375rem;
  padding: 1rem var(--pad-x) 1.125rem;
  border-top: 1px solid var(--line);
  transition: background-color .2s;
}
.contact-label {
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.4;
  color: var(--subtle);
}
.contact-value {
  justify-self: start;
  min-width: 0;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
a.contact-value {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s;
}
/* The whole cell is the link's hit area; the focus ring frames the cell */
a.contact-value::after { content: ""; position: absolute; inset: 0; }
.contact-arrow {                     /* top right of the cell, so the value keeps the full width */
  position: absolute;
  top: 1rem;
  right: var(--pad-x);
  width: 16px;
  height: 16px;
  color: var(--subtle);
  transition: color .2s, transform .35s var(--ease-out);
}
.contact-item:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
@supports selector(:has(*)) {
  a.contact-value:focus-visible { outline: none; }
}
.contact-item:has(a):active { background: var(--bg-soft); }   /* touch feedback while pressed */
@media (hover: hover) {
  .contact-item:has(a):hover { background: var(--bg-soft); }
  .contact-item:has(a):hover a.contact-value { text-decoration-color: currentColor; }
  .contact-item:has(a):hover .contact-arrow { color: var(--ink); transform: translate(2px, -2px); }
}
@media (min-width: 48em) {
  .contact-list { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .contact-item { padding: 1.125rem 1.25rem 1.25rem; }
  .contact-item:first-child { padding-left: var(--pad-x); }   /* lines up with the kicker above */
  .contact-arrow { top: 1.125rem; right: 1.25rem; }
  .contact-item + .contact-item { border-left: 1px solid var(--line); }
}
@media (min-width: 56.25em) {
  .contact-direct { grid-column: 1 / -1; }
}
@media (min-width: 80em) {
  .contact-direct { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .contact-direct > .contact-kicker { align-self: center; padding-block: 1.25rem; }
  .contact-item, .contact-item:first-child { min-height: 6rem; padding-inline: 1.5rem; border-top: 0; border-left: 1px solid var(--line); }
  .contact-arrow { right: 1.5rem; }
}

/* What happens next: a short timeline next to the form; the first node is the green dot */
.contact-info { background: var(--bg); }
.contact-info-inner { padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--pad-x); }
@media (min-width: 56.25em) {
  .contact-info-inner { position: sticky; top: calc(var(--header-h) + 1.5rem); }   /* stays in view beside the long form */
}
.next-steps { position: relative; display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.next-steps::before {
  content: "";
  position: absolute;
  top: .75rem;
  bottom: .75rem;
  left: calc(.3125rem - .5px);
  width: 1px;
  background: var(--line-strong);
}
.next-steps li {
  position: relative;
  display: grid;
  gap: .25rem;
  padding-left: 2rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.next-steps li::before {
  content: "";
  position: absolute;
  top: .35rem;
  left: 0;
  width: .625rem;
  height: .625rem;
  border: 1px solid var(--subtle);
  border-radius: .16rem;
  background: var(--bg);
}
.next-steps li:first-child::before { border-color: var(--accent); background: var(--accent); }
.next-num { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.4; color: var(--accent-text); }

.contact-form-wrap {
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--pad-x) clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  background: var(--panel);
  box-shadow: var(--raise);
}
.form { display: grid; gap: 1.5rem; }
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 40em) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
.field { display: grid; gap: .5rem; min-width: 0; align-content: start; }
.label { font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
/* A fieldset's legend is no grid item, so the gap above does not reach it */
.field > legend.label { margin-bottom: .5rem; }
.req { color: var(--accent-text); font-weight: 600; }
.opt { font-weight: 400; color: var(--subtle); }
.input {
  width: 100%;
  height: 3rem;
  padding: 0 .875rem;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--subtle); opacity: 1; }
@media (hover: hover) {
  .input:hover { border-color: var(--muted); }
}
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.textarea { height: auto; min-height: 9.5rem; padding-block: .75rem; resize: vertical; }
.field-hint { font-size: .8125rem; line-height: 1.45; color: var(--subtle); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--danger);
}
.field-error::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: .45em;
  border-radius: 1.5px;
  background: currentColor;
}

.choice-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; display: inline-flex; cursor: pointer; border-radius: var(--r-md); }
.choice input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color .2s, border-color .2s, color .2s;
}
.choice span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--line-strong);
  transition: background-color .2s, transform .3s var(--ease-out);
}
.choice:active span { border-color: var(--muted); color: var(--ink); }   /* touch feedback while pressed */
@media (hover: hover) {
  .choice:hover span { border-color: var(--muted); color: var(--ink); }
}
.choice input:checked + span { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.choice input:checked + span::before { background: var(--btn-dot); transform: scale(1.2); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Safari drops :focus-visible on every arrow-key step inside the group; main.js §7 marks
   keyboard use with .kb (same ring, so never a double one) */
.choice-chips.kb .choice input:focus + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice.is-flash span { animation: cb-flash 1s var(--ease-out); }   /* "Projekt besprechen" preselected this */
@keyframes cb-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.field--check { gap: .625rem; }
/* the hint continues the label text: same column (box 1.25rem + gap .875rem), set closer */
.field--check > .field-hint { margin-top: -.25rem; padding-left: 2.125rem; text-wrap: pretty; }
.check {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .875rem;
  align-items: start;
  /* 23 px line + 2 × 11 px ≥ 44 px tap height; the negative margins keep the layout unchanged */
  padding-block: .6875rem;
  margin-block: -.6875rem;
  cursor: pointer;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
/* the (invisible) native box stays over .check-box, for assistive technology and focus scrolling */
.check-input { position: absolute; top: .6875rem; left: 0; z-index: 1; width: 1.25rem; height: 1.25rem; margin: .15em 0 0; opacity: 0; cursor: pointer; }
.check-box {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15em;
  border: 1px solid var(--field-border);
  border-radius: 5px;
  background: var(--input-bg);
  transition: background-color .2s, border-color .2s;
}
.check-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: solid var(--btn-ink);
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity .15s, transform .25s var(--ease-out);
}
@media (hover: hover) {
  .check:hover .check-box { border-color: var(--muted); }
}
.check-input:checked + .check-box { background: var(--btn-bg); border-color: var(--btn-bg); }
.check-input:checked + .check-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.check-input:focus-visible + .check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.check-input[aria-invalid="true"] + .check-box { border-color: var(--danger); }

.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-top: .5rem;
}
.form-hint { font-size: .8125rem; color: var(--subtle); }
.form-submit[aria-disabled="true"] { cursor: progress; }
.form.is-sending .form-submit .btn-dot { animation: cb-pulse .7s var(--ease-io) infinite alternate; }
@keyframes cb-pulse { to { opacity: .25; transform: scale(.7); } }

/* Live region: always in the accessibility tree, takes no space while empty */
.form-status { font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.form-status.is-success, .form-status.is-error,
.form-notice {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid;
  border-radius: var(--r-md);
}
.form-status.is-success, .form-notice--ok { color: var(--success-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-wash); }
.form-status.is-error, .form-notice--error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.form-status.is-success::before, .form-status.is-error::before,
.form-notice::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: .5em;
  border-radius: 2px;
  background: currentColor;
}
/* Messages for browsers without JavaScript (kontakt.php redirects to #kontakt-gesendet / #kontakt-warten / #kontakt-fehler) */
.form-notice { display: none; margin: 0 0 1.5rem; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.form-notice:target { display: flex; }
html.js .form-notice { display: none; }

/* 15 · Footer ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); }
.footer-top {
  display: grid;
  gap: 2.75rem;
  padding: clamp(3rem, 2rem + 3vw, 5rem) var(--pad-x);
}
.brand--footer { margin-left: -.25rem; }
.brand--footer .brand-mark { font-size: 1.375rem; }
.footer-claim { margin-top: 1rem; max-width: 22rem; color: var(--muted); }
.footer-cta { margin-top: 1.75rem; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.footer-title {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  line-height: 1.4;
  color: var(--subtle);
}
.footer-col ul { margin-top: .75rem; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  white-space: nowrap;                  /* "Windows-Software" stays whole on a 320 px phone */
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: color .2s;
}
@media (hover: hover) {
  .footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
}
.footer-bottom {
  display: grid;
  align-items: center;
  gap: .25rem 1.5rem;
  padding: 1.25rem var(--pad-x);
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--subtle);
}
.footer-motto { font-weight: 600; color: var(--ink); }
.to-top {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .5rem;
  min-height: 2.75rem;
  color: var(--muted);
  transition: color .2s;
}
.to-top .icon { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
@media (hover: hover) {
  .to-top:hover { color: var(--ink); }
  .to-top:hover .icon { transform: translateY(-2px); }
}
@media (min-width: 40em) {
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* One row from tablets up. Up to 56.24em the outer items take what they need (a third of the
   width would wrap the copyright) and the motto is centred between them … */
@media (min-width: 48em) {
  .footer-bottom { grid-template-columns: auto minmax(0, 1fr) auto; }
  .footer-motto { justify-self: center; }
  .to-top { justify-self: end; }
}
@media (min-width: 56.25em) {
  .footer-bottom { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }   /* … wider, equal outer tracks centre the motto on the page */
  .footer-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .footer-brand { grid-column: 1 / span 5; }
  .footer-nav { grid-column: 7 / -1; }
}
/* Sign-off: the wordmark once more, very faint — only the dot keeps its colour, toned down
   so the brightest greens stay with the calls to action */
.footer-mark {
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.75rem) var(--pad-x) 0;
  border-top: 1px solid var(--line);
  line-height: 1;
  text-align: center;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.fm-word {
  display: inline-block;
  margin-bottom: .13em;                /* the page ends just below the descenders of g and y */
  font-family: var(--font-logo);
  font-size: min(11.5vw, 11.9rem);
  white-space: nowrap;
  /* decorative logotype: a faint ink that fades towards the bottom edge */
  color: transparent;
  background: linear-gradient(180deg, var(--mark-ink-top) 20%, var(--mark-ink-bottom) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (font-size: 1cqi) {
  .fm-word { font-size: 16cqi; }
}
.fm-light { font-weight: 300; letter-spacing: -.0415em; }
.fm-bold { font-weight: 700; letter-spacing: -.0415em; }
.fm-dot {
  display: inline-block;
  width: .245em;
  height: .245em;
  margin-left: .061em;
  border-radius: .061em;
  background: var(--mark-dot);
}

/* 16 · Subpages: legal texts, 404 ----------------------------------------- */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* the column never grows to fit a long word */
  gap: 2rem;
  padding: clamp(1.5rem, .75rem + 4vw, 5.5rem) var(--pad-x) var(--section-y);
}
@media (min-width: 56.25em) {
  .legal-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: first baseline;
  }
  .legal-rail { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 2.25rem); }
  .legal { grid-column: 4 / span 8; }
}
.legal-rail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; }
@media (min-width: 56.25em) {
  .legal-rail { display: grid; gap: 1rem; justify-items: start; }
}
.link-arrow--back { color: var(--muted); font-weight: 500; }
@media (hover: hover) {
  .link-arrow--back:hover { color: var(--ink); }
}

.legal { max-width: 70ch; color: var(--ink-2); line-height: 1.75; }
.legal > h1 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.032em;
  color: var(--ink);
  overflow-wrap: anywhere;               /* safety net; long titles get a ­ in the HTML */
  -webkit-hyphens: auto;
  hyphens: auto;
}
.legal > h1::after {                   /* the brand's green period */
  content: "";
  display: inline-block;
  width: .214em;
  height: .214em;
  margin-left: .05em;
  margin-right: -.264em;               /* zero net advance: it may hang into the gutter, but never wraps alone */
  border-radius: .052em;
  background: var(--accent);
}
.legal section { scroll-margin-top: 1rem; }        /* adds to html scroll-padding-top (header) */
.legal h2 {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  padding-top: clamp(1.5rem, 1.25rem + .75vw, 2rem);
  border-top: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.legal h2, .legal h3 { overflow-wrap: break-word; }   /* long compounds never push the page sideways (large text, WCAG text spacing) */
.legal > h1 + section h2,
.legal > .legal-toc + section h2 { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.legal h3 {
  margin-top: 2rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--ink);
}
.legal p, .legal address, .legal ul, .legal ol { margin-top: 1rem; }
.legal p, .legal li { text-wrap: pretty; }
.legal h2 + p, .legal h2 + address, .legal h2 + ul, .legal h3 + p, .legal h3 + ul { margin-top: .75rem; }
.legal strong { font-weight: 650; color: var(--ink); }
.legal code { font-family: var(--font-mono); font-size: .875em; color: var(--ink); }
.legal ul li { position: relative; padding-left: 1.375rem; }
.legal ul li + li { margin-top: .375rem; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--accent);
}
.legal a:not(.link-arrow) {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line-strong);
  overflow-wrap: anywhere;
  transition: text-decoration-color .2s;
}
@media (hover: hover) {
  .legal a:not(.link-arrow):hover { text-decoration-color: currentColor; }
}
.legal-lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.legal > h1 + .legal-lead { margin-top: 1.5rem; }
.legal-toc {
  margin-top: 2.5rem;
  padding: 1.375rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
  box-shadow: var(--raise);
}
.legal .legal-toc h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted);
}
.legal-toc ol {
  margin-top: .75rem;
  columns: 2 17rem;
  column-gap: 2.5rem;
  counter-reset: toc;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.legal-toc li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  break-inside: avoid;
  padding: .3rem 0;
  counter-increment: toc;
}
.legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.9;
  color: var(--accent-text);
}
.legal .legal-toc a { font-weight: 500; text-decoration-color: transparent; }
@media (hover: hover) {
  .legal .legal-toc a:hover { text-decoration-color: currentColor; }
}
/* Phones, tablets and touch screens: every entry is a full-width tap target of ≥ 44 px */
@media (max-width: 56.24em), (pointer: coarse) {
  .legal-toc li { padding: 0; align-items: baseline; }
  .legal .legal-toc a { display: block; padding-block: .6875rem; }
}
.legal-callout {
  margin-top: 3rem;
  padding: .25rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
  box-shadow: var(--raise);
}
.legal .legal-callout h2 { margin-top: 1.25rem; padding-top: 0; border-top: 0; }
.legal-meta { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--subtle); }
.legal-back { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* 404 */
.error-page { border-top: 1px solid var(--line); }
.error-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(30rem, 100vh - var(--header-h) - 12rem, 46rem);
  justify-content: center;
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--pad-x);
  text-align: center;
}
/* svh behind @supports like .hero-frame: with var() inside, a plain second declaration would be
   dropped only at computed-value time in browsers without svh – and take the vh value with it */
@supports (height: 100svh) {
  .error-inner { min-height: clamp(30rem, 100svh - var(--header-h) - 12rem, 46rem); }
}
/* Taller screens: the page fills the window, so the frame hairlines reach the footer and no strip
   of background is left below it (404 page only; without :has() the layout above simply stays) */
body:has(> main > .error-page) { display: flex; flex-direction: column; min-height: 100vh; }
@supports (height: 100svh) {
  body:has(> main > .error-page) { min-height: 100svh; }
}
body:has(> main > .error-page) > main { flex: 1 0 auto; display: flex; flex-direction: column; }
.error-page, .error-page > .frame { flex: 1 0 auto; display: flex; flex-direction: column; }
.error-inner { flex: 1 0 auto; }
.error-code {
  font-size: clamp(5.5rem, 3rem + 12vw, 11rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.error-code .t-dot { background: var(--accent); }
.error-title {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.error-title .t-light { font-weight: 300; letter-spacing: -.03em; }
.error-lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.error-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }
@media (max-width: 39.99em) {
  .error-ctas { flex-direction: column; width: 100%; max-width: 22rem; }
  .error-ctas .btn { width: 100%; }
}
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.error-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: .5rem;                /* wider hit area (short "FAQ" ≥ 44 px) … */
  margin-inline: -.5rem;                /* … without changing the row's layout */
  color: var(--muted);
  transition: color .2s;
}
@media (hover: hover) {
  .error-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
}

/* 16b · Neon look ------------------------------------------------------------
   Dark glass, neon light, technical type. Builds on the components above.
   Pure decoration lives in pseudo-elements and the particle field (main.js §9);
   nothing here hides content, and the glow effects keep to transform/opacity. */

/* Backdrop: three soft neon glows, fixed behind everything (the particle field sits on top) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 42rem at 88% -8%, rgba(139, 92, 246, .14), transparent 62%),
    radial-gradient(52rem 38rem at -6% 18%, rgba(34, 211, 238, .09), transparent 62%),
    radial-gradient(46rem 32rem at 50% 108%, rgba(34, 197, 94, .08), transparent 62%);
}
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html { scrollbar-color: #1E293B var(--bg); }

/* Type devices: neon gradient text, technical labels */
.neon-text,
.h2 .t-bold,
.hero-title .t-bold {
  background: var(--neon-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .neon-text, .h2 .t-bold, .hero-title .t-bold { animation: neon-shift 7s ease-in-out infinite alternate; }
}
@keyframes neon-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.h2 .pd { color: var(--neon-green); -webkit-text-fill-color: var(--neon-green); }

/* Section labels as neon pills: "// 01 LEISTUNGEN" */
.eyebrow {
  width: fit-content;
  gap: .5rem;
  padding: .4375rem .875rem;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 999px;
  background: rgba(34, 211, 238, .07);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  align-self: start;
}
.eyebrow-num { color: var(--accent-text); }
.eyebrow-num::before { content: "// "; content: "// " / ""; }
.eyebrow-num::after { display: none; }

.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, .95rem + 2.3vw, 2.875rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.h2 .t-light { font-weight: 500; letter-spacing: .01em; color: var(--ink); }
.h2 .t-bold { font-weight: 800; }

/* Buttons: neon gradient (primary), glass with a neon edge (ghost) */
.btn {
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--r-lg);
}
.btn--sm { font-size: .6875rem; }
.btn--lg { padding: 0 1.75rem; font-size: .75rem; }
.btn--primary {
  border: 0;
  background: var(--neon-grad);
  background-size: 160% 100%;
  color: var(--btn-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 28px -12px rgba(34, 211, 238, .55);
  transition: background-position .5s var(--ease-out), box-shadow .3s var(--ease-out), transform .2s var(--ease-out);
}
.btn--primary .btn-dot { background: var(--btn-dot); }
.btn--ghost {
  border-color: rgba(34, 211, 238, .32);
  background: rgba(10, 16, 32, .55);
  color: var(--ink);
}
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--neon-grad);
    background-size: 160% 100%;
    background-position: 100% 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 30px rgba(34, 211, 238, .45);
    transform: translateY(-1px);
  }
  .btn--ghost:hover {
    border-color: rgba(34, 211, 238, .7);
    background: rgba(10, 16, 32, .7);
    box-shadow: 0 0 26px rgba(34, 211, 238, .22), inset 0 0 14px rgba(34, 211, 238, .08);
  }
}
.btn--ghost .btn-dot { background: var(--accent); box-shadow: 0 0 8px rgba(34, 197, 94, .8); }

.link-arrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

/* Header: frosted glass with a neon edge once the page scrolls */
.site-header.is-scrolled { border-bottom-color: rgba(34, 211, 238, .18); }
.site-header.is-scrolled.on-band,
.site-header.menu-open { background: var(--bg); border-bottom-color: rgba(34, 211, 238, .18); }
html:not(.js) .site-header { border-bottom-color: rgba(34, 211, 238, .18); }
.nav-link {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-link::before { content: "//"; content: "//" / ""; margin-right: .5em; color: var(--neon-cyan); opacity: .7; transition: opacity .2s; }
.nav-link.is-active { color: var(--ink); text-shadow: 0 0 14px rgba(34, 211, 238, .55); }
.nav-link.is-active::before { opacity: 1; }
.nav-link::after { background: var(--neon-green); box-shadow: 0 0 8px rgba(34, 197, 94, .9); }
@media (hover: hover) {
  .nav-link:hover { color: var(--ink); text-shadow: 0 0 14px rgba(34, 211, 238, .55); }
  .nav-link:hover::before { opacity: 1; }
}
/* 1024–1199 px: the "//" labels are wider than plain words – tighter spacing keeps the nav clear of the button */
@media (min-width: 64em) and (max-width: 74.99em) {
  .nav-link { padding-inline: .3125rem; letter-spacing: .04em; }
  .nav-link::before { margin-right: .35em; }
  .header-cta { padding-inline: .875rem; }
}
.bm-dot { box-shadow: 0 0 .16em rgba(34, 197, 94, .9), 0 0 .5em rgba(34, 197, 94, .4); }   /* same glow as the hero dot: the landing is seamless */
.brand-mark { text-shadow: 0 0 .32em rgba(186, 230, 253, .16); }
.mm-link { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.mm-link.is-active::after { box-shadow: 0 0 10px rgba(34, 197, 94, .9); }
.mm-claim { letter-spacing: .08em; text-transform: uppercase; }

/* Hero: the logo glows on the particle field */
.hero-frame { overflow-x: clip; }       /* the glow may reach past narrow screens */
.lockup { position: relative; }
.lockup::before {
  content: "";
  position: absolute;
  inset: -45% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .13), rgba(139, 92, 246, .07) 55%, transparent 78%);
  opacity: var(--fly-fade, 1);           /* fades while the logo flies into the header */
}
.wordmark { text-shadow: 0 0 .32em rgba(186, 230, 253, .16); }
.wm-dot { box-shadow: 0 0 .16em rgba(34, 197, 94, .9), 0 0 .5em rgba(34, 197, 94, .4); }
.lockup-rule { background: linear-gradient(90deg, transparent, var(--logo-rule) 20%, var(--logo-rule) 80%, transparent); }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, .85rem + 2.4vw, 2.875rem);
  line-height: 1.16;
  letter-spacing: .015em;
  word-spacing: normal;
  text-transform: uppercase;
}
.hero-title > span { display: block; }
.hero-title .t-light { font-weight: 500; letter-spacing: .015em; }
.hero-title .t-bold { font-weight: 800; }
.hero-title .t-dot { box-shadow: 0 0 10px rgba(34, 197, 94, .8); }
.hero-lead { color: var(--muted); }
.hero-foot { border-top-color: rgba(34, 211, 238, .16); }
.hero-strip li { border-color: rgba(34, 211, 238, .12); }
.hs-cell { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; transition: color .2s, background-color .2s, text-shadow .2s; }
.hs-num { color: var(--neon-cyan); }
@media (hover: hover) {
  .hs-cell:hover { background: rgba(34, 211, 238, .06); text-shadow: 0 0 12px rgba(34, 211, 238, .5); }
  .hs-cell:hover .hs-num { color: var(--neon-green); }
}
.scroll-cue-track { background: linear-gradient(rgba(34, 211, 238, 0), rgba(34, 211, 238, .5)); }
.scroll-cue-dot { box-shadow: 0 0 8px rgba(34, 197, 94, .9); }

/* Leistungen: four glass cards, each with its own neon colour */
.services {
  gap: var(--gap);
  padding: 0 var(--pad-x) var(--section-y);
  border-top: 0;
  background: none;
}
.service {
  --card: 34, 197, 94;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  background: var(--glass);
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.service:nth-child(2) { --card: 139, 92, 246; }
.service:nth-child(3) { --card: 34, 211, 238; }
.service::before { --c: rgb(var(--card)); }
/* a light sweep crosses the card on hover */
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(var(--card), .14) 50%, transparent 65%);
  transform: translateX(-110%);
}
@media (hover: hover) {
  .service:hover {
    border-color: rgba(var(--card), .55);
    box-shadow: 0 0 38px rgba(var(--card), .2), inset 0 0 18px rgba(var(--card), .07);
    transform: translateY(-4px);
  }
  .service:hover::after { transform: translateX(110%); transition: transform .9s var(--ease-out); }
  .service:hover .service-title { color: rgb(var(--card)); text-shadow: 0 0 18px rgba(var(--card), .45); }
}
.service-visual {
  border-bottom-color: rgba(var(--card), .16);
  background: radial-gradient(70% 80% at 50% 65%, rgba(var(--card), .13), transparent 70%), var(--canvas);
}
.service-index { color: rgb(var(--card)); letter-spacing: .1em; }
.service-index::before { content: "// "; content: "// " / ""; opacity: .7; }
.service-title {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, .95rem + .9vw, 1.625rem);
  font-weight: 700;
  letter-spacing: .01em;
  transition: color .3s, text-shadow .3s;
}
.service-sub { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.ticks li::before { background: rgb(var(--card)); box-shadow: 0 0 8px rgba(var(--card), .8); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48em) {
    .service:nth-child(n+3) { margin-top: var(--gap); border-top: 1px solid var(--glass-border); }
  }
}
@media (hover: hover) {
  .service:nth-child(n+3):hover { border-top-color: rgba(var(--card), .55); }
}

/* More type devices in the neon gradient */
.band-title .t-bold,
.error-title .t-bold,
.step-num {
  background: var(--neon-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .band-title .t-bold, .error-title .t-bold { animation: neon-shift 7s ease-in-out infinite alternate; }
}
.band-title .t-dot, .error-title .pd { -webkit-text-fill-color: var(--neon-green); }

/* Warum grenadebyte: glass tiles with neon icon frames (green, cyan, violet in turn) */
.section--tint { background: rgba(8, 13, 26, .42); }
.values {
  gap: var(--gap);
  padding: 0 var(--pad-x) var(--section-y);
  border-top: 0;
  background: none;
}
.value {
  --card: 34, 197, 94;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  background: var(--glass);
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.value:nth-child(3n+2) { --card: 34, 211, 238; }
.value:nth-child(3n) { --card: 139, 92, 246; }
.value::before { --c: rgb(var(--card)); }
@media (hover: hover) {
  .value:hover {
    background: var(--glass);
    border-color: rgba(var(--card), .5);
    box-shadow: 0 0 32px rgba(var(--card), .18), inset 0 0 16px rgba(var(--card), .06);
    transform: translateY(-3px);
  }
}
.value-inner { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.value-icon {
  border-color: rgba(var(--card), .4);
  background: rgba(var(--card), .08);
  color: rgb(var(--card));
  box-shadow: 0 0 18px rgba(var(--card), .16);
}
.value-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: .01em; }

/* Vorgehen: gradient numbers on a glowing timeline */
.step-num { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; }
.step:nth-child(2) .step-num { background-position: 25% 0; }
.step:nth-child(3) .step-num { background-position: 50% 0; }
.step:nth-child(4) .step-num { background-position: 75% 0; }
.step:nth-child(5) .step-num { background-position: 100% 0; }
.step-node { border-color: var(--neon-cyan); background: var(--neon-cyan); box-shadow: 0 0 10px rgba(34, 211, 238, .7); }
.step--last .step-node { border-color: var(--neon-green); background: var(--neon-green); box-shadow: 0 0 12px rgba(34, 197, 94, .9); }
.step-line::after { background: linear-gradient(180deg, var(--neon-cyan), var(--neon-violet)); box-shadow: 0 0 8px rgba(34, 211, 238, .45); }
@media (min-width: 64em) {
  .step-line::after { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-violet)); }
}
html.reveal-on .process:not(.is-in) .step-node { box-shadow: none; }
.step-title { font-family: var(--font-display); font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Technologien: filter buttons and neon chips */
.stack-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0 var(--pad-x) clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.stack-filter[hidden] { display: none; }
.filter-btn {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: var(--r-lg);
  background: rgba(10, 16, 32, .6);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
.filter-btn::before { content: "// "; content: "// " / ""; color: var(--neon-cyan); }
.filter-btn[aria-pressed="true"] {
  border-color: var(--neon-cyan);
  background: var(--neon-cyan);
  color: #04070D;
  box-shadow: 0 0 22px rgba(34, 211, 238, .35);
}
.filter-btn[aria-pressed="true"]::before { color: #04070D; }
.filter-btn:active { border-color: var(--neon-cyan); color: var(--ink); }
@media (hover: hover) {
  .filter-btn:hover { border-color: rgba(34, 211, 238, .6); color: var(--ink); }
  .filter-btn[aria-pressed="true"]:hover { color: #04070D; }
}
.stack-row[hidden] { display: none; }
.stack-title { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chips li {
  border-color: rgba(34, 211, 238, .2);
  background: rgba(34, 211, 238, .05);
  color: var(--ink-2);
  transition: border-color .2s, color .2s, box-shadow .2s;
}
@media (hover: hover) {
  .chips li:hover { border-color: rgba(34, 211, 238, .6); color: var(--ink); box-shadow: 0 0 14px rgba(34, 211, 238, .2); }
}

/* CTA band: a neon panel */
.band {
  --line: rgba(34, 211, 238, .12);
  --btn-ink: #04070D;
  --btn-dot: #04070D;
  --focus: #22D3EE;
  background: linear-gradient(180deg, rgba(10, 16, 32, .9), rgba(7, 11, 22, .92));
  box-shadow: inset 0 1px 0 var(--band-edge), 0 0 80px -30px rgba(34, 211, 238, .3);
}
.band::before {
  background:
    radial-gradient(50% 95% at 76% 128%, rgba(34, 197, 94, .28), transparent 72%),
    radial-gradient(45% 85% at 8% -25%, rgba(139, 92, 246, .24), transparent 70%);
}
.band::after { background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, .75) 50%, rgba(34, 211, 238, 0)); }
.band-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.8vw, 3.375rem);
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.band-title .t-light { font-weight: 500; letter-spacing: .01em; }
.band-title .t-dot { box-shadow: 0 0 10px rgba(34, 197, 94, .8); }

/* FAQ: glass items, the open one glows */
.faq-list { display: grid; gap: .75rem; border-top: 0; }
.faq-item {
  padding: 0 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  background: var(--glass);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.faq-item[open] { border-color: rgba(34, 211, 238, .45); box-shadow: 0 0 28px rgba(34, 211, 238, .12); }
@media (hover: hover) {
  .faq-item:hover { border-color: rgba(34, 211, 238, .35); }
}
.faq-icon { border-color: rgba(34, 211, 238, .4); color: var(--neon-cyan); }
.faq-item[open] .faq-icon { background: var(--neon-cyan); border-color: var(--neon-cyan); color: #04070D; box-shadow: 0 0 14px rgba(34, 211, 238, .6); }
.faq-a { padding-right: 2.5rem; }

/* Kontakt: glass panels and a terminal window around the form */
.contact {
  gap: var(--gap);
  padding: 0 var(--pad-x) var(--section-y);
  border-top: 0;
  background: none;
}
.contact-direct {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  background: var(--glass);
}
.contact-info { background: none; }
.contact-info-inner { padding-inline: 0; }
.contact-item { border-color: rgba(34, 211, 238, .12) !important; }
.contact-item:has(a):active { background: rgba(34, 211, 238, .06); }
@media (hover: hover) {
  .contact-item:has(a):hover { background: rgba(34, 211, 238, .06); }
  .contact-item:has(a):hover .contact-arrow { color: var(--neon-cyan); }
}
.contact-label { color: var(--neon-cyan); letter-spacing: .08em; text-transform: uppercase; }
.next-steps::before { background: linear-gradient(180deg, var(--neon-green), rgba(34, 211, 238, .5), rgba(139, 92, 246, .3)); }
.next-steps li::before { border-color: rgba(34, 211, 238, .6); }
.next-steps li:first-child::before { box-shadow: 0 0 10px rgba(34, 197, 94, .9); }

.contact-form-wrap {
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 1.25rem;
  background: rgba(4, 7, 14, .88);
  box-shadow: 0 0 60px -20px rgba(34, 211, 238, .3), inset 0 0 30px rgba(34, 211, 238, .03);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: calc(-1 * clamp(2rem, 1.5rem + 2vw, 3rem)) calc(-1 * var(--pad-x)) clamp(1.5rem, 1.2rem + 1vw, 2rem);
  padding: .75rem var(--pad-x);
  border-bottom: 1px solid rgba(34, 211, 238, .16);
  background: rgba(15, 23, 42, .85);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.4;
  color: var(--muted);
}
.term-dots { display: flex; gap: .375rem; }
.term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.term-dots i:nth-child(2) { background: #FBBF24; }
.term-dots i:nth-child(3) { background: #22C55E; }
.term-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-state { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-text); }
.term-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .term-state::before { animation: term-pulse 1.6s ease-in-out infinite; }
}
@keyframes term-pulse { 50% { opacity: .35; } }
@media (max-width: 23.99em) {
  .term-state { display: none; }
}
.contact-form-wrap .label { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--neon-cyan); }
.contact-form-wrap .label::before { content: "> "; content: "> " / ""; color: var(--neon-green); }
.contact-form-wrap .opt { color: var(--subtle); }
.input { border-color: #33435C; }
.input:focus-visible { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16), 0 0 20px rgba(34, 211, 238, .2); }
.choice span { border-color: #33435C; }
.choice input:checked + span {
  border-color: var(--neon-cyan);
  background: rgba(34, 211, 238, .14);
  color: #FFFFFF;
  box-shadow: 0 0 18px rgba(34, 211, 238, .28);
}
.choice input:checked + span::before { background: var(--neon-green); box-shadow: 0 0 8px rgba(34, 197, 94, .9); }
.check-box { border-color: #5B6B82; }
.check-input:checked + .check-box { border-color: var(--neon-cyan); background: var(--neon-cyan); box-shadow: 0 0 12px rgba(34, 211, 238, .5); }
.form-status, .form-notice { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .02em; }

/* Footer */
.site-footer { border-top-color: rgba(34, 211, 238, .15); background: rgba(3, 5, 10, .55); }
.footer-title { letter-spacing: .1em; text-transform: uppercase; color: var(--neon-cyan); }
.footer-title::before { content: "// "; content: "// " / ""; color: var(--accent-text); }
@media (hover: hover) {
  .footer-col a:hover { color: #FFFFFF; text-decoration: none; text-shadow: 0 0 12px rgba(34, 211, 238, .55); }
}
.footer-motto { font-family: var(--font-display); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.fm-word { background: linear-gradient(180deg, rgba(34, 211, 238, .16) 20%, rgba(139, 92, 246, .03) 100%); -webkit-background-clip: text; background-clip: text; }
.fm-dot { box-shadow: 0 0 .25em rgba(34, 197, 94, .5); }

/* Subpages */
.mobile-menu { background: radial-gradient(70% 45% at 85% 0%, rgba(139, 92, 246, .14), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(34, 197, 94, .08), transparent 70%), var(--bg); }
.legal > h1 { font-family: var(--font-display); font-size: clamp(1.625rem, 1rem + 2.4vw, 2.875rem); letter-spacing: .01em; text-transform: uppercase; }
.legal > h1::after { box-shadow: 0 0 10px rgba(34, 197, 94, .8); }
.legal-toc, .legal-callout { border-color: var(--glass-border); background: var(--glass); }
.legal-callout { border-left-color: var(--neon-green); }
.legal ul li::before { box-shadow: 0 0 6px rgba(34, 197, 94, .8); }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2.5rem + 10vw, 9rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 0 40px rgba(34, 211, 238, .35);
}
.error-code .t-dot { box-shadow: 0 0 16px rgba(34, 197, 94, .9); }
.error-title { font-family: var(--font-display); font-size: clamp(1.375rem, .95rem + 2vw, 2.5rem); letter-spacing: .01em; text-transform: uppercase; }
.error-title .t-light { font-weight: 500; letter-spacing: .01em; }

/* 17 · Scroll reveals (theme-init adds html.reveal-on; content is visible without it).
   They replay each time a block comes into view (main.js §6). */
html.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
/* Left the view at the top: it comes back from above when scrolling up */
html.reveal-on [data-reveal].is-above { transform: translateY(-1.25rem); }
/* The reset happens out of view and at once, so each reveal starts from the beginning */
html.reveal-on [data-reveal]:not(.is-in) { transition: none; }
html.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
/* Keyboard focus inside a block that has not been revealed yet: show it at once (main.js §6 keeps it shown) */
html.reveal-on [data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }

/* 18 · Reduced motion, forced colors, print ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* 0s creates no transition at all, so visibility changes apply in the same frame and focus() works (main.js §4) */
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (forced-colors: active) {
  .neon-text, .h2 .t-bold, .hero-title .t-bold, .band-title .t-bold, .error-title .t-bold, .step-num, .h2 .pd, .error-title .pd, .band-title .t-dot {
    background: none; color: CanvasText; -webkit-text-fill-color: CanvasText;
  }
  body::before, .bg-canvas, .lockup::before, .service::after, .term-dots { display: none; }
  .t-dot { width: auto; height: auto; overflow: visible; background: none; color: inherit; }
  .wm-dot, .wm-ring, .bm-dot, .fm-dot, .btn-dot, .ticks li::before, .legal ul li::before, .scroll-cue-dot { forced-color-adjust: none; }
  .fm-dot { background: var(--accent); }   /* the sign-off mark is drawn at full contrast here, so is its dot */
  .service::before, .value::before, .band::before, .band::after, .band-guides { display: none; }
  /* Strokes and markers drawn as backgrounds would turn into Canvas (invisible). As borders
     they take the system colour the browser gives their control (ButtonText, LinkText …). */
  .burger span, .faq-icon::before, .faq-icon::after { height: 0; border-top: 2px solid; background: none; }
  .form-status::before, .form-notice::before, .field-error::before { border: 4px solid; background: none; }
  /* States: system highlight colours (open answer, chosen project type, current section) */
  .faq-item[open] .faq-icon { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .choice input:checked + span { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .choice input:checked + span::before { background: HighlightText; }
  .choice input:checked:focus-visible + span,
  .choice-chips.kb .choice input:checked:focus + span { outline-color: CanvasText; }
  .nav-link.is-active::after, .mm-link.is-active::after { forced-color-adjust: none; background: Highlight; }
  .lang-link[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print {
  :root {
    --ink: #000000; --ink-2: #1F1F1F; --muted: #3A3A3A; --subtle: #4A4A4A;
    --line: #CCCCCC; --line-soft: #E5E5E5; --line-strong: #999999;
    --accent-text: #15803D; --neon-cyan: #0E7490; --logo-ink: #000000; --logo-tag: #3A3A3A;
    --glass: transparent; --glass-border: #CCCCCC;
    --placeholder-bg: #FEF3C7; --placeholder-ink: #78350F;
  }
  html, body { background: #FFFFFF !important; }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; }
  body::before, .bg-canvas, .lockup::before, .service::after, .term-bar, .stack-filter { display: none !important; }
  .neon-text, .h2 .t-bold, .hero-title .t-bold, .band-title .t-bold, .error-title .t-bold, .step-num {
    background: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important;
  }
  .service, .value, .faq-item, .contact-direct, .contact-form-wrap { background: none !important; }
  .site-header, .mobile-menu, .scroll-cue, .hero-ctas, .band-guides, .footer-mark, .footer-cta, .to-top, .legal-rail .link-arrow { display: none !important; }
  .wordmark { transform: none !important; visibility: visible !important; }
  html.reveal-on [data-reveal], [data-intro-step], .wordmark .ch, .wm-dot, .lockup-rule, .lockup-tag, .hero-title .t-dot { opacity: 1 !important; transform: none !important; }
  .hero-frame { min-height: 0; }
  .band { --ink: #18181B; --muted: #3F3F46; background: none; box-shadow: none; }
  .band::before, .band::after { display: none; }
}