/* ============================================================
   KMS – Startseiten-Effekte
   1 Kennzahlen mit Rollzähler   2 Trennlinien ziehen sich wie Draht
   3 Leistungs-Symbole zeichnen sich   4 Überschrift wird eingestanzt
   Alle Effekte laufen einmal. Bei "Bewegung reduzieren" und bei
   "Animationen anhalten" (Barrierefreiheits-Menü) sofort Endzustand.
   Hinweis: Die Seite arbeitet mit Inline-Styles, daher teils !important.
   ============================================================ */

/* ---------- 4 Überschrift wird eingestanzt (reines CSS) ---------- */
h1[data-stamp] .kms-hl {
  display: block;
  overflow: hidden;
  padding-top: 0.16em; margin-top: -0.16em;          /* Platz für Umlaut-Punkte */
  padding-bottom: 0.05em; margin-bottom: -0.05em;
}
h1[data-stamp] .kms-hl > span {
  display: inline-block;
  animation: kmsStanzen 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) 0.1s both;
}
h1[data-stamp] .kms-hl + .kms-hl > span { animation-delay: 0.24s; }
h1[data-stamp] .kms-hl-punkt {
  display: inline-block;
  animation: kmsPunkt 0.42s cubic-bezier(0.25, 0.8, 0.3, 1) 0.95s both;
}
@keyframes kmsStanzen { from { transform: translateY(108%); } to { transform: none; } }
@keyframes kmsPunkt   { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }

/* ---------- 1 Kennzahlen ---------- */
.kms-stat-num { font-variant-numeric: lining-nums; }
.kms-odo-zahl { display: inline-flex; align-items: flex-end; }
.kms-odo {
  position: relative; display: inline-block; overflow: hidden;
  height: 1.1em; line-height: 1.1em; vertical-align: bottom;
}
.kms-odo-platz { visibility: hidden; }
.kms-odo-band {
  position: absolute; left: 0; right: 0; top: 0; text-align: center;
  transform: translateY(0);
}
.kms-odo-band > span { display: block; height: 1.1em; line-height: 1.1em; }
.kms-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 760px) {
  .kms-stats { grid-template-columns: 1fr !important; }
  .kms-stat { border-right: 0 !important; border-bottom: 1px solid #101418; padding: 32px 24px !important; }
  .kms-stat:last-child { border-bottom: 0; }
}

/* ---------- 2 Trennlinien wie Draht vom Coil ---------- */
.kms-draht {                       /* volle Breite = Auslöser für den Sichtbarkeits-Beobachter */
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none; z-index: 3;
}
.kms-draht::before {               /* die Linie selbst */
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 1px;
  background: #101418;
  transition: width 1.35s cubic-bezier(0.6, 0, 0.25, 1);
}
.kms-draht::after {                /* Drahtende, läuft vorneweg und verblasst */
  content: ""; position: absolute; top: -1px; left: -22px; width: 22px; height: 3px;
  background: #1e3a8a; opacity: 0;
  transition: left 1.35s cubic-bezier(0.6, 0, 0.25, 1);
}
.kms-draht.kms-draht-an::before { width: 100%; }
.kms-draht.kms-draht-an::after { left: calc(100% - 20px); animation: kmsDrahtende 1.6s ease both; }
@keyframes kmsDrahtende { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 3 Leistungs-Symbole ---------- */
.kms-ico {
  width: 34px; height: 34px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.kms-ico-warte path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kms-ico-warte.kms-ico-an path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.25s cubic-bezier(0.45, 0, 0.2, 1);
}
@media (max-width: 760px) { .kms-ico { width: 28px; height: 28px; } }