.ed-c-vergleich__sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.ed-c-vergleich__sides--pair {
  position: relative;
  gap: 0;
  margin-top: clamp(8px, 1.5vh, 16px);
}

.ed-c-vergleich__side {
  min-width: 0;
}

.ed-c-vergleich__sides--pair .ed-c-vergleich__side {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 52px);
  border-top: 4px solid var(--ed-muted);
}

.ed-c-vergleich__sides--pair .ed-c-vergleich__side--base {
  background: var(--ed-surface-1);
  padding-right: clamp(40px, 4.6vw, 72px);
}

.ed-c-vergleich__sides--pair .ed-c-vergleich__side--highlight {
  background: var(--ed-navy);
  border-top-color: var(--ed-blue);
  padding-left: clamp(40px, 4.6vw, 72px);
}

.ed-c-vergleich__sides--pair .ed-c-vergleich__value {
  font-size: clamp(30px, 3.4vw, 54px);
}

.ed-c-vergleich__vs {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 5vw, 72px);
  height: clamp(52px, 5vw, 72px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ed-white);
  border: 2px solid var(--ed-blue);
  box-shadow: 0 0 0 6px var(--ed-white);
  pointer-events: none;
}

.ed-c-vergleich__vs span {
  font: 800 clamp(14px, 1.4vw, 18px)/1 var(--ed-font-expanded);
  font-stretch: expanded;
  letter-spacing: .04em;
  color: var(--ed-blue);
}

.ed-c-vergleich__title {
  margin: 0 0 8px;
  font: 500 15px/1.4 var(--ed-font-sans);
  color: var(--ed-text);
}

.ed-c-vergleich__model {
  margin: 0 0 22px;
  font: 700 16px/1.3 var(--ed-font-sans);
  color: var(--ed-ink);
}

.ed-c-vergleich__side--base .ed-c-vergleich__value {
  color: #6F7F8F;
}

.ed-c-vergleich__side--base .ed-c-vergleich__label {
  border-top-color: var(--ed-line-2);
}

.ed-c-vergleich__side--highlight .ed-c-vergleich__title {
  color: rgba(255, 255, 255, .72);
}

.ed-c-vergleich__side--highlight .ed-c-vergleich__model {
  color: var(--ed-white);
}

.ed-c-vergleich__side--highlight .ed-c-vergleich__value {
  color: var(--ed-sky);
}

.ed-c-vergleich__side--highlight .ed-c-vergleich__label {
  border-top-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .78);
}

.ed-c-vergleich__stats,
.ed-c-vergleich__eq {
  display: grid;
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
}

.ed-c-vergleich__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ed-c-vergleich__eq {
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr);
  margin-top: clamp(36px, 5vh, 56px);
}

.ed-c-vergleich__figure {
  min-width: 0;
}

.ed-c-vergleich__value {
  font-family: var(--ed-font-expanded);
  font-weight: 800;
  font-stretch: expanded;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: .98;
  color: var(--ed-blue);
  white-space: nowrap;
}

.ed-c-vergleich__eq .ed-c-vergleich__value {
  font-size: clamp(26px, 2.4vw, 42px);
  line-height: 1.05;
  white-space: nowrap;
}

.ed-c-vergleich__value .ed-stat-suffix {
  font-size: .42em;
  font-weight: 700;
  margin-left: .2em;
}

.ed-c-vergleich__eq .ed-stat-suffix {
  white-space: normal;
}

.ed-c-vergleich__label {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ed-line-1);
  font: 500 14px/1.4 var(--ed-font-sans);
  color: var(--ed-text);
}

.ed-c-vergleich__op {
  padding-top: .2em;
  font: 500 clamp(22px, 2vw, 32px)/1 var(--ed-font-expanded);
  color: var(--ed-muted);
}

@media (max-width: 900px) {
  .ed-c-vergleich__sides,
  .ed-c-vergleich__stats,
  .ed-c-vergleich__eq {
    grid-template-columns: 1fr;
  }

  .ed-c-vergleich__op {
    padding-top: 0;
  }

  .ed-c-vergleich__sides--pair .ed-c-vergleich__side--base {
    padding-right: clamp(28px, 3.4vw, 52px);
    padding-bottom: clamp(44px, 9vw, 60px);
  }

  .ed-c-vergleich__sides--pair .ed-c-vergleich__side--highlight {
    padding-left: clamp(28px, 3.4vw, 52px);
    padding-top: clamp(44px, 9vw, 60px);
  }

  .ed-c-vergleich__sides--pair .ed-c-vergleich__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .ed-c-vergleich__sides--pair .ed-c-vergleich__stats {
    grid-template-columns: 1fr;
  }
}
