/* ==== ECT v2 — Sections (Hero, KPI, Why) ==== */

/* ---------------- HERO ---------------- */
.ect-section--hero{
  background-color:#f5f7fa;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  text-align:left;
  position: relative;
  --section-overlay-color:#000;
  --section-overlay-opacity:0.7;
  /* Desktop typographic tokens */
  --hero-maxw: 960px;
  --hero-align: center;
  /* Hero layout tokens: spacing & rotate sizes (vmin-based clamps) */
  --hero-gap-head-sub: clamp(14px, 2vmin, 26px);
  --hero-gap-sub-rot:  clamp(18px, 2.6vmin, 36px);
  --hero-rot-gap-inner: clamp(12px, 2vmin, 30px);
  --hero-rotword-size:  clamp(28px, 6.5vmin, 110px);
  --hero-rottext-size:  clamp(14px, 2.2vmin, 28px);
    /* Badge placement tokens (read by JS) */
  --hero-badge-v: .44;            /* relative height (0..1) */
  --hero-badge-gap: 14px;         /* px gap from machine left */
  --hero-badge-offset-x: 94px;    /* +40px further right */
  --hero-badge-offset-y: 14px;    /* +30px further down (relative to previous -16px) */
  --hero-badge-offx-ratio: 0;     /* additional proportional nudge (0..1 of machine width) */
  --hero-badge-offy-ratio: 0;     /* additional proportional nudge (0..1 of machine height) */
  overflow: hidden; /* Bühne soll nicht herausragen */
  /* Bild bündig unten: Section-Bottom-Padding entfernen */
  padding-bottom: 0 !important;
  min-height: 100vh;
  /* Active nav color token (match subline) */
  --nav-active-color: var(--ect-color-6);
}

.ect-section--hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--hero-overlay-transition, 1.1s) ease;
  z-index:1;
}

.ect-section--hero.hero-overlay-active::before{
  background: var(--hero-overlay-bg, transparent);
  opacity:1;
}

.ect-section--hero.hero-overlay-faded::before{
  opacity:0.25;
}

.hero--mobile.hero-overlay-active::before{
  opacity: min(0.55, var(--section-overlay-opacity, 0.55));
}
.hero--mobile.hero-overlay-active.hero-overlay-faded::before{
  opacity: 0.15;
}

.ect-hero__slider{
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  z-index: 2;
}

.ect-hero__progress,
.ect-hero__nav{
  position: relative;
  z-index: 4;
}

.ect-hero__slide{
  position: absolute;
  inset: 0;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vw, 72px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .48s ease;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  z-index: 0;
}

.ect-hero__slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.ect-hero__slide.is-exiting{
  opacity: 0;
  pointer-events: none;
}

.ect-hero__layout{
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(32px, 6vw, 80px);
  position: relative;
  z-index: 3;
}

.ect-hero__copy{
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.8vw, 34px);
  position: relative;
  z-index: 3;
}
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__copy{
  max-width: clamp(360px, 60vw, 860px);
  padding: clamp(48px, 7vw, 84px) clamp(42px, 5.5vw, 66px) 0;
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__copy{
  position: relative;
  max-width: clamp(360px, 60vw, 860px);
  width: 100%;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 0 clamp(36px, 6vw, 72px);
}

.ect-hero__stage{
  flex: 1 1 52%;
  position: relative;
  min-height: clamp(320px, 48vw, 640px);
  z-index: 2;
}

.ect-hero__claimstack{
  display: inline-flex;
  flex-direction: column;
  gap: clamp(4px, 1vmin, 12px);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(48px, 10vmin, 148px);
  line-height: 0.95;
  text-transform: uppercase;
}
.ect-hero__claimstack .ect-hero__claimline{ white-space: nowrap; }

.ect-hero__slide .ect-hero__stage{
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

.ect-hero__slide .ect-hero__ctas{
  position: static;
  right: auto;
  bottom: auto;
  transform: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.ect-hero__ctas .ect-hero__cta{ flex: 0 0 auto; }

.ect-hero__cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(18px, 3vw, 32px);
}
.ect-hero__cards--statement{
  display: block;
  width: 100%;
  max-width: clamp(520px, 56vw, 760px);
  margin-top: clamp(28px, 3.6vw, 48px);
  z-index: 2;
  align-self: flex-start;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}
.ect-hero__cards--statement .ect-hero__card,
.ect-hero__card--statement{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 26px);
  width: 100%;
  background: rgba(255,255,255,0.24);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.36);
  box-shadow: 0 24px 48px rgba(0,0,0,0.32);
  padding: clamp(20px, 3.4vw, 30px) clamp(28px, 4vw, 42px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
}
.ect-hero__card--statement .ect-hero__card-icon,
.ect-hero__cards--statement .ect-hero__card-icon{
  display: none !important;
}
.ect-hero__cards--statement .ect-hero__card-content,
.ect-hero__card--statement .ect-hero__card-content{
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: clamp(6px, 1.4vmin, 12px);
}
.ect-hero__cards--statement .ect-hero__card-title,
.ect-hero__card--statement .ect-hero__card-title{
  margin: 0;
  font-size: clamp(20px, 3vmin, 28px);
  line-height: 1.15;
  font-weight: 700;
}
.ect-hero__cards--statement .ect-hero__card-sub,
.ect-hero__card--statement .ect-hero__card-sub{
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: clamp(16px, 2.3vmin, 20px);
  line-height: 1.32;
}
.ect-hero__cards--statement .ect-hero__card-cta,
.ect-hero__card--statement .ect-hero__card-cta{
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vmin, 14px);
  width: auto;
  min-height: clamp(48px, 6vw, 72px);
  padding: var(--cta-pad-y, clamp(16px, 2.4vw, 22px)) var(--cta-pad-x, clamp(22px, 3vw, 30px));
  text-align: center;
  font-size: var(--cta-fs, clamp(16px, 2vmin, 18px));
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border-radius: var(--cta-radius, 18px);
  cursor: pointer;
}

.ect-hero__card{
  display: flex;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);
  background: rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}

.ect-hero__card-icon{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-content: center;
  flex: 0 0 clamp(48px, 4.6vw, 60px);
  height: clamp(48px, 4.6vw, 60px);
  border-radius: 16px;
  background: rgba(0,0,0,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  color: #fff;
}
.ect-hero__card-icon svg{
  width: clamp(20px, 2.6vw, 28px);
  height: clamp(20px, 2.6vw, 28px);
  fill: currentColor;
}

.ect-hero__card-content{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ect-hero__card-title{
  margin: 0;
  font-size: clamp(18px, 2.6vmin, 26px);
  line-height: 1.2;
  font-weight: 700;
}

.ect-hero__card-title span{ display: block; }

.ect-hero__card-sub{
  margin: 0;
  font-size: clamp(15px, 2vmin, 18px);
  line-height: 1.35;
}

.ect-hero__card-cta{
  align-self: center;
  margin-top: clamp(8px, 1.8vw, 16px);
  letter-spacing: 0;
  text-transform: none;
}

/* Hero responsive adjustments */
.ect-hero__slide[data-hero-layout="statement"]{
  color: #fff;
  --section-overlay-opacity: 0.24;
  background-image: linear-gradient(135deg, #E3792D 0%, #B65D19 55%, #7F3A0E 100%);
  background-image: linear-gradient(
    135deg,
    var(--ect-color-5, #E3792D) 0%,
    color-mix(in srgb, var(--ect-color-5, #E3792D) 78%, #000 22%) 55%,
    color-mix(in srgb, var(--ect-color-5, #E3792D) 60%, #000 40%) 100%
  );
  padding-bottom: clamp(28px, 4vw, 52px);
}
.ect-hero__slide[data-hero-layout="statement"] .ect-headline{ display:none; }
.ect-hero__slide[data-hero-layout="statement"] .ect-subline{
  color:#fff !important;
  text-shadow:0 18px 48px rgba(0,0,0,0.55);
  font-size: clamp(22px, 3.8vmin, 44px);
  font-weight:600;
  letter-spacing:-0.01em;
}
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__ctas{ justify-content:flex-start; }
.ect-hero__slide[data-hero-layout="statement"] .ect-headline,
.ect-hero__slide[data-hero-layout="statement"] .ect-subline{
  color: #fff;
  text-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
.ect-hero__slide[data-hero-layout="statement"] .ect-subline{ font-weight:600; letter-spacing:-0.01em; }
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__slot{ display:none; }
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__rotline{ display:none; }
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__layout{ position: relative; z-index: 2; }
.ect-hero__slide[data-hero-layout="statement"]{
  --hero-machine-max-h: clamp(720px, 90vh, 1240px);
}
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__stage{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  z-index:1;
}
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__machinewrap{
  position:absolute;
  right: clamp(18px, 4.5vw, 72px);
  bottom: clamp(6px, 2.6vw, 44px);
  width: auto;
  min-width: clamp(360px, 42vw, 680px);
  height: var(--hero-machine-max-h);
  max-height: 92vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform:none;
  opacity:1;
}
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__machine{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__badge{
  position: absolute;
  top: 52%;
  right: clamp(20px, 6vw, 84px);
  width: clamp(120px, 12vw, 188px);
  height: clamp(120px, 12vw, 188px);
  padding: clamp(14px, 2.6vw, 24px);
  font-size: clamp(14px, 2.6vmin, 22px);
  transform: translate(35%, -35%) rotate(10deg);
  box-shadow: 0 18px 36px rgba(0,0,0,0.28);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--hero-badge-bg, #fff);
  color: var(--hero-badge-text, #000);
  border: 2px solid var(--hero-badge-border, #000);
  pointer-events:auto;
}
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__badge br{ line-height:1.05; }
.ect-hero__slide[data-hero-layout="statement"] .ect-hero__badge:hover{
  background: var(--hero-badge-bg-hover, var(--hero-badge-bg, #fff));
  color: var(--hero-badge-text-hover, var(--hero-badge-text, #000));
  border-color: var(--hero-badge-border-hover, var(--hero-badge-border, #000));
}

.ect-hero__slide[data-hero-layout="process"]{
  color: #fff;
  --section-overlay-opacity: 0.18;
  --hero-machine-max-h: clamp(720px, 90vh, 1240px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.ect-hero__slide[data-hero-layout="process"] .ect-hero__layout{
  position: relative;
  z-index: 2;
  align-items: stretch;
}
.ect-hero__slide[data-hero-layout="process"] .ect-hero__copy{
  max-width: clamp(360px, 64vw, 880px);
  padding: clamp(52px, 7vw, 88px) clamp(44px, 5.6vw, 66px) clamp(18px, 4.8vw, 40px);
  gap: clamp(14px, 2.6vw, 28px);
}
.ect-hero__slide[data-hero-layout="process"] .ect-hero__stage{
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.ect-hero__slide[data-hero-layout="process"] .ect-hero__machinewrap{
  position: absolute;
  right: clamp(18px, 4.5vw, 72px);
  bottom: clamp(-32px, -1.8vw, -8px);
  width: auto;
  min-width: clamp(360px, 45vw, 720px);
  height: var(--hero-machine-max-h);
  max-height: 92vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.ect-hero__slide[data-hero-layout="process"] .ect-hero__cards{
  display: block;
  width: 100%;
  max-width: clamp(520px, 56vw, 760px);
  margin-top: clamp(28px, 3.6vw, 48px);
  align-self: flex-start;
  position: relative;
}
.ect-hero__slide[data-hero-layout="process"] .ect-hero__machine{
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.ect-hero__slide[data-hero-layout="process"] .ect-hero__badge{
  position: absolute;
  top: 54%;
  right: clamp(18px, 5.5vw, 78px);
  pointer-events: auto;
  transform: translate(32%, -30%) rotate(8deg);
}

.ect-hero__slide[data-hero-layout="story"]{
  --hero-wrap-w: clamp(420px, 55vw, 1020px);
  padding-bottom: clamp(160px, 18vw, 240px);
  position: relative;
}
.ect-hero__slide[data-hero-layout="story"] .ect-headline,
.ect-hero__slide[data-hero-layout="story"] .ect-subline{
  display: none;
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__cards{ display:none; }
.ect-hero__slide[data-hero-layout="story"] .ect-hero__layout{
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__copy{
  align-items: center;
  text-align: center;
  margin: 0 auto;
  gap: clamp(18px, 3.5vw, 36px);
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__claimstack{
  color: #fff;
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__rotline{
  position: static;
  left: auto;
  transform: none;
  text-align: center;
  visibility: visible;
  display: block;
  margin-top: clamp(18px, 2.8vmin, 32px);
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__rotword{
  font-size: clamp(28px, 5.2vmin, 92px);
  color: var(--ect-color-5);
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__rottext{
  color: #fff;
  text-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__ctas{
  position: static;
  margin-top: clamp(24px, 5vw, 60px);
  justify-content: center;
  gap: 16px;
}

/* Hero layout variants (desktop baseline) */
@media (max-width: 1024px){
  .ect-hero__layout{
    flex-direction: column;
  }
  .ect-hero__stage{
    min-height: clamp(300px, 60vw, 520px);
  }
  .ect-hero__slide[data-hero-layout="story"] .ect-hero__layout{
    align-items: flex-start;
  }
  .ect-hero__slide[data-hero-layout="story"] .ect-hero__stage{
    position: relative;
    min-height: clamp(320px, 70vw, 560px);
  }
  .ect-hero__slide[data-hero-layout="story"] .ect-hero__ctas{
    position: static;
    margin-top: clamp(24px, 6vw, 40px);
    align-self: flex-start;
  }
}

@media (max-width: 860px){
  .ect-hero__cards--statement .ect-hero__card,
  .ect-hero__card--statement{
    gap: clamp(16px, 6vw, 26px);
  }
}

@media (max-width: 720px){
  .ect-hero__cards--statement .ect-hero__card,
  .ect-hero__card--statement{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ect-hero__cards--statement .ect-hero__card-content,
  .ect-hero__card--statement .ect-hero__card-content{
    align-items: center;
    text-align: center;
    gap: clamp(8px, 2vw, 14px);
  }
  .ect-hero__cards--statement .ect-hero__card-title,
  .ect-hero__card--statement .ect-hero__card-title{
    white-space: normal;
  }
  .ect-hero__cards--statement .ect-hero__card-sub,
  .ect-hero__card--statement .ect-hero__card-sub{
    font-size: clamp(16px, 3.4vw, 18px);
  }
.ect-hero__cards--statement .ect-hero__card-cta,
.ect-hero__card--statement .ect-hero__card-cta{
    align-self: center;
    width: 100%;
    max-width: none;
    white-space: normal;
  }
}

@media (max-width: 768px){
  .ect-hero__slide{
    padding: clamp(36px, 10vw, 52px) clamp(16px, 7vw, 32px);
    gap: clamp(24px, 8vw, 40px);
  }
  .ect-hero__claimstack{
    font-size: clamp(48px, 16vw, 96px);
  }
}

.ect-hero__progress{
  position: absolute;
  top: clamp(32px, 7vw, 60px);
  right: calc(max(0px, env(safe-area-inset-right, 0px)) + clamp(8px, 1.6vw, 24px));
  width: 10px;
  height: calc(100% - clamp(64px, 14vw, 120px));
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 30;
  box-shadow: none;
}

.ect-hero__progress.is-active{ opacity: 1; }
.ect-hero__progress.is-primed{ animation: heroProgressPulse .36s ease-out; }

.ect-hero__progress-bar{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  transform-origin: center bottom;
  transform: scaleY(0);
  box-shadow: none;
}

.ect-hero__nav{
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 7vw, 88px);
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 45;
}

.ect-hero__navbtn{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.ect-hero__navbtn:hover,
.ect-hero__navbtn:focus{
  background: rgba(255, 255, 255, 0.9);
  color: #222;
  transform: translateY(-2px);
}

.ect-hero__navbtn:focus{ outline: 2px solid rgba(255,255,255,0.8); outline-offset: 2px; }

@media (max-width: 640px){
  .ect-hero__nav{
    bottom: clamp(24px, 8vw, 56px);
    gap: 10px;
  }
  .ect-hero__navbtn{
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

.hero--mobile .ect-hero__nav,
html.ect-mobile .ect-section--hero .ect-hero__nav{
  display: none;
}

@keyframes heroProgressPulse{
  0%{ background: rgba(255,255,255,0.2); }
  50%{ background: rgba(255,255,255,0.32); }
  100%{ background: rgba(255,255,255,0.2); }
}

@keyframes heroSubcardIn{
  0%{ opacity: 0; transform: translate(-50%, 24px); }
  100%{ opacity: 1; transform: translate(-50%, 0); }
}

.ect-section--hero .ect-container{
  /* Vollbreite nutzen, globale Container-Zentrierung überschreiben */
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: left;

  /* Layout: relative for absolute positioning of rotate block */
  position: relative;
  height: 100%;

  /* Gleich: Padding (stable baseline from core request) */
  padding-top: 64px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 0; /* Content-Abstand – Bild bleibt bündig (liegt ausserhalb im Stage) */

  z-index: 2; /* Typo liegt über der Stage */
}

.ect-section--hero .ect-headline{ color: var(--ect-color-1); margin: 0; }

.ect-section--hero .ect-subline{
  color: var(--ect-color-6);
  margin: 0 0 clamp(2px, 0.8vmin, 8px);
  font-size: clamp(20px, 3.4vmin, 36px);
}
/* Hero subline in accent orange (except for typed variants) */
.ect-section--hero .ect-subline:not(.ect-hero__subline--typed){
  color: var(--ect-color-5);
}

.ect-section--hero .ect-hero__subline--typed{
  font-size: clamp(30px, 4.2vmin, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  opacity: 1;
  transform: none;
  white-space: normal;
}

.ect-hero__subtext{
  margin: clamp(0px, 0.4vmin, 2px) 0 clamp(4px, 1.2vmin, 10px);
  font-size: clamp(21px, 3vmin, 28px);
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  width: min(100%, clamp(420px, 64vw, 880px));
  max-width: clamp(420px, 64vw, 880px);
  text-align: left;
  align-self: flex-start;
}

.ect-hero__slide[data-hero-layout="process"] .ect-hero__subtext{
  width: min(100%, clamp(420px, 60vw, 820px));
  max-width: clamp(420px, 60vw, 820px);
}

/* Rotating line group */
.ect-hero__rotline{
  margin-top: 0; /* spacing is controlled on subline via --hero-gap-sub-rot */
  color: #fff;
  text-align: center;
  position: absolute;
  left:50%; transform: translateX(-50%);
  z-index: 2; /* über Stage */
  width:100%;
  visibility: hidden; /* durch JS gesetzt */
  top: var(--rot-top, auto);
}
.ect-hero__rotword{
  font-weight: 800;
  letter-spacing:-0.015em;
  line-height:1.02;
  /* Smaller cap to keep one line on 1920 widths */
  font-size: var(--hero-rotword-size);
  /* Keep rotate word strictly single-line during typing */
  white-space: nowrap;
  display: inline-block;
}
.ect-hero__rottext{
  margin-top: var(--hero-rot-gap-inner);
  font-weight: 500;
  letter-spacing:0;
  line-height:1.2;
  /* 30% smaller rotate-line text */
  font-size: var(--hero-rottext-size);
}
.ect-hero__rotword,
.ect-hero__rottext{ will-change: opacity, transform; }

/* Mobile tuning: make rotating line larger for better readability */
html.ect-mobile .ect-section--hero{
  --hero-rottext-size: clamp(15px, 3.2vmin, 26px);
  --hero-lip-adjust: -10px;
  --hero-lip-adjust-ratio: -0.006;
  --hero-rot-bias: 48;
  --hero-badge-anchor: 1;
  --hero-badge-offset-x: -20px;
  --hero-badge-offx-ratio: -0.038;
  --hero-badge-offset-y: -6px;
  --badge-fs: 14px;
  --hero-mobile-menu-h: clamp(46px, 14vw, 58px);
}
html.ect-mobile .ect-section--hero .ect-hero__badge{ line-height: 1.15; }
html.ect-mobile .ect-section--hero .ect-hero__hint{ display:none !important; }
html.ect-mobile .ect-section--hero .ect-hero__rotline{ top: var(--rot-top, auto); }

.hero--mobile .ect-container,
html.ect-mobile .ect-section--hero .ect-container{
  padding: clamp(56px, 14vw, 72px) clamp(16px, 4vw, 22px) clamp(72px, 18vw, 108px);
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide{
  gap: clamp(14px, 5.2vw, 22px);
}
.hero--mobile .ect-hero__layout,
html.ect-mobile .ect-section--hero .ect-hero__layout{
  flex-direction: column;
  align-items: stretch;
  gap: clamp(16px, 6vw, 24px);
}
.hero--mobile .ect-hero__copy,
html.ect-mobile .ect-section--hero .ect-hero__copy{
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(10px, 3.4vw, 16px);
}
.hero--mobile .ect-hero__claimstack,
html.ect-mobile .ect-section--hero .ect-hero__claimstack{
  align-items: flex-start;
  width: 100%;
  font-size: clamp(30px, 10vw, 44px);
  letter-spacing: -0.02em;
  text-align: left;
  font-weight: 800;
  line-height: 1.08;
  margin-top: clamp(18px, 6vw, 28px);
}
.hero--mobile .ect-hero__claimstack .ect-hero__claimline,
html.ect-mobile .ect-section--hero .ect-hero__claimstack .ect-hero__claimline{
  width: 100%;
  white-space: normal;
  display: block;
}
.hero--mobile .ect-hero__claimstack:not(:empty) + [data-hero-title],
html.ect-mobile .ect-section--hero .ect-hero__claimstack:not(:empty) + [data-hero-title]{
  display: none !important;
}
.hero--mobile [data-hero-title],
html.ect-mobile .ect-section--hero [data-hero-title]{
  width: 100%;
  text-align: left;
}
.hero--mobile .ect-hero__stage,
html.ect-mobile .ect-section--hero .ect-hero__stage{
  order: 2;
  width: 100%;
  max-width: none;
  min-height: clamp(310px, 72vh, 520px);
  padding-bottom: clamp(10px, 3vw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(12px, 3.6vw, 18px);
  position: relative;
  margin: clamp(2px, 1.6vw, 10px) 0 0;
  flex: 1 1 auto;
  align-self: stretch;
}
.hero--mobile.is-variant-a .ect-hero__stage,
.hero--mobile.is-variant-b .ect-hero__stage,
.hero--mobile.is-variant-process .ect-hero__stage,
html.ect-mobile .ect-section--hero.is-variant-a .ect-hero__stage,
html.ect-mobile .ect-section--hero.is-variant-b .ect-hero__stage,
html.ect-mobile .ect-section--hero.is-variant-process .ect-hero__stage{
  justify-content: flex-start;
  min-height: clamp(242px, 54vh, 420px);
  margin: clamp(-22px, -4.8vw, -10px) 0 0;
  padding-bottom: clamp(0px, 1.8vw, 8px);
}
.hero--mobile .ect-hero__machinewrap,
html.ect-mobile .ect-section--hero .ect-hero__machinewrap{
  position: relative;
  width: 100%;
  max-width: clamp(320px, 90vw, 580px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: clamp(-36px, -4vw, -16px);
}
.hero--mobile.is-variant-a .ect-hero__machinewrap,
.hero--mobile.is-variant-b .ect-hero__machinewrap,
.hero--mobile.is-variant-process .ect-hero__machinewrap,
html.ect-mobile .ect-section--hero.is-variant-a .ect-hero__machinewrap,
html.ect-mobile .ect-section--hero.is-variant-b .ect-hero__machinewrap,
html.ect-mobile .ect-section--hero.is-variant-process .ect-hero__machinewrap{
  margin-top: clamp(-160px, -24vw, -96px);
  align-items: center;
}
.hero--mobile [data-hero-machine],
html.ect-mobile .ect-section--hero [data-hero-machine]{
  width: auto;
  max-width: 100%;
  height: clamp(330px, 78vh, 560px);
  object-fit: contain;
}
.hero--mobile .ect-hero__cards,
html.ect-mobile .ect-section--hero .ect-hero__cards{
  display: none !important;
}
.hero--mobile [data-hero-cards],
.hero--mobile [data-hero-cards-outside],
html.ect-mobile .ect-section--hero [data-hero-cards],
html.ect-mobile .ect-section--hero [data-hero-cards-outside]{
  display: none !important;
}
.hero--mobile .ect-hero__ctas,
html.ect-mobile .ect-section--hero .ect-hero__ctas{
  position: static;
  transform: none;
  width: 100%;
  margin-top: clamp(8px, 3vw, 14px);
  justify-content: center;
}
.hero--mobile .ect-hero__ctas .ect-hero__cta,
html.ect-mobile .ect-section--hero .ect-hero__ctas .ect-hero__cta{
  flex: 1 1 auto;
  width: 100%;
  max-width: clamp(220px, 82vw, 360px);
  --cta-pad-y: clamp(12px, 3.6vw, 18px);
  --cta-pad-x: clamp(18px, 6vw, 28px);
  --cta-fs: clamp(15px, 4.8vw, 18px);
}
.hero--mobile .ect-hero__rotline,
html.ect-mobile .ect-section--hero .ect-hero__rotline{
  position: static;
  margin-top: clamp(10px, 3.4vw, 16px);
  order: 3;
  max-width: clamp(240px, 88vw, 520px);
  text-align: left;
}
.hero--mobile .ect-hero__rotline .ect-hero__rotword,
.hero--mobile .ect-hero__rotline .ect-hero__rottext,
html.ect-mobile .ect-section--hero .ect-hero__rotline .ect-hero__rotword,
html.ect-mobile .ect-section--hero .ect-hero__rotline .ect-hero__rottext{
  white-space: normal;
}
.hero--mobile .ect-hero__progress,
html.ect-mobile .ect-section--hero .ect-hero__progress{
  top: calc(max(0px, env(safe-area-inset-top, 0px)) + var(--hero-mobile-menu-h, 0px) - clamp(10px, 3.4vw, 18px));
  right: 0;
  left: 0;
  width: 100%;
  height: 6px;
  transform: none;
  background: rgba(255,255,255,0.18);
}
.hero--mobile .ect-hero__progress-bar,
html.ect-mobile .ect-section--hero .ect-hero__progress-bar{
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
}
.hero--mobile .ect-hero__nav,
html.ect-mobile .ect-section--hero .ect-hero__nav{
  position: static;
  transform: none;
  width: 100%;
  margin-top: clamp(10px, 3.5vw, 18px);
  justify-content: center;
}
.hero--mobile .ect-hero__navbtn,
html.ect-mobile .ect-section--hero .ect-hero__navbtn{
  width: clamp(44px, 12vw, 56px);
  height: clamp(44px, 12vw, 56px);
  font-size: clamp(18px, 6vw, 22px);
}
.hero--mobile .ect-hero__subcard,
html.ect-mobile .ect-section--hero .ect-hero__subcard{
  position: absolute;
  left: 50%;
  bottom: clamp(120px, 20vw, 140px);
  top: auto;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 2vw, 12px);
  width: clamp(220px, 68vw, 320px);
  max-height: clamp(210px, 34vh, 280px);
  min-height: clamp(150px, 22vh, 220px);
  padding: clamp(16px, 4.4vw, 22px) clamp(18px, 5vw, 26px);
  border-radius: 18px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 18px 32px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: auto;
  z-index: 14;
  overflow: hidden;
}
.hero--mobile .ect-hero__subcard.is-active,
html.ect-mobile .ect-section--hero .ect-hero__subcard.is-active{
  animation: heroSubcardIn .45s ease forwards;
  animation-delay: 3s;
}
.hero--mobile .ect-hero__subcard-line,
html.ect-mobile .ect-section--hero .ect-hero__subcard-line{
  margin: 0;
  font-size: clamp(13px, 3.6vw, 18px);
  font-weight: 600;
  color: #fff;
  text-align: left;
  width: 100%;
}
.hero--mobile .ect-hero__subcard-text,
html.ect-mobile .ect-section--hero .ect-hero__subcard-text{
  margin: 0;
  font-size: clamp(13px, 3.6vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  display: block !important;
  text-align: justify;
  text-align-last: left;
  width: 100%;
  overflow-y: auto;
  hyphens: auto;
  word-break: normal;
  overflow-wrap: anywhere;
}
.hero--mobile .ect-hero__badge{
  width: clamp(64px, 18vw, 92px);
  height: clamp(64px, 18vw, 92px);
  font-size: clamp(11px, 3.2vw, 14px);
  padding: clamp(8px, 2.2vw, 12px);
}

.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__copy{
  align-items: flex-start;
  text-align: left;
  gap: clamp(6px, 3.2vw, 12px);
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__stage{
  min-height: clamp(320px, 72vh, 520px);
  padding-bottom: clamp(10px, 3vw, 14px);
}
.hero--mobile .ect-hero__slide.is-variant-c [data-hero-machine]{
  height: clamp(320px, 76vh, 560px);
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__logo{
  width: clamp(200px, 60vw, 320px);
  margin: 0 auto clamp(10px, 3.2vw, 18px);
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__rotline{
  order: 2;
  margin-top: clamp(8px, 3vw, 14px);
  max-width: clamp(240px, 88vw, 520px);
  text-align: left;
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__rotword{
  font-size: clamp(18px, 6.6vw, 26px);
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__rottext{
  font-size: clamp(14px, 4.4vw, 18px);
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__highlights{
  order: 4;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.8vw, 7px);
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: clamp(8px, 3.8vw, 14px) 0 0;
  padding: clamp(8px, 3vw, 14px);
  border-radius: 18px;
  background: color-mix(in srgb, rgba(15,15,15,0.82) 70%, rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 32px rgba(0,0,0,0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__highlight,
html.ect-mobile .ect-section--hero .ect-hero__slide.is-variant-c .ect-hero__highlight{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 1.8vw, 8px);
  padding: clamp(3px, 1.6vw, 5px) clamp(0px, 0.6vw, 3px);
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
  width: 100%;
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__highlight-icon,
html.ect-mobile .ect-section--hero .ect-hero__slide.is-variant-c .ect-hero__highlight-icon{
  width: clamp(18px, 6vw, 26px);
  height: clamp(18px, 6vw, 26px);
  color: var(--ect-color-5);
  flex-shrink: 0;
  filter: none;
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__highlight-text,
html.ect-mobile .ect-section--hero .ect-hero__slide.is-variant-c .ect-hero__highlight-text{
  flex: 1 1 auto;
  font-size: clamp(14px, 4.4vw, 18px);
  line-height: 1.32;
  color: rgba(255,255,255,0.92);
}
.hero--mobile .ect-hero__slide.is-variant-c .ect-hero__highlight + .ect-hero__highlight,
html.ect-mobile .ect-section--hero .ect-hero__slide.is-variant-c .ect-hero__highlight + .ect-hero__highlight{
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: clamp(4px, 1.6vw, 6px);
  margin-top: clamp(2px, 1.2vw, 4px);
}

:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="statement"]{
  padding-bottom: clamp(22px, 7vw, 38px);
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="statement"] .ect-hero__layout{
  position: relative;
  z-index: 2;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="statement"] .ect-hero__copy{
  padding: 0;
  max-width: none;
  width: 100%;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="statement"] .ect-hero__stage{
  position: relative;
  inset: auto;
  display: flex;
  pointer-events: auto;
  z-index: 1;
}
:where(.hero--mobile.is-variant-a, .hero--mobile.is-variant-b,
       html.ect-mobile .ect-section--hero.is-variant-a, html.ect-mobile .ect-section--hero.is-variant-b)
  .ect-hero__slide[data-hero-layout="statement"] .ect-hero__stage{
  justify-content: center;
  padding-bottom: clamp(0px, 2.2vw, 8px);
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="statement"] .ect-hero__machinewrap{
  position: relative;
  right: auto;
  bottom: auto;
  margin: clamp(4px, 2.2vw, 12px) auto 0;
  min-width: 0;
  width: 100%;
  height: auto;
  max-height: none;
  justify-content: center;
}
:where(.hero--mobile.is-variant-a, .hero--mobile.is-variant-b,
       html.ect-mobile .ect-section--hero.is-variant-a, html.ect-mobile .ect-section--hero.is-variant-b)
  .ect-hero__slide[data-hero-layout="statement"] .ect-hero__machinewrap{
  margin: clamp(-120px, -20vw, -68px) auto 0;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="statement"] .ect-hero__badge{
  position: absolute;
  top: auto;
  bottom: clamp(28px, 12vw, 84px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 0) rotate(10deg);
}

:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="process"]{
  padding-bottom: clamp(24px, 8vw, 42px);
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="process"] .ect-hero__copy{
  padding: 0;
  width: 100%;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="process"] .ect-hero__layout{
  position: relative;
  z-index: 2;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="process"] .ect-hero__copy{
  padding: 0;
  max-width: none;
  width: 100%;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="process"] .ect-hero__stage{
  position: relative;
  inset: auto;
  display: flex;
  pointer-events: auto;
  z-index: 1;
}
:where(.hero--mobile.is-variant-a, .hero--mobile.is-variant-b, .hero--mobile.is-variant-process,
       html.ect-mobile .ect-section--hero.is-variant-a, html.ect-mobile .ect-section--hero.is-variant-b, html.ect-mobile .ect-section--hero.is-variant-process)
  .ect-hero__slide[data-hero-layout="process"] .ect-hero__stage{
  justify-content: flex-start;
  min-height: clamp(242px, 54vh, 420px);
  margin: clamp(-22px, -4.8vw, -10px) 0 0;
  padding-bottom: clamp(0px, 1.8vw, 8px);
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="process"] .ect-hero__machinewrap{
  position: relative;
  right: auto;
  bottom: auto;
  margin: clamp(4px, 2.2vw, 12px) auto 0;
  min-width: 0;
  width: 100%;
  height: auto;
  max-height: none;
  justify-content: center;
  pointer-events: none;
}
:where(.hero--mobile.is-variant-a, .hero--mobile.is-variant-b, .hero--mobile.is-variant-process,
       html.ect-mobile .ect-section--hero.is-variant-a, html.ect-mobile .ect-section--hero.is-variant-b, html.ect-mobile .ect-section--hero.is-variant-process)
  .ect-hero__slide[data-hero-layout="process"] .ect-hero__machinewrap{
  margin: clamp(-160px, -24vw, -96px) auto 0;
  align-items: center;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide[data-hero-layout="process"] .ect-hero__badge{
  position: absolute;
  top: auto;
  bottom: clamp(26px, 12vw, 82px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 0) rotate(8deg);
}

:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__layout{
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(10px, 3.8vw, 16px);
  width: 100%;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__copy{
  max-width: none;
  width: 100%;
  align-items: flex-start;
  text-align: left;
  gap: clamp(6px, 3.2vw, 12px);
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlights{
  width: 100%;
  max-width: none;
  margin: clamp(8px, 3.8vw, 14px) 0 0;
  padding: clamp(8px, 3vw, 14px);
  gap: clamp(4px, 1.8vw, 7px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlight{
  margin: 0;
  padding: clamp(3px, 1.6vw, 5px) clamp(0px, 0.6vw, 3px);
  gap: clamp(4px, 1.8vw, 8px);
  align-items: center;
  justify-content: flex-start;
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlight + .ect-hero__highlight{
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: clamp(2px, 1.2vw, 4px);
  padding-top: clamp(4px, 1.6vw, 6px);
}

:where(.hero--mobile, html.ect-mobile .ect-section--hero)::before{
  display: none;
}
.hero--mobile.is-variant-c::before,
html.ect-mobile .ect-section--hero.is-variant-c::before{
  display: block;
}
.hero--mobile.is-variant-c.hero-overlay-active::before,
html.ect-mobile .ect-section--hero.is-variant-c.hero-overlay-active::before{
  opacity: 1;
}
.hero--mobile.is-variant-c.hero-overlay-active.hero-overlay-faded::before,
html.ect-mobile .ect-section--hero.is-variant-c.hero-overlay-active.hero-overlay-faded::before{
  opacity: 0.3;
}

/* --- Hero Mobile (final overrides) --- */
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero){
  --hero-rottext-size: clamp(15px, 3.2vmin, 26px);
  --hero-mobile-menu-h: clamp(48px, 14vw, 60px);
  --hero-variant-c-copy-max: none;
  --hero-variant-c-highlights-max: none;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide{
  min-height: 100vh;
  padding: clamp(52px, 13vw, 68px) clamp(16px, 4vw, 22px) clamp(92px, 20vw, 130px);
  gap: clamp(18px, 6.5vw, 30px);
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__layout{
  min-height: 100%;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(16px, 6vw, 24px);
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__copy{
  max-width: none;
  align-items: flex-start;
  gap: clamp(10px, 3.4vw, 16px);
  width: 100%;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__stage{
  margin: clamp(2px, 1.8vw, 10px) 0 0;
  max-width: none;
  min-height: clamp(320px, 72vh, 520px);
  padding-bottom: clamp(10px, 3vw, 14px);
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) [data-hero-machine]{
  height: clamp(320px, 76vh, 560px);
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__rotline{
  margin-top: clamp(10px, 3.4vw, 16px);
  text-align: left;
  max-width: clamp(240px, 88vw, 520px);
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__progress{
  top: calc(max(0px, env(safe-area-inset-top, 0px)) + var(--hero-mobile-menu-h, 0px));
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__subcard{
  left: 50%;
  bottom: clamp(26px, 10vw, 56px);
  transform: translate(-50%, 0);
  width: clamp(220px, 68vw, 320px);
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlights{
  background: color-mix(in srgb, rgba(15,15,15,0.82) 70%, rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 32px rgba(0,0,0,0.32);
  padding: clamp(8px, 3vw, 14px);
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: clamp(8px, 3.8vw, 14px) 0 0;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlight{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0;
  padding: clamp(3px, 1.6vw, 5px) clamp(0px, 0.6vw, 3px);
  gap: clamp(4px, 1.8vw, 8px);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlight + .ect-hero__highlight{
  border-top: 1px solid rgba(255,255,255,0.14);
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__rotline{
  margin-top: clamp(10px, 3.4vw, 16px);
  text-align: left;
  align-items: flex-start;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__badge{
  width: clamp(58px, 16vw, 80px);
  height: clamp(58px, 16vw, 80px);
  font-size: clamp(10px, 3vw, 13px);
}

/* Sheen-Sweep (liegt im Slot, über CLEAN) */
.ect-hero__sheen{
  position:absolute;
  left:0; top:0;
  /* WICHTIG: kein translateX(-50%) mehr! */
  transform: translateX(0);
  width: 240px;   /* JS setzt final */
  height: 240px;  /* JS setzt final */
  pointer-events:none;
  opacity:0;
  z-index:5; /* über clean */
  background:
    linear-gradient(75deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.25) 45%,
      rgba(255,255,255,0.55) 50%,
      rgba(255,255,255,0.25) 55%,
      rgba(255,255,255,0) 100%);
  filter: blur(2px);
  mix-blend-mode: screen;
  border-radius: 12px;
}

/* Sheen container clipped exactly to CLEAN image (sized/positioned via JS) */
.ect-hero__sheenbox{
  position:absolute;
  left:0; top:0;
  width: var(--clean-w, 0px); height: var(--clean-h, 0px); /* JS setzt auf Clean-Bounds */
  left: var(--clean-left, 0px);
  top: var(--clean-top, 0px);
  overflow:hidden;                  /* harter Clip innerhalb Clean */
  pointer-events:none;
  z-index:5;                        /* über Clean-Effekt */
}

/* CTAs am unteren Rand, zentriert (unverändert) */
.ect-hero__ctas{
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  gap: 12px;
  transform: none;
}
.ect-section--hero .ect-hero__cta{
  /* Keep herokontroll CTA visuals from core; sizing via core tokens below */
}
.ect-hero__cta:hover{ background: rgba(255,255,255,.08); }
/* Hero CTA tokens: accent orange */
.ect-section--hero .ect-cta{
  --cta-bg: var(--ect-color-5);
  --cta-bg-hover: var(--ect-color-5);
  --cta-text: #fff;
  --cta-text-hover: #fff;
  --cta-icon: #fff;
  --cta-icon-hover: #fff;
}
/* FlyCTA should pick orange from hero */
.ect-section--hero{ --fly-cta-color: var(--ect-color-5); }

/* Stage: visueller Bereich für Maschine + Slot + Effekte */
.ect-hero__stage{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ect-hero__machinewrap{
  position: relative;
  width: 100%;
  max-width: var(--hero-wrap-w, clamp(420px, 58vw, 1200px));
  max-height: var(--hero-machine-max-h, none);
  margin: 0 auto;
}

.ect-hero__machine{
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--hero-machine-max-h, none);
  pointer-events: none;
}

@media (max-width: 1024px){
  .ect-hero__machinewrap{
    max-width: clamp(260px, 72vw, 780px);
  }
}

/* SLOT (Clipping-Container an der Lippelinie) — Maße/height werden via JS gesetzt */
.ect-hero__slot{
  position:absolute;
  left:0; top:0; width:100%;
  height: var(--lip-y, 0px); /* JS setzt tatsächliche Höhe = lipY */
  overflow:hidden;
  pointer-events:none;
  z-index:3; /* über der Maschine, hinter der Typo */
  /* kein Hintergrund, nur Clipping */
}

/* Effekt-Layer (dirty/clean) liegen im Slot */
.ect-hero__effect{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  will-change: transform, opacity;
  pointer-events:none;
  opacity:0;
  width: var(--eff-w, auto);
  /* z-index nicht nötig: Reihenfolge im Slot steuert Sichtbarkeit */
}

/* (removed one-line container styles; keep core flow: headline above subline) */

.ect-hero__hint{
  position:absolute;
  left:50%;
  top: 0;
  transform: translateX(-50%);
  display: inline-block;
  box-sizing: border-box;
  max-width: var(--ect-hero-hint-maxw, 360px);
  padding: var(--hint-pad-y, 14px) var(--hint-pad-x, 16px);
  border-radius: 10px;
  color: #fff;
  font-size: var(--hint-fs, 16px);
  line-height: 1.4;
  text-align: center;
  z-index: 8;                        /* über clean/dirty */
  background: rgba(54,53,47,0.5); /* var(--ect-color-3) with opacity */
  border: 1px solid rgba(54,53,47,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.20);
  pointer-events: none;              /* kein Hover-Capture */
  opacity: 0;                        /* animiert per GSAP */
}

/* kleiner Pfeil */
.ect-hero__hint::after{
  display: none;
}

/* Störer-Badge an der Maschine */
.ect-hero__badge{
  position:absolute; /* JS setzt left/top */
  display:inline-flex;
  box-sizing: border-box;
  align-items:center; justify-content:center;
  width: var(--badge-d, 140px);
  height: var(--badge-d, 140px);
  left: var(--badge-left, 0px);
  top: var(--badge-top, 0px);
  padding: var(--badge-pad-y, 14px) var(--badge-pad-x, 18px);
  border-radius: 999px;                  /* rund */
  border: var(--badge-border, 2px) solid var(--badge-border-color, #fff); /* weißer Rand */
  color: #fff;                           /* Text weiß */
  text-align: center;
  font-weight: 800;
  line-height: 1.05;
  font-size: var(--badge-fs, 16px);
  background: var(--ect-color-5);        /* Orange */
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  pointer-events: auto;
  transform: rotate(-15deg) scale(0.86);
  cursor: pointer;
  z-index: 6;                            /* über clean/dirty */
  transition: background .18s ease;
}
.ect-hero__badge:hover{
  background: var(--ect-color-7);        /* Green on hover */
}
.ect-hero__badge br{ line-height: 1.05; }
.ect-hero__effect.behind{ z-index:0; } /* optionaler Zustand */

.ect-hero__hint{ will-change: transform, opacity; }
.ect-hero__badge{ will-change: transform, opacity; }

/* HERO — CTA token overrides */
.ect-section--hero{
  --hero-cta-bg: var(--ect-color-5);
  --hero-cta-bg-hover: var(--ect-color-7);
  --hero-cta-text: #fff;
  --hero-cta-icon: #fff;
  --hero-badge-bg: var(--ect-color-5);
  --hero-badge-bg-hover: var(--ect-color-7);
  --hero-badge-border: #fff;
  --hero-badge-border-hover: #fff;
  --hero-badge-text: #fff;
  --hero-badge-text-hover: #fff;
}
.ect-section--hero .ect-cta{
  --cta-bg:              var(--hero-cta-bg, var(--ect-color-5));
  --cta-bg-hover:        var(--hero-cta-bg-hover, var(--ect-color-7));
  --cta-text:            var(--hero-cta-text, #fff);
  --cta-text-hover:      var(--hero-cta-text, #fff);
  --cta-icon:            var(--hero-cta-icon, #fff);
  --cta-icon-hover:      var(--hero-cta-icon, #fff);
  --cta-icon-size:       2rem;

  --cta-pattern-color:   var(--ect-color-2);
  --cta-pattern-opacity: 0.5;
  --cta-pattern-scale:   1;

  --cta-scale-hover:     1.012;
  --cta-scale-active:    .985;
  --cta-dur:             .22s;

  --cta-idle-bounce-gap: 6s;
  --cta-idle-sheen-gap:  12s;

  padding: var(--cta-pad-y) var(--cta-pad-x);
  font-size: var(--cta-fs);
  border-radius: var(--cta-radius);
  min-width: var(--cta-minw);
}

/* HERO — Badge & Hint (explicit, section-scoped) */
.ect-section--hero .ect-hero__badge{
  --badge-bg: var(--hero-badge-bg, var(--ect-color-5));
  color: var(--hero-badge-text, #fff);
  border-color: var(--hero-badge-border, #fff);
  text-align: center;
}
.ect-section--hero .ect-hero__badge:hover{
  --badge-bg: var(--hero-badge-bg-hover, var(--hero-badge-bg, var(--ect-color-5)));
  color: var(--hero-badge-text-hover, var(--hero-badge-text, #fff));
  border-color: var(--hero-badge-border-hover, var(--hero-badge-border, #fff));
}
.ect-section--hero .ect-hero__badge .ect-cta__pattern{ display:none !important; }

.ect-section--hero.is-variant-a{
  --hero-cta-bg: var(--ect-color-6);
  --hero-cta-bg-hover: var(--ect-color-7);
  --hero-cta-text: #fff;
  --hero-cta-icon: #fff;
  --hero-badge-bg: var(--ect-color-6);
  --hero-badge-bg-hover: var(--ect-color-7);
  --hero-badge-border: #fff;
  --hero-badge-border-hover: #fff;
  --hero-badge-text: #fff;
  --hero-badge-text-hover: #fff;
}
.ect-section--hero.is-variant-b{
  --hero-cta-bg: var(--ect-color-5);
  --hero-cta-bg-hover: var(--ect-color-7);
  --hero-cta-text: #fff;
  --hero-cta-icon: #fff;
  --hero-badge-bg: var(--ect-color-5);
  --hero-badge-bg-hover: var(--ect-color-7);
  --hero-badge-border: #fff;
  --hero-badge-border-hover: color-mix(in srgb, var(--ect-color-7) 65%, #fff 35%);
}
.ect-section--hero.is-variant-process{
  --hero-cta-bg: var(--ect-color-5);
  --hero-cta-bg-hover: var(--ect-color-7);
  --hero-cta-text: #fff;
  --hero-cta-icon: #fff;
  --hero-badge-bg: var(--ect-color-5);
  --hero-badge-bg-hover: var(--ect-color-7);
  --hero-badge-border: #fff;
  --hero-badge-border-hover: color-mix(in srgb, var(--ect-color-7) 65%, #fff 35%);
}

.ect-section--hero .ect-hero__hint{
  /* glass look */
  background: rgba(54,53,47,0.72) !important; /* approx --ect-color-3 with opacity */
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff !important;
}

/* ---------------- KPI ---------------- */
.ect-section--kpi{
  /* Section tokens (can be overridden per theme) */
  --kpi-card-bg: rgba(54,53,47,0.55);
  --kpi-card-border: rgba(255,255,255,0.18);
  --kpi-card-blur: 8px;
  --kpi-card-radius: 14px;
  --kpi-card-shadow: 0 12px 36px rgba(0,0,0,.20);
  --kpi-accent: var(--ect-color-6);
  --kpi-odo-size: clamp(3.8rem, 9vw, 96px);
  --kpi-odo-weight: 800;
  --kpi-gap: 25px;
  --kpi-suffix-col: 4ch;

  /* Align spacing tokens to hero behavior */
  --kpi-gap-head-sub: clamp(14px, 2vmin, 26px);
  --kpi-gap-sub-rot:  clamp(18px, 2.6vmin, 36px);
  --kpi-gap-rot-cards: clamp(24px, 3vmin, 44px);

  /* Card min-height (height-aware, clamped) */
  --kpi-card-minh: clamp(120px, calc(220px * var(--ect-h-scale)), 280px);

  /* Rotate size (height-aware) */
  --kpi-rot-size: clamp(1.05rem, calc(2.2vw * var(--ect-h-scale)), 32px);

  /* Top row (icon + text) sizing */
  /* Top headline next to icons — width-driven, higher cap */
  /* Simplified, width+height aware; JS ensures one-line fit to card width */
  --kpi-top-fs:  clamp(0.95rem, min(2.1vw, 2.4vmin), 28px);
  --kpi-top-ico: clamp(18px,     calc(32px  * var(--ect-h-scale)), 40px);

  /* Card padding (height-aware) */
  --kpi-card-pad-t: clamp(16px, calc(28px * var(--ect-h-scale)), 28px);
  --kpi-card-pad-x: clamp(14px, calc(24px * var(--ect-h-scale)), 24px);
  --kpi-card-pad-b: clamp(12px, calc(24px * var(--ect-h-scale)), 24px);
}
.ect-section--kpi{
  background-color:#f5f7fa;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  text-align:left;
  --section-overlay-color: var(--ect-color-3);
  --section-overlay-opacity:0.6;
  /* Desktop typographic tokens */
  --hero-maxw: 960px;
  --hero-align: center;
  overflow: hidden; /* Bühne soll nicht herausragen */
  /* Bild bündig unten: Section-Bottom-Padding entfernen */
  padding-bottom: 0 !important;
  min-height: 100vh;
  /* Active nav color token (match subline) */
  --nav-active-color: var(--ect-color-7);
  /* Header logo box color for this section */
  --logo-box-color-section: var(--ect-color-7);
  /* Align section internal top spacing with hero */
  padding-top: 0 !important;
}

.ect-section--kpi .ect-container{
  /* Vollbreite nutzen, globale Container-Zentrierung überschreiben */
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: left;

  /* Layout: relative for absolute positioning of rotate block */
  position: relative;
  height: 100%;

  /* Gleich: Padding */
  padding-top: 64px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 0; /* Content-Abstand – Bild bleibt bündig (liegt ausserhalb im Stage) */

  z-index: 2; /* Typo liegt über der Stage */
}

.ect-section--kpi .ect-headline{ color: var(--ect-color-1); }

.ect-section--kpi .ect-subline{ color: var(--ect-color-7); }

/* Align headline/subline pose with hero */
.ect-section--kpi .ect-headline{ margin: 0; }
.ect-section--kpi .ect-subline{  margin: 0 0 var(--kpi-gap-sub-rot); }


.ect-kpi__ico svg{ width: var(--kpi-top-ico, 32px); height: var(--kpi-top-ico, 32px); display:block; fill: currentColor; color: var(--kpi-accent); }
.ect-kpi__rot{
  font-weight: 700; 
  line-height: 1.2;
  font-size: var(--kpi-rot-size);
  color: var(--ect-color-1);
  text-align: center;
  display:block;
  /* spacing follows tokens to adapt like hero */
  margin: var(--kpi-gap-sub-rot) 0 var(--kpi-gap-rot-cards) 0;
  will-change: opacity, transform;
  white-space: nowrap; /* keep one line; core fit trims size via [data-fit="one"] */
}

/* Rotator smooth swap states (used by JS swapRotText) */
.ect-section--kpi .ect-kpi__rot.rot--out{
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
}
.ect-section--kpi .ect-kpi__rot.rot--in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

/* Grid with 4 cards */
.ect-kpi__list{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px,1fr));
  gap: 36px;
}
@media (max-width: 900px){ html.ect-mobile .ect-kpi__list{ grid-template-columns: 1fr; gap: 28px; } }

/* Mobile KPI carousel: two stacked cards per slide with horizontal swipe */
@media (max-width: 600px){ html.ect-mobile .ect-section--kpi .ect-kpi__rot{ display: none !important; } html.ect-mobile .ect-section--kpi{ --kpi-gap-head-sub: 12px; --kpi-gap-sub-rot: 12px; --kpi-gap-rot-cards: 16px; } html.ect-mobile .ect-section--kpi .ect-container{ padding-top: 52px; padding-left: 16px; padding-right: 16px; padding-bottom: 96px; } html.ect-mobile .ect-kpi__carousel{ position: relative; overflow: hidden; width: 100%; display:flex; flex-direction: column; } html.ect-mobile .ect-kpi__track{ display: flex; width: 100%; will-change: transform; transition: transform .28s cubic-bezier(.2,.7,.2,1); } html.ect-mobile .ect-kpi__carousel{ touch-action: pan-x; overscroll-behavior-x: contain; } html.ect-mobile .ect-kpi__slide{ flex: 0 0 100%; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } html.ect-mobile .ect-kpi__list{ display: none; } html.ect-mobile .ect-kpi__item{ gap: 12px; } html.ect-mobile .ect-kpi__val{ column-gap: 6px; margin-bottom: 6px; } html.ect-mobile .ect-kpi__prefix{ font-size: .85rem; } html.ect-mobile .ect-kpi__odo{ font-size: clamp(1.60rem, 7.0vw, 32px); } html.ect-mobile .ect-kpi__suffix{ font-size: .90rem; min-width: 3ch; } html.ect-mobile .ect-kpi__label{ font-size: .95rem; } html.ect-mobile .ect-kpi__headlabel{ font-size: .70rem; } html.ect-mobile .ect-section--kpi .ect-kpi__cta{ --cta-fs: .95rem; --cta-pad-y: 10px; --cta-pad-x: 14px; } html.ect-mobile .ect-kpi__controls{ display:flex; align-items:center; justify-content: space-between; padding: 8px 4px 0; margin-top: 6px; } html.ect-mobile .ect-kpi__nav{ position: static; transform: none; width:36px; height:36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.28); color:#fff; display:flex; align-items:center; justify-content:center; z-index: 11; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } html.ect-mobile .ect-kpi__nav[disabled]{ opacity: .35; pointer-events: none; } html.ect-mobile .ect-kpi__nav svg{ width: 18px; height: 18px; display:block; } }

/* (removed KPI-only floating CTA — use global FlyCTA in core.css) */

/* Mobile optimization: fit KPI section comfortably within one viewport */
@media (max-width: 600px){
  html.ect-mobile .ect-section--kpi{
    --kpi-gap-head-sub: 12px;
    --kpi-gap-sub-rot:  12px;
    --kpi-gap-rot-cards: 16px;
  }
  html.ect-mobile .ect-section--kpi .ect-container{
    padding-top: 52px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 96px;
  }
  html.ect-mobile .ect-kpi__list{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  html.ect-mobile .ect-section--kpi{
    --kpi-top-fs:  clamp(0.80rem, 3.6vw, 16px);
    --kpi-top-ico: clamp(16px,     5.2vw, 22px);
    --kpi-odo-size: clamp(1.60rem, 7.0vw, 32px);
    --kpi-card-minh: clamp(96px, 20vh, 140px);
    --kpi-card-pad-t: 12px;
    --kpi-card-pad-x: 12px;
    --kpi-card-pad-b: 10px;
  }
  html.ect-mobile .ect-kpi__item{ gap: 12px; }
  html.ect-mobile .ect-kpi__val{ column-gap: 6px; margin-bottom: 6px; }
  html.ect-mobile .ect-kpi__prefix{ font-size: .85rem; }
  html.ect-mobile .ect-kpi__suffix{ font-size: .90rem; min-width: 3ch; }
  html.ect-mobile .ect-kpi__label{ font-size: .95rem; }
  html.ect-mobile .ect-kpi__headlabel{ font-size: .70rem; }
  html.ect-mobile .ect-section--kpi .ect-kpi__cta{ --cta-fs: .95rem; --cta-pad-y: 10px; --cta-pad-x: 14px; }
}

/* Simplified sizing: rely on combined vw/vmin and local JS fit to card width */

.ect-kpi__item{
  display:flex; flex-direction:column; gap: var(--kpi-gap);
}

/* Top row: icon + text */
.ect-kpi__top{
  display:flex; align-items:center; gap:12px;
}
.ect-kpi__icon svg{
  width: var(--kpi-top-ico, 32px);
  height: var(--kpi-top-ico, 32px);
  display:block;
  color: var(--ect-color-7);
}
/* Ensure currentColor flows into symbol contents across browsers */
.ect-kpi__icon use{ color: inherit; fill: currentColor; }
.ect-kpi__text{
  margin:0;
  font-weight: 600;
  font-size: var(--kpi-top-fs);
  line-height: 1.35;
  color: var(--ect-color-1);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Glass card block with odometer */
.ect-kpi__block{
  padding: var(--kpi-card-pad-t) var(--kpi-card-pad-x) var(--kpi-card-pad-b);
  border-radius: var(--kpi-card-radius);
  background: var(--kpi-card-bg);
  border: 1px solid var(--kpi-card-border);
  box-shadow: var(--kpi-card-shadow);
  backdrop-filter: blur(var(--kpi-card-blur));
  -webkit-backdrop-filter: blur(var(--kpi-card-blur));
  color: #fff;
  position: relative;
  overflow: hidden;              /* Bild/Veil bleiben in der Card */
  will-change: transform, opacity;
  transition: transform .28s ease, box-shadow .28s ease;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  row-gap: 10px;
  column-gap: 12px;
  min-height: var(--kpi-card-minh);
}

/* Insets for top-left and bottom-right labels inside cards */
.ect-kpi__headlabel{ padding-left: clamp(6px, 0.8vw, 12px); padding-top: clamp(4px, 0.6vw, 10px); }
.ect-kpi__label{ padding-right: clamp(6px, 0.8vw, 12px); padding-bottom: clamp(4px, 0.6vw, 10px); }

/* Force single-line card headings on desktop, Core will fit via [data-fit="one"] */
@media (min-width: 800px){
  .ect-kpi__text{ white-space: nowrap; }
}
.ect-kpi__headlabel{
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .85;
  margin-bottom: 6px;
  grid-column: 1;
  grid-row: 1;
}
.ect-kpi__val{
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto max-content;
  justify-content: center;
  align-items: baseline;
  column-gap: 8px;
  line-height: 1;
  margin-bottom: 8px;
  grid-column: 1 / -1;
}
.ect-kpi__prefix{
  font-size: .95rem; opacity: .85; font-weight: 600;
}
.ect-kpi__odo{
  font-size: var(--kpi-odo-size);
  font-weight: var(--kpi-odo-weight);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.ect-kpi__suffix{
  font-size: clamp(.95rem, 2vw, 1.125rem);
  font-weight: 700;
  opacity: .9;
  min-width: var(--kpi-suffix-col);
  text-align: left;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.ect-kpi__label{
  font-size: 1.2rem;
  opacity: .9;
  grid-column: 2;
  align-self: center;
  justify-self: end;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* === KPI Highlight Layer & Animation === */

/* Section-scope Highlight Tokens (anpassbar) */
.ect-section--kpi{
  --kpi-hl-tint: var(--ect-color-3);   /* Overlay-Farbe im Highlight */
  --kpi-hl-veil-op: .4;               /* Deckkraft der Veil */
  --kpi-hl-scale: 1.03;                /* sanfter Zoom der Card */
  --kpi-hl-fade: .35s;                 /* Fade-Dauer Bild/Veil */
  --kpi-hl-shadow: 0 16px 44px rgba(0,0,0,.28);
}

/* Card: Layer vorbereiten */
.ect-kpi__block::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--kpi-card-image, none);
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity var(--kpi-hl-fade) ease;
  z-index: 0; /* unter Content */
  pointer-events: none; /* blockiert keine Klicks */
}

/* Veil/Tint über Bild (für Kontrast) */
.ect-kpi__block::after{
  content:"";
  position:absolute; inset:0;
  background: color-mix(in oklab, var(--kpi-hl-tint, #000) 100%, transparent);
  mix-blend-mode: normal;       /* changed from overlay to normal */
  opacity: 0;
  transition: opacity var(--kpi-hl-fade) ease;
  z-index: 1;
  pointer-events: none; /* blockiert keine Klicks */
}

/* Content über Layer lassen */
.ect-kpi__block > *{
  position: relative; z-index: 2;
}

/* Highlight-Zustand (per JS: .ect-kpi__item.is-hl) */
.ect-kpi__item.is-hl .ect-kpi__block{
  transform: scale(var(--kpi-hl-scale));
  box-shadow: var(--kpi-hl-shadow);
}
.ect-kpi__item.is-hl .ect-kpi__block::before{
  opacity: .85;
}
.ect-kpi__item.is-hl .ect-kpi__block::after{
  opacity: var(--kpi-hl-veil-op);
}

/* Leicht höhere Karten, ohne Schriftgrößen zu ändern */
/* (padding already adjusted above) */

/* Baseline der Werte klar halten (odo + suffix) */
/* replaced by new .ect-kpi__val */

/* Reduced motion: kein Scale/Fade im Highlight */
@media (prefers-reduced-motion: reduce){
  .ect-kpi__item.is-hl .ect-kpi__block{ transform: none; box-shadow: var(--kpi-card-shadow); }
  .ect-kpi__block::before,.ect-kpi__block::after{ transition: none; }
}



/* KPI — CTA token overrides */
.ect-section--kpi .ect-cta{
  --cta-bg:              var(--ect-color-7);  /* Orange */
  --cta-bg-hover:        var(--ect-color-5);  /* Blau */
  --cta-text:            #fff;
  --cta-text-hover:      #fff;
  --cta-icon:            #fff;
  --cta-icon-hover:      #fff;
  --cta-icon-size:       1.6rem;
  --cta-pattern-color:   var(--ect-color-2);
  --cta-pattern-opacity: .35;
  --cta-scale-hover:     1.012;
  --cta-scale-active:    .985;
  --cta-dur:             .22s;
  overflow: hidden; /* Sheen & Pattern im Button halten */
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

.ect-section--kpi .ect-cta .ect-cta__icon{
  color: var(--cta-icon);
  line-height: 0;
}
.ect-section--kpi .ect-cta:hover .ect-cta__icon{
  color: var(--cta-icon-hover);
}
.ect-section--kpi .ect-cta .ect-cta__icon svg{
  width: var(--cta-icon-size);
  height: var(--cta-icon-size);
  display: inline-block;
  fill: currentColor;
}

/* KPI — CTA placement (bottom-right of the section container) */
.ect-section--kpi .ect-kpi__ctas{
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 12;
  display: flex;
  gap: 12px;
}

/* KPI — CTA sizing (layout only; colors via tokens) */
.ect-section--kpi .ect-kpi__cta{
  padding: var(--cta-pad-y) var(--cta-pad-x);
  font-size: var(--cta-fs);
  border-radius: var(--cta-radius);
  min-width: var(--cta-minw);
}


/* ---------------- Responsive ---------------- */
@media (max-width:768px){ html.ect-mobile .ect-section--why .ect-container{ grid-template-columns:1fr; } }
@media (max-width: 900px){ html.ect-mobile .ect-kpi__label{ grid-column: 1 / -1; justify-self: center; } }


/* =========================================================
   WHY — Consolidated, MQ-free, Liquid-Resize (2025-09-11)
   Single Source of Truth: --why-stage-h (JS budgets it)
   Everything else derives from tokens / clamp().
========================================================= */

/* ---------- Section Scope Tokens ---------- */
.ect-section--why{
  /* Visual base */
  --why-bg:               #f7f8fb;
  --why-text:             #1d232a;
  --why-muted:            var(--ect-color-2);

  /* Background (can be overridden theme-wide) */
  --section-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ect-color-4) 92%, black) 0%,
    color-mix(in srgb, var(--ect-color-2) 92%, black) 100%
  );

  /* Stage geometry (JS will budget --why-stage-h) */
  --why-stage-gap:        clamp(8px, 1.8vw, 24px);
  --why-stage-h:          clamp(320px, 64vh, 850px);

  /* Device + Sides ratios (single truth) */
  --why-device-scale:     1;            /* center uses full stage height */
  --why-device-maxh:      calc(var(--why-stage-h) * var(--why-device-scale));
  --why-side-ratio:       0.40;         /* dirty/clean height = 40% of stage */
  /* Back-compat token if older CSS references are present */
  --why-side-scale:       0.84;         /* 0.48 * 0.84 ≈ 0.40 */

  /* Labels */
  /* Labels: slightly smaller on small viewports */
  --why-label-size:       clamp(28px, 5.2vw, 48px);
  --why-label-gap:        clamp(16px, 1.8vw, 26px);
  --why-labels-mt:        clamp(12px, 2.2vmin, 28px);
  --why-labels-mb:        clamp(15px, 2.4vmin, 32px);

  --why-label-accent:     var(--ect-color-5);

  /* Steps: card & rhythm */
  --why-steps-gap:        var(--why-stage-gap);
  --why-card-minw:        320px;

  --why-step-pad-y:      clamp(6px, 0.9vw, 14px);
  --why-step-pad-x:      clamp(12px, 1.2vw, 18px);

  --why-step-sub-fs:      clamp(12px, 1.6vmin, 20px);
  --why-step-sub-lh:      1.2;
  --why-step-desc-fs:    clamp(12px, 1.3vmin, 15px);
  --why-step-sub-mb:      clamp(6px, 1.1vmin, 14px);

  /* Icon smaller on small screens; lower min/max */
  --why-step-icon-size:  clamp(24px, 3.6vmin, 42px);
  --why-icon-h:          var(--why-step-icon-size);
  --why-step-gap-icon:   clamp(6px, 0.9vmin, 10px);

  --why-badge-nudge-x:    -4px;
  /* Badge number: move slightly down and 50% larger */
  --why-badge-nudge-y:    -6px;
  --why-badge-scale:      0.90;

  /* Card glass look */
  --why-card-bg:          rgba(54,53,47,0.55);
  --why-card-border:      rgba(255,255,255,0.18);
  --why-card-blur:        8px;
  --why-card-radius:      14px;
  --why-card-shadow:      0 12px 36px rgba(0,0,0,.20);

  /* CTA */
  --why-cta-gap:          12px;

  /* Overlay */
  --section-overlay-color:#000;
  --section-overlay-opacity:.25;

  /* Grid */
  --why-grid:             repeat(3, minmax(0, 1fr));

  /* Active nav color token (match subline) */
  --nav-active-color:     var(--ect-color-5);
  /* Header logo accent (box) */
  --logo-box-color-section: var(--ect-color-5);

  background-color: var(--why-bg);
  position: relative;
  /* Align section top spacing with HERO/KPI: remove core's 24px top padding */
  padding-top: 0 !important;
}

/* ---------- Section overlay/pattern ---------- */
.ect-section--why::before{ z-index: 1; }
.ect-section--why > *    { position: relative; z-index: 2; }

.ect-section--why .ect-why__pattern{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--why-pattern-opacity, 0.05);
}
.ect-section--why .ect-why__pattern-svg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.ect-section--why .ect-why__pattern-svg use,
.ect-section--why .ect-why__pattern-svg path,
.ect-section--why .ect-why__pattern-svg rect{
  fill: var(--why-pattern-color, color-mix(in srgb, var(--ect-color-2) 92%, transparent));
}

/* ---------- Wrapper / Head ---------- */
.ect-why{ width:100%; }
.ect-why__inner,
.ect-section--why .ect-container{
  max-width: none; width: 100%; margin: 0;
  position: relative; height: 100%; z-index: 2;
  padding-top: var(--why-cont-pt, 64px);
  padding-left: 50px; padding-right: 50px; padding-bottom: var(--why-cta-reserve, 0);
}
.ect-section--why .ect-headline{ color: var(--ect-color-1); margin: 0; }
.ect-section--why .ect-subline{  color: var(--ect-color-5); margin-top: 0; }

/* Headline/Subline sizing: use global core rules; only override color here */

/* ---------- Labels (3 words, cycled by JS) ---------- */
.ect-why__labels{
  width:100%;
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:center; justify-items:center;
  gap: var(--why-label-gap);
  margin: var(--why-labels-mt) 0 var(--why-labels-mb);
  min-height: calc(var(--why-label-size) * 0.9);
  will-change: opacity, transform;
}
.ect-why__labels [data-why-label]{
  color: var(--why-muted);
  font-weight: 800; letter-spacing:.02em;
  font-size: var(--why-label-size); line-height:1; white-space:nowrap;
  text-shadow: 0 2px 6px rgba(0,0,0,.10);
  opacity:.85; transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, color .22s ease;
  font-family: inherit;
}
.ect-why__labels [data-why-label].is-active{
  color: var(--why-label-accent);
  opacity:1;
}

/* ---------- Stage (Dirty | Device | Clean) ---------- */
.ect-why__stage{
  position: relative;
  display: grid;
  grid-template-columns: var(--why-grid);
  column-gap: var(--why-stage-gap);
  align-items: center; justify-content: center;
  min-height: var(--why-stage-h);
  height:     var(--why-stage-h);
  margin: 12px 0 28px;
  overflow: hidden;
  opacity: 0; /* Anti-FOUC – reveal sets to 1 */
  isolation: isolate;
}
.ect-why__visual{ position:relative; display:grid; place-items:center; }
.ect-why__visual--left,
.ect-why__visual--right{ z-index: 1; }
.ect-why__visual--center{ z-index: 2; will-change: transform; }

.ect-why__img{
  display:block; width:auto; height:auto;
  max-width: 100%; object-fit: contain;
  filter:none; margin-left:auto; margin-right:auto; justify-self:center;
}
.ect-why__img--device{
  max-height: var(--why-device-maxh);
  position:relative; z-index:2;
}
.ect-why__img--dirty,
.ect-why__img--clean{
  max-height: var(--why-side-maxh, calc(var(--why-stage-h) * var(--why-side-ratio)));
  position:relative; z-index:1;
}

/* small over-labels above images (set via JS) */
.ect-why__labelover{
  position:absolute; left:50%; top:0; transform: translate(-50%, -90%);
  white-space:nowrap; pointer-events:none; opacity:.0;
  font-weight: 800; font-size: .85rem; letter-spacing:.06em; text-transform: uppercase;
  color: #fff;
  background: rgba(54,53,47,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: 6px 10px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  will-change: opacity, transform;
}

/* Stage toggle button (bottom-right inside stage) */
.ect-why__anim-toggle{
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 9999;
  display:none;
  align-items:center; gap:10px;
  padding:12px 18px;
  font:500 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  border-radius:14px; border:1px solid rgba(255,255,255,.2);
  background: rgba(16,16,16,.72);
  color:#fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  pointer-events:auto;
}
.ect-why__anim-toggle.is-active{ display:inline-flex; }
.ect-why__anim-toggle .ect-why__anim-icon{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; }
.ect-why__anim-toggle .ect-why__anim-icon svg{ width:100%; height:auto; fill: currentColor; }
.ect-why__anim-toggle:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  background: color-mix(in srgb, rgba(16,16,16,.72) 35%, var(--ect-color-2) 65%);
}
.ect-why__anim-toggle[aria-pressed="true"]{ background: rgba(16,16,16,.82); }

/* ---------- Hotspots / Panels Mount ---------- */
.why__hotspots,
.why__panels{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  isolation: isolate;
}
.why__panels{ pointer-events:none; }

/* Clean hotspots (small dot + ripple) */
.ect-section--why [data-why-hotspots]{
  position: absolute; inset: 0; display: block;
  pointer-events: none; z-index: 3; isolation: isolate; background: transparent;
}
.ect-section--why [data-why-hotspots] .why-hotspot{
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; z-index: 2;
  width: 20px; height: 20px; aspect-ratio: 1/1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; line-height: 0; border: 0;
  background: transparent; box-shadow: none; border-radius: 50%;
  cursor: pointer; transition: transform .18s ease, opacity .18s ease;
}
.ect-section--why [data-why-hotspots] .why-hotspot:hover{
  transform: translate(-50%, -50%) scale(1.06);
}
.ect-section--why [data-why-hotspots] .why-hotspot__dot{
  display: block; width: 10px; height: 10px; aspect-ratio: 1/1;
  border-radius: 50%; background: var(--ect-color-1);
  box-shadow: 0 0 0 2px rgba(0,0,0,.18); transition: background-color .2s ease;
}
.ect-section--why [data-why-hotspots] .why-hotspot:hover .why-hotspot__dot{ background: var(--ect-color-5); }
.ect-section--why [data-why-hotspots] .why-hotspot__ring{
  position: absolute; z-index: 0; width: 14px; height: 14px; aspect-ratio: 1/1;
  border-radius: 50%; border: 2px solid var(--ect-color-1);
  background: transparent; opacity: .55; transform-origin: 50% 50%; transform: translateZ(0) scale(1);
  pointer-events: none; animation: ect-hotspot-ripple 1.8s ease-out infinite;
}
@keyframes ect-hotspot-ripple{
  0%   { transform: translateZ(0) scale(1);   opacity: .55; }
  70%  { transform: translateZ(0) scale(2.2); opacity: .10; }
  100% { transform: translateZ(0) scale(2.6); opacity: 0;   }
}


/* Panels-Container bleibt inert; Panel selbst bekommt pointer-events */
.why__panels{
  position:absolute; inset:0; z-index:6; pointer-events:none; isolation:isolate;
}

/* Dark-Glass Panel */
.why-panel{
  position:absolute; z-index:7;
  pointer-events:auto;
  color:#fff;
  background: var(--why-glass-bg, rgba(16,16,16,.76));
  border: 1px solid var(--why-glass-border, rgba(255,255,255,.10));
  border-radius: 14px;
  padding: 16px 18px 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  max-width: min(420px, 42vw);
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

/* Typo im Panel */
.why-panel__title{ margin: 0 28px 8px 0; font-size: 1.06rem; line-height: 1.2; font-weight: 700; }
.why-panel__body { font-size: .98rem; line-height: 1.5; }
.why-panel__body br{ line-height: 1.15; }

@media (max-width: 900px){ html.ect-mobile .ect-section--why .why-panel__title{ font-size: .95rem; } html.ect-mobile .ect-section--why .why-panel__body{ font-size: .88rem; } }

/* Close */
.why-panel__close{
  position:absolute; top:8px; right:10px;
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#fff; border:0; cursor:pointer; font-size:18px; line-height:1; border-radius:8px;
}
.why-panel__close:hover{ background: rgba(255,255,255,.08); }

/* dezente Einblendung */
.why-panel[data-state="enter"]{ animation: why-panel-in .22s ease-out both; }
.why-panel[data-state="exit"] { animation: why-panel-out .18s ease-in  both; }

@keyframes why-panel-in{
  from{ opacity:0; transform: translate3d(0,6px,0) scale(.98); }
  to  { opacity:1; transform: translate3d(0,0,0)  scale(1); }
}
@keyframes why-panel-out{
  from{ opacity:1; transform: translate3d(0,0,0)  scale(1); }
  to  { opacity:0; transform: translate3d(0,6px,0) scale(.98); }
}
/* ---------- Steps (3 cards, auto-wrap grid) ---------- */
.ect-why__steps{
  position:relative; z-index:3; margin: clamp(6px, 1vmin, 10px) 0 clamp(12px, 1.2vmin, 18px);
}
.ect-why__steps-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--why-card-minw), 1fr));
  gap: var(--why-steps-gap);
  align-items: stretch; /* equal card heights */
}

.ect-section--why.is-why-mobile .ect-why__steps{
  margin: clamp(-78px, -14vw, -46px) 0 clamp(18px, 6vw, 36px);
}

/* Mobile WHY carousel (class-driven) */
.ect-section--why.is-why-mobile .ect-why__steps-list{ display:none; }
.ect-section--why.is-why-mobile .ect-why__carousel{
  position:relative;
  overflow:hidden;
  width:100%;
  display:flex;
  flex-direction:column;
  box-sizing: border-box;
  padding: 0 clamp(14px, 5vw, 28px);
  overscroll-behavior: contain;
}
.ect-section--why.is-why-mobile .ect-why__track{ display:flex; width:100%; will-change: transform; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ect-section--why.is-why-mobile .ect-why__track{ gap: 0; box-sizing: border-box; }
.ect-section--why.is-why-mobile .ect-why__slide{ flex:0 0 100%; padding: 0; box-sizing: border-box; display:flex; justify-content:center; overflow:hidden; }
.ect-section--why.is-why-mobile .ect-why__slide .ect-why__step{ width:100%; height:auto; box-shadow:0 18px 40px rgba(0,0,0,.26); }
.ect-section--why.is-why-mobile .ect-why__controls{ position:absolute; inset:0; pointer-events:none; }
.ect-section--why.is-why-mobile .ect-why__nav{ position: absolute; top:50%; transform: translateY(-50%); width:28px; height:28px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.40); color:#fff; display:flex; align-items:center; justify-content:center; z-index:11; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events:auto; }
.ect-section--why.is-why-mobile .ect-why__nav--prev{ left: clamp(6px, 4vw, 20px); }
.ect-section--why.is-why-mobile .ect-why__nav--next{ right: clamp(6px, 4vw, 20px); }
/* Remove edge overlays so nur die sichtbaren Slides erscheinen */
.ect-section--why.is-why-mobile .ect-why__controls::before,
.ect-section--why.is-why-mobile .ect-why__controls::after{ display:none; }

/* Reduce label gaps on mobile to give more space to the machine */
.ect-section--why.is-why-mobile{
  --why-labels-mt: clamp(4px, 1vmin, 10px);
  --why-labels-mb: clamp(6px, 1.2vmin, 12px);
  --why-label-size: clamp(24px, 6vw, 60px);
  --why-liquid-size: clamp(56px, 14vw, 110px);
  --why-liquid-offx: -32px;
  --why-step-gap-icon: clamp(12px, 3vmin, 20px);
  --why-step-sub-mb: clamp(10px, 3vmin, 18px);
}

/* Equal heights also in grid mode */
.ect-why__step{ height:auto; }
.ect-section--why.is-why-mobile .ect-why__nav[disabled]{ opacity:0; visibility:hidden; pointer-events:none; }
.ect-section--why.is-why-mobile .ect-why__nav svg{ width:18px; height:18px; display:block; }

/* Single card */
.ect-why__step{
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  align-items: start; justify-items: center;
  padding: var(--why-step-pad-y) var(--why-step-pad-x);
  overflow: visible; z-index: 1;

  background: var(--why-card-bg);
  border: 1px solid var(--why-card-border);
  border-radius: var(--why-card-radius);
  box-shadow: var(--why-card-shadow);
  backdrop-filter: blur(var(--why-card-blur)); -webkit-backdrop-filter: blur(var(--why-card-blur));
}

/* Head: icon top-aligned + single-line title */
.ect-why__step-head{
  position: static !important;
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  min-height: calc(var(--why-icon-h) + var(--why-step-gap-icon) + (var(--why-step-sub-fs) * var(--why-step-sub-lh)));
}
.ect-why__step-head,
.ect-why__step-body{ position: relative; z-index: 1; }

.ect-why__icon{
  height: var(--why-icon-h);
  display: flex; align-items: flex-start; justify-content: center;
  margin: 0 0 var(--why-step-gap-icon) 0;
}
.ect-why__icon .ect-ico{
  width:  var(--why-step-icon-size);
  height: var(--why-step-icon-size);
  color: #e8edf4; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

.ect-why__step-sub{
  width: 100%;
  margin: 0 0 var(--why-step-sub-mb) 0;
  color: #fff;
  font-size: var(--why-step-sub-fs);
  line-height: var(--why-step-sub-lh);
  text-align: center; display: block;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: calc(var(--why-step-sub-fs) * var(--why-step-sub-lh));
}

/* Body text mirrors card padding */
.ect-why__step-body{ width:100%; }
.ect-why__step-desc{
  width:100%; margin:0; padding:0 var(--why-step-pad-x);
  color:#f1f5f9; font-size: var(--why-step-desc-fs);
  line-height:1.55; text-align:center; hyphens:none; font-family: inherit; text-shadow:none;
}

/* Badge number top-left (under content) */
.ect-why__badge{
  position:absolute; z-index:0;
  left: calc(var(--why-step-pad-x) + var(--why-badge-nudge-x));
  top:  calc(var(--why-step-pad-y) + var(--why-badge-nudge-y));
  pointer-events:none; user-select:none;

  font-family: inherit; font-weight: 800; letter-spacing:.02em; color: var(--ect-color-5);
  opacity:1; line-height:1;
  font-size: calc(
    (var(--why-icon-h)
     + var(--why-step-gap-icon)
     + (var(--why-step-sub-fs) * var(--why-step-sub-lh)))
    * var(--why-badge-scale)
  );
}
.ect-why__step > *:not(.ect-why__badge){ position: relative; z-index: 1; }
.ect-why__step.is-active .ect-why__badge{ opacity: 1; }

/* Remove legacy separators if present */
.ect-why__step::after,
.ect-why__step-sep{ display:none !important; content:none !important; }

/* ---------- Liquid icon (right of machine) ---------- */
.ect-section--why{
  --why-liquid-size: clamp(100px, 12vw, 340px); /* vorher 200px */
  --why-liquid-gap: 16px;
  --why-liquid-offx: 0px;
  --why-liquid-offy: 32px;
}
/* Smaller liquid icon on mobile to keep visual balance with enlarged machine */
.ect-section--why.is-why-mobile{
  --why-liquid-size: clamp(56px, 14vw, 110px);
  --why-liquid-offx: -32px;
}
.ect-section--why .why-liquid-icon{
  position: absolute;
  width: var(--why-liquid-size); height: var(--why-liquid-size);
  pointer-events: none; opacity:.95;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
  z-index: 1; /* under hotspots */
}
.ect-section--why .why-liquid-icon svg{
  display:block; width:100%; height:auto;
  color: var(--ect-color-3); fill: currentColor; filter:none;
}

/* ---------- CTA placement (generated by core) ---------- */
.ect-section--why .ect-why__ctas{
  position: absolute; right: 24px; bottom: 24px; z-index: 12;
  display: flex; gap: var(--why-cta-gap);
}
/* ---------------- TESTIMONIALS (Video) ---------------- */
.ect-section--testimonials{
  --section-overlay-color: #000;
  --section-overlay-opacity: .40; /* darker base */
  --nav-active-color: var(--ect-color-7);
  --logo-box-color-section: var(--ect-color-7);
  --testi-hero-gap: clamp(18px, 4vmin, 32px);
  --testi-carousel-gap: clamp(22px, 5vmin, 36px);
  --testi-card-minw: clamp(140px, 56vw, 200px);
  --testi-thumb-h: clamp(120px, 28vh, 180px);
  --testi-layout-gap: clamp(24px, 5vmin, 40px);
  /* Align section frame top padding with other sections */
  padding-top: 0 !important;
}
.ect-section--testimonials .ect-container{
  /* Angleichen an Hero/KPI Abstände – liquid via tokens */
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: left;
  position: relative;
  padding-top: var(--testi-cont-pt, 64px);
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: var(--testi-cta-reserve, 32px);
}
.ect-section--testimonials .ect-headline{ color: var(--ect-color-1); margin: 0; }
.ect-section--testimonials .ect-subline{  color: var(--ect-color-7); margin: 0; }

.ect-testimonials__layout{
  display:flex;
  flex-direction:column;
  gap: var(--testi-layout-gap, clamp(24px, 5vmin, 40px));
  margin-top: var(--testi-head-gap, clamp(24px, 4vmin, 40px));
}

.ect-testimonials__hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--testi-hero-gap);
  margin: 0 auto;
  max-width: min(100%, 960px);
  text-align: center;
}
.ect-section--testimonials .ect-video__playerwrap{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.30);
  width: min(100%, clamp(320px, 70vw, 900px), var(--testi-video-maxw, 920px));
  max-height: clamp(240px, 70vh, var(--testi-player-maxh, 540px));
  aspect-ratio: 16/9;
}
.ect-section--testimonials .ect-video__player{ display:block; width:100%; height:auto; aspect-ratio:16/9; }
.ect-section--testimonials .plyr{ --plyr-color-main: var(--ect-color-7); }
.ect-section--testimonials .plyr__control--overlaid{ background: var(--ect-color-7); }
.ect-section--testimonials .plyr__control--overlaid:hover,
.ect-section--testimonials .plyr__control[aria-expanded=true]{ background: color-mix(in srgb, var(--ect-color-7) 70%, var(--ect-color-2)); }

.ect-section--testimonials .ect-video__meta{ margin: 0; max-width: 720px; }
.ect-section--testimonials .ect-video__restaurant{ margin-top:8px; font-size:20px; font-weight:600; text-transform:uppercase; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); letter-spacing:.06em; }
.ect-section--testimonials .ect-video__text{ margin-top:16px; font-size:16px; line-height:1.6; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); text-align:center; hyphens:auto; }
.ect-section--testimonials .ect-video__link{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top: clamp(10px, 2.2vmin, 18px); font-size:16px; line-height:1.6; color:#fff; text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.35); border-bottom:1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.ect-section--testimonials .ect-video__link:hover{ color: var(--ect-color-7); }

.ect-section--testimonials.is-playing::before{ opacity: .80; transition: opacity .35s ease; }
.ect-section--testimonials .ect-video__meta{ transition: opacity .25s ease; }
.ect-section--testimonials.is-playing .ect-video__meta{ opacity: .7; }

.ect-testimonials__carousel{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.ect-video__playlist{
  position: relative;
}
.ect-video__playlist-list{
  display:flex;
  align-items:stretch;
  gap: clamp(16px, 4vw, 22px);
  overflow-x:auto;
  padding: 0;
  margin: 0;
  list-style:none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ect-video__playlist-item{
  flex: 0 0 auto;
  width: var(--testi-card-minw);
  scroll-snap-align: center;
}
.ect-video__playlist-btn{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: color-mix(in srgb, rgba(0,0,0,.45) 70%, var(--ect-color-3) 30%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  text-align: left;
}
.ect-video__playlist-btn:focus,
.ect-video__playlist-btn:hover{ border-color: var(--ect-color-7); transform: translateY(-4px); box-shadow: 0 16px 42px rgba(0,0,0,.28); }
.ect-video__playlist-item.is-active .ect-video__playlist-btn{ border-color: var(--ect-color-7); box-shadow: 0 18px 48px rgba(0,0,0,.32); }
.ect-video__playlist-list.is-placeholder .ect-video__playlist-btn{ opacity:.65; cursor: default; transform:none !important; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ect-video__playlist-thumb{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  background: color-mix(in srgb, rgba(255,255,255,.12) 60%, rgba(0,0,0,.65)) center/cover no-repeat;
  background-image: var(--playlist-thumb, none);
  overflow:hidden;
}
.ect-video__playlist-copy{ display:flex; flex-direction:column; gap:4px; }
.ect-video__playlist-title{ font-size: 15px; font-weight:600; line-height:1.3; letter-spacing:.01em; color:#fff; }
.ect-video__playlist-org{ font-size: 13px; color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing:.06em; }

@media (max-width: 900px){ html.ect-mobile .ect-testimonials__hero{ gap: clamp(16px, 5vw, 24px); } html.ect-mobile .ect-section--testimonials .ect-video__playerwrap{ border-radius: 14px; } html.ect-mobile .ect-video__playlist-list{ gap: 16px; } html.ect-mobile .ect-video__playlist-item{ flex: 0 0 clamp(140px, 60vw, 200px); width: clamp(140px, 60vw, 200px); } }

@media (max-width: 600px){ html.ect-mobile .ect-section--testimonials .ect-container{ padding-left: 22px; padding-right: 22px; } html.ect-mobile .ect-section--testimonials .ect-video__text{ font-size: 15px; } html.ect-mobile .ect-video__playlist-btn{ padding: 10px; } }

@media (min-width: 992px){
  .ect-section--testimonials{ --testi-card-minw: clamp(150px, 18vw, 220px); }
  .ect-testimonials__layout{
    display:grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(220px, 1fr);
    gap: clamp(30px, 4vw, 48px);
    align-items:start;
  }
  .ect-testimonials__hero{
    align-items:flex-start;
    text-align:left;
    margin: 0;
  }
  .ect-section--testimonials .ect-video__meta{ max-width: none; }
  .ect-section--testimonials .ect-video__text{ text-align:left; }
  .ect-testimonials__carousel{
    margin: 0;
    align-self: stretch;
    display:flex;
    flex-direction:column;
  }
  .ect-video__playlist-list{
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: clamp(260px, 70vh, var(--testi-player-maxh, 540px));
    padding-right: 8px;
    scroll-snap-type: none;
  }
  .ect-video__playlist-item{ flex: 0 0 auto; width: var(--testi-card-minw); margin: 0 auto; }
  .ect-video__playlist-btn{ padding: 12px; }
}

/* ---------------- APPLICATIONS ---------------- */
.ect-section--applications{
  --section-overlay-color: var(--ect-color-3);
  --section-overlay-opacity: .55;
  --nav-active-color: var(--ect-color-6);
  --logo-box-color-section: var(--ect-color-6);
  /* Grid tokens */
  --apps-grid-gap: clamp(20px, 2.4vmin, 32px);
  --apps-col-min: clamp(260px, 26vw, 360px); /* min width of a card */
  --apps-col-max: clamp(420px, 34vw, 640px); /* target max width per card (≈ Gastronomie) */
  /* Chevron button diameter and fixed clear gap to slides */
  --apps-btn-d: clamp(32px, 4.2vmin, 44px);
  --apps-chev-gap: 20px;
  /* Ensure slides stay at least 20px clear of chevrons on both sides */
  --apps-car-pad: calc(var(--apps-btn-d) + var(--apps-chev-gap));
  /* Head/Sub → Rotator → Grid rhythm (aligned with KPI) */
  --apps-gap-sub-rot:  clamp(18px, 2.6vmin, 36px);
  --apps-gap-rot-grid: clamp(24px, 3vmin, 44px);
  /* More compact gap from rotating line to carousel on small screens */
  --apps-gap-rot-car:  clamp(10px, 1.6vmin, 18px);
  /* Exact gap: Carousel (oben) → Rot-Line (unten) */
  --apps-gap-grid-rot: clamp(20px, 3vmin, 30px);
  /* Missing token: Abstand zwischen der oberen Wide-Card und dem Carousel darunter */
  --apps-gap-wide-car: clamp(28px, 4vmin, 56px);
}
.ect-section--applications{ position: relative; padding-top: 0 !important; }
.ect-section--applications .ect-container{
  max-width: none; width:100%; margin:0; text-align:left; position: static;
  padding-top: var(--apps-cont-pt, 64px); padding-left:50px; padding-right:50px; padding-bottom: var(--apps-cta-reserve, 40px);
}
.ect-section--applications .ect-headline{ color: var(--ect-color-1); margin: 0 !important;}
.ect-section--applications .ect-subline{  color: var(--ect-color-6); margin: 0 0 var(--apps-gap-sub-rot); }
.ect-app__rot{ display:block; margin: var(--apps-gap-grid-rot) 0 var(--apps-gap-rot-car); color: #fff !important; font-weight:700; font-size: clamp(1rem,2vw,26px); text-align:center; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; }
.ect-app__rot.rot--out{ opacity:0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; }
.ect-app__rot.rot--in{ opacity:1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; }

.ect-app__grid{
  display:grid;
  /* Each column grows up to --apps-col-max; cap total to 3 columns */
  grid-template-columns: repeat(auto-fit, minmax(var(--apps-col-min), var(--apps-col-max)));
  gap: var(--apps-grid-gap);
  align-items: stretch;
  margin-top: var(--apps-gap-rot-grid); margin-bottom: 0;
  /* Cap at 3 columns using the max width per column */
  max-width: calc(var(--apps-col-max) * 3 + var(--apps-grid-gap) * 2);
  margin-left: auto; margin-right: auto;
}

/* When converted to carousel, grid acts as a simple stack: wide card + carousel block */
.ect-app__grid.is-carousel{ display:block; max-width:none; }
.ect-app__grid.is-carousel .ect-app__card--wide{ display:block; margin-left:auto; margin-right:auto; width: min(100%, clamp(640px, 82vw, 1140px)); margin-bottom: var(--apps-gap-wide-car); }

/* ===== Applications Carousel (3-up, liquid) ===== */
.apps-car{ position: relative; margin-top: var(--apps-gap-wide-car); padding: 0; overflow: hidden; }
.apps-car__vp{
  overflow: hidden;
  width:100%;
  padding: 0 clamp(16px, 5vw, 32px);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.apps-car__vp::-webkit-scrollbar{ display:none; }
  .apps-car__track{
    display:flex;
    gap: var(--apps-grid-gap);
    align-items: stretch; /* equalize slide heights */
    will-change: transform;
    transform: translateX(0);
  }

/* ---------------- OFFERS ---------------- */
.ect-section--offers{
  /* Section tokens */
  --offers-grid-gap: clamp(16px, 2.4vmin, 28px);
  --offers-card-radius: 14px;
  --offers-card-blur: 8px;
  --offers-card-shadow: 0 12px 36px rgba(0,0,0,.20);
  --offers-card-bg: color-mix(in srgb, var(--ect-color-7) 24%, rgba(54,53,47,0.55));
  --offers-card-border: color-mix(in srgb, var(--ect-color-7) 24%, rgba(255,255,255,0.18));
  --offers-card-veil: rgba(0,0,0,.10);
  --offers-icon-size: clamp(28px, 3.4vmin, 40px);
  --offers-title-fs: clamp(14px, 2.1vmin, 22px);
  --offers-big-fs: clamp(16px, 2.6vmin, 28px);
  --offers-cta-gap: clamp(16px, 2.6vmin, 32px);

  background-color:#f5f7fa;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  --section-overlay-color: var(--ect-color-3);
  --section-overlay-opacity: .45;
  --nav-active-color: var(--ect-color-7);
  --logo-box-color-section: var(--ect-color-7);
  padding-top: 0 !important;
  min-height: 100vh;
}
.ect-section--offers .ect-container{
  max-width:none; width:100%; margin:0; text-align:left; position: relative;
  padding-top: 64px; padding-left:50px; padding-right:50px; padding-bottom: 40px;
}
.ect-section--offers .ect-headline{ color: var(--ect-color-1); margin:0; }
.ect-section--offers .ect-subline{  color: var(--ect-color-7); margin: 0 0 clamp(18px,2.6vmin,36px); }

/* Grid of 5 cards */
.ect-offer__grid{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--offers-grid-gap);
  margin-top: clamp(10px, 2vmin, 20px); margin-bottom: clamp(18px, 3vmin, 28px);
}
@media (max-width: 1200px){ .ect-offer__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 800px){  .ect-offer__grid{ grid-template-columns: repeat(1, minmax(0,1fr)); } }

.ect-offer__carousel{ display:none; flex-direction:column; gap: clamp(12px, 3.2vmin, 24px); margin-top: clamp(12px, 3vmin, 28px); }
.ect-offer__carousel-vp{ width:100%; overflow-x:auto; overflow-y:hidden; touch-action: auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ect-offer__carousel-vp::-webkit-scrollbar{ display:none; }
.ect-offer__carousel-track{ display:flex; gap: var(--offers-grid-gap); align-items:stretch; min-width:100%; scroll-snap-type:x mandatory; }
.ect-offer__carousel-slide{ flex:0 0 calc(100% - 2px); display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--offers-grid-gap); padding: clamp(4px, 1.6vmin, 8px); box-sizing:border-box; scroll-snap-align:center; scroll-snap-stop: always; }
.ect-offer__carousel-slide .ect-offer__card{ height:100%; }
.ect-offer__carousel-nav{ display:flex; align-items:center; justify-content:space-between; gap: clamp(12px, 8vw, 24px); }
.ect-offer__carousel-btn{
  width: clamp(40px, 12vw, 52px);
  height: clamp(40px, 12vw, 52px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: color-mix(in srgb, #000 28%, transparent);
  display:grid; place-items:center;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  cursor:pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.ect-offer__carousel-btn:hover{ background: color-mix(in srgb, #000 36%, transparent); transform: scale(1.04); }
.ect-offer__carousel-btn[disabled]{ opacity:.45; cursor:default; }
.ect-offer__carousel-btn svg{ width:60%; height:60%; display:block; }
.ect-offer__carousel-btn:focus-visible{ outline:2px solid var(--ect-color-6); outline-offset:2px; }

.ect-section--offers.offers--carousel .ect-offer__grid{ display:none; }
.ect-section--offers.offers--carousel .ect-offer__carousel{ display:flex; }

.ect-offer__card{
  border-radius: var(--offers-card-radius);
  background: var(--offers-card-bg);
  border: 1px solid var(--offers-card-border);
  backdrop-filter: blur(var(--offers-card-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--offers-card-blur)) saturate(130%);
  box-shadow: var(--offers-card-shadow);
  color: #fff;
  padding: clamp(18px, 3vmin, 28px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: clamp(10px, 2vmin, 16px);
  min-height: clamp(160px, 30vmin, 280px);
}
.ect-offer__icon svg{ width: calc(var(--offers-icon-size) * 1.2); height: calc(var(--offers-icon-size) * 1.2); color:#fff; display:block; }
.ect-offer__title{ margin:0; color:#fff; text-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ect-offer__title--top{ font-weight:800; line-height:1.1; font-size: clamp(16px, 2.4vmin, 26px); }
.ect-offer__title--bottom{ font-weight:600; line-height:1.25; font-size: clamp(13px, 2vmin, 20px); opacity:.95; }

/* Big line (accent number in green) */
.ect-offer__big{ margin-top: clamp(16px, 3.6vmin, 44px); font-weight:800; color: var(--ect-color-1); font-size: clamp(24px, 5vmin, 42px); line-height:1.18; text-align:center; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ect-offer__big-accent{ color: var(--ect-color-7); font-weight:800; }
.ect-section--offers .ect-offer__big br{ display:none; }
html.ect-mobile .ect-section--offers .ect-offer__big{
  font-size: clamp(18px, 6.2vw, 26px);
  line-height: 1.24;
}

/* CTAs */
.ect-offer__ctas{
  display:flex;
  flex-wrap:wrap;
  gap: var(--offers-cta-gap);
  margin-top: clamp(20px, 3vmin, 44px);
  justify-content:center;
  align-items:center;
}
.ect-offer__ctas .ect-offer__cta{
  flex: 0 1 clamp(220px, 24vmin, 320px);
  min-width: clamp(180px, 22vmin, 260px);
}

/* Intro */
.ect-offer__intro{ margin-top: clamp(8px, 1.8vmin, 14px); color: var(--ect-color-1); font-size: clamp(16px, 2.2vmin, 22px); opacity:.95; text-align:center; }

/* ---------------- CONTACT ---------------- */
.ect-section--contact{
  --section-overlay-color: var(--ect-color-3);
  --section-overlay-opacity: .65; /* stronger overlay for bright bg */
  --nav-active-color: var(--ect-color-5);
  --logo-box-color-section: var(--ect-color-5);
  --contact-label-col: clamp(120px, 22ch, 220px);
  /* Keep background scale stable while step height changes: tie to width */
  --section-bg-size: 100% auto;
  --section-bg-position: center top;
  --section-bg-size-mobile: cover;
  --section-bg-position-mobile: center top;
  padding-top: 0 !important;
}
.ect-section--contact .ect-container{
  max-width: none; width:100%; margin:0; text-align:left; position:relative;
  padding: 64px 50px 40px;
}
/* Align headline/subline text with inner form content (additional 50px) */
/* Hide legacy badges for streamlined inline form */
.ect-section--contact .ect-step-badge{ display:none !important; }

/* Intro */
.ect-contact__intro{ margin: clamp(10px, 2.4vmin, 22px) auto; text-align:center; color: var(--ect-color-1); font-size: clamp(14px, 2.2vmin, 20px); opacity:.95; }
html.ect-mobile .ect-contact__intro{ display:none; }

/* Form glass box */
.ect-contact__formbox{
  position: relative;
  border-radius: 0; /* no visual container here; inner form owns the glass */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0; /* hand off spacing to inner .ect-formbox */
  margin: clamp(12px, 2.4vmin, 22px) 0; /* keep small vertical breathing room in section flow */
  overflow: visible;
  z-index: 1;
}
/* No forced overrides on inner step boxes – inner .ect-formbox owns look */
.ect-section--contact .ect-contact__formbox .ect-step__box{ background: initial; border-color: initial; box-shadow: initial; }

/* Grid below form */
.ect-contact__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.6vmin, 28px);
  margin-top: clamp(20px, 3.2vmin, 36px);
}
.ect-contact__box{
  border-radius: 16px;
  background: color-mix(in srgb, var(--ect-color-5) 24%, rgba(20,20,20,0.72));
  border:1px solid color-mix(in srgb, var(--ect-color-5) 60%, rgba(255,255,255,0.16));
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(16px, 2.8vmin, 24px);
  color:#fff;
}
.ect-contact__box-head{ margin:0 0 clamp(14px, 2.8vmin, 26px); font-weight:800; font-size: clamp(16px, 2.2vmin, 22px); }
.ect-contact__box--direct .ect-contact__box-head{ display:flex; align-items:center; gap:10px; }
.ect-contact__box--direct .ect-contact__box-head .ect-ico{ width: 1.4em; height: 1.4em; color: var(--ect-color-6); }
.ect-contact__list{ list-style:none; padding:0; margin:0; display:grid; gap: clamp(8px, 1.8vmin, 12px); }
.ect-contact__list li{ display:grid; grid-template-columns: var(--contact-label-col) 1fr; align-items:flex-start; column-gap:10px; line-height:1.4; }
.ect-contact__list li .ect-contact__label{ font-weight:700; margin-right:0; color: var(--ect-color-2); }
.ect-contact__list li .ect-contact__value{ display:block; }
.ect-section--contact.contact--carousel .ect-contact__box--direct .ect-contact__list li{
  grid-template-columns: 1fr;
}
.ect-section--contact.contact--carousel .ect-contact__box--direct .ect-contact__label{
  margin-bottom: 4px;
}
.ect-contact__box--highlights .ect-contact__list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(8px, 1.6vmin, 12px) clamp(16px, 2.4vmin, 24px); }
.ect-contact__box--highlights .ect-contact__list li{ display:flex; align-items:flex-start; gap:10px; }
.ect-contact__box--highlights .ect-contact__list .ect-ico{ width: 1.1em; height: 1.1em; color: var(--ect-color-2); flex: 0 0 auto; margin-top: 2px; }
.ect-contact__box--highlights .ect-contact__box-head{ display:flex; align-items:center; gap:10px; }
.ect-contact__box--highlights .ect-contact__box-head .ect-ico{ width: 1.4em; height: 1.4em; color: var(--ect-color-5); }
.ect-section--contact.contact--carousel .ect-contact__box--highlights .ect-contact__list{ grid-template-columns: 1fr; }
.ect-contact__list a{ color:#fff; text-decoration:none; transition: color .2s ease; }
.ect-contact__list a:hover{ color: var(--ect-color-5); }

/* Closing */
.ect-contact__closing{ margin-top: clamp(24px, 4vmin, 56px); text-align:center; }
.ect-contact__closing-head{ margin:0; font-weight:800; font-size: clamp(20px, 4.5vmin, 34px); color: var(--ect-color-1); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ect-contact__closing-sub{ margin: clamp(8px, 2vmin, 14px) auto 0; color: var(--ect-color-1); opacity:.9; font-size: clamp(14px, 2.2vmin, 18px); }

/* Remove closing text block below the two contact boxes */
.ect-section--contact .ect-contact__closing{ display:none !important; }

/* Contact carousel */
.ect-contact__carousel{ display:none; flex-direction:column; gap: clamp(6px, 2.4vw, 12px); margin-top: clamp(12px, 3.2vw, 22px); touch-action: pan-y; }
.ect-section--contact.contact--carousel .ect-contact__carousel{ display:flex; }
.ect-section--contact.contact--carousel > .ect-container > [data-contact-grid]{ display:none; }
.ect-section--contact.contact--carousel > .ect-container > [data-contact-form]{ display:none; }
.ect-contact__carousel-vp{ overflow:hidden; width:100%; }
.ect-contact__carousel-track{ display:flex; transition: transform .32s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.ect-contact__carousel-slide{ flex:0 0 100%; padding: clamp(6px, 1.8vw, 10px); display:flex; flex-direction:column; gap: clamp(10px, 2.8vw, 18px); opacity:0; pointer-events:none; transform: translateX(4%); transition: opacity .24s ease, transform .24s ease; }
.ect-contact__carousel-slide.is-active{ opacity:1; pointer-events:auto; transform: translateX(0); }
.ect-contact__carousel-nav{ display:flex; align-items:center; justify-content:space-between; gap: clamp(10px, 3vw, 14px); margin-top: clamp(6px, 2vw, 12px); padding:0; }
html.ect-mobile .ect-contact__carousel-nav{ order:2; align-self:stretch; }
html.ect-mobile .ect-contact__carousel-vp{ order:1; }
.ect-contact__carousel-btn{
  width: clamp(42px, 12vw, 56px);
  height: clamp(42px, 12vw, 56px);
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.22);
  background: color-mix(in srgb, #000 28%, transparent);
  display:grid; place-items:center;
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.ect-contact__carousel-btn:hover{ background: color-mix(in srgb, #000 36%, transparent); transform: scale(1.05); }
.ect-contact__carousel-btn[disabled]{ opacity:.45; cursor:default; }
.ect-contact__carousel-btn svg{ width:60%; height:60%; display:block; }
.ect-contact__carousel-btn:focus-visible{ outline:2px solid var(--ect-color-5); outline-offset:2px; }
.ect-contact__dots{ display:flex; gap:8px; justify-content:center; align-items:center; flex:1; }
.ect-contact__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  transition: transform .18s ease, background .18s ease;
  border:0;
  padding:0;
  line-height:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.ect-contact__dot.is-active{ background: rgba(255,255,255,.9); transform: scale(1.12); }

html.ect-mobile .ect-section--contact.contact--carousel .ect-contact__carousel-vp{
  max-height: max(320px, calc(100dvh - 220px));
  overflow-y: auto;
  padding-bottom: clamp(6px, 2vw, 12px);
}
html.ect-mobile .ect-section--contact.contact--carousel .ect-contact__carousel-nav{
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.ect-contact__carousel-slide[data-contact-slide="form"]{
  min-height: clamp(420px, calc(100vh - 160px), 640px);
  justify-content:flex-start;
  padding-bottom: clamp(8px, 2.4vw, 14px);
}
html.ect-mobile .ect-contact__carousel-slide[data-contact-slide="form"]{
  min-height: clamp(320px, calc(100dvh - 220px), 520px);
  padding-bottom: clamp(6px, 2.4vw, 12px);
}
.ect-contact__carousel-slide[data-contact-slide="form"] .ect-contact__formwrap{
  display:block;
}
.ect-contact__carousel-slide[data-contact-slide="direct"],
.ect-contact__carousel-slide[data-contact-slide="highlights"]{
  justify-content:flex-start;
}

.ect-section--contact.contact--carousel .ect-contact__carousel-slide [data-contact-card]{ width:100%; }

.ect-section--offers .ect-cta{
  --cta-bg:              var(--ect-color-7);
  --cta-bg-hover:        color-mix(in srgb, var(--ect-color-7) 75%, black);
  --cta-text:            #fff;
  --cta-text-hover:      #fff;
  --cta-icon:            #fff;
  --cta-icon-hover:      #fff;
  --cta-pattern-color:   color-mix(in srgb, var(--ect-color-7) 60%, black);
  --cta-pattern-opacity: .18;
  --cta-scale-hover:     1.012;
  --cta-scale-active:    .985;
  --cta-icon-size:       clamp(28px, 2.8vmin, 36px);
  --cta-gap:             clamp(12px, 2.2vmin, 18px);
}
.ect-section--offers .ect-offer__cta--secondary{
  --cta-bg:              color-mix(in srgb, var(--ect-color-7) 40%, black);
  --cta-bg-hover:        color-mix(in srgb, var(--ect-color-7) 60%, black);
}

.apps-car__slide{
  /* Prefer exact width from JS; fallback to pure CSS calc */
  flex: 0 0 var(--apps-slide-w, calc((100% - (var(--apps-vis,3) - 1) * var(--apps-grid-gap)) / var(--apps-vis,3)));
  scroll-snap-align: start; min-width: 0; /* allow content to shrink */
}
.apps-car__slide .ect-app__card{ height:auto; }

.apps-car__nav{
  display:flex;
  justify-content:center;
  gap: clamp(16px, 10vw, 40px);
  margin: clamp(16px, 6vw, 32px) 0 0 0;
}
.apps-car__btn{
  position:static;
  transform:none;
  width: clamp(40px, 10vw, 52px);
  height: clamp(40px, 10vw, 52px);
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: color-mix(in srgb, #000 28%, transparent);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  cursor:pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.apps-car__btn[disabled]{ opacity:.45; cursor:default; }
.apps-car__btn:hover{ background: color-mix(in srgb, #000 36%, transparent); transform: scale(1.04); }
.apps-car__btn:focus-visible{ outline:2px solid var(--ect-color-6); outline-offset:2px; }
.apps-car__btn svg{ width: 60%; height: 60%; display:block; }

.ect-section--kpi .ect-kpi__carousel,
.ect-section--kpi.is-kpi-mobile .ect-kpi__carousel,
.ect-section--applications .apps-car,
.ect-section--why.is-why-mobile .ect-why__carousel{
  background: inherit;
  overscroll-behavior: contain;
}
.ect-app__card{ position:relative; height: 100%; padding: clamp(12px, 1.2vw, 20px); border-radius:14px; color:#fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(54,53,47,0.55); border:1px solid rgba(255,255,255,0.18); box-shadow: 0 12px 36px rgba(0,0,0,.22); overflow:hidden;
  display:grid; grid-template-rows: auto auto 1fr auto; row-gap: clamp(4px, 0.8vmin, 8px); }
.ect-app__card--wide{ grid-column: 1 / -1; min-height: clamp(180px, 20vmin, 260px); justify-self: center; width: min(100%, clamp(640px, 82vw, 1140px)); }
.ect-app__card::before{ content:""; position:absolute; inset:0; background-image: var(--app-card-image, none); background-size: cover; background-position:center; opacity:0; transition: opacity .35s ease; z-index:0; }
.ect-app__card::after{ content:""; position:absolute; inset:0; background: color-mix(in srgb, var(--ect-color-3) 100%, transparent); opacity:0; transition: opacity .35s ease; z-index:1; }
.ect-app__card > *{ position:relative; z-index:2; }
.ect-app__card.is-hl::before{ opacity:.92; }
.ect-app__card.is-hl::after{ opacity:.48; }
.ect-app__card.is-hl{ border-color: var(--ect-color-6); outline: none; }
.ect-app__icon svg{ width: clamp(28px, 3.2vmin, 40px); height: clamp(28px, 3.2vmin, 40px); color: var(--ect-color-6); display:block; }
.ect-app__icon{ display:flex; justify-content:center; }
.ect-app__card--wide .ect-app__icon{ margin-bottom: clamp(12px, 2.6vmin, 26px); }
.ect-app__title{ margin: clamp(2px, 0.5vmin, 6px) 0 clamp(2px, 0.5vmin, 6px); font-weight:500; font-size: clamp(14px, 1.9vw, 26px); text-align:center; }
.ect-app__intro{ margin: 0 0 clamp(4px, 0.8vmin, 8px); text-align: justify; hyphens:auto; font-weight:400; font-size: clamp(10px, 1.4vmin, 16px); }
.ect-app__suitables{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(8px, 1vmin, 12px) clamp(12px, 1.4vmin, 16px); align-items:start; font-size: clamp(10px, 1.4vmin, 16px); }
.ect-app__suitables.is-paragraph{ display:block; text-align:justify; hyphens:auto; font-size: clamp(10px, 1.4vmin, 16px); }
.ect-app__suitable{ opacity:.95; font-weight:400; font-size: clamp(10px, 1.4vmin, 16px); }
.ect-app__sep{ width:1px; height:16px; background: rgba(255,255,255,.35); display:inline-block; }

/* Applications CTA cluster (external section CTAs) */
.ect-app__ctas{ position: absolute; right: 24px; bottom: 24px; z-index: 10; display: flex; justify-content: flex-end; gap: 12px; }

/* Applications CTA tokens */
.ect-section--applications .ect-cta{
  --cta-bg:              var(--ect-color-6);
  --cta-bg-hover:        color-mix(in srgb, var(--ect-color-6) 82%, black);
  --cta-text:            #fff;
  --cta-text-hover:      #fff;
  --cta-icon:            #fff;
  --cta-icon-hover:      #fff;
  --cta-icon-size:       2rem;
  --cta-scale-hover:     1.012;
  --cta-scale-active:    .985;
  --cta-dur:             .22s;
}

/* Bigger CTA text specifically for applications CTA button */
.ect-section--applications .ect-app__cta{
  font-size: 1.2rem;
  padding: 16px 22px;
}

/* Focus outline for application cards */
.ect-app__card:focus,
.ect-app__card:focus-within{ outline: 2px solid var(--ect-color-7); outline-offset: 2px; border-color: var(--ect-color-7); }

/* Smaller desktops: gently reduce hero typography a bit earlier */

/* MQs removed — hero uses liquid tokens only */

/* ---------------- PRODUCTS ---------------- */
.ect-section--products{
  /* Gradient: from light grey to brand color-1 */
  --section-bg: linear-gradient(180deg,
    #B1B1B0 0%,
    var(--ect-color-1) 100%);
  --nav-active-color: var(--ect-color-7); /* accent green */
  --logo-box-color-section: var(--ect-color-7);
  /* Overlay softer */
  --section-overlay-color: #000;
  --section-overlay-opacity: .20;
  padding-top: 0 !important; /* align top padding with other sections */

  /* Grid + card tokens */
  --prod-grid-gap: clamp(10px, 1.8vmin, 20px);           /* horizontal/column gap */
  --prod-grid-mt:  clamp(10px, 2.6vmin, 35px);           /* gap between subline and grid */
  --prod-col-min:  clamp(260px, 24vw, 360px);
  --prod-col-max:  clamp(340px, 28vw, 480px);
  --prod-radius:   clamp(10px, 1.2vmin, 14px);
  --prod-glass-bg: rgba(255,255,255,.68);
  --prod-glass-border: rgba(255,255,255,.55);
  --prod-glass-blur: 10px;
  --prod-shadow: 0 22px 60px rgba(0,0,0,.18);
  --prod-head-minh: clamp(88px, 11vmin, 128px);
  --prod-media-h: clamp(90px, 16vmin, 400px);
  --prod-media-max: 400px;
  --prod-spec-row-h: clamp(26px, 2.9vmin, 34px);
  --prod-specs-maxh: clamp(170px, 22vmin, 238px);
  --prod-foot-minh: clamp(80px, 9vmin, 110px);
  --prod-spec-ico: #555;
  /* Accents (head gradient + cta) */
  --prod-accent-1: color-mix(in srgb, var(--ect-color-7) 80%, white);
  --prod-accent-2: var(--ect-color-7);
}
.ect-section--products .ect-container{
  max-width: none; width: 100%; margin: 0;
  position: relative; height: 100%; z-index: 2;
  padding-top: var(--prod-cont-pt, 64px);
  padding-left: clamp(12px, 2.8vmin, 32px);
  padding-right: clamp(12px, 2.8vmin, 32px);
  padding-bottom: var(--prod-cta-reserve, 40px);
}
.ect-section--products .ect-headline{ color: var(--ect-color-1); margin: 0; }
.ect-section--products .ect-subline{  color: var(--ect-color-7); margin: 0; }

/* Pattern overlay (like WHY) */
.ect-section--products .ect-products__pattern{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity: var(--prod-pattern-opacity, 0.05); }
.ect-section--products .ect-products__pattern-svg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.ect-section--products .ect-products__pattern-svg use,
.ect-section--products .ect-products__pattern-svg path,
.ect-section--products .ect-products__pattern-svg rect{ fill: var(--prod-pattern-color, color-mix(in srgb, var(--ect-color-2) 92%, transparent)); }

/* CTA bottom-right like WHY */
.ect-products__ctas{ position:fixed; right:24px; bottom:24px; z-index:100; display:flex; gap:12px; opacity:0; pointer-events:none; transition: opacity .22s ease; }
.ect-products__nav{ display:none; gap:16px; }

html.ect-mobile .ect-hero__ctas,
html.ect-mobile .ect-section--kpi .ect-kpi__ctas,
html.ect-mobile .ect-section--why .ect-why__ctas,
html.ect-mobile .ect-app__ctas,
html.ect-mobile .ect-products__ctas,
html.ect-mobile .ect-offer__ctas,
html.ect-mobile .ect-section--calculator:not(.calc--mobile) .calc__ctas{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html.ect-mobile .ect-section--kpi,
html.ect-mobile .ect-section--why,
html.ect-mobile .ect-section--applications,
html.ect-mobile .ect-section--products{
  overflow:hidden;
}

/* Mobile: unify right/left page gutter for floating CTAs */
html.ect-mobile .ect-hero__ctas,
html.ect-mobile .ect-section--kpi .ect-kpi__ctas,
html.ect-mobile .ect-section--why .ect-why__ctas,
html.ect-mobile .ect-app__ctas,
html.ect-mobile .ect-products__ctas{
  right: 20px !important;
  left: auto;
}
.ect-products__ctas.is-visible{ opacity:1; pointer-events:auto; }

html.ect-mobile .ect-products__ctas{ display:none !important; }
.ect-section--products .ect-cta{
  --cta-bg:              var(--ect-color-7);
  --cta-bg-hover:        color-mix(in srgb, var(--ect-color-7) 82%, black);
  --cta-text:            #fff;
  --cta-text-hover:      #fff;
  --cta-icon:            #fff;
  --cta-icon-hover:      #fff;
  --cta-icon-size:       2rem;
  --cta-scale-hover:     1.012;
  --cta-scale-active:    .985;
  --cta-dur:             .22s;
}

/* Products Grid (liquid 4-up) */
.ect-section--products .ect-products{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--prod-grid-gap);
  width: 100%;
  max-width: none;
  margin: var(--prod-grid-mt, var(--prod-grid-gap)) auto 0 auto;
}

/* Products carousel (mobile) */
.ect-products__carousel{ display:none; }
html.ect-mobile .ect-section--products .ect-products{ display:none; }
html.ect-mobile .ect-products__carousel{ background: none; display:none; }
html.ect-mobile .ect-products__carousel[data-active]{ display:flex; position:relative; flex-direction:column; align-items:stretch; gap: clamp(12px, 4vw, 28px); margin: var(--prod-grid-mt, 20px) 0 0 0; overflow:hidden; }
html.ect-mobile .ect-products__vp{ overflow-x:auto; padding:0; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; scroll-padding-inline: clamp(12px, 4vw, 32px); overscroll-behavior-x: contain; overscroll-behavior-y: none; background: transparent; display:block; min-width:1px; contain:content; }
html.ect-mobile .ect-products__vp::-webkit-scrollbar{ display:none; }
html.ect-mobile .ect-products__track{ display:flex; gap: var(--prod-grid-gap); align-items:stretch; padding:0 clamp(12px, 4vw, 32px); min-width:100%; }
html.ect-mobile .ect-products__slide{ flex:0 0 clamp(240px, 82vw, 420px); scroll-snap-align:center; display:flex; min-width:1px; }
html.ect-mobile .ect-products__slide .ect-prod{ height:auto; flex:1 1 auto; min-height:1px; }
html.ect-mobile .ect-products__carousel[data-active] .ect-products__nav{ display:flex; justify-content:center; gap: clamp(12px, 8vw, 28px); }
html.ect-mobile .ect-products__btn{ position:static; transform:none; width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.38); display:grid; place-items:center; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.16); cursor:pointer; transition: background .18s ease, transform .18s ease, opacity .18s ease; }
html.ect-mobile .ect-products__btn:focus-visible{ outline:2px solid var(--ect-color-7); outline-offset:2px; }
html.ect-mobile .ect-products__btn[disabled]{ opacity:.45; cursor:default; }
html.ect-mobile .ect-products__btn svg{ width:60%; height:60%; display:block; }

/* Card base (glass) */
.ect-section--products .ect-prod{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--prod-glass-bg);
  border: 1px solid var(--prod-glass-border);
  border-radius: var(--prod-radius);
  box-shadow: var(--prod-shadow);
  backdrop-filter: blur(var(--prod-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--prod-glass-blur)) saturate(130%);
  overflow: hidden;
}

/* Force cards to fit viewport height (liquid) */
.ect-section--products{
  --prod-card-h: calc(100vh - var(--prod-cont-pt, 64px) - var(--prod-cta-reserve, 40px) - var(--prod-grid-gap) - var(--prod-headblock-h, 0px));
  --prod-specs-maxh: calc(var(--prod-card-h) - var(--prod-head-minh) - var(--prod-media-h) - var(--prod-foot-minh));
}
.ect-section--products .ect-prod{ height: auto; max-height: var(--prod-card-h); }

/* Card head (gradient) */
.ect-section--products .ect-prod__head{
  position: relative; padding: 18px 22px clamp(12px, 1.4vmin, 16px); min-height: var(--prod-head-minh);
  display: flex; flex-direction: column;
  background-image: linear-gradient(180deg, var(--prod-accent-1), var(--prod-accent-2));
  background-size: 100% 200%; background-position: 50% 100%;
  border-top-left-radius:  var(--prod-radius);
  border-top-right-radius: var(--prod-radius);
}
.ect-section--products .ect-prod__title{ margin:0; line-height:1.15; display:flex; align-items:flex-end; gap:8px; }
.ect-section--products .ect-prod__title .ect-logo{ display:block; height: clamp(25px, 3vmin, 40px); width:auto; }
.ect-section--products .ect-prod__title .type{  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: clamp(18px, 2.0vmin, 28px); font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.ect-section--products .ect-prod__sub{ margin:12px 0 0; color: color-mix(in srgb, var(--ect-color-7) 35%, #fff); font-size: clamp(12px, 1.8vmin, 18px); line-height:1.35; text-align:justify; hyphens:auto; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Media */
.ect-section--products .ect-prod__media{ margin:0; padding: clamp(10px, 1.8vmin, 20px); height: var(--prod-media-h); max-height: var(--prod-media-max); flex: 0 0 var(--prod-media-h); display:flex; align-items:center; justify-content:center; background:transparent; border-bottom:1px solid rgba(0,0,0,.06); }
.ect-section--products .ect-prod__media img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* Specs compact */
.ect-section--products .ect-prod__specs{ list-style:none; margin:0; padding: clamp(10px, 2vmin, 20px) 18px clamp(10px, 2vmin, 20px); flex: 1 1 auto; min-height: 0; max-height: var(--prod-specs-maxh); overflow:auto; }
.ect-section--products .ect-prod__specs::after{ content:""; display:block; height:0; }
.ect-section--products .ect-prod__spec{ display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:10px; min-height: var(--prod-spec-row-h); padding:6px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.ect-section--products .ect-prod__spec:last-child{ border-bottom:none; margin-bottom: 0; }
.ect-section--products .ect-prod__spec-ico{ width: clamp(15px, 1.8vmin, 20px); height: clamp(15px, 1.8vmin, 20px); display:flex; align-items:center; justify-content:center; color: var(--prod-spec-ico); }
.ect-section--products .ect-prod__spec-ico svg{ display:block; width:100%; height:auto; }
.ect-section--products .ect-prod__spec-label{ font-size: clamp(9px, 1.4vmin, 14px); font-weight:500; color:#0D0D0D; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ect-section--products .ect-prod__spec-value{ font-size: clamp(9px, 1.4vmin, 14px); color:#333; line-height:1.2; text-align:right; white-space:nowrap; }

/* Foot */
.ect-section--products .ect-prod__foot{ background:#f3f3f3; color:#222; font-size: clamp(10px, 1.8vmin, 18px); line-height:1.25; padding:14px 18px; min-height: var(--prod-foot-minh); text-align:justify; hyphens:auto; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; border-top:1px solid rgba(0,0,0,.06); border-bottom-left-radius: var(--prod-radius); border-bottom-right-radius: var(--prod-radius); position:relative; padding-bottom: calc(14px + var(--badge-band-h)); }

/* Band badge (bottom) */
.ect-section--products .ect-prod__badge{ position:absolute; z-index:3; pointer-events:auto; user-select:none; }
.ect-section--products .ect-prod__badge--band{ --badge-band-h: clamp(28px, 3.2vmin, 34px); --badge-band-bg1: #FFDE2A; --badge-band-bg2: #FFC300; --badge-band-color:#000; --badge-band-font:500 clamp(12px, 1.4vmin, 16px)/1.10 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; left:0; right:0; bottom:0; width:auto; height:var(--badge-band-h); display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, var(--badge-band-bg1), var(--badge-band-bg2)); color: var(--badge-band-color); border-top: 2px solid #fff; border-bottom-left-radius: var(--prod-radius); border-bottom-right-radius: var(--prod-radius); box-shadow: inset 0 4px 18px rgba(0,0,0,.18); text-transform: uppercase; letter-spacing:.04em; font: var(--badge-band-font); transform-origin:50% 100%; --cta-badge-bounce-y: 0; cursor: pointer; transition: opacity .28s ease, background .18s ease, color .18s ease; }
.ect-section--products .ect-prod__badge--band:hover,
.ect-section--products .ect-prod__badge--band:focus-visible{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ect-color-7) 70%, #fff) 0%,
    var(--ect-color-7) 100%);
  color: #fff;
}
/* Badge reveal inside footer */
.ect-section--products .ect-prod__foot .ect-prod__badge--band{ opacity:0; transform: none; transition: opacity .28s ease; border-top-left-radius: 0; border-top-right-radius: 0; }
.ect-section--products .ect-prod__foot .ect-prod__badge--band.is-visible{ opacity:1; transform: none; }

/* Double pulse animation for loop */
@keyframes ect-prod-badge-pulse2 {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(0) scale(1.06); }
  60%  { transform: translateY(0) scale(1); }
  80%  { transform: translateY(0) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
.ect-section--products .ect-prod__badge--band.is-pulse{ animation: ect-prod-badge-pulse2 .6s ease-out; }
/* ---------------- CALCULATOR ---------------- */
.ect-section--calculator{
  --calc-gap: clamp(12px, 2vmin, 22px);
  --calc-col-gap: clamp(14px, 2.1vmin, 24px);
  --calc-grid-mt: clamp(8px, 1.8vmin, 24px);
  --calc-panel-max: none;
  /* Chart min-height tuned for stacked carousel */
  --calc-chart-minh: clamp(90px, calc(120px * var(--ect-h-scale)), 160px);
  /* Section accent color mapping */
  --nav-active-color: var(--ect-color-6);
  --logo-box-color-section: var(--ect-color-6);
  /* Section background: Farbe 2 → Farbe 1 (wie Products) */
  --section-bg: linear-gradient(180deg,
    color-mix(in srgb, var(--ect-color-2) 92%, black) 0%,
    color-mix(in srgb, var(--ect-color-1) 92%, black) 100%);
  /* Align top padding behavior with WHY/APPS (no extra top inside section frame) */
  padding-top: 0 !important;

  /* Glass tokens (aligned with Products) */
  --calc-radius:      var(--prod-radius, clamp(10px, 1.2vmin, 14px));
  --calc-glass-bg:    var(--prod-glass-bg, rgba(255,255,255,.68));
  --calc-glass-border:var(--prod-glass-border, rgba(255,255,255,.55));
  --calc-glass-blur:  var(--prod-glass-blur, 10px);
  --calc-shadow:      var(--prod-shadow, 0 22px 60px rgba(0,0,0,.18));
  /* Chart image overlay tokens (aligned with KPI) */
  --calc-chart-veil-tint: var(--ect-color-3);
  --calc-chart-veil-op:   .20;
}
.ect-section--calculator .ect-container{
  /* Align container padding pose to KPI/Hero for consistent headline position */
  max-width: none;
  width: 100%;
  margin: 0;
  position: relative;
  height: 100%;
  padding-top: 64px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 0;
}
.ect-section--calculator .ect-headline{ color: var(--ect-color-1); margin: 0; }
.ect-section--calculator .ect-subline{ color: var(--ect-color-6); margin: 0; }
.ect-section--calculator .calc__inputs{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px);
  margin-top: var(--calc-gap);
}
.ect-section--calculator .calc__field{ display:grid; gap:6px; }
.ect-section--calculator .calc__field label{ font-weight:600; font-size: clamp(12px, 1.4vmin, 16px); color: #CECECC; }
.ect-section--calculator .calc__field input,
.ect-section--calculator .calc__field select{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #111;
  font: inherit;
  line-height: 1.2;
  min-height: clamp(38px, 4.2vmin, 46px);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.ect-section--calculator .calc__field input[type="number"]{
  appearance: auto;
  -moz-appearance: auto;
  -webkit-appearance: auto;
}
.ect-section--calculator .calc__field input[type="number"]::-webkit-inner-spin-button,
.ect-section--calculator .calc__field input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: auto;
  margin: 0;
}
.ect-section--calculator .calc__mobile-select{ display:none; }
.ect-section--calculator .calc__field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.41 0L6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
}
.ect-section--calculator .calc__field input:focus,
.ect-section--calculator .calc__field select:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--ect-color-6) 82%, black);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ect-color-6) 28%, white);
}

.ect-section--calculator .calc__grid{
  display:grid; gap: clamp(10px, 1.4vmin, 16px);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  grid-template-areas:
    'left right';
  margin-top: var(--calc-grid-mt);
  align-items: start;
  min-height:0;
}

/* Intro text between subline and inputs */
.ect-section--calculator .calc__intro{
  margin-top: clamp(15px, 3vmin, 30px);
  margin-bottom: clamp(15px, 3vmin, 30px);
  font-size: clamp(12px, 1.8vmin, 18px);
  color: #fff;
}

/* Foot note under charts */
.ect-section--calculator .calc__note{
  margin-top: clamp(8px, 1.8vmin, 12px);
  font-size: clamp(8px, 1.6vmin, 12px);
  color: var(--ect-color-3);
}
.ect-section--calculator .calc__footwrap{
  display:flex;
  flex-direction:column;
  gap: clamp(10px, 1.8vmin, 18px);
  margin-top: clamp(10px, 2vmin, 24px);
}
.ect-section--calculator .calc__left{
  display:grid;
  gap: var(--calc-col-gap);
  align-content:start;
  min-height:0;
  height:auto;
}
.ect-section--calculator .calc__left{ grid-area: left; }
.ect-section--calculator .calc__right{
  grid-area: right;
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:0;
}
/* KPIs use same column rhythm as charts (2 cols) so widths match */
.ect-section--calculator .calc__kpis{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: none; gap: clamp(8px, 1.2vmin, 14px); height:auto; }
.ect-section--calculator .calc__kpi{
  border-radius: var(--calc-radius);
  background: var(--calc-glass-bg);
  border: 1px solid var(--calc-glass-border);
  backdrop-filter: blur(var(--calc-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--calc-glass-blur)) saturate(130%);
  box-shadow: var(--calc-shadow);
  padding: clamp(14px, 2.4vmin, 26px);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.ect-section--calculator .calc__kpi::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--calc-kpi-bg, transparent);
  background-size: cover;
  background-position: center;
  opacity: var(--calc-kpi-bg-op, 0);
  transition: opacity .3s ease;
  pointer-events:none;
}
.ect-section--calculator .calc__kpi[data-saving-bg-ready]{
  --calc-kpi-bg: var(--calc-saving-bg);
  --calc-kpi-bg-op: .55;
}
.ect-section--calculator .calc__kpi > *{ position:relative; z-index:1; }
.ect-section--calculator.calc--mobile .calc__kpi{ padding:6px; }
.ect-section--calculator .calc__kpi--xl{ grid-column: 1 / -1; }
.ect-section--calculator .calc__kpi-title{ margin:0 0 4px; font-weight:700; font-size: clamp(14px, 2.2vmin, 20px); color:#333; }
.ect-section--calculator .calc__kpi[data-saving-bg-ready] .calc__kpi-title{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.ect-section--calculator .calc__tick{ display:flex; align-items:baseline; gap:8px; }
.ect-section--calculator .calc__num{ font-weight:800; font-size: clamp(20px, 4.2vmin, 48px); color: var(--ect-color-6); }
.ect-section--calculator .calc__kpi[data-saving-bg-ready] .calc__num{ color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.ect-section--calculator .calc__unit{ font-weight:700; color:#666; }
.ect-section--calculator .calc__kpi[data-saving-bg-ready] .calc__unit{ color:rgba(255,255,255,.88); }
.ect-section--calculator .calc__bar{ height:6px; border-radius:6px; background: rgba(0,0,0,.08); margin-top:8px; position:relative; overflow:hidden; --bar-w: 0%; }
.ect-section--calculator .calc__bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; width: var(--bar-w, 0%); background: linear-gradient(90deg, var(--ect-color-6), color-mix(in srgb, var(--ect-color-6) 60%, #fff)); border-radius:6px; }

.ect-section--calculator .calc__kpi--xl{ grid-column:1 / -1; grid-row:1; }

/* Charts span full width below the top row */
.ect-section--calculator .calc__charts{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--calc-gap); margin-top: var(--calc-col-gap); }
.ect-section--calculator .calc__chart{
  border-radius: var(--calc-radius);
  background: var(--calc-glass-bg);
  border: 1px solid var(--calc-glass-border);
  backdrop-filter: blur(var(--calc-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--calc-glass-blur)) saturate(130%);
  box-shadow: var(--calc-shadow);
  padding:12px;
  position: relative;
  overflow: hidden;
  min-height: var(--calc-chart-minh);
}
.ect-section--calculator .calc__chart::before{
  content: ""; position:absolute; inset:0; z-index:0; opacity: .85;
  background-image: var(--calc-chart-image, none);
  background-size: cover; background-position: center;
}
.ect-section--calculator .calc__chart::after{
  content:""; position:absolute; inset:0; z-index:0;
  background: color-mix(in oklab, var(--calc-chart-veil-tint, #000) 100%, transparent);
  opacity: var(--calc-chart-veil-op, .40);
}
.ect-section--calculator .calc__chart > *{ position:relative; z-index:1; }
.ect-section--calculator .calc__chart-title{ margin:0 0 2px; font-weight:700; font-size: clamp(13px,1.6vmin,18px); color:#fff; }
.ect-section--calculator .calc__chart-sub{ margin:0 0 clamp(8px, calc(18px * var(--ect-h-scale)), 24px); font-size: clamp(12px,1.4vmin,15px); color:rgba(255,255,255,.9); }

.ect-section--calculator .calc__panel{
  display:flex;
  flex-direction:column;
  gap: clamp(8px, 1.4vmin, 14px);
  height:auto;
  min-height:0;
}
.ect-section--calculator .calc__panel-vp{
  flex:0 1 auto;
  min-height:0;
  overflow:hidden;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  max-height: var(--calc-panel-max, none);
}
.ect-section--calculator .calc__panel-track{
  display:flex;
  align-items:stretch;
  height:auto;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.ect-section--calculator .calc__panel-slide{
  flex:0 0 100%;
  min-width:0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: clamp(12px, 2.2vmin, 18px);
  height:auto;
}
.ect-section--calculator .calc__panel-slide--table{
}
.ect-section--calculator .calc__panel-slide--charts{
  padding-bottom: clamp(12px, 2.2vmin, 18px);
  overflow-y:auto;
  overflow-x:hidden;
}
.ect-section--calculator .calc__panel-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: clamp(8px, 1.6vmin, 14px);
  margin-top: clamp(2px, 0.8vmin, 8px);
}
.ect-section--calculator .calc__panel-btn{
  width: clamp(30px, 3vmin, 36px);
  height: clamp(30px, 3vmin, 36px);
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,0.7);
  display:grid;
  place-items:center;
  color: var(--ect-color-3);
  transition: transform .18s ease, background .18s ease;
}
.ect-section--calculator .calc__panel-btn svg{ width:60%; height:60%; }
.ect-section--calculator .calc__panel-btn[disabled]{ opacity:.45; cursor:default; }
.ect-section--calculator .calc__panel-btn:hover:not([disabled]){ background: rgba(255,255,255,0.9); transform: scale(1.05); }
.ect-section--calculator .calc__panel-dots{ display:flex; gap:8px; }
.ect-section--calculator .calc__panel-dot{
  width:8px; height:8px;
  border-radius:999px;
  border:0;
  padding:0;
  background: rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}
.ect-section--calculator .calc__panel-dot.is-active{ background: var(--ect-color-6); transform: scale(1.2); }
.ect-section--calculator .calc__panel-dot:focus-visible{ outline:2px solid var(--ect-color-6); outline-offset:2px; }

.ect-section--calculator .calc__charts--stack{
  margin-top:0;
  height:auto;
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: clamp(10px, 1.8vmin, 14px);
}
.ect-section--calculator .calc__charts--stack .calc__chart{
  min-height: var(--calc-chart-minh);
  display:flex;
  flex-direction:column;
}
.ect-section--calculator .calc__charts--stack svg{ flex:1; min-height:0; height:100%; }

/* Horizontal bars inside charts */
.ect-section--calculator .calc__hbars{ display:grid; gap:10px; margin-top: clamp(0px, calc(6px * var(--ect-h-scale)), 10px); }
.ect-section--calculator .calc__hbar-row{ display:grid; grid-template-columns: var(--calc-hbar-label-col, clamp(90px, 11ch, 140px)) 1fr auto; align-items:center; gap:8px; }
.ect-section--calculator .calc__hbar{
  height:10px; border-radius:8px; background: rgba(0,0,0,.08); position:relative; overflow:hidden;
}
.ect-section--calculator .calc__hbar > span{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:8px; transition: width .6s ease;
  background: linear-gradient(90deg, var(--ect-color-6), color-mix(in srgb, var(--ect-color-6) 60%, #fff));
}
.ect-section--calculator .calc__hbars .calc__hbar-row:nth-child(1) .calc__hbar > span{ background: var(--ect-color-2); }
.ect-section--calculator .calc__hbars .calc__hbar-row:nth-child(2) .calc__hbar > span{ background: var(--ect-color-1); }
.ect-section--calculator .calc__hbars .calc__hbar-row:nth-child(3) .calc__hbar > span{ background: linear-gradient(90deg, var(--ect-color-6), color-mix(in srgb, var(--ect-color-6) 60%, #fff)); }
.ect-section--calculator .calc__hbar-label{ font-size: clamp(11px,1.2vmin,13px); color:#fff; }
.ect-section--calculator .calc__hbar-val{ font-weight:700; color:#fff; white-space:nowrap; }

.ect-section--calculator .calc__right{ align-self:stretch; }
.ect-section--calculator .calc__table{
  border-radius: var(--calc-radius);
  background: var(--calc-glass-bg);
  border: 1px solid var(--calc-glass-border);
  backdrop-filter: blur(var(--calc-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--calc-glass-blur)) saturate(130%);
  box-shadow: var(--calc-shadow);
  overflow-y:auto;
  overflow-x:hidden;
  padding: clamp(10px, 2vmin, 16px);
  padding-bottom: clamp(12px, 2.4vmin, 20px);
  flex:1;
  min-height:0;
}
.ect-section--calculator .calc__table table{ width:100%; border-collapse:collapse; font-size: clamp(14px, 1.8vmin, 17px); color:#222; flex:1; background: transparent; margin-bottom: clamp(8px, 2vmin, 16px); }
.ect-section--calculator .calc__table thead{ position:sticky; top:0; background: transparent; z-index:1; backdrop-filter: none; }
.ect-section--calculator .calc__table tbody{ background: transparent; }
.ect-section--calculator table{ width:100%; border-collapse: collapse; font-size: clamp(13px, calc(16px * var(--ect-h-scale)), 16px); }
.ect-section--calculator th, .ect-section--calculator td{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; }
.ect-section--calculator .calc__th--num, .ect-section--calculator .calc__td--num{ text-align:right; white-space:nowrap; }
.ect-section--calculator .calc__th--muted, .ect-section--calculator .calc__td--muted{ color:#666; }
.ect-section--calculator .calc__table thead th:nth-child(4),
.ect-section--calculator .calc__table tbody td:nth-child(4){
  color: var(--ect-color-6);
  font-weight: 700;
}

.ect-section--calculator .calc__footline{ display:flex; align-items:center; justify-content:space-between; gap: var(--calc-col-gap); margin-top: var(--calc-col-gap); }
.ect-section--calculator .calc__big{ margin:0; font-weight:500; font-size: clamp(11px,1.8vmin,16px); color: var(--ect-color-1); line-height: 1.32; }
.ect-section--calculator .calc__cta{ width:auto; min-width: clamp(200px, 22vw, 360px); }

/* Calculator CTA: icon on first row before head, sub on full width below */
.ect-section--calculator .calc__cta{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 8px; /* tighter icon-to-head spacing */
}
.ect-section--calculator .calc__cta .ect-cta__icon{
  grid-row: 1;
  grid-column: 1;
  align-self: start;
}
.ect-section--calculator .calc__cta .ect-cta__wrap{
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px; /* a bit more space to subline */
}

/* Accent color for the YTD amount only */
.ect-section--calculator .calc__big-accent{ color: var(--ect-color-6); text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.22); }
.ect-section--calculator .calc__cta .ect-cta__row{ display: block; }
.ect-section--calculator .calc__cta .ect-cta__head{ margin: 0; }
.ect-section--calculator .calc__cta .ect-cta__sub{ margin: 0; }

/* Bottom-right CTA cluster (intro → chevrons → button) */
.ect-section--calculator .calc__ctas{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  grid-template-areas: 'intro chevrons button';
  align-items: center;
  justify-content: end;
  column-gap: var(--calc-cta-gap, clamp(12px, 3.6vw, 24px));
  row-gap: clamp(6px, 1.4vw, 10px);
  margin-top: clamp(8px, 1.6vmin, 18px);
}
.ect-section--calculator .calc__ctas .calc__big{
  grid-area: intro;
  max-width: none;
  width: 100%;
  text-align: left;
  text-align-last: auto;
  font-size: clamp(18px, calc(1.2vw + 0.6vh), 28px);
  font-weight: 700;
  line-height: 1.25;
  display: block;
  margin: 0;
}
.ect-section--calculator .calc__ctas .calc__chevrons{ grid-area: chevrons; }
.ect-section--calculator .calc__ctas .calc__chevrons{
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}
.ect-section--calculator .calc__ctas .calc__cta{
  grid-area: button;
  justify-self: end;
}
.ect-section--calculator .calc__chevrons{
  display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.8vmin, 10px);
  color: var(--ect-color-3); /* Chevrons in Farbe 3 */
}
.ect-section--calculator .calc__chev{
  width: clamp(20px, 2.4vmin, 30px);
  height: clamp(20px, 2.4vmin, 30px);
  opacity: 0;
  transform: translateX(-8px);
  animation: ect-chev-runway 6s linear infinite;
  color: currentColor;
  fill: currentColor;
}

.ect-section--calculator .calc__carousel{ display:none; flex-direction:column; gap: clamp(4px, 1.2vw, 8px); margin-top: clamp(10px, 2vw, 18px); }
.ect-section--calculator .calc__carousel-vp{ overflow:hidden; width:100%; }
.ect-section--calculator .calc__carousel-track{ display:flex; transition: transform .32s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.ect-section--calculator .calc__carousel-slide{ flex:0 0 100%; padding: clamp(2px, 0.6vw, 8px); display:flex; flex-direction:column; gap: clamp(8px, 2.4vw, 16px); }
.ect-section--calculator .calc__carousel-slide > *{ width:100%; }
.ect-section--calculator .calc__carousel-nav{ display:flex; align-items:center; justify-content:space-between; gap: clamp(5px, 1.8vw, 10px); margin-top: clamp(3px, 0.8vw, 5px); }
.ect-section--calculator .calc__carousel-btn{
  width: clamp(40px, 10vw, 52px);
  height: clamp(40px, 10vw, 52px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: color-mix(in srgb, #000 28%, transparent);
  display:grid; place-items:center;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  cursor:pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.ect-section--calculator .calc__carousel-btn:hover{ background: color-mix(in srgb, #000 36%, transparent); transform: scale(1.04); }
.ect-section--calculator .calc__carousel-btn[disabled]{ opacity:.45; cursor:default; }
.ect-section--calculator .calc__carousel-btn svg{ width:60%; height:60%; display:block; }
.ect-section--calculator .calc__carousel-btn:focus-visible{ outline:2px solid var(--ect-color-6); outline-offset:2px; }
.ect-section--calculator .calc__dots{ display:flex; gap:8px; justify-content:center; align-items:center; flex:1; }
.ect-section--calculator .calc__dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.35); transition: transform .18s ease, background .18s ease; cursor:pointer; }
.ect-section--calculator .calc__dot.is-active{ background: rgba(255,255,255,.92); transform: scale(1.12); }

.ect-section--calculator.calc--mobile .calc__grid,
.ect-section--calculator.calc--mobile .calc__charts,
.ect-section--calculator.calc--mobile .calc__footwrap{ display:none; }
.ect-section--calculator.calc--mobile .calc__carousel{ display:flex; }
.ect-section--calculator.calc--mobile{
  --calc-gap: clamp(1px, 0.4vw, 2px);
  --calc-col-gap: clamp(4px, 1.2vw, 6px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__inputs{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 12px);
  margin-top: 0;
  margin-bottom: clamp(14px, 3.6vw, 22px);
}
.ect-section--calculator.calc--mobile .calc__carousel-vp{
  position: relative;
  height: auto;
  transition: height .28s ease;
}
.ect-section--calculator.calc--mobile .calc__carousel-track{
  position: relative;
  display: block;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide.is-active{
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.ect-section--calculator.calc--mobile .calc__carousel,
.ect-section--calculator.calc--mobile .calc__carousel-vp,
.ect-section--calculator.calc--mobile .calc__carousel-track,
.ect-section--calculator.calc--mobile .calc__carousel-slide{ min-height: 0; }

.ect-section--calculator.calc--mobile .calc__panel,
html.ect-mobile .ect-section--calculator .calc__panel{ display:none; }
.ect-section--calculator.calc--mobile .calc__intro{ display:none; }
.ect-section--calculator.calc--mobile .calc__carousel-slide--overview .calc__intro{
  display:block;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__inputs .calc__field{ min-width:0; }
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__inputs .calc__field label{
  font-size: clamp(11px, 2.4vw, 12px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__kpis{
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: none;
  gap: clamp(8px, 2.4vw, 16px);
  height: auto;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__kpi{ height:auto; }
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__kpi--xl{ padding: clamp(3px, 0.8vw, 5px); }

.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__kpi--xl{
  grid-column: 1 / -1;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--overview .calc__kpi{
  padding: clamp(8px, 1.8vw, 14px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap: clamp(6px, 1.4vw, 10px);
  max-height: clamp(110px, 20vh, 134px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--overview .calc__tick{
  gap: clamp(1px, 0.3vw, 1.8px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--overview .calc__kpi--xl .calc__num{
  font-size: clamp(28px, 7.2vw, 36px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--overview .calc__kpi:not(.calc__kpi--xl) .calc__num{
  font-size: clamp(22px, 6vw, 26px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--overview .calc__kpi .calc__bar{
  margin-top: clamp(8px, 2.4vw, 14px);
  height: 3px;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--overview{
  gap: clamp(2px, 0.6vw, 3px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__inputs .calc__field select{
  padding-left: clamp(10px, 3vw, 12px);
  background-position: right clamp(8px, 3vw, 12px) center;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide #country option{ padding-inline: clamp(4px, 2vw, 10px); }
.ect-section--calculator.calc--mobile .calc__carousel-slide #country{ text-align:center; }
.ect-section--calculator.calc--mobile .calc__carousel-slide--table .calc__table{
  border-radius: var(--calc-radius);
  max-width: min(100%, 450px);
  margin-inline:auto;
  padding: clamp(8px, 3vw, 12px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--table .calc__panel-slide--table,
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__panel-slide--charts{
  display: contents;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--table .calc__note{
  color:#fff;
  text-align:left;
  font-size: clamp(12px, 3.4vw, 14px);
  margin-top: clamp(12px, 4vw, 18px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--table table{
  font-size: clamp(12px, 3.4vw, 14px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--table thead th{ font-size: clamp(12px, 2.6vw, 13px); }
.ect-section--calculator.calc--mobile .calc__carousel-slide--table tbody td,
.ect-section--calculator.calc--mobile .calc__carousel-slide--table tbody th{
  font-size: clamp(12px, 2.6vw, 13px);
  padding-inline: clamp(9px, 2.8vw, 13px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__footwrap{
  display:flex;
  margin-top: 0;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide .calc__note{
  text-align:left;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--cta{
  gap: clamp(12px, 3.2vw, 22px);
  padding-inline: clamp(14px, 6vw, 28px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--cta .calc__ctas{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'intro intro'
    'chevrons button';
  align-items:center;
  row-gap: clamp(14px, 4vw, 20px);
  column-gap: clamp(14px, 5vw, 24px);
  width:100%;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--cta .calc__ctas .calc__big{
  grid-area: intro;
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: 1.4;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  padding-inline: clamp(2px, 1.2vw, 8px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--cta .calc__ctas .calc__chevrons{
  grid-area: chevrons;
  justify-self:flex-start;
  align-self:center;
  color: var(--ect-color-1);
  margin-top: clamp(4px, 1.4vw, 10px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--cta .calc__ctas .calc__cta{
  grid-area: button;
  width:100%;
  justify-self:flex-end;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--cta .calc__note{
  font-size: clamp(13px, 3.6vw, 16px);
}
.ect-section--calculator .calc__chev:nth-child(2){ animation-delay: .2s; }
.ect-section--calculator .calc__chev:nth-child(3){ animation-delay: .4s; }
@keyframes ect-chev-runway{
  0%   { opacity: 0; transform: translateX(-8px); }
  8%   { opacity: 1; transform: translateX(0); }
  20%  { opacity: 1; transform: translateX(0); }
  30%  { opacity: 0; transform: translateX(4px); }
  100% { opacity: 0; transform: translateX(8px); }
}

/* Calculator CTA adopts accent 6 */
.ect-section--calculator .ect-cta{
  --cta-bg:              var(--ect-color-6);
  --cta-bg-hover:        color-mix(in srgb, var(--ect-color-6) 82%, black);
  --cta-text:            #fff;
  --cta-text-hover:      #fff;
  --cta-icon:            #fff;
  --cta-icon-hover:      #fff;
  --cta-icon-size:       2rem;
  --cta-scale-hover:     1.012;
  --cta-scale-active:    .985;
  --cta-dur:             .22s;
}

html.ect-mobile .ect-section--calculator .calc__grid{ grid-template-columns: 1fr; grid-template-areas: 'left' 'right'; }
html.ect-mobile .ect-section--calculator .calc__charts{ grid-template-columns: repeat(2,minmax(0,1fr)); }
html.ect-mobile .ect-section--calculator .calc__footwrap{ gap: clamp(12px, 4vw, 24px); }
html.ect-mobile .ect-section--calculator .calc__mobile-select{ display:block; }
html.ect-mobile .ect-section--calculator .calc__input-number{ display:none; }
@media (max-width: 720px){ html.ect-mobile .ect-section--calculator .calc__charts{ grid-template-columns: 1fr; } }
.ect-section--calculator .calc__chart svg{ display:none !important; }

/* Height-scale driven compact mode (set via JS by reading --ect-h-scale) */
.ect-section--calculator.calc--compact{
  --calc-gap:      clamp(10px, calc(18px * var(--ect-h-scale)), 18px);
  --calc-col-gap:  clamp(12px, calc(22px * var(--ect-h-scale)), 22px);
  --calc-grid-mt:  clamp(10px, calc(24px * var(--ect-h-scale)), 24px);
}
.ect-section--calculator.calc--compact .calc__field label{ font-size: clamp(11px, calc(14px * var(--ect-h-scale)), 14px); }
.ect-section--calculator.calc--compact .calc__field input,
.ect-section--calculator.calc--compact .calc__field select{
  min-height: clamp(28px, calc(42px * var(--ect-h-scale)), 42px);
  padding: 8px 10px;
}
.ect-section--calculator.calc--compact table{ font-size: clamp(10px, calc(12px * var(--ect-h-scale)), 12px); }
.ect-section--calculator.calc--compact th,
.ect-section--calculator.calc--compact td{ padding:6px 8px; }
.ect-section--calculator.calc--compact .calc__charts{ grid-template-columns: 1fr; }
.ect-section--calculator.calc--compact .calc__ctas{ margin-top: var(--calc-gap); }
.ect-section--calculator.calc--compact .calc__big{ font-size: clamp(14px, 2.6vmin, 28px); line-height: 1.25; }
.ect-section--contact .ect-headline{ color: var(--ect-color-1); margin:0; }
.ect-section--contact .ect-subline{  color: var(--ect-color-5); margin: 0 0 clamp(14px, 2.2vmin, 24px); }
/* Headline/Subline centered for symmetric left/right padding within container */
/* ============================= */
/* Legal / Imprint               */
/* ============================= */
.ect-section--legal .ect-container{ padding: 40px 50px; }
.ect-legal__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(16px, 3vmin, 32px); margin-top: clamp(12px, 2vmin, 20px); }
.ect-legal__list{ margin:0; padding:0; }
.ect-legal__list dt{ font-weight:700; color: var(--ect-color-2); }
.ect-legal__list dd{ margin: 0 0 10px; color: var(--ect-color-1); }
/* Class-driven mobile mode for KPI (avoid hard width MQ coupling) */
.ect-section--kpi.is-kpi-mobile .ect-kpi__rot{ display:none !important; }
.ect-section--kpi.is-kpi-mobile .ect-container{ padding-top: 52px; padding-left: 16px; padding-right: 16px; padding-bottom: 96px; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__list{ display:none; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__carousel{ position: relative; overflow: hidden; width: 100%; display:flex; flex-direction: column; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__track{ display: flex; width: 100%; will-change: transform; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ect-section--kpi.is-kpi-mobile .ect-kpi__slide{ flex: 0 0 100%; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__item{ gap: 12px; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__val{ column-gap: 6px; margin-bottom: 6px; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__prefix{ font-size: .85rem; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__odo{ font-size: clamp(1.60rem, 7.0vw, 32px); }
.ect-section--kpi.is-kpi-mobile .ect-kpi__suffix{ font-size: .90rem; min-width: 3ch; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__label{ font-size: .95rem; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__headlabel{ font-size: .70rem; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__controls{ display:flex; align-items:center; justify-content: space-between; padding: 8px 4px 0; margin-top: 6px; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__nav{ position: static; transform: none; width:36px; height:36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.28); color:#fff; display:flex; align-items:center; justify-content:center; z-index: 11; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ect-section--kpi.is-kpi-mobile .ect-kpi__nav[disabled]{ opacity: .35; pointer-events: none; }
.ect-section--kpi.is-kpi-mobile .ect-kpi__nav svg{ width: 18px; height: 18px; display:block; }
  
/* nur unter 1024px überschreiben */
html.ect-mobile .ect-section--products{
  --prod-card-h: calc(100svh - var(--prod-cont-pt, 64px) - var(--prod-cta-reserve, 40px) - var(--prod-grid-gap) - var(--prod-headblock-h, 0px));
}

/* Fallback, falls svh nicht verfügbar: prefer dvh, sonst vh */
@supports not (height: 100svh){ html.ect-mobile .ect-section--products{ --prod-card-h: calc(100dvh - var(--prod-cont-pt, 64px) - var(--prod-cta-reserve, 40px) - var(--prod-grid-gap) - var(--prod-headblock-h, 0px)); } }

html.ect-mobile .ect-products__carousel[data-active]{ min-width: 0; }
html.ect-mobile .ect-products__vp{ display:block; min-width:1px; contain: content; }
html.ect-mobile .ect-products__track{ min-width:100%; }
html.ect-mobile .ect-products__slide{ min-width:1px; }
html.ect-mobile .ect-products__slide .ect-prod{ min-height:1px; }

html.ect-mobile .ect-products__slide{ scroll-snap-stop: always; }
html.ect-mobile .ect-products__vp{ overscroll-behavior-x: contain; }

.ect-section--calculator.calc--mobile .calc__carousel-slide--charts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: clamp(6px, 1.8vw, 14px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__charts{
  --calc-hbar-label-col: clamp(64px, 26vw, 102px);
  display:contents;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart{
  min-height: clamp(90px, 20vh, 128px);
  padding: clamp(7px, 2.1vw, 12px);
  padding-bottom: clamp(10px, 2.6vw, 18px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: clamp(6px, 1.8vw, 10px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(1){ grid-column: 1 / -1; }
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(2),
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(3){
  grid-row: 2;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(4){ grid-column: 1 / -1; }
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(2),
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(3){
  --calc-hbar-label-col: clamp(54px, 22vw, 88px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart-title{
  font-size: clamp(11px, 3.2vw, 15px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart-sub{
  font-size: clamp(9px, 3vw, 12px);
  margin-bottom: clamp(3px, 1.2vw, 5px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__hbars{
  gap: clamp(3px, 1.4vw, 6px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__hbar-row{
  align-items:center;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__hbar-label{
  padding-left: clamp(0px, 0.4vw, 4px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__hbar-label,
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__hbar-val{
  font-size: clamp(10px, 2.8vw, 12px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(2) .calc__hbar-val,
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__chart:nth-of-type(3) .calc__hbar-val{
  font-size: clamp(9px, 2.4vw, 11px);
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__hbar{
  height:5px;
  border-radius:3px;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide--charts .calc__hbar > span{
  border-radius:3px;
}
.ect-section--calculator.calc--mobile .calc__carousel-slide.is-active > *{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.ect-hero__slide[data-hero-layout="story"] .ect-hero__stage{ display:none !important; }

.ect-hero__slide.is-variant-c .ect-hero__layout{
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
}

.ect-hero__slide.is-variant-c .ect-hero__claimstack{
  align-items: center;
  gap: clamp(22px, 3.5vw, 42px);
  width: 100%;
}

.ect-hero__slide.is-variant-c .ect-hero__copy{
  align-items: center;
  text-align: center;
  gap: clamp(12px, 2vw, 26px);
}

.ect-hero__slide.is-variant-c .ect-hero__logo{
  width: clamp(320px, 40vw, 520px);
  max-width: min(90vw, 520px);
  height: auto;
  display: block;
  margin: 0 auto clamp(1px, 0.8vw, 8px);
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.35));
}

.ect-hero__slide.is-variant-c .ect-hero__rotline{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: clamp(320px, 60vw, 780px);
  margin: clamp(18px, 2.4vw, 40px) auto 0;
}

.ect-hero__slide.is-variant-c .ect-hero__rotword{
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 16px 36px rgba(0,0,0,0.55);
  display: block;
}

.ect-hero__slide.is-variant-c .ect-hero__rottext{
  color: #fff;
  margin-top: clamp(6px, 1vw, 14px);
  font-size: clamp(18px, 2.4vmin, 26px);
  line-height: 1.4;
  text-shadow: 0 8px 24px rgba(0,0,0,0.38);
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(320px, 58vw, 760px);
}

.ect-hero__slide.is-variant-c .ect-hero__ctas{
  position: static;
  right: auto;
  bottom: auto;
  transform: none;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 32px);
  flex-wrap: wrap;
  margin-top: clamp(22px, 3vw, 38px);
}

.ect-hero__slide.is-variant-c .ect-hero__cta{
  min-width: clamp(220px, 22vw, 280px);
  font-size: clamp(18px, 2.1vmin, 22px);
}

.ect-hero__slide.is-variant-c .ect-hero__highlights{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  justify-content: center;
  gap: clamp(18px, 2.8vw, 38px);
  margin: clamp(26px, 3.4vw, 44px) auto 0;
}

.ect-hero__slide.is-variant-c .ect-hero__highlight{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(12px, 2.6vw, 24px);
  text-align: center;
  color: #f5f5f5;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 22px 44px rgba(0,0,0,0.35);
}

.ect-hero__slide.is-variant-c .ect-hero__highlight-icon{
  width: clamp(26px, 3.2vmin, 42px);
  height: clamp(26px, 3.2vmin, 42px);
  color: var(--ect-color-5);
  fill: currentColor;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.45));
}

.ect-hero__slide.is-variant-c .ect-hero__highlight-icon use{
  fill: currentColor;
}

.ect-hero__slide.is-variant-c .ect-hero__highlight-text{
  margin: 0;
  font-size: clamp(18px, 2.4vmin, 22px);
  line-height: 1.45;
  white-space: normal;
}

:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__layout{
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(10px, 3.8vw, 16px);
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__copy{
  max-width: none;
  width: 100%;
  align-items: flex-start;
  text-align: left;
  gap: clamp(6px, 3.2vw, 12px);
}

:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlights{
  width: 100%;
  max-width: none;
  margin: clamp(6px, 4vw, 12px) 0 0;
  gap: clamp(3px, 1.6vw, 6px);
  padding: clamp(4px, 2.6vw, 10px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlight{
  margin: 0;
  padding: clamp(1px, 0.5vw, 2px) 0;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(3px, 1.4vw, 6px);
  background: none;
  border: 0;
  box-shadow: none;
  text-align: left;
}
:where(.ect-section--hero.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__highlight + .ect-hero__highlight{
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: clamp(2px, 1vw, 3px);
  padding-top: clamp(3px, 1.4vw, 5px);
}


@media (max-width: 1180px){
  .ect-hero__slide.is-variant-c .ect-hero__highlights{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .ect-hero__slide.is-variant-c .ect-hero__ctas{
    flex-wrap: wrap;
  }
}

@media (max-width: 820px){
  .ect-hero__slide.is-variant-c .ect-hero__highlights{
    grid-template-columns: 1fr;
  }
  .ect-hero__slide.is-variant-c .ect-hero__logo{
    width: clamp(220px, 58vw, 420px);
  }
  .ect-hero__slide.is-variant-c .ect-hero__rottext{
    max-width: clamp(280px, 72vw, 640px);
    white-space: normal;
  }
  .ect-hero__subtext{
    max-width: 100%;
  }
}

@media (max-width: 520px){
  .ect-hero__slide.is-variant-c .ect-hero__highlights{
    grid-template-columns: 1fr;
  }
  .ect-hero__slide.is-variant-c .ect-hero__ctas{
    flex-wrap: wrap;
  }
  .ect-hero__slide.is-variant-c .ect-hero__cta{
    min-width: 100%;
  }
}

@media (max-width: 780px){
  .ect-hero__slide.is-variant-c .ect-hero__layout{
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(18px, 6vw, 30px);
  }
  .ect-hero__slide.is-variant-c .ect-hero__copy{
    max-width: none;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    gap: clamp(16px, 5vw, 24px);
  }
  .ect-hero__slide.is-variant-c .ect-hero__highlights{
    width: 100%;
    max-width: none;
    margin: clamp(20px, 7vw, 32px) 0 0;
    padding: clamp(12px, 4vw, 18px);
    gap: clamp(1px, 1.2vw, 6px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .ect-hero__slide.is-variant-c .ect-hero__highlight{
    margin: 0;
    padding: clamp(2px, 1.2vw, 4px) 0;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 3vw, 16px);
    background: none;
    border: 0;
    box-shadow: none;
    text-align: left;
  }
  .ect-hero__slide.is-variant-c .ect-hero__highlight + .ect-hero__highlight{
    border-top: 1px solid rgba(255,255,255,0.14);
    margin-top: clamp(2px, 1.2vw, 4px);
    padding-top: clamp(4px, 1.6vw, 6px);
  }
}
:where(.hero--mobile, html.ect-mobile .ect-section--hero) .ect-hero__slide.is-variant-c .ect-hero__copy{
  max-width: none;
  align-items: flex-start;
  text-align: left;
  gap: clamp(16px, 5vw, 24px);
}