/* =============================================================================
   E-S-P · Design-Pass (Creative-Director-Durchgang)
   Lädt nach dem Polish-Block in index.html und gewinnt daher bei gleicher
   Spezifität. Layout und Raster der Vorlage bleiben unangetastet; korrigiert
   werden Träger, Zustände, Farbführung und Bildfassung.
   ========================================================================== */

:root {
  /* Höhe der Kopfleiste. Logo-Kachel (48px) und Menüzeile (54px) liegen darin;
     im gescrollten Zustand rückt der Fuß auf 88px hoch, ohne sie zu schneiden. */
  --esp-nav-band: 6rem;
  --esp-nav-band-scrolled: 5.5rem;
  --esp-ease: cubic-bezier(0.21, 1, 0.34, 1);
}

/* Ankersprünge enden unterhalb der Kopfleiste statt darunter zu verschwinden. */
html {
  scroll-padding-top: calc(var(--esp-nav-band) + 1rem);
}

/* ---------------------------------------------------------------------------
   D1. Kopfleiste: durchgehendes Band statt zwei schwebender Inseln
   Vorher lagen Logo-Kachel und Menü-Pille frei über dem Inhalt. Beim Scrollen
   lief Fließtext dahinter durch und war stellenweise unlesbar, das Logo
   verdeckte eine Zwischenzeile. Ein Band trägt beide Elemente und trennt
   Navigation sauber vom Inhalt.
   -------------------------------------------------------------------------- */
.esp-nav-band {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--esp-nav-band);
  background-color: var(--esp-blue-900);
  border-bottom: 1px solid color-mix(in oklch, var(--esp-white) 14%, transparent);
  pointer-events: none;
  /* Über jedem Seiteninhalt, unter den beiden Navigations-Wrappern (1000/1001). */
  z-index: 999;
  transition:
    height 240ms var(--esp-ease),
    box-shadow 240ms ease,
    transform 320ms var(--esp-ease),
    opacity 240ms ease;
}

[data-nav-scrolled="true"] .esp-nav-band {
  height: var(--esp-nav-band-scrolled);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--esp-blue-900) 34%, transparent);
}

/* Im Footer zieht sich das Band mit der Leiste zurück. */
[data-nav-hidden="true"] .esp-nav-band {
  opacity: 0;
  transform: translateY(-100%);
}

/* Scroll-Fortschritt als 2px-Kante am Bandfuß — die einzige rote Linie oben. */
.esp-nav-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--esp-red);
  transform: scaleX(var(--esp-scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* Menüzeile trägt keinen eigenen Grund mehr — sie sitzt auf dem Band. */
.nav-component .nav_menu-wrapper {
  background-color: transparent;
  box-shadow: none;
  border-color: transparent;
}

[data-nav-scrolled="true"] .nav-component .nav_menu-wrapper {
  box-shadow: none;
  border-color: transparent;
}

/* Logo: ruhige Trägerfläche ohne Schlagschatten, vertikal auf die Zeile
   ausgerichtet. Die Bildmarke hat einen weißen Grund, deshalb bleibt die
   helle Kachel — sie liest nun als Schild auf dem Band, nicht als Aufkleber. */
.nav-component .nav_brand {
  padding: 0.375rem 0.625rem;
  background-color: var(--esp-white);
  border-color: color-mix(in oklch, var(--esp-blue-900) 8%, transparent);
  box-shadow: none;
}

.nav-component .nav_brand:hover,
[data-nav-scrolled="true"] .nav-component .nav_brand {
  box-shadow: 0 6px 18px color-mix(in oklch, var(--esp-blue-900) 22%, transparent);
}

.nav-component .nav_brand:focus-visible {
  outline: 2px solid var(--esp-red);
  outline-offset: 3px;
}

/* Logo und Menüzeile auf eine Mittelachse: die Kachel reichte 18px unter das
   Band, die Fortschrittskante schnitt sie an. */
@media (min-width: 768px) {
  .nav-component .nav_brand {
    box-sizing: border-box;
    /* Die rem-Basis der Vorlage schrumpft mit der Viewportbreite (768px → 10.8px);
       ohne Pixeluntergrenze fiel die Kachel auf 33px. */
    height: max(3rem, 44px);
    display: inline-flex;
    align-items: center;
    /* Mittelachse der Kachel (48px) auf die der Menüzeile (54px) legen. */
    transform: translateY(-9px);
  }

  .nav-component .nav_brand:hover {
    transform: translateY(-10px);
  }

  .nav-component .nav_brand:active {
    transform: translateY(-9px);
  }
}

/* ---------------------------------------------------------------------------
   D2. Ein Aktivmarker statt drei
   Die Vorlage markierte den aktiven Anker mit Fläche, Rahmen und rotem
   Strich gleichzeitig — der Rahmen wirkte dabei wie ein Fokusring.
   Es bleibt der rote Strich; Hover erhält die Fläche.
   -------------------------------------------------------------------------- */
.nav-component .nav-link {
  padding-inline: 0.625rem;
  border-color: transparent;
  border-radius: 0.25rem;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.nav-component .nav-link.is-active {
  background-color: transparent;
  border-color: transparent;
}

.nav-component .nav-link::after {
  transform-origin: left center;
  transition: transform 200ms var(--esp-ease);
}

@media (hover: hover) {
  .nav-component .nav-link:hover {
    background-color: color-mix(in oklch, var(--esp-white) 12%, transparent);
  }
}

.nav-component .nav-link:focus-visible {
  outline: 2px solid var(--esp-red);
  outline-offset: 2px;
  background-color: color-mix(in oklch, var(--esp-white) 12%, transparent);
}

/* Handlungsaufforderung: helle Fläche auf blauem Band, Hover in Signalrot.
   Farben laufen ausschließlich über die Button-Variablen der Vorlage — der
   Ruhezustand wird dort vom text-shadow gezeichnet, nicht von der Textfarbe. */
@media (min-width: 768px) {
  .nav_menu-wrapper_button .button_main_wrap {
    --_button---primary--background: var(--esp-white);
    --_button---primary--text: var(--esp-blue-900);
    --_button---primary--background-hover: var(--esp-red);
    --_button---primary--text-hover: var(--esp-white);
    --_button---primary--border-radius: 0.25rem;
    border-color: transparent;
  }

  .nav_menu-wrapper_button .button_link:hover .button_main_wrap,
  .nav_menu-wrapper_button .button_link:focus-visible .button_main_wrap {
    background-color: var(--esp-red);
    border-color: transparent;
  }

  .nav_menu-wrapper_button .button_link:hover .button_svg,
  .nav_menu-wrapper_button .button_link:focus-visible .button_svg {
    color: var(--esp-white);
  }

  /* Roll-up der Vorlage stilllegen.
     Die Beschriftung liegt doppelt vor: der echte `.button_text` parkt per
     translateY(2em) unterhalb der Fläche, sichtbar ist im Ruhezustand nur sein
     text-shadow (0 -2em). Im Hover fährt beides gemeinsam nach oben — der
     Schatten aus der Fläche heraus, der echte Text in die Mitte. Da beide
     denselben Text tragen, liest sich der Wechsel als Sprung mit Dopplung
     statt als Effekt. In der Kopfleiste steht die Beschriftung deshalb still;
     den Zustandswechsel tragen Fläche, Textfarbe und Pfeil.
     Die Quelle setzt beide Werte nicht über eine Stylesheet-Regel, sondern
     zur Laufzeit — daher hier !important statt einer höheren Spezifität. */
  .nav_menu-wrapper_button .button_text {
    transform: none !important;
    text-shadow: none !important;
    color: var(--esp-blue-900);
    transition: color 180ms var(--esp-ease);
  }

  .nav_menu-wrapper_button .button_link:hover .button_text,
  .nav_menu-wrapper_button .button_link:focus-visible .button_text {
    color: var(--esp-white);
  }
}

.nav_menu-wrapper_button .button_link:focus-visible .button_main_wrap {
  outline: 2px solid var(--esp-white);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   D3. Headlines tragen die Marke
   Display-Größen standen in Neutralgrau und damit farblich neben der Seite.
   Auf hellen Flächen setzen sie jetzt in Stahlblau; auf dunklen Bahnen
   bleibt Weiß.
   -------------------------------------------------------------------------- */
.heading_text,
.text-style-quote-1 {
  color: var(--esp-blue-800);
}

.text-color-white .heading_text,
.background-color-black .heading_text,
.background-color-dark-grey .heading_text,
.background-color-grey-650 .heading_text,
.text-color-white .text-style-quote-1,
.background-color-black .text-style-quote-1 {
  color: var(--esp-white);
}

/* ---------------------------------------------------------------------------
   D4. Leistungsband unter dem Hero
   Fünf Leistungen standen dort als blasse Kapitälchen ohne Bezug. Sie sind
   die Kurzfassung des Angebots und dürfen das auch aussehen.
   -------------------------------------------------------------------------- */
.trusted-bar_service {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--esp-blue-800);
}

.trusted-bar_service::before {
  content: "";
  flex: none;
  width: 0.3125rem;
  height: 0.3125rem;
  background-color: var(--esp-red);
}

.trusted-bar_logo-item {
  transition: opacity 200ms ease;
}

@media (hover: hover) {
  .trusted-bar_logos-list:hover .trusted-bar_logo-item {
    opacity: 0.55;
  }

  .trusted-bar_logos-list .trusted-bar_logo-item:hover {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
   D5. Fotos: eine Fassung für alle Bildslots
   Die Aufnahmen saßen unterschiedlich tief im Blueprint-Rahmen und hoben
   sich kaum von der blauen Bahn ab. Einheitliche Kante, einheitlicher
   Bildausschnitt, einheitliche Hover-Bewegung.
   -------------------------------------------------------------------------- */
.service-card_lottie-wrapper .esp-service-photo {
  border-color: color-mix(in oklch, var(--esp-white) 28%, transparent);
  box-shadow: 0 18px 44px color-mix(in oklch, var(--esp-blue-900) 38%, transparent);
}

.esp-service-photo img {
  object-position: center;
  transition: transform 520ms var(--esp-ease);
}

@media (hover: hover) {
  .service-card_component:hover .esp-service-photo {
    border-color: color-mix(in oklch, var(--esp-white) 44%, transparent);
  }
}

/* Zitatbild: dunkler Verlauf nur im unteren Drittel, damit die Zuschreibung
   auf Bild sicher liest, ohne das Motiv zu überdecken.
   Wichtig: keine position-Deklaration am Wrapper — er ist in der Vorlage
   absolut positioniert und trägt das Vollbild. Ein `position: relative`
   darauf löste das Bild aus seiner Fläche und hinterließ Weiß. */
.home-testimonial_image-wrapper::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in oklch, var(--esp-blue-900) 72%, transparent)
  );
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   D6. Ablauf-Abschnitt: leere Bahn trägt den direkten Kontaktweg
   Links endete die Spalte nach der Handlungsaufforderung, rechts stand ein
   900px hohes Bild — dazwischen lag eine leere Bahn.
   -------------------------------------------------------------------------- */
.esp-direct-contact {
  display: grid;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in oklch, var(--esp-blue-900) 14%, transparent);
  max-width: 30rem;
}

.esp-direct-contact__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--esp-ink-soft);
}

.esp-direct-contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
}

.esp-direct-contact__link {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--esp-blue-800);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--esp-blue-800) 32%, transparent);
  padding-block: 0.375rem;
  transition:
    color 160ms ease,
    border-color 160ms ease;
}

@media (hover: hover) {
  .esp-direct-contact__link:hover {
    color: var(--esp-red);
    border-color: var(--esp-red);
  }
}

.esp-direct-contact__link:focus-visible {
  outline: 2px solid var(--esp-red);
  outline-offset: 3px;
}

.esp-direct-contact__note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--esp-ink-soft);
  max-width: 34ch;
}

/* Ornamentknoten auf den Trennlinien der Ablaufkarten: drei verschiedene
   Kreisformen ohne Bedeutung, die dritte ein durchgestrichener Kreis, der als
   Abbruchsymbol las. Die gesetzten Nummern 01–03 tragen die Struktur. */
.tab_content-line-wrapper svg {
  display: none;
}

/* ---------------------------------------------------------------------------
   D7. Footer: leere Rasterbahn trägt die Leistungsliste, Sitemap wird lesbar
   -------------------------------------------------------------------------- */
.esp-footer-services {
  display: grid;
  gap: 0.625rem;
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid color-mix(in oklch, var(--esp-white) 18%, transparent);
}

.esp-footer-services__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--esp-white) 70%, transparent);
}

.esp-footer-services__list {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esp-footer-services__list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  color: var(--esp-white);
}

.esp-footer-services__list li::before {
  content: "";
  flex: none;
  width: 0.25rem;
  height: 0.25rem;
  background-color: var(--esp-red);
}

.footer_links-stroke {
  opacity: 0.28;
}

/* ---------------------------------------------------------------------------
   D8. Ein Fokus- und Hover-System für alle Ziele
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--esp-red);
  outline-offset: 3px;
}

.background-color-black a:focus-visible,
.background-color-dark-grey a:focus-visible,
.section_footer a:focus-visible,
.background-color-black button:focus-visible {
  outline-color: var(--esp-white);
}

@media (hover: hover) {
  .footer-link,
  .footer-small-link {
    transition: opacity 160ms ease;
  }

  .footer-link:hover,
  .footer-small-link:hover {
    opacity: 0.72;
  }

  .accordion_toggle_button:hover {
    background-color: color-mix(in oklch, var(--esp-blue-800) 5%, transparent);
  }

  .cs-featured_item:hover .esp-service-index,
  .cs-featured_item:focus-within .esp-service-index {
    color: var(--esp-red);
  }
}

.accordion_toggle_button {
  transition: background-color 180ms ease;
}

/* ---------------------------------------------------------------------------
   D8b. Zielflächen: durchgehend mindestens 44px
   Die Vorlage skaliert ihre rem-Basis mit der Viewportbreite (bei 768px liegt
   sie bei 10.8px). Textlinks fielen dadurch auf 26–35px Höhe. Die Mindesthöhe
   steht deshalb in Pixeln, nicht in rem.
   -------------------------------------------------------------------------- */
/* Die Textvarianten der Vorlagen-Schaltflächen sind 35px hoch. Ihre Höhe wird
   an einer spezifischeren Stelle gesetzt, deshalb hier !important — begrenzt
   auf die Mindesthöhe, Fläche und Ausrichtung bleiben von der Vorlage. */
.button_link.w-inline-block,
a.button_link {
  align-items: center;
  min-height: 44px !important;
}

.esp-direct-contact__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.nav-component .nav-link.w-inline-block,
.nav-component .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: max(0.95rem, 15px);
}

/* Logo-Kachel und Footer-Wortmarke sind Links auf die Startseite. */
.nav-component .nav_brand,
.footer-brand {
  min-height: 44px;
}

/* Kontaktzeilen in Footer-Karte und Detailblöcken. */
.section_footer a.subtitle-2 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.25rem;
}

/* Auf Tablets stand die Hero-Textspalte auf drei von zwölf Rasterspalten —
   141px Satzbreite, rund 14 Zeichen pro Zeile. */
/* Webflow legt die Rasterposition über ID-Selektoren (`#w-node-…`) fest, die
   jede Klassenregel schlagen — daher hier ausnahmsweise !important. */
@media (max-width: 991px) {
  .home-hero_content {
    grid-column: span 8 / span 8 !important;
  }
}

/* Ab 992px stellt die Vorlage die Hero-Spalte auf `span 3` von 12 — das ergibt
   zwischen 992 und 1279px nur 40–84px Satzbreite: der Lead bricht in eine
   Wortkolonne und wird abgeschnitten. Erst ab 1280px trägt `span 3`. */
@media (min-width: 992px) and (max-width: 1279px) {
  .home-hero_content {
    grid-column: span 6 / span 6 !important;
  }
}

@media (max-width: 991px) {
  .footer-link,
  .footer-small-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .section_footer a.subtitle-2 {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   D9. Bewegung nur, wenn erwünscht
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .esp-nav-progress,
  .nav-component .nav_wrapper:not(.is-logo-desktop)::before,
  .esp-service-photo img,
  .nav-component .nav-link::after {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   D10. Kleine Displays: Band niedriger, Kontaktzeile umbruchsicher
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --esp-nav-band: 4.75rem;
    --esp-nav-band-scrolled: 4.25rem;
  }

  .esp-direct-contact__link {
    font-size: 1.0625rem;
    overflow-wrap: anywhere;
  }

  .esp-footer-services {
    margin-top: 1.75rem;
  }
}

/* Alarmanlagen-Karte: Sirene sitzt im oberen Bilddrittel — Fokus dorthin */
[data-od-id="service-photo-alarmanlagen"] img { object-position: 50% 22%; }


/* Leistungsband: zwischen 768 und 991 px setzt die Vorlage fünf starre Spalten
   à 123–150 px — „Brandmeldeanlagen" braucht 168 px und lief in den Nachbarn.
   Umbruchfähige Reihe statt Raster; darüber und darunter bleibt alles wie gehabt. */
@media (min-width: 768px) and (max-width: 991px) {
  .trusted-bar_logos-wrapper .trusted-bar_logos-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    column-gap: 1.75rem;
    row-gap: 0.75rem;
  }

  /* Die zweite Liste ist die Marquee-Kopie (aria-hidden). Steht die Laufschrift,
     erscheint sie als sichtbare Dopplung — in diesem Band ausblenden. */
  .trusted-bar_logos-wrapper .trusted-bar_logos-list[aria-hidden="true"] {
    display: none;
  }

  .trusted-bar_logos-wrapper .trusted-bar_logo-item {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    height: auto;
    padding-block: 0;
  }
}

/* ---------------------------------------------------------------------------
   D11. Hero: Ausrichtung, Präsenz, sofort lesbares Intro
   Befund, Zielwerte und Abnahmekriterien: hero-optimierung-plan.md (AP1–AP3)
   -------------------------------------------------------------------------- */

/* AP1 · Der rechte Textblock war an nichts ausgerichtet: er endete 46px vor der
   Containerkante, begann mit einem 5.7rem-Einzug aus der Vorlage (die eine
   längere Headline trug) und ließ 73px Leerraum unter sich stehen, während die
   Headline unten bündig saß. Jetzt: rechtsbündig an der Containerkante und auf
   gemeinsamer Unterkante mit der Headline. Satzbreite von 68 auf ~51 Zeichen. */
@media (min-width: 992px) {
  /* Webflow setzt die Rasterposition per ID-Selektor — daher ID plus Klasse. */
  #w-node-_15c1706d-8ae7-f4b2-9903-166c57885e79-5143d21a.home-hero_paragraph-wrapper {
    max-width: 38ch;
    padding-left: 0;
    justify-self: end;
    align-self: end;
    /* Optische Korrektur: Die Headline (line-height 1.06) trägt unter ihrer
       Grundlinie rund 0.17em Zeilenkasten, der Fließtext (line-height 1.5) nur
       0.39em seiner viel kleineren Schrift. Bündige Kästen ergäben 7px
       Grundlinienversatz — dieser Ausgleich setzt beide Grundlinien auf eine
       Linie. Skaliert mit der Root-Schriftgröße, gilt also bis 1920 gleich. */
    padding-bottom: 0.44em;
  }

  /* Der 8px-Spacer am Blockende säße unter dem Text und würde ihn über die
     gemeinsame Unterkante schieben. */
  .section_home-hero .home-hero_paragraph-wrapper > .spacer {
    display: none;
  }
}

/* AP2 · Das weiße Band trug den Hauptclaim auf 186px Höhe — rund ein Fünftel
   des Viewports. Größerer Headline-Satz plus Weißraum ober- und unterhalb;
   die Containerbreite (85rem) bleibt unangetastet, damit keine Kante zu den
   Folgesektionen entsteht. */
@media (min-width: 1280px) {
  .section_home-hero {
    padding-top: 5.5rem;
  }

  /* Bei 1280px ist die Headline durch die kleinere Schriftgröße 18px flacher
     als bei 1440px — das weiße Band blieb dort mit 288px unter der Zielhöhe.
     Je 0.5rem oben und unten hebt es über 300px, ohne die Balance zwischen
     Abstand zur Navigation und Abschluss zum dunklen Band zu kippen. */
  .section_home-hero > .spacer:first-child {
    height: 5rem !important;
  }

  .section_home-hero > .spacer[sp-d="40"] {
    height: 5rem !important;
  }

  /* 13ch bleibt der Umbruchschutz: „Elektro. Sicherheit." passt in Zeile eins,
     „… Klar" nicht mehr — der Zweizeiler ist damit über alle Breiten stabil. */
  .section_home-hero .heading_text[data-od-id="hero-heading"],
  .section_home-hero h1.heading_text {
    font-size: clamp(4.25rem, 5.6vw, 5rem);
    line-height: 1.06;
  }
}

/* AP3 · Der Scroll-Reveal (assets/original/inline-05.js) setzt oberhalb 992px
   alle sa-*-Elemente auf opacity:0 und startet erst nach document.fonts.ready
   — ohne Timeout. Der Hero war dadurch erst nach rund 900ms vollständig
   lesbar. Die vier Hero-Knoten sind jetzt per sa-*="none" aus der Engine
   ausgeklinkt und bekommen ein eigenes Intro: reines CSS, kein Schrift-Gate,
   kein SplitText-Reflow, läuft auch ohne JavaScript. */
@keyframes esp-hero-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

.section_home-hero .heading_text[data-od-id="hero-heading"],
.section_home-hero .home-hero_paragraph-wrapper .paragraph_component,
.section_home-hero .home-hero_content .label-style-1,
.section_home-hero .home-hero_content .esp-hero-claim,
.section_home-hero .home-hero_list > div {
  animation: esp-hero-in 280ms var(--esp-ease) both;
}

.section_home-hero .home-hero_paragraph-wrapper .paragraph_component {
  animation-delay: 60ms;
}

.section_home-hero .home-hero_content .label-style-1 {
  animation-delay: 120ms;
}

.section_home-hero .home-hero_content .esp-hero-claim {
  animation-delay: 160ms;
}

.section_home-hero .home-hero_list > div:nth-child(2) { animation-delay: 200ms; }
.section_home-hero .home-hero_list > div:nth-child(3) { animation-delay: 240ms; }
.section_home-hero .home-hero_list > div:nth-child(4) { animation-delay: 280ms; }
.section_home-hero .home-hero_list > div:nth-child(5) { animation-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .section_home-hero .heading_text[data-od-id="hero-heading"],
  .section_home-hero .home-hero_paragraph-wrapper .paragraph_component,
  .section_home-hero .home-hero_content .label-style-1,
  .section_home-hero .home-hero_content .esp-hero-claim,
  .section_home-hero .home-hero_list > div {
    animation: esp-hero-fade 120ms linear both;
    animation-delay: 0ms !important;
  }
}