/*
 * CMAAG – Elektromobilität
 * Diese Datei NACH cmaag.css laden.
 * Markenneutral: geeignet für mehrere Elektro- und Hybridmarken.
 */

.cma-emobility-hero {
  position: relative;
  min-height: clamp(31rem, 56vw, 43rem);
  overflow: hidden;
  color: var(--cma-white);
  background:
    linear-gradient(90deg, rgba(10,12,15,.93) 0%, rgba(10,12,15,.59) 47%, rgba(10,12,15,.13) 100%),
    url("../images/emobility-hero.jpg") center / cover,
    var(--cma-ink);
}

.cma-emobility-hero::after {
  position: absolute;
  top: -11rem;
  right: -9rem;
  width: 32rem;
  height: 32rem;
  content: "";
  border: 3rem solid rgba(255,255,255,.045);
  border-radius: 50%;
}

.cma-emobility-hero .cma-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: inherit;
  padding-block: clamp(4.6rem, 7vw, 6.7rem);
}

.cma-emobility-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin: 0 0 .9rem;
  padding: .42rem .7rem;
  color: var(--cma-white);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: .2rem;
  background: rgba(15,16,19,.35);
  backdrop-filter: blur(4px);
}

.cma-emobility-hero h1 {
  max-width: 50rem;
  margin: 0;
  font-size: clamp(2.8rem, 5.9vw, 5.15rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.cma-emobility-hero h1 strong { color: #f33d4a; }

.cma-emobility-hero p:not(.cma-emobility-kicker) {
  max-width: 39rem;
  margin: 1.25rem 0 0;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.cma-emobility-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

/* Intro */

.cma-emobility-intro {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(20rem, 1.06fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}

.cma-emobility-image {
  position: relative;
  min-height: 30rem;
  overflow: hidden;
  border-radius: var(--cma-radius);
  background:
    linear-gradient(0deg, rgba(11,12,14,.4), rgba(11,12,14,.02)),
    url("../images/emobility-intro.jpg") center / cover,
    #303238;
  box-shadow: var(--cma-shadow);
}

.cma-emobility-image-note {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;
  padding: .95rem 1rem;
  color: rgba(255,255,255,.9);
  font-size: .83rem;
  border-left: 3px solid #f33d4a;
  background: rgba(11,12,14,.72);
  backdrop-filter: blur(8px);
}

.cma-emobility-intro-copy h2 {
  max-width: 37rem;
  margin: 0;
  color: var(--cma-ink);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.cma-emobility-intro-copy > p:not(.cma-eyebrow) {
  max-width: 40rem;
  margin: 1.2rem 0 0;
  color: var(--cma-steel);
}

.cma-emobility-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.9rem;
}

.cma-emobility-fact {
  padding: 1rem .95rem;
  border-top: 3px solid var(--cma-red);
  border-radius: .38rem;
  background: var(--cma-surface);
}

.cma-emobility-fact strong {
  display: block;
  color: var(--cma-ink);
  font-size: 1rem;
  line-height: 1.12;
}

.cma-emobility-fact span {
  display: block;
  margin-top: .3rem;
  color: var(--cma-steel);
  font-size: .77rem;
  line-height: 1.28;
}

/* Choice cards */

.cma-emobility-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cma-emobility-choice {
  position: relative;
  min-height: 25rem;
  overflow: hidden;
  color: var(--cma-white);
  border-radius: var(--cma-radius);
  background: #27292e;
  box-shadow: var(--cma-shadow);
}

.cma-emobility-choice::before {
  position: absolute;
  inset: 0;
  content: "";
  background-position: center;
  background-size: cover;
  transition: transform .45s ease;
}

.cma-emobility-choice:hover::before { transform: scale(1.05); }

.cma-emobility-choice--electric::before {
  background-image: url("../images/emobility-electric.jpg");
}

.cma-emobility-choice--hybrid::before {
  background-image: url("../images/emobility-hybrid.jpg");
}

.cma-emobility-choice::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(0deg, rgba(10,11,13,.94), rgba(10,11,13,.08) 74%),
    linear-gradient(90deg, rgba(10,11,13,.35), transparent 75%);
}

.cma-emobility-choice-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: inherit;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.cma-emobility-choice-label {
  color: #ff7a84;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cma-emobility-choice h3 {
  max-width: 27rem;
  margin: auto 0 0;
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  line-height: 1.06;
  letter-spacing: -.042em;
}

.cma-emobility-choice p {
  max-width: 30rem;
  margin: .85rem 0 0;
  color: rgba(255,255,255,.83);
}

.cma-emobility-choice a {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  margin-top: 1.15rem;
  color: var(--cma-white);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cma-emobility-choice a::after {
  content: "→";
  color: #ff7a84;
  font-size: 1.18rem;
  transition: transform .18s ease;
}

.cma-emobility-choice:hover a::after { transform: translateX(.25rem); }

/* Decision support */

.cma-emobility-reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(27,28,31,.08);
  border-radius: .8rem;
  background: var(--cma-white);
}

.cma-emobility-reason {
  min-height: 16rem;
  padding: 1.8rem;
  border-right: 1px solid var(--cma-line);
}

.cma-emobility-reason:last-child { border-right: 0; }

.cma-emobility-reason-number {
  display: block;
  color: #c9ccd0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.cma-emobility-reason h3 {
  margin: 2.55rem 0 0;
  color: var(--cma-ink);
  font-size: 1.33rem;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.cma-emobility-reason p {
  margin: .7rem 0 0;
  color: var(--cma-steel);
}

/* Contact band */

.cma-emobility-contact {
  overflow: hidden;
  color: var(--cma-white);
  border-radius: var(--cma-radius);
  background:
    linear-gradient(115deg, rgba(174,14,26,.98), rgba(104,5,13,.98)),
    var(--cma-red);
  box-shadow: var(--cma-shadow);
}

.cma-emobility-contact .cma-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .68fr);
  gap: 1.8rem 4rem;
  align-items: center;
  padding-block: clamp(2.9rem, 5vw, 4.5rem);
}

.cma-emobility-contact .cma-eyebrow { color: rgba(255,255,255,.74); }

.cma-emobility-contact h2 {
  max-width: 45rem;
  margin: 0;
  font-size: clamp(1.9rem, 3.9vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.cma-emobility-contact p:not(.cma-eyebrow) {
  max-width: 41rem;
  margin: .9rem 0 0;
  color: rgba(255,255,255,.84);
}

.cma-emobility-contact-links {
  display: grid;
  gap: .7rem;
}

.cma-emobility-contact-links a {
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  color: var(--cma-white);
  font-weight: 800;
}

.cma-emobility-contact-links a::before {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  content: "→";
  color: var(--cma-red);
  border-radius: 99px;
  background: var(--cma-white);
}

@media (max-width: 820px) {
  .cma-emobility-intro,
  .cma-emobility-contact .cma-wrap {
    grid-template-columns: 1fr;
  }

  .cma-emobility-image { min-height: 23rem; }

  .cma-emobility-reasons { grid-template-columns: 1fr; }

  .cma-emobility-reason {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--cma-line);
  }

  .cma-emobility-reason:last-child { border-bottom: 0; }

  .cma-emobility-reason h3 { margin-top: 1.5rem; }
}

@media (max-width: 610px) {
  .cma-emobility-hero { min-height: 33rem; }

  .cma-emobility-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cma-emobility-facts,
  .cma-emobility-choice-grid {
    grid-template-columns: 1fr;
  }

  .cma-emobility-choice { min-height: 22rem; }
}