/* Reifeneinlagerung – Bartel & Lück Logistik GmbH
   Ein Token-System für die ganze Seite. Farben aus der Firmen-CI (Nachtblau, Signalgelb). */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farbe */
  --ink: #0A2240;
  --ink-hover: #163563;
  --text: #22324A;
  --muted: #4B5B70;
  --ground-top: #E2E9F1;
  --ground: #F5F7FA;
  --surface: #FFFFFF;
  --line: #D3DCE6;
  --line-strong: #A9B6C6;
  --signal: #FFCC00;
  --rubber: #1A2230;
  --rubber-side: #273142;
  --on-ink: #FFFFFF;
  --on-ink-muted: #C3CEDD;
  --error: #B42318;
  --error-ground: #FDF1EF;
  --focus: #0A2240;

  /* Schrift */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.3rem + 2.3vw, 3rem);
  --step-4: clamp(2.375rem, 1.35rem + 4.2vw, 4.5rem);

  /* Abstand */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: clamp(3rem, 2rem + 4vw, 5.5rem);
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --content: 75rem;

  /* Form */
  --radius-panel: 28px;
  --radius-card: 18px;
  --radius-field: 10px;
  --radius-pill: 999px;
  --shadow-float: 0 18px 40px -18px rgba(10, 34, 64, 0.35), 0 4px 10px -4px rgba(10, 34, 64, 0.12);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;

  --header-h: 4.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-color: var(--line-strong) var(--ground);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: linear-gradient(180deg, var(--ground-top) 0, var(--ground) 52rem) no-repeat, var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img, svg { display: block; max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

[hidden] { display: none !important; }

h1, h2, h3 {
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-stretch: 112%;
}

h1 {
  font-size: var(--step-4);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--step-3);
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--step-1);
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-stretch: 106%;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

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

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-s) var(--space-m);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-field);
  font-weight: 600;
}

.skip-link:focus { top: var(--space-s); outline-color: var(--signal); }

main:focus { outline: none; }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0.55rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 620;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.btn:active { transform: translateY(1px); }

.btn-lg { min-height: 3.25rem; padding: 0.8rem 1.6rem; font-size: 1.0625rem; }

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

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }


.btn-ghost-light { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.btn-ghost-light:hover { border-color: var(--ink); }

/* Kopfbereich */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(226, 233, 241, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(245, 247, 250, 0.97); }

.header-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--header-h);
  max-width: 86rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.wordmark {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.05;
}

.wordmark-name { font-size: 1.25rem; font-weight: 720; font-stretch: 118%; letter-spacing: -0.02em; }
.wordmark-unit { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }

.main-nav { display: flex; align-items: center; gap: var(--space-m); }

.nav-list {
  display: flex;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: var(--space-2xs);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.nav-list a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 540;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.nav-list a:hover { background: var(--ground-top); color: var(--ink); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.nav-actions { display: flex; align-items: center; gap: var(--space-s); }

@media (max-width: 84.99rem) {
  .menu-toggle { display: inline-flex; }
  .js .main-nav {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 0.25rem);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-s);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-float);
  }
  .js .main-nav:not(.is-open) { display: none; }
  .nav-list { flex-direction: column; border: 0; padding: 0; }
  .nav-list a { padding: 0.8rem 1rem; font-size: 1.0625rem; border-radius: var(--radius-field); }
  .nav-actions { flex-direction: column; align-items: stretch; gap: var(--space-xs); margin-top: var(--space-xs); }
  /* Ohne JavaScript: Navigation offen unter dem Kopf */
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: var(--space-s); }
  html:not(.js) .main-nav { width: 100%; flex-wrap: wrap; }
  html:not(.js) .nav-list { flex-direction: row; flex-wrap: wrap; }
}

/* Hero */

.hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--gutter) 0;
}

.hero-copy {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.lead {
  margin-top: var(--space-l);
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--muted);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}

.hero-stage {
  position: relative;
  margin-top: var(--space-2xl);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--gutter) clamp(1.25rem, 1rem + 1vw, 2rem);
  background:
    radial-gradient(60% 70% at 50% 45%, #FFFFFF 0, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #F9FBFD, #E8EEF5);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.region-map { margin: 0 auto; max-width: 64rem; }

.region-media { position: relative; }

.region-img {
  display: block;
  width: 100%;
  height: auto;
  /* Bildränder weich in das Panel auslaufen lassen */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.region-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fx-ring { fill: none; stroke: var(--signal); stroke-width: 3px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-spoke { fill: none; stroke: var(--signal); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 8 100; stroke-dashoffset: -92; opacity: 0; }
.fx-dot { fill: var(--signal); opacity: 0; transform-box: fill-box; transform-origin: center; }

.map-labels { list-style: none; margin: 0; padding: 0; }

.map-label {
  position: absolute;
  margin: 0;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 14px -8px rgba(10, 34, 64, 0.35);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 620;
  line-height: 1.3;
  white-space: nowrap;
}

.map-label--r { transform: translate(0.9rem, -50%); }
.map-label--l { transform: translate(calc(-100% - 0.9rem), -50%); }
.map-label--depot { left: 50%; top: 28%; transform: translate(-50%, -50%); background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 680; }
.map-label--havelberg { left: 38.09%; top: 25.00%; }
.map-label--kyritz { left: 65.53%; top: 26.22%; }
.map-label--nauen { left: 71.39%; top: 33.22%; }
.map-label--rathenow { left: 38.57%; top: 38.64%; }
.map-label--stendal { left: 23.93%; top: 43.71%; }
.map-label--berlin { left: 74.80%; top: 54.37%; }
.map-label--magdeburg { left: 28.32%; top: 63.29%; }
.map-label--genthin { left: 42.09%; top: 73.08%; }
.map-label--potsdam { left: 62.40%; top: 67.13%; }

.map-note {
  margin-top: var(--space-m);
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
}

.float-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  padding: var(--space-m) var(--space-l);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}

.float-card .icon { color: var(--ink); margin-bottom: var(--space-xs); }
.float-card-title { font-weight: 680; color: var(--ink); font-stretch: 108%; }
.float-card a { font-weight: 640; color: var(--ink); }
.float-card--terms { background: var(--ink); border-color: var(--ink); color: var(--on-ink-muted); }
.float-card--terms .float-card-title { color: var(--on-ink); }
.mini-stack { width: 7.5rem; height: auto; margin-bottom: var(--space-xs); overflow: visible; }

@media (min-width: 64rem) {
  .hero-stage { min-height: 38rem; }
  .float-card { position: absolute; max-width: 16.5rem; }
  .float-card--place { left: clamp(1.5rem, 4vw, 4rem); top: 14%; }
  .float-card--stack { left: clamp(2.5rem, 6vw, 6rem); bottom: 12%; max-width: 14rem; }
  .float-card--call { right: clamp(1.5rem, 4vw, 4rem); top: 12%; }
  .float-card--terms { right: clamp(2.5rem, 6vw, 6rem); bottom: 16%; max-width: 15rem; }
}

@media (max-width: 63.99rem) {
  .hero-stage { display: grid; gap: var(--space-m); }
  .float-card { max-width: none; }
}

@media (max-width: 37.49rem) {
  /* Leerer Bildrand darf seitlich weg, damit die Karte größer wird */
  .region-media { width: 122%; margin-left: -11%; }
  .map-label { font-size: 0.6875rem; padding: 0.1rem 0.45rem; }
  .map-label--minor { display: none; }
  .map-label--r { transform: translate(0.45rem, -50%); }
  .map-label--l { transform: translate(calc(-100% - 0.45rem), -50%); }
}

/* Abschnitte */

.section { padding: var(--space-section) 0 0; }

.section-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-lead {
  margin-top: var(--space-m);
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--muted);
}

/* Abschnittskopf wie in der Referenz: zentriert */

.section-head { max-width: 46rem; margin: 0 auto; text-align: center; }
.section-head .section-lead { margin-left: auto; margin-right: auto; }

/* Bildgruppe: Regal in der Mitte, Fakten schweben darum */

.showcase-stage {
  position: relative;
  margin-top: var(--space-xl);
  padding: clamp(1.5rem, 1rem + 3vw, 4rem) var(--gutter);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(55% 60% at 50% 50%, #FFFFFF 0, rgba(255, 255, 255, 0) 75%),
    linear-gradient(180deg, #EDF2F7, #E2E9F1);
  overflow: hidden;
}

.showcase-rack {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}

.rack-svg { width: 100%; height: auto; overflow: visible; }
.rack-frame rect { fill: var(--ink); }
.rack-beam rect { fill: #9FB0C4; }
.rack-free circle { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.rack-caption { margin-top: var(--space-s); text-align: center; font-size: var(--step--1); color: var(--muted); }

.fact-cards { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; gap: var(--space-s); }

.fact-card {
  padding: var(--space-m) var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.45;
}

.fact-card strong { display: block; color: var(--ink); font-size: 1.0625rem; font-weight: 680; font-stretch: 108%; }
.fact-card--d { background: var(--ink); border-color: var(--ink); color: var(--on-ink-muted); }
.fact-card--d strong { color: var(--on-ink); }

@media (min-width: 64rem) {
  .showcase-stage { min-height: 34rem; display: grid; place-items: center; }
  .fact-cards { margin: 0; }
  .fact-card { position: absolute; max-width: 15rem; }
  .fact-card--a { left: 4%; top: 14%; }
  .fact-card--b { left: 7%; bottom: 14%; }
  .fact-card--c { right: 4%; top: 18%; }
  .fact-card--d { right: 7%; bottom: 12%; }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .fact-cards { grid-template-columns: 1fr 1fr; }
}

/* Drei Vorteile mit Bild */

.features {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xl) var(--space-l);
}

@media (min-width: 56rem) {
  .features { grid-template-columns: repeat(3, 1fr); }
}

.feature { display: flex; flex-direction: column; }
.feature h3 { font-size: 1.25rem; }
.feature > p { margin-top: var(--space-xs); color: var(--muted); }

.feature-art {
  margin-top: var(--space-l);
  padding: var(--space-m);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 25% 100%,
    #F2F5F9;
  background-blend-mode: normal;
  overflow: hidden;
}

.feature-art svg { width: 100%; height: 100%; overflow: visible; }

/* Werkstatt */
.ws-house { fill: #F7F9FB; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.ws-door { fill: var(--ground-top); stroke: var(--ink); stroke-width: 2; }
.ws-lift rect { fill: #9FB0C4; }
.ws-free rect { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ws-free text { fill: var(--ink); font-size: 11px; font-weight: 680; }
.ws-arrow path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Fächerregal */
.grid-frame { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.grid-lines { fill: none; stroke: #9FB0C4; stroke-width: 2.5; }
.grid-empty { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }

/* Region */
.rg-map { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.rg-ring { fill: none; stroke: #B7C3D2; stroke-width: 1.2; stroke-dasharray: 3 4; }
.rg-river { fill: none; stroke: #C9D7E6; stroke-width: 5; stroke-linecap: round; }
.rg-pin path { fill: var(--ink); }
.rg-pin circle { fill: var(--signal); }
.rg-shadow { fill: rgba(10, 34, 64, 0.18); }
.rg-card rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.rg-phone { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.rg-wave { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

.open-note {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
}

.open-note h3 { font-size: 1.0625rem; margin-bottom: var(--space-xs); }
.open-note p { color: var(--muted); max-width: 46rem; }

/* Ablauf */

.steps {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-l);
  position: relative;
}

@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); text-align: center; }
  .steps::before {
    content: "";
    position: absolute;
    left: calc((100% - 2 * var(--space-xl)) / 6);
    right: calc((100% - 2 * var(--space-xl)) / 6);
    top: 1.6rem;
    border-top: 2px dashed var(--line-strong);
    transform-origin: left center;
  }
  .step-no { margin-left: auto; margin-right: auto; }
  .step p { margin-left: auto; margin-right: auto; }
}

.step { position: relative; }

.step-no {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: var(--space-m);
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 1.25rem;
  font-weight: 720;
  font-stretch: 118%;
  box-shadow: 0 0 0 6px var(--ground);
}

.step h3 { margin-bottom: var(--space-xs); }
.step p { color: var(--muted); max-width: 22rem; }

/* Zielgruppen als aufgefächerte Karten */

.fan {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40rem) {
  .fan { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .fan { grid-template-columns: repeat(4, 1fr); gap: 0; padding: var(--space-l) 0; }
  .fan-card { margin: 0 -0.5rem; }
  .fan-card:nth-child(1) { --fan-r: -4deg; --fan-y: 1.5rem; }
  .fan-card:nth-child(2) { --fan-r: -1.5deg; --fan-y: 0rem; }
  .fan-card:nth-child(3) { --fan-r: 1.5deg; --fan-y: 0rem; }
  .fan-card:nth-child(4) { --fan-r: 4deg; --fan-y: 1.5rem; }
  .fan-card { transform: translateY(var(--fan-y)) rotate(var(--fan-r)); }
  .fan-card:hover, .fan-card:focus-within { transform: translateY(-0.5rem) rotate(0deg); z-index: 2; }
}

.fan-card {
  position: relative;
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  transition: transform 260ms var(--ease-out);
}

.fan-art { width: 100%; height: auto; margin-bottom: var(--space-m); border-radius: 12px; background: #F2F5F9; }
.fan-card h3 { font-size: 1.1875rem; }
.fan-card p { margin-top: var(--space-xs); color: var(--muted); font-size: 0.9875rem; }

.ill-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ill-soft { fill: #FFFFFF; }
.ill-glass, .ill-glass path { fill: #C9D7E6; }
.ill-car { fill: var(--ink); }
.ill-dark { fill: var(--ink); }
.ill-mid { fill: #9FB0C4; }
.ill-van path { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }

.private-note {
  margin: var(--space-2xl) auto 0;
  display: grid;
  gap: var(--space-xs);
  max-width: 44rem;
  padding: var(--space-l);
  border-radius: var(--radius-card);
  background: var(--ground-top);
  text-align: center;
}

.private-note h3 { font-size: 1.0625rem; }
.private-note p { color: var(--text); }

/* Standort */

.region-grid { display: grid; gap: var(--space-xl) var(--space-2xl); }

@media (min-width: 56rem) {
  .region-grid { grid-template-columns: 7fr 5fr; align-items: start; }
}

.address-block {
  margin-top: var(--space-xl);
  font-style: normal;
  line-height: 1.6;
  color: var(--text);
}

.address-block strong { color: var(--ink); font-weight: 680; }

.contact-lines { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; gap: var(--space-s); }
.contact-lines li { display: flex; align-items: center; gap: var(--space-s); }
.contact-lines .icon { color: var(--ink); }
.contact-lines a { color: var(--ink); font-weight: 600; }

.distance-panel {
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.distance-note { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--muted); }

.distance-table { width: 100%; margin-top: var(--space-m); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.distance-table th, .distance-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.distance-table thead th { font-size: var(--step--1); color: var(--muted); font-weight: 560; }
.distance-table td, .distance-table thead th:last-child { text-align: right; }
.distance-table tbody th { color: var(--text); }
.distance-table td { color: var(--ink); font-weight: 600; }

/* FAQ */

.faq-grid { display: grid; gap: var(--space-xl) var(--space-2xl); }

@media (min-width: 56rem) {
  .faq-grid { grid-template-columns: 4fr 8fr; }
}

.faq-list { border-top: 1px solid var(--line); }

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  position: relative;
  display: block;
  padding: var(--space-l) 3rem var(--space-l) 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-fast) ease;
}

.faq-list details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-list summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.faq-list details p { padding: 0 0 var(--space-l); color: var(--muted); max-width: 42rem; }

/* Anfrage: Abschluss-Panel wie in der Referenz */

.request { padding-bottom: var(--space-section); }

.request-panel {
  position: relative;
  max-width: calc(var(--content) - 2 * var(--gutter));
  margin: 0 var(--gutter);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1rem, 0.5rem + 3vw, 4rem);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(50% 45% at 50% 0%, #FFFFFF 0, rgba(255, 255, 255, 0) 80%),
    linear-gradient(180deg, #E8EEF5 0%, #DCE5EF 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}

@media (min-width: 75rem) {
  .request-panel { margin: 0 auto; }
}

.cta-deco { position: absolute; pointer-events: none; overflow: visible; }
.cta-deco--wheel { width: clamp(4.5rem, 8vw, 7.5rem); left: clamp(-1rem, 2vw, 3rem); top: clamp(1rem, 3vw, 3rem); }
.cta-deco--stack { width: clamp(6rem, 11vw, 10rem); right: clamp(-1.5rem, 2vw, 3rem); top: clamp(2rem, 5vw, 5rem); }

@media (max-width: 47.99rem) {
  .cta-deco { display: none; }
}

.request-head { position: relative; max-width: 44rem; margin: 0 auto; text-align: center; }
.request-head > p { margin-top: var(--space-m); font-size: 1.125rem; color: var(--muted); }

.chips-label { margin-top: var(--space-l); font-weight: 600; color: var(--ink); }

.check-chips {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

.check-chips li {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 560;
}

.request-body {
  position: relative;
  max-width: 62rem;
  margin: var(--space-xl) auto 0;
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

@media (min-width: 60rem) {
  .request-body { grid-template-columns: 1fr 15rem; }
}

.request-direct {
  --focus: var(--signal);
  padding: var(--space-l);
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--on-ink-muted);
  display: grid;
  gap: var(--space-s);
}

.request-direct h3 { color: var(--on-ink); font-size: 1.0625rem; }
.request-direct a { color: var(--on-ink); font-weight: 600; }

.request-form {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  display: grid;
  gap: var(--space-l);
  align-content: start;
}

.demo-flag {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-field);
  background: #FFF6CC;
  border: 1px solid #E8C200;
  color: var(--ink);
  font-size: 0.9375rem;
}

.field { display: grid; gap: var(--space-xs); align-content: start; }

.field-row { display: grid; gap: var(--space-l); }

@media (min-width: 36rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

label { font-weight: 600; color: var(--ink); font-size: 0.9875rem; }
.req, .opt { font-weight: 400; color: var(--muted); font-size: 0.875rem; }

input, textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  caret-color: var(--ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

textarea { resize: vertical; min-height: 7rem; }

input:hover, textarea:hover { border-color: var(--muted); }

input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--signal), 0 0 0 4.5px var(--ink);
}

input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); background: var(--error-ground); }

.field-help { font-size: var(--step--1); color: var(--muted); }
.field-error { font-size: 0.9375rem; color: var(--error); font-weight: 600; }

.error-summary {
  padding: var(--space-m) var(--space-l);
  border: 2px solid var(--error);
  border-radius: var(--radius-field);
  background: var(--error-ground);
}

.error-summary h3 { color: var(--error); font-size: 1.0625rem; }
.error-summary ul { margin: var(--space-xs) 0 0; padding-left: 1.2rem; }
.error-summary a { color: var(--error); font-weight: 600; }

.form-privacy { font-size: 0.9375rem; color: var(--muted); max-width: 40rem; }

.form-submit { justify-self: start; }

.form-result {
  padding: var(--space-l);
  border-radius: var(--radius-card);
  background: #FFF6CC;
  border: 1px solid #E8C200;
  display: grid;
  gap: var(--space-xs);
}

.form-result h3 { font-size: 1.125rem; }
.form-result-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-xs); }

/* Fuß */

.site-footer {
  --focus: var(--signal);
  background: var(--ink);
  color: var(--on-ink-muted);
  overflow: hidden;
}

.footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-2xl) var(--gutter) 0;
}

.footer-cols { display: grid; gap: var(--space-l); font-size: 0.9375rem; }

@media (min-width: 48rem) {
  .footer-cols { grid-template-columns: 1fr 1fr auto; }
}

.footer-company strong { color: var(--on-ink); }
.site-footer a { color: var(--on-ink); }

/* Mindesthöhe für Tipp-Ziele außerhalb von Fließtext */
.site-footer a,
.request-direct a,
.page-legal li a,
.float-card a { display: inline-block; min-height: 1.5rem; }

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }

.footer-mark {
  margin: var(--space-2xl) 0 -0.24em;
  font-size: min(10.4vw, 10rem);
  font-weight: 760;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: #15335D;
  user-select: none;
}

/* Unterseiten */

.page-legal { max-width: 46rem; margin: 0 auto; padding: var(--space-2xl) var(--gutter) var(--space-section); }
.page-legal h1 { font-size: var(--step-3); }
.page-legal h2 { font-size: var(--step-2); margin-top: var(--space-xl); }
.page-legal p, .page-legal ul { margin-top: var(--space-m); }
.legal-blocker {
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: 2px solid var(--error);
  border-radius: var(--radius-field);
  background: var(--error-ground);
  color: var(--ink);
}

/* Bewegung
   Beim Laden: Ortsnamen erscheinen, Orte blinken auf, Lichtpunkte laufen zum Lager, Ringe pulsieren dreimal, Karten schweben herein.
   Beim Scrollen: Bilder spielen einmal ab, sobald sie sichtbar werden; Karten verschieben sich leicht (Parallaxe).
   Nichts läuft endlos; bei reduzierter Bewegung steht alles im Endzustand. */

@media (prefers-reduced-motion: no-preference) {
  .fx-ring { animation: ring-pulse 2.8s 0.8s ease-out 3 both; }
  .fx-ring--2 { animation-delay: 1.75s; }
  .fx-ring--3 { animation-delay: 2.7s; }
  .fx-dot { animation: dot-flash 0.9s calc(0.5s + var(--i) * 0.1s) ease-out both; }
  .fx-spoke { animation: spoke-run 1.5s calc(1.4s + var(--i) * 0.14s) ease-in 2 both; }
  .map-label { animation: fade-in 0.5s calc(0.5s + var(--i) * 0.08s) var(--ease-out) both; }
  .map-label--depot { animation: card-in 0.7s 0.3s var(--ease-out) both; }
  .js .float-card {
    animation: card-in 0.9s calc(0.5s + var(--i) * 0.15s) var(--ease-out) both;
  }
  .js .mini-stack .drop {
    animation: drop-in 0.6s calc(1.2s + var(--i) * 0.22s) cubic-bezier(0.34, 1.4, 0.64, 1) both;
  }
  .js [data-parallax] { will-change: transform; }

  .js .roll { transform-box: fill-box; transform-origin: center; animation: roll-in 0.9s calc(var(--i) * 0.07s) var(--ease-out) both; }
  .js .pop { transform-box: fill-box; transform-origin: center; animation: pop-in 0.5s calc(0.2s + var(--i) * 0.08s) cubic-bezier(0.34, 1.5, 0.64, 1) both; }
  .js .ws-stack { animation: ws-out 1.4s 0.4s var(--ease-out) both; }
  .js .ws-free { animation: fade-in 0.6s 1.5s var(--ease-out) both; }
  .js .ws-arrow { animation: arrow-in 0.8s 0.9s var(--ease-out) both; }
  .js .rg-pin { animation: pin-drop 0.8s 0.2s cubic-bezier(0.34, 1.5, 0.64, 1) both; }
  .js .rg-wave { animation: wave 1.2s calc(1s + var(--i) * 0.2s) ease-out 3 both; }
  .js .process .step { animation: rise-in 0.7s calc(var(--i) * 0.18s) var(--ease-out) both; }
  .js .audience .fan-card { animation: fan-in 0.8s calc(var(--i) * 0.12s) var(--ease-out) both; }
  .js .cta-deco--wheel { transform-box: fill-box; animation: cta-roll 1.4s var(--ease-out) both; }
  .js .cta-deco--stack { animation: rise-in 1s 0.2s var(--ease-out) both; }

  /* Szenen, die beim Sichtbarwerden einmal abspielen */
  .js [data-animate] .roll,
  .js [data-animate] .pop,
  .js [data-animate] .ws-stack,
  .js [data-animate] .ws-free,
  .js [data-animate] .ws-arrow,
  .js [data-animate] .rg-pin,
  .js [data-animate] .rg-wave,
  .js [data-animate] .step,
  .js [data-animate] .fan-card,
  .js [data-animate] .cta-deco { animation-play-state: paused; }
  .js [data-animate].is-in .roll,
  .js [data-animate].is-in .pop,
  .js [data-animate].is-in .ws-stack,
  .js [data-animate].is-in .ws-free,
  .js [data-animate].is-in .ws-arrow,
  .js [data-animate].is-in .rg-pin,
  .js [data-animate].is-in .rg-wave,
  .js [data-animate].is-in .step,
  .js [data-animate].is-in .fan-card,
  .js [data-animate].is-in .cta-deco { animation-play-state: running; }
}

@keyframes ring-pulse {
  0% { opacity: 0.95; transform: scale(0.1); }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes dot-flash {
  0% { opacity: 0; transform: scale(0.3); }
  55% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes spoke-run {
  0% { stroke-dashoffset: -92; opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

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

@keyframes card-in {
  from { opacity: 0; translate: 0 1.5rem; scale: 0.96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-36px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes roll-in {
  from { opacity: 0; transform: translateX(240px) rotate(330deg); }
  30% { opacity: 1; }
  to { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ws-out {
  0% { transform: translateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateX(150px); opacity: 0; }
}

@keyframes arrow-in {
  0% { opacity: 0; transform: translateX(-20px); }
  40% { opacity: 1; }
  100% { opacity: 0.25; transform: translateX(10px); }
}

@keyframes pin-drop {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wave {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; translate: 0 1.5rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fan-in {
  from { opacity: 0; translate: 0 2.5rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes cta-roll {
  from { opacity: 0; transform: translateX(-120px) rotate(-300deg); }
  to { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Desktop: Pillen-Navigation exakt in der Mitte, Wortmarke links, Knöpfe rechts */
@media (min-width: 85rem) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .main-nav { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; }
  .nav-actions { justify-self: end; }
}

/* Kundenportal */

.portal-shot { margin: var(--space-xl) 0 0; }

.browser-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.browser-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}

.browser-bar span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line-strong); }

.browser-frame img { width: 100%; height: auto; }
.swipe-hint { display: none; }

@media (max-width: 40rem) {
  .shot-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .shot-scroll img { width: 45rem; max-width: none; }
  .swipe-hint { display: inline; }
}

.portal-shot figcaption,
.portal-label figcaption { margin-top: var(--space-s); text-align: center; font-size: var(--step--1); color: var(--muted); }

.portal-grid {
  margin-top: var(--space-2xl);
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  align-items: center;
}

@media (min-width: 56rem) {
  .portal-grid { grid-template-columns: 7fr 5fr; }
}

.portal-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.portal-points li { padding: var(--space-m) 0 var(--space-m) 2.25rem; border-bottom: 1px solid var(--line); color: var(--muted); position: relative; }
.portal-points li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 1.2rem;
  width: 0.55rem;
  height: 0.95rem;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(40deg);
}
.portal-points strong { color: var(--ink); font-weight: 650; }

.portal-label { margin: 0; }
.portal-label img {
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}

.portal-note { margin-top: var(--space-xl); text-align: center; color: var(--text); }
.portal-note a { color: var(--ink); font-weight: 640; }

@media (prefers-reduced-motion: no-preference) {
  .js .portal .browser-frame { animation: rise-in 0.9s var(--ease-out) both; animation-play-state: paused; }
  .js .portal .portal-label img { animation: label-in 0.8s 0.3s var(--ease-out) both; animation-play-state: paused; }
  .js .portal.is-in .browser-frame,
  .js .portal.is-in .portal-label img { animation-play-state: running; }
}

@keyframes label-in {
  from { opacity: 0; transform: rotate(-3deg) translateY(1.5rem); }
  to { opacity: 1; transform: rotate(0deg) translateY(0); }
}

/* Reihenfolge der Einblendungen */
.float-card--place { --i: 0; }
.float-card--stack { --i: 1; }
.float-card--call { --i: 2; }
.float-card--terms { --i: 3; }
.step:nth-child(2), .fan-card:nth-child(2) { --i: 1; }
.step:nth-child(3), .fan-card:nth-child(3) { --i: 2; }
.fan-card:nth-child(4) { --i: 3; }
.step:nth-child(1), .fan-card:nth-child(1) { --i: 0; }

/* Unterseite Kundenportal */

.nav-list a[aria-current="page"] { background: var(--ink); color: var(--on-ink); }

.portal-hero .hero-copy { margin-bottom: var(--space-xl); }

.login-card {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: grid;
  gap: var(--space-m);
  justify-items: center;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-float);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.login-title { font-size: var(--step-2); }
.login-card > p:not(.demo-flag) { color: var(--muted); }
.login-button { min-width: 15rem; }
.login-card .demo-flag { font-size: 0.875rem; text-align: left; }
.login-help { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); font-size: 0.9375rem; color: var(--muted); }
.login-help a { color: var(--ink); font-weight: 600; white-space: nowrap; }

.portal-shot--hero { margin-top: var(--space-2xl); }

.portal-actions { margin-top: var(--space-l); }

@media (min-width: 56rem) {
  .steps--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-l); }
  .steps--4::before {
    left: calc((100% - 3 * var(--space-l)) / 8);
    right: calc((100% - 3 * var(--space-l)) / 8);
  }
}

.print-scene {
  margin-top: var(--space-xl);
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(60% 70% at 50% 40%, #FFFFFF 0, rgba(255, 255, 255, 0) 75%),
    linear-gradient(180deg, #EDF2F7, #E2E9F1);
}

.print-scene svg { width: 100%; max-width: 46rem; height: auto; margin: 0 auto; overflow: visible; }
.printer-body { fill: var(--ink); }
.printer-top { fill: #163563; }
.printer-slot { fill: #05162B; }
.printer-led { fill: var(--signal); }
.printer-btn { fill: #2B4670; }
.tie path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }

.access-list {
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: 0 var(--space-2xl);
  border-top: 1px solid var(--line);
}

@media (min-width: 48rem) {
  .access-list { grid-template-columns: 1fr 1fr; }
}

.access-list > div { padding: var(--space-l) 0; border-bottom: 1px solid var(--line); }
.access-list dt { font-size: var(--step-1); font-weight: 640; font-stretch: 106%; color: var(--ink); }
.access-list dd { margin: var(--space-xs) 0 0; color: var(--muted); max-width: 30rem; }

.request-panel--short .request-head { padding-block: var(--space-m); }

@media (prefers-reduced-motion: no-preference) {
  .js .labels .lbl { transform-box: fill-box; transform-origin: center; animation: label-print 0.7s calc(0.9s + var(--i) * 0.35s) var(--ease-out) both; animation-play-state: paused; }
  .js .labels .tie { animation: fade-in 0.5s 2.6s var(--ease-out) both; animation-play-state: paused; }
  .js .labels.is-in .lbl,
  .js .labels.is-in .tie { animation-play-state: running; }
}

@keyframes label-print {
  from { opacity: 0; transform: translateX(calc(var(--dx) * -1)) scale(0.5); }
  35% { opacity: 1; }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Reihenfolge der Ortsanimation */
.fx-dot:nth-of-type(1), .fx-spoke:nth-of-type(1), .map-labels .map-label:nth-child(1) { --i: 0; }
.fx-dot:nth-of-type(2), .fx-spoke:nth-of-type(2), .map-labels .map-label:nth-child(2) { --i: 1; }
.fx-dot:nth-of-type(3), .fx-spoke:nth-of-type(3), .map-labels .map-label:nth-child(3) { --i: 2; }
.fx-dot:nth-of-type(4), .fx-spoke:nth-of-type(4), .map-labels .map-label:nth-child(4) { --i: 3; }
.fx-dot:nth-of-type(5), .fx-spoke:nth-of-type(5), .map-labels .map-label:nth-child(5) { --i: 4; }
.fx-dot:nth-of-type(6), .fx-spoke:nth-of-type(6), .map-labels .map-label:nth-child(6) { --i: 5; }
.fx-dot:nth-of-type(7), .fx-spoke:nth-of-type(7), .map-labels .map-label:nth-child(7) { --i: 6; }
.fx-dot:nth-of-type(8), .fx-spoke:nth-of-type(8), .map-labels .map-label:nth-child(8) { --i: 7; }
.fx-dot:nth-of-type(9), .fx-spoke:nth-of-type(9), .map-labels .map-label:nth-child(9) { --i: 8; }