/* TP Seitz — Production design tokens
   Industrial Premium. Geist sans + mono. Monochrome base, single accent.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* Ink scale (warm anthracite, not pure black) */
  --ink-1000: #050507;
  --ink-900:  #0B0C0E;
  --ink-800:  #131418;
  --ink-700:  #1C1E23;
  --ink-600:  #2A2D34;
  --ink-500:  #3F434C;
  --ink-400:  #5A5F69;
  --ink-300:  #8B8F98;
  --ink-200:  #C2C5CC;
  --ink-150:  #DCDEE3;
  --ink-100:  #EAECEF;
  --ink-50:   #F4F5F7;
  --paper:    #FAFAF7;
  --pure:     #FFFFFF;

  /* Brand — TP Seitz Industrial Blue */
  --brand:        #0C4E97;  /* primary accent — CTAs, highlights, pins */
  --brand-1000:   #03142A;  /* deepest navy — footer floor */
  --brand-900:    #061E40;  /* deep navy — section--deep */
  --brand-800:    #0A2C5E;  /* medium-dark navy — section--dark */
  --brand-700:    #0E396C;  /* lighter navy — elevated dark cards */
  --brand-600:    #15467E;  /* hover variant */

  /* Accent — overridable via Tweaks */
  --signal:    var(--brand);
  --signal-ink:#F2F6FC;

  /* Alarm — only for notdienst & critical */
  --alarm:     #C8331F;
  --alarm-ink: #FFF1EE;

  /* Semantic */
  --bg:        var(--paper);
  --bg-elev:   var(--pure);
  --bg-dark:   var(--brand-800);
  --bg-deep:   var(--brand-900);
  --bg-floor:  var(--brand-1000);
  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-400);
  --fg-faint:  var(--ink-300);
  --line:      var(--ink-150);
  --line-soft: var(--ink-100);
  --line-dark: rgba(255,255,255,.12);

  /* Type */
  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --t-display:  clamp(40px, 6.4vw, 96px);
  --t-h1:       clamp(34px, 4.4vw, 64px);
  --t-h2:       clamp(30px, 3.2vw, 44px);
  --t-h3:       clamp(22px, 2vw, 28px);
  --t-h4:       18px;
  --t-body-lg:  19px;
  --t-body:     16px;
  --t-sm:       14px;
  --t-xs:       12.5px;
  --t-eyebrow:  12px;

  /* Radius — kantig per default */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-pill: 999px;

  /* Spacing rhythm */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Layout */
  --container: 1240px;
  --container-tight: 1080px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(11,12,14,.04), 0 1px 2px rgba(11,12,14,.04);
  --shadow-2: 0 1px 0 rgba(11,12,14,.04), 0 8px 24px -8px rgba(11,12,14,.12);
  --shadow-3: 0 20px 60px -20px rgba(11,12,14,.25);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1, "cv11" 1;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ─────────────── Typography utilities ─────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow--accent { color: var(--ink-900); }
.eyebrow--dot::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}
.display {
  font-size: var(--t-display);
  line-height: .96;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
.h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.h4 { font-size: var(--t-h4); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.lede { font-size: var(--t-body-lg); line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; max-width: 60ch; }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01" 1, "cv11" 1, "tnum" 1; }
.num { font-variant-numeric: tabular-nums; }

/* ─────────────── Layout ─────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container--tight { max-width: var(--container-tight); }
.container--wide  { max-width: var(--container-wide); }

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--dark { background: var(--bg-dark); color: var(--ink-100); }
.section--deep { background: var(--bg-deep); color: var(--ink-100); }

.section--dark .muted, .section--deep .muted { color: var(--ink-300); }
.section--dark .faint, .section--deep .faint { color: var(--ink-400); }
.section--dark .eyebrow, .section--deep .eyebrow { color: var(--ink-300); }
.section--dark hr, .section--deep hr { border-color: var(--line-dark); }

/* Top divider rule */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--dark { background: var(--line-dark); }

/* ─────────────── Buttons ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-2);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  line-height: 1;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }

.btn--primary { background: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { background: #FFD11A; }

.btn--dark { background: var(--ink-900); color: var(--paper); }
.btn--dark:hover { background: var(--ink-700); }

.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--ink-50); border-color: var(--ink-200); }

.btn--ghost-dark { background: transparent; color: var(--ink-100); border: 1px solid var(--line-dark); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.25); }

.btn--alarm { background: var(--alarm); color: var(--alarm-ink); }
.btn--alarm:hover { background: #DF4231; }

.btn--lg { padding: 18px 28px; font-size: 16px; }
.btn--sm { padding: 10px 14px; font-size: 13.5px; }

.btn--block { width: 100%; justify-content: center; }

/* Text-link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  font-weight: 500;
  transition: border-color var(--dur-2) var(--ease), gap var(--dur-2) var(--ease);
}
.tlink:hover { border-color: var(--ink-900); gap: 10px; }
.section--dark .tlink, .section--deep .tlink { border-color: var(--line-dark); }
.section--dark .tlink:hover, .section--deep .tlink:hover { border-color: var(--ink-100); }

/* ─────────────── Header / Nav ─────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 247, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand__logo {
  height: 54px;
  width: auto;
  display: block;
  /* logo is pure-black PNG — no filter on light bg */
}
.brand__sub {
  display: none;
  color: var(--fg-muted);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  border-left: 1px solid var(--line);
  padding-left: 14px;
  line-height: 1.3;
  max-width: 18ch;
}
@media (min-width: 860px) { .brand__sub { display: block; } }
@media (max-width: 520px) {
  .hdr__row { height: 68px; }
  .brand__logo { height: 44px; }
}

/* Inverted (white) logo for dark surfaces */
.logo-invert { filter: invert(1) brightness(1.1); }

/* When monochrome (anthrazit) accent is active, the dark sections would render
   signal-colored items (check marks, map pins, wizard foci) invisible because
   --signal equals the dark background. Override: on dark surfaces switch signal
   to paper-white so it stays visible while keeping brand consistency. */
body[data-accent="anthrazit"] .section--dark,
body[data-accent="anthrazit"] .section--deep,
body[data-accent="anthrazit"] .wiz,
body[data-accent="anthrazit"] .mob-bar,
body[data-accent="anthrazit"] .hero__media,
body[data-accent="anthrazit"] .map {
  --signal: var(--paper);
  --signal-ink: var(--ink-900);
}

/* On the monochrome (anthrazit) accent we keep the standard underline — it
   reads as a subtle dark bar under dark text, brand-consistent and never
   blocks legibility. No special override needed any more. */

.nav {
  display: none;
  gap: 4px;
  align-items: center;
}
@media (min-width: 980px) { .nav { display: flex; } }
.nav a {
  padding: 8px 12px;
  border-radius: var(--r-2);
  font-size: 14.5px;
  color: var(--ink-700);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav a:hover { background: var(--ink-50); color: var(--ink-900); }

.hdr__cta { display: flex; gap: 10px; align-items: center; }
.hdr__tel {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  background: var(--pure);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.hdr__tel::before {
  content: "";
  width: 6px; height: 6px;
  background: #1FAA5C;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(31,170,92,.18);
}
@media (min-width: 760px) { .hdr__tel { display: inline-flex; } }

.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-2); }
@media (min-width: 980px) { .menu-btn { display: none; } }

/* ─────────────── Hero ─────────────── */
.hero { position: relative; padding-top: clamp(40px, 7vw, 88px); padding-bottom: 0; }
.hero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); max-width: 920px; }

/* Full-width banner below the hero text */
.hero__banner {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  aspect-ratio: 16/9;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink-200);
}
@media (max-width: 760px) { .hero__banner { aspect-ratio: 4/3; } }
.hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.hero__banner__tag {
  position: absolute;
  left: 20px; top: 20px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(6,30,64,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
.hero__banner__tag::before {
  content: ""; width: 6px; height: 6px; background: var(--signal); border-radius: 50%;
}
.hero__banner__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 26px;
  background: linear-gradient(180deg, transparent, rgba(6,30,64,.85));
  color: var(--paper);
  font-size: 14px;
}
.hero__banner__caption b { font-weight: 600; }
.hero__title { margin: 18px 0 18px; }
.hero__title em { font-style: normal; color: var(--ink-500); }
/* ──────── Animated checklist hero (compliance variant) ──────── */
.hero__title .hl {
  position: relative;
  display: inline;
  background-image: linear-gradient(0deg, var(--signal) 0%, var(--signal) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.28em;
  background-position: 0 92%;
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__title--anim {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
  animation: none;          /* override the global heroRise */
  opacity: 1;
}

.hero-anim__line {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  opacity: 0;
  animation: heroLineIn 600ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes heroLineIn { to { opacity: 1; } }

.hero-anim__text {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: heroTextReveal 900ms cubic-bezier(.6,.05,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes heroTextReveal { to { clip-path: inset(0 0 0 0); } }

.hero-anim__check {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  stroke: var(--signal);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.hero-anim__check polyline {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  opacity: 0;
  animation: heroCheckDraw 650ms cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(var(--d, 0s) + 1.1s);
}

@keyframes heroCheckDraw {
  0%   { stroke-dashoffset: 40; opacity: 0; transform: scale(.7); transform-origin: center; }
  12%  { opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 1; transform: scale(1); }
}

/* FIX FÜR MOBILE */
@media (max-width: 768px) {
  .hero-anim__check {
    width: 1.3em;
    height: 1.3em;
  }
  
  .hero-anim__check polyline {
    stroke-width: 2.8;
  }
}

.hero-anim__welcome {
  display: block;
  margin-top: clamp(12px, 1.5vw, 22px);
  opacity: 0;
  transform: translateY(20px);
  animation: heroWelcomeIn 900ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--d, 0s);
  background-image: linear-gradient(0deg, var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-size: 0% 0.22em;
  background-position: 0 110%;
  padding-bottom: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@keyframes heroWelcomeIn {
  0%   { opacity: 0; transform: translateY(20px); background-size: 0% 0.22em; }
  60%  { opacity: 1; transform: translateY(0); background-size: 0% 0.22em; }
  100% { opacity: 1; transform: translateY(0); background-size: 100% 0.22em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim__line, .hero-anim__text, .hero-anim__check path, .hero-anim__welcome {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
    background-size: 100% 0.28em !important;
  }
}
.hero__lede { margin-bottom: 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero__meta > div:last-child { grid-column: 1 / -1; padding-top: 14px; border-top: 1px dashed var(--line); }
}
.hero__meta__k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--fg-faint); text-transform: uppercase; }
.hero__meta__v { font-size: 17px; font-weight: 500; margin-top: 6px; letter-spacing: -0.01em; }
.hero__meta__v small { color: var(--fg-muted); font-weight: 400; margin-left: 4px; }

.hero__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink-200);
}

/* ─────── Hero right column: animated brandmark + photo stacked ─────── */
.hero__right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 980px) {
  .hero__right { height: 100%; }
  .hero__right > .hero__media { flex: 1; aspect-ratio: auto; min-height: 0; }
  .hero__right > .hero__media img { height: 100%; object-fit: cover; }
}

/* Animated brandmark — paper card with floating logo + halo + shimmer */
.hero__brandmark {
  display: none;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  isolation: isolate;
  height: clamp(150px, 20vh, 200px);
  flex-shrink: 0;
  box-shadow: 0 8px 20px -16px rgba(11,12,14,.18);
}
@media (min-width: 980px) { .hero__brandmark { display: grid; place-items: center; } }

/* Writing reveal via SVG mask: path of horizontal sweeps draws across the PNG
   logo with rounded stroke caps. As stroke-dashoffset shrinks, sweeps appear
   in order top→bottom, looking like someone writing line by line.
   A glowing pen tip moves left↔right in sync with the active sweep. */
.hero__brandmark__svg {
  position: relative;
  z-index: 2;
  width: auto;
  height: 86%;
  aspect-ratio: 1/1;
  max-width: 68%;
}

.hero__brandmark__path {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: brandWrite 6.5s cubic-bezier(.55,.05,.45,1) infinite;
}
@keyframes brandWrite {
  0%, 3%    { stroke-dashoffset: 100; }
  70%       { stroke-dashoffset: 0; }
  92%       { stroke-dashoffset: 0; }
  98%, 100% { stroke-dashoffset: 100; }
}

/* Glowing pen tip — moves L↔R as logo is drawn line by line.
   8 sweeps × 0.0875 of timeline each (=0.7 total reveal),
   alternating direction would be ideal but we keep L→R always for clarity. */
.hero__brandmark__pen {
  position: absolute;
  top: 6%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow:
    0 0 8px 2px var(--signal),
    0 0 18px 6px color-mix(in srgb, var(--signal) 50%, transparent);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  animation: brandPen 6.5s cubic-bezier(.55,.05,.45,1) infinite;
}
@keyframes brandPen {
  /* 8 horizontal sweeps inside 3%..70% of the timeline */
  0%, 3%    { opacity: 0; top: 6%;  left: 18%; }
  4%        { opacity: 1; }
  11.4%     { left: 80%; top: 6%; }   /* sweep 1 (T-bar) */
  11.41%    { left: 18%; top: 18%; }
  19.8%     { left: 80%; top: 18%; }  /* sweep 2 (P body top) */
  19.81%    { left: 18%; top: 30%; }
  28.2%     { left: 80%; top: 30%; }  /* sweep 3 (P body mid) */
  28.21%    { left: 18%; top: 42%; }
  36.6%     { left: 80%; top: 42%; }  /* sweep 4 (P bottom) */
  36.61%    { left: 18%; top: 54%; }
  45.0%     { left: 80%; top: 54%; }  /* sweep 5 (SEITZ top) */
  45.01%    { left: 18%; top: 66%; }
  53.4%     { left: 80%; top: 66%; }  /* sweep 6 (SEITZ bottom) */
  53.41%    { left: 18%; top: 78%; }
  61.8%     { left: 80%; top: 78%; }  /* sweep 7 (underline) */
  61.81%    { left: 18%; top: 88%; }
  70%       { left: 80%; top: 88%; opacity: 1; }   /* sweep 8 (tagline) */
  75%       { opacity: 0; }
  100%      { opacity: 0; left: 18%; top: 6%; }
}

.hero__brandmark__halo {
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--signal) 28%, transparent),
    transparent 70%);
  animation: brandHalo 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brandHalo {
  0%, 3%    { opacity: .15; transform: scale(.85); }
  70%       { opacity: .9;  transform: scale(1.08); }
  92%       { opacity: .9;  transform: scale(1.08); }
  100%      { opacity: .15; transform: scale(.85); }
}

/* Pause on hover */
.hero__brandmark:hover .hero__brandmark__path,
.hero__brandmark:hover .hero__brandmark__pen,
.hero__brandmark:hover .hero__brandmark__halo { animation-play-state: paused; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.hero__media__tag {
  position: absolute;
  left: 16px; top: 16px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(6,30,64,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
.hero__media__tag::before {
  content: ""; width: 6px; height: 6px; background: var(--signal); border-radius: 50%;
}
.hero__media__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(6,30,64,.85));
  color: var(--paper);
  font-size: 13px;
}
.hero__media__caption b { font-weight: 600; }

.hero__strip {
  margin-top: clamp(48px, 7vw, 88px);
  padding-block: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ─────────────── Cards ─────────────── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 28px;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card:hover { border-color: var(--ink-300); }
.card--dark { background: var(--brand-700); border-color: rgba(255,255,255,.10); color: var(--ink-100); }
.card--dark:hover { border-color: rgba(255,255,255,.22); }

.card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ink-50);
  border-radius: var(--r-2);
  margin-bottom: 18px;
}
.card--dark .card__icon { background: var(--brand-800); }

/* ─────────────── Grids ─────────────── */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}

/* ─────────────── Section header ─────────────── */
.shead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
@media (min-width: 880px) {
  .shead { grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: end; }
}
.shead__title { margin: 8px 0 0; }
.shead__lede { margin: 0; }

/* ─────────────── Logo strip ─────────────── */
.logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  align-items: center;
  opacity: .9;
}
@media (max-width: 880px) { .logos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.logos__item {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--fg-muted);
  text-align: center;
  padding: 12px 8px;
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
}

/* ─────────────── FAQ ─────────────── */
.faq__item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.faq__sign {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: 4px;
  flex-shrink: 0;
  transition: transform var(--dur-2) var(--ease-out);
}
.faq__item.is-open .faq__sign { transform: rotate(45deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-3) var(--ease), padding var(--dur-3) var(--ease);
}
.faq__item.is-open .faq__a { max-height: 320px; padding-top: 14px; }
.faq__a p { margin: 0; color: var(--fg-muted); max-width: 70ch; }

/* ─────────────── Process stepper ─────────────── */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps__item { background: var(--bg-elev); padding: 28px; counter-increment: step; }
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-300);
  display: block;
  margin-bottom: 18px;
}
.steps__item h4 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
.steps__item p { margin: 0; color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; }

/* ─────────────── Sticky bottom mobile bar ─────────────── */
.mob-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px;
  background: rgba(3,20,42,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  gap: 8px;
  z-index: 40;
  border-top: 1px solid rgba(255,255,255,.10);
}
@media (min-width: 760px) { .mob-bar { display: none; } }
.mob-bar .btn { flex: 1; justify-content: center; padding: 14px 12px; font-size: 14.5px; }

/* ─────────────── Wizard ─────────────── */
.wiz {
  background: var(--brand-800);
  color: var(--ink-100);
  border-radius: var(--r-4);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255,255,255,.10);
}
.wiz__pg {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.wiz__pg__dot {
  flex: 1; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; transition: background var(--dur-2) var(--ease);
}
.wiz__pg__dot.is-active { background: var(--signal); }
.wiz__pg__dot.is-done { background: var(--ink-300); }
.wiz__q { font-size: 12px; font-family: var(--font-mono); letter-spacing: .12em; color: var(--ink-400); text-transform: uppercase; margin: 0 0 12px; }
.wiz__h { margin: 0 0 28px; font-size: clamp(24px,2.6vw,32px); letter-spacing: -0.02em; font-weight: 600; line-height: 1.12; }
.wiz__opts { display: grid; gap: 10px; }
@media (min-width: 700px) { .wiz__opts { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.wiz__opt {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--brand-900);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-2);
  padding: 18px 20px;
  text-align: left;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.wiz__opt:hover { border-color: rgba(255,255,255,.32); background: var(--brand-700); }
.wiz__opt.is-sel { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 14%, var(--brand-900)); }
.wiz__opt b { font-weight: 500; font-size: 15px; letter-spacing: -0.005em; }
.wiz__opt small { color: var(--ink-300); font-size: 13px; }
.wiz__input {
  width: 100%;
  padding: 16px 18px;
  background: var(--brand-900);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-2);
  color: var(--ink-100);
  font-size: 15px;
  transition: border-color var(--dur-2) var(--ease);
}
.wiz__input:focus { outline: none; border-color: var(--signal); }
.wiz__input::placeholder { color: var(--ink-400); }
.wiz__row { display: grid; gap: 12px; }
@media (min-width: 700px) { .wiz__row--2 { grid-template-columns: 1fr 1fr; } }
.wiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 12px; }
.wiz__success { text-align: center; padding: 16px 8px; }
.wiz__check { width: 56px; height: 56px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); display: grid; place-items: center; margin: 0 auto 18px; font-size: 28px; }

/* ─────────────── Map (coverage) ─────────────── */
.map {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-3);
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-1000) 100%);
  border: 1px solid rgba(255,255,255,.10);
}
.map__grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─────────────── Quote / Owner ─────────────── */
.quote {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 28ch;
  text-wrap: balance;
}
.quote::before {
  content: """;
  display: block;
  font-size: 1.6em;
  line-height: 1;
  margin-bottom: -8px;
  color: var(--signal);
  font-weight: 600;
}

/* ─────────────── Misc ─────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  color: var(--fg-muted);
  background: var(--bg-elev);
}
.section--dark .pill, .section--deep .pill { background: var(--brand-700); border-color: rgba(255,255,255,.10); color: var(--ink-200); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.pill .dot--live { background: #1FAA5C; box-shadow: 0 0 0 3px rgba(31,170,92,.2); }
.pill .dot--alarm { background: var(--alarm); }

/* Scrollytelling: section-anchor offset for sticky header */
[id] { scroll-margin-top: 80px; }

/* When tweaks panel is mounted, leave space at bottom right */
.is-tweak-open .container { padding-right: max(var(--gutter), 320px); }
@media (max-width: 720px) { .is-tweak-open .container { padding-right: var(--gutter); } }

/* Mobile-only: tighten the hero title further so it never overflows */
@media (max-width: 560px) {
  .hero__title { font-size: clamp(32px, 9.5vw, 44px) !important; line-height: 1.02; }
  .hero__lede { font-size: 16px; }
  .hero__ctas .btn { font-size: 14.5px; padding: 14px 18px; }
  .hero__ctas .btn--lg { padding: 14px 18px; font-size: 14.5px; }
  .mob-bar + main, body { /* room for sticky bar */ }
  body { padding-bottom: 72px; }
}
@media (max-width: 760px) {
  /* Section padding tighter on mobile */
  .section { padding-block: clamp(48px, 9vw, 96px); }
}

/* Print: hide non-essentials */
@media print {
  .hdr, .mob-bar, .twk-panel, .wiz { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   MOTION SYSTEM — scroll-triggered reveals, hero entrance, hover lifts
   ───────────────────────────────────────────────────────────────────── */

/* Universal reveal: subtle fade + rise. Respects reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(.16,1,.3,1),
    transform 700ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers — used on grids to delay each child */
.reveal--s1 { --rd: 80ms; }
.reveal--s2 { --rd: 160ms; }
.reveal--s3 { --rd: 240ms; }
.reveal--s4 { --rd: 320ms; }
.reveal--s5 { --rd: 400ms; }
.reveal--s6 { --rd: 480ms; }

/* Hero entrance — fires once on page load, no scroll trigger */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroMediaIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes heroHlGrow {
  from { background-size: 0% 0.28em; }
  to   { background-size: 100% 0.28em; }
}

.hero .eyebrow,
.hero__title,
.hero__lede,
.hero__ctas,
.hero__meta {
  opacity: 0;
  animation: heroRise 800ms cubic-bezier(.16,1,.3,1) forwards;
}
.hero .eyebrow   { animation-delay: 80ms; }
.hero__title     { animation-delay: 160ms; }
.hero__lede      { animation-delay: 280ms; }
.hero__ctas      { animation-delay: 380ms; }
.hero__meta      { animation-delay: 480ms; }

.hero__media {
  opacity: 0;
  animation: heroMediaIn 1100ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: 220ms;
}

/* Marker underline draws in left-to-right after the headline rises */
.hero__title .hl {
  background-size: 0% 0.28em;
  animation: heroHlGrow 900ms cubic-bezier(.6,.2,.2,1) forwards;
  animation-delay: 800ms;
}

/* Hero photo subtle parallax — driven by scrollY in JS via custom prop */
.hero__media img {
  transition: transform 80ms linear;
  transform: translateY(var(--py, 0));
}

/* Card hover lift — replaces the plain border-color-only hover */
.card {
  transition:
    border-color 280ms cubic-bezier(.16,1,.3,1),
    transform 360ms cubic-bezier(.16,1,.3,1),
    box-shadow 360ms cubic-bezier(.16,1,.3,1),
    background 280ms cubic-bezier(.16,1,.3,1);
}
.card:hover {
  border-color: var(--ink-300);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -28px rgba(11,12,14,.20);
}
.card--dark:hover {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.55);
}

/* Service card icon gets a quiet "lift" on its own card hover */
.card:hover .card__icon {
  background: var(--signal);
  color: var(--signal-ink);
  transition: background 280ms ease, color 280ms ease;
}
.card--dark:hover .card__icon { background: var(--signal); color: var(--signal-ink); }

/* Steps stepper — bg shifts on hover */
.steps__item { transition: background 220ms ease; }
.steps__item:hover { background: var(--ink-50); }

/* FAQ open/close — sign icon rotation already set; add bg hint on hover */
.faq__q { transition: color 200ms ease; }
.faq__q:hover { color: var(--ink-1000); }

/* Map: pins pulse subtly when section is visible */
@keyframes mapPin {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.map.is-visible .map__pin-primary { animation: mapPin 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* Map: circles draw in via stroke-dashoffset animation */
.map .map__ring {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  transition: stroke-dashoffset 1800ms cubic-bezier(.16,1,.3,1) 200ms;
}
.map.is-visible .map__ring { stroke-dashoffset: 0; }

/* Map: secondary city dots fade in staggered */
.map .map__pin-secondary {
  opacity: 0;
  transition: opacity 600ms ease;
}
.map.is-visible .map__pin-secondary { opacity: 1; }

/* Wizard step cross-fade */
@keyframes wizFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wiz > :not(.wiz__pg) {
  animation: wizFadeIn 360ms cubic-bezier(.16,1,.3,1);
}

/* Buttons get a subtle arrow nudge on hover (already there); add hero CTA pulse */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 800ms cubic-bezier(.4,.0,.2,1);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(120%); }

/* Number counters (Coverage stats) — tabular for clean transitions */
.counter { font-variant-numeric: tabular-nums; }

/* Eyebrow dot pulses — quiet "live" feel */
@keyframes eyebrowDot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 35%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 0%, transparent); }
}
.eyebrow--dot::before {
  animation: eyebrowDot 2.2s ease-in-out infinite;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}
/* EXTRA FIX FÜR MOBILE HAKEN */
@media (max-width: 640px) {
  .hero-anim__check {
    width: 1.5em !important;
    height: 1.5em !important;
    stroke-width: 3 !important;
  }
  
  .hero-anim__check polyline {
    stroke-dasharray: 50 !important;
  }
}