/* =============================================================================
   E-S-P · Redesign-Pass (Premium-Polish)
   Lädt nach polish-pass.css. CSS-first, kein DOM-Abriss, keine Fake-KPIs.
   Tokens nur aus brand-spec.md:
     #FFFFFF #F5F7F9 #424242 #595959 #DDE4EB #0F3A6A #103057 #0A4885 #E20F15
   ========================================================================== */

:root {
  --esp-r-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --esp-r-shadow-sm: 0 4px 12px color-mix(in oklch, #103057 12%, transparent);
  --esp-r-shadow-md: 0 18px 40px -18px color-mix(in oklch, #103057 28%, transparent);
  --esp-r-shadow-lg: 0 28px 56px -20px color-mix(in oklch, #103057 34%, transparent);
}

/* ---------------------------------------------------------------------------
   R1 · Typografie: Hierarchie ohne Font-Swap
   -------------------------------------------------------------------------- */
.heading_text {
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.section_home-hero .heading_text[data-od-id="hero-heading"],
.section_home-hero h1.heading_text {
  letter-spacing: -0.028em;
}

.subtitle-1,
.subtitle-2,
.paragraph_component p,
.rich-text_size-large p,
.accordion_content_text p {
  text-wrap: pretty;
  max-inline-size: 65ch;
}

.label-style-1,
.esp-eyebrow,
.category-label .label-style-1,
.esp-direct-contact__label,
.esp-footer-services__label {
  font-weight: 600;
  letter-spacing: 0.14em;
}

a[href^="tel:"],
.esp-direct-contact__link[href^="tel:"],
.footer_contact-list a[href^="tel:"],
.esp-request__alt a[href^="tel:"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

.esp-step-number,
.esp-service-index {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.04em;
}

/* ---------------------------------------------------------------------------
   R2 · Oberflächen: kühles Grain + getönte Schatten (Technik-Haltung)
   -------------------------------------------------------------------------- */
.section_home-difference.background-color-grey-150,
.section_home-cs.background-color-primary-yellow,
.section_home-faq,
.section_home-how {
  position: relative;
  isolation: isolate;
}

.section_home-difference.background-color-grey-150::before,
.section_home-cs.background-color-primary-yellow::before,
.section_home-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

.section_home-difference > *,
.section_home-cs > *,
.section_home-faq > * {
  position: relative;
  z-index: 1;
}

.visual-image_wrapper,
.esp-service-photo,
.home-testimonial_image-wrapper {
  box-shadow: var(--esp-r-shadow-md);
}

@media (hover: hover) {
  .service-card_component:hover .esp-service-photo {
    box-shadow: var(--esp-r-shadow-lg);
  }
}

/* ---------------------------------------------------------------------------
   R3 · Trust-Leiste: ruhige Chip-Reihe statt Logo-Marquee-Feeling
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .section_home-difference .trusted-bar_inner {
    align-items: stretch;
    gap: 1.75rem;
  }

  .section_home-difference .trusted-bar_heading {
    max-inline-size: 14rem;
    padding-inline-end: 1.5rem;
    border-inline-end: 1px solid #dde4eb;
  }

  .section_home-difference .trusted-bar_logos-wrapper {
    overflow: visible;
  }

  .section_home-difference .trusted-bar_logos-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    animation: none !important;
    transform: none !important;
  }

  /* Marquee-Duplikat ausblenden — eine klare Chip-Zeile reicht */
  .section_home-difference .trusted-bar_logos-list[aria-hidden="true"],
  .section_home-difference .trusted-bar_logos-list.show-mobile-landscape {
    display: none !important;
  }

  .section_home-difference .trusted-bar_logo-item {
    width: auto;
    min-width: 0;
    padding: 0;
  }

  .section_home-difference .trusted-bar_service {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #dde4eb;
    border-radius: 0.25rem;
    background: #ffffff;
    color: #0f3a6a;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      color 180ms ease;
  }

  .section_home-difference .trusted-bar_service::before {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 0;
    background-color: #e20f15;
  }

  @media (hover: hover) {
    .section_home-difference .trusted-bar_service:hover {
      border-color: color-mix(in oklch, #0f3a6a 28%, #dde4eb);
      background-color: #f5f7f9;
    }
  }
}

/* ---------------------------------------------------------------------------
   R4 · Prozess-Schritte: visuelle Staffelung (kein flaches 3er-Raster)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .section_home-tabs .u-grid > .tabs_tab:nth-child(1) {
    transform: translateY(0);
  }

  .section_home-tabs .u-grid > .tabs_tab:nth-child(2) {
    transform: translateY(1.25rem);
  }

  .section_home-tabs .u-grid > .tabs_tab:nth-child(3) {
    transform: translateY(2.5rem);
  }

  .section_home-tabs .tabs_tab {
    padding-block-end: 1rem;
  }

  .section_home-tabs .esp-step-number {
    color: #0f3a6a;
    opacity: 0.88;
  }

  .section_home-tabs .tabs_tab:nth-child(2) .esp-step-number {
    color: #0a4885;
  }

  .section_home-tabs .tabs_tab:nth-child(3) .esp-step-number {
    color: #103057;
  }
}

/* Optisches Padding: unten etwas mehr Luft als oben */
@media (min-width: 992px) {
  .section_home-how {
    padding-block-end: 0.5rem;
  }

  .section_home-faq {
    padding-block-end: 1rem;
  }
}

/* ---------------------------------------------------------------------------
   R5 · FAQ: Premium-Akkordeon (behalten, klarer Open-State)
   -------------------------------------------------------------------------- */
.accordion_item {
  border-block-end: 1px solid #dde4eb;
}

.accordion_toggle_button {
  width: 100%;
  text-align: start;
  gap: 1rem;
  padding-block: 1.125rem;
  padding-inline: 0.75rem 0.5rem;
  border-inline-start: 3px solid transparent;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.accordion_component.is-opened .accordion_toggle_button,
.accordion_toggle_button[aria-expanded="true"] {
  background-color: color-mix(in oklch, #0f3a6a 4%, #ffffff);
  border-inline-start-color: #e20f15;
}

.accordion_toggle_text {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #424242;
}

.accordion_content_text {
  color: #595959;
  max-inline-size: 58ch;
}

.accordion_content_padding {
  padding-inline-start: calc(0.75rem + 3px);
}

@media (hover: hover) {
  .accordion_toggle_button:hover {
    background-color: color-mix(in oklch, #0f3a6a 3.5%, #f5f7f9);
  }
}

.accordion_toggle_button:focus-visible {
  outline: 2px solid #e20f15;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   R6 · Qualitäts-Statement (ex-Testimonial): ruhiger, ehrlicher Slot
   -------------------------------------------------------------------------- */
.home-testimonial_wrapper {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in oklch, #103057 78%, transparent);
  border: 1px solid color-mix(in oklch, #ffffff 18%, transparent);
  border-radius: 0.25rem;
  box-shadow: var(--esp-r-shadow-md);
}

.home-testimonial_block .text-style-quote-2 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.home-testimonial_author-block {
  letter-spacing: 0.02em;
}

/* Overlay bleibt in der Bildfläche (polish setzt inset); Ecke konsistent */
@media (min-width: 768px) {
  .home-testimonial_wrapper {
    inset: auto 1.5rem 1.5rem auto;
    max-inline-size: min(28rem, calc(100% - 3rem));
  }
}

/* ---------------------------------------------------------------------------
   R7 · Service-Karten & CTA: eine entschiedene Geste
   -------------------------------------------------------------------------- */
.service-card_inner {
  border-block-start: 3px solid transparent;
}

/* Der rote Akzent markiert die führende Karte. Das ist seit dem
   Vier-Karten-Stapel Brandschutz, nicht mehr Alarmanlagen. */
.service-card_component[data-od-id="service-card-brandschutz"] .service-card_inner {
  border-block-start-color: #e20f15;
}

.service-card_component[data-od-id="service-card-alarmanlagen"] .service-card_inner,
.service-card_component[data-od-id="service-card-elektrotechnik"] .service-card_inner,
.service-card_component[data-od-id="service-card-videoüberwachung"] .service-card_inner {
  border-block-start-color: color-mix(in oklch, #ffffff 28%, transparent);
}

.button_main_wrap,
.button_secondary_wrap {
  transition:
    transform 160ms var(--esp-r-ease),
    box-shadow 200ms ease,
    background-color 160ms ease;
}

@media (hover: hover) {
  a.button_link:hover .button_main_wrap {
    box-shadow: var(--esp-r-shadow-sm);
  }
}

a.button_link:active .button_main_wrap,
a.button_link:active .button_secondary_wrap {
  transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
   R8 · Anfrage: etwas mehr Präsenz, ohne neue Farben
   -------------------------------------------------------------------------- */
.esp-request__heading {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.esp-form__submit {
  box-shadow: 0 10px 24px color-mix(in oklch, #103057 28%, transparent);
}

.esp-form__submit:hover {
  box-shadow: 0 14px 28px color-mix(in oklch, #103057 36%, transparent);
}

/* ---------------------------------------------------------------------------
   R9 · Reduced Motion: Redesign-Extras abschalten
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .section_home-tabs .u-grid > .tabs_tab {
    transform: none !important;
  }

  .home-testimonial_wrapper {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #103057;
  }

  .button_main_wrap,
  .button_secondary_wrap,
  .esp-form__submit,
  .trusted-bar_service,
  .accordion_toggle_button,
  .service-card_component,
  .cs-card,
  .swiper-button,
  a.button_link {
    transition: none !important;
  }

  a.button_link:hover .button_main_wrap,
  a.button_link:hover .button_secondary_wrap {
    transform: none !important;
  }
}

/* =============================================================================
   CD-Layer · Creative Director (tech-utility, restrained)
   R10–R16 — eine Geste pro Viewport, Tokens unverändert
   ========================================================================== */

/* ---------------------------------------------------------------------------
   R10 · Nav: ruhige Präsenz, klarer Fokus, CTA als Anker
   -------------------------------------------------------------------------- */
.nav_component,
.navbar_component,
.nav_background {
  border-block-end: 1px solid color-mix(in oklch, #dde4eb 72%, transparent);
}

.nav_menu-wrapper_button a.button_link .button_main_wrap,
a.button_link[data-od-id="cta-02"] .button_main_wrap {
  box-shadow: 0 6px 16px color-mix(in oklch, #103057 18%, transparent);
}

.nav_menu-list a:focus-visible,
.nav_menu-wrapper_button a:focus-visible,
a.button_link[data-od-id="cta-02"]:focus-visible {
  outline: 2px solid #e20f15;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   R11 · Hero: Lesefluss + eine entschiedene Headline-Geste
   -------------------------------------------------------------------------- */
.section_home-hero .home-hero_paragraph-wrapper .subtitle-2,
.section_home-hero .paragraph_component p {
  max-inline-size: 38ch;
  color: #595959;
}

.section_home-hero .heading_text[data-od-id="hero-heading"] {
  max-inline-size: 14ch;
}

@media (hover: hover) {
  .section_home-hero a.button_link:hover .button_main_wrap {
    transform: translateY(-1px);
    box-shadow: var(--esp-r-shadow-sm);
  }
}

/* ---------------------------------------------------------------------------
   R12 · Leistungs-Swiper (ex-Case-Study): Produkt-Präsenz statt Story-Glanz
   -------------------------------------------------------------------------- */
.section_home-cs .cs-card {
  border: 1px solid color-mix(in oklch, #ffffff 14%, transparent);
  box-shadow: var(--esp-r-shadow-md);
  transition:
    box-shadow 200ms ease,
    border-color 180ms ease;
}

.section_home-cs .cs-featured_content {
  letter-spacing: -0.015em;
}

.cs-featured_swiper .swiper-pagination-bullet {
  background: color-mix(in oklch, #ffffff 35%, transparent);
  opacity: 1;
  transition:
    background-color 160ms ease,
    transform 160ms var(--esp-r-ease);
}

.cs-featured_swiper .swiper-pagination-bullet-active {
  background: #e20f15;
  transform: scale(1.15);
}

.swiper-button {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms var(--esp-r-ease);
}

@media (hover: hover) {
  .swiper-button:hover {
    transform: translateY(-1px);
  }
}

.swiper-button:focus-visible {
  outline: 2px solid #e20f15;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   R13 · Service-Karten: Hierarchie ohne DOM-Umbau
   -------------------------------------------------------------------------- */
.service-card_component {
  transition: box-shadow 220ms ease;
}

.service-card_component[data-od-id="service-card-brandschutz"] .service-card_inner {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, #e20f15 28%, transparent);
}

@media (hover: hover) {
  .service-card_component:hover {
    box-shadow: var(--esp-r-shadow-lg);
  }

  .service-card_component:not([data-od-id="service-card-brandschutz"]):hover .service-card_inner {
    border-block-start-color: color-mix(in oklch, #0a4885 55%, transparent);
  }
}

.service-card_component .button_link:focus-visible {
  outline: 2px solid #e20f15;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   R14 · Prozess + How: optisches Gewicht auf Nummern / CTA
   -------------------------------------------------------------------------- */
.section_home-how .heading_text {
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.section_home-how .paragraph_component p {
  max-inline-size: 42ch;
}

.section_home-tabs .tabs_tab {
  border-block-start: 1px solid #dde4eb;
  padding-block-start: 1.25rem;
}

.section_home-tabs .esp-step-number {
  font-weight: 600;
}

@media (hover: hover) {
  .section_home-how a.button_link:hover .clickable_text {
    letter-spacing: 0.01em;
  }
}

/* ---------------------------------------------------------------------------
   R15 · Anfrage: Abschluss-Geste auf dunkler Fläche (Labels bleiben hell)
   -------------------------------------------------------------------------- */
#anfrage.esp-request,
section#anfrage,
.esp-request {
  position: relative;
}

.esp-form {
  border: 1px solid color-mix(in oklch, #ffffff 16%, transparent);
  background: color-mix(in oklch, #103057 72%, #0f3a6a);
  box-shadow: var(--esp-r-shadow-lg);
  border-radius: 0.25rem;
  padding: 1.25rem;
}

.esp-field__control:focus-visible {
  outline: 2px solid #e20f15;
  outline-offset: 1px;
  border-color: color-mix(in oklch, #ffffff 40%, #dde4eb);
}

.esp-form__submit:focus-visible {
  outline: 2px solid #e20f15;
  outline-offset: 3px;
}

@media (hover: hover) {
  .esp-form__submit:hover {
    transform: translateY(-1px);
  }
}

.esp-form__submit:active {
  transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
   R16 · FAQ + Footer: Ruhe, klare Trennlinien
   -------------------------------------------------------------------------- */
.section_home-faq .category-label_square {
  background-color: #e20f15;
}

.section_home-faq .heading_text {
  letter-spacing: -0.02em;
}

.footer_component,
.footer_credits {
  border-block-start-color: color-mix(in oklch, #dde4eb 80%, transparent);
}

.footer_contact-list a:focus-visible,
.footer-small-link:focus-visible,
.esp-direct-contact__link:focus-visible {
  outline: 2px solid #e20f15;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   R17 · Vierte Leistungskarte (Brandschutz)
   Das Theme setzt die Rasterplätze der Karten über generierte #w-node-Ids in
   der Webflow-CSS. Die neue Karte hat dort keinen Eintrag und bekommt ihre
   Plätze deshalb hier — Werte 1:1 aus den Regeln der Bestandskarten.
   -------------------------------------------------------------------------- */
#esp-node-brandschutz-toggle,
#esp-node-brandschutz-summary {
  grid-area: span 1 / span 8 / span 1 / span 8;
}

#esp-node-brandschutz-media,
#esp-node-brandschutz-cta {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

@media screen and (max-width: 991px) {
  #esp-node-brandschutz-toggle,
  #esp-node-brandschutz-summary {
    grid-column: span 7 / span 7;
  }

  #esp-node-brandschutz-media,
  #esp-node-brandschutz-cta {
    grid-column: span 5 / span 5;
  }
}

@media screen and (max-width: 767px) {
  #esp-node-brandschutz-toggle,
  #esp-node-brandschutz-media {
    grid-column: span 12 / span 12;
  }

  #esp-node-brandschutz-summary,
  #esp-node-brandschutz-cta {
    grid-area: span 1 / span 12 / span 1 / span 12;
  }
}

/* Die Scrollstrecke des Stapels steckt als feste Höhe im Theme
   (72.75rem für zwei einklappende Karten, die letzte bleibt stehen).
   Mit vier Karten klappen drei ein; ohne Verlängerung müsste jede Karte
   ihren Weg in zwei Dritteln der bisherigen Strecke zurücklegen.
   36.375rem pro einklappender Karte × 3 = 109.125rem. */
@media (min-width: 992px) {
  .home-services_track {
    height: calc(109.125rem + 100vh);
  }
}

/* ---------------------------------------------------------------------------
   R18 · Zeichenbüro: Textband zwischen Leistungsübersicht und FAQ
   Bewusst ohne Bild — die Aussage trägt sich selbst, und es entsteht keine
   neue Asset-Abhängigkeit. Ein dezentes CSS-Raster (kein Asset) strukturiert
   die rechte Restfläche und nimmt die Blueprint-Grids der Service-Cards auf.
   -------------------------------------------------------------------------- */
.esp-zeichenbuero {
  background-color: #f5f7f9;
  padding-block: 5rem;
}

.esp-zeichenbuero__band {
  background-color: #103057;
  border-radius: 0.25rem;
  border-inline-start: 3px solid #e20f15;
  box-shadow: var(--esp-r-shadow-md);
  padding: 2.5rem 1.75rem;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px);
}

.esp-zeichenbuero__label {
  margin: 0 0 1rem;
  color: color-mix(in oklch, #ffffff 62%, #103057);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.esp-zeichenbuero__heading {
  margin: 0 0 1.25rem;
  color: #ffffff;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.esp-zeichenbuero__text {
  margin: 0 0 1rem;
  max-inline-size: 62ch;
  color: color-mix(in oklch, #ffffff 82%, #103057);
  text-wrap: pretty;
}

.esp-zeichenbuero__text:last-child {
  margin-block-end: 0;
}

@media (min-width: 992px) {
  .esp-zeichenbuero {
    padding-block: 7.5rem;
  }

  .esp-zeichenbuero__band {
    padding: 3.5rem 3.25rem;
  }
}