/* ==========================================================================
   AES — "Unser Versprechen" (Variante 8c)
   Kurve frei im Bild links (animiert beim Reinscrollen), Versprechen rechts.
   versprechen.js setzt .is-playing auf .aes-promise__chart, sobald sichtbar,
   und zählt "Tag 0 → 90" hoch.
   ========================================================================== */

.aes-promise {
  --pr-cyan: var(--cyan, #62bdf0);
  --pr-cyan-strong: var(--cyan-strong, #01b0ef);
  --pr-ink: var(--ink, #f5f8fb);
  --pr-slate-150: #cbd7df;
  --pr-slate-300: #a9b8c4;
  --pr-slate-450: #8395a4;
  --pr-display: "Sora", sans-serif;
  --pr-body: "DM Sans", sans-serif;
  --pr-ease: cubic-bezier(.2, .7, .25, 1);

  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background:
    radial-gradient(ellipse 36% 60% at 26% 50%, rgba(1, 176, 239, .09), transparent 70%),
    linear-gradient(180deg, #08111d, #0c1724);
}
.aes-promise__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 72px;
  align-items: center;
}

/* ---------- Text rechts ---------- */
.aes-promise__eyebrow {
  margin: 0;
  font-family: var(--pr-display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pr-cyan);
}
.aes-promise__title {
  margin: 0;
  font-family: var(--pr-display);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.04;
  letter-spacing: -.045em;
  color: var(--pr-ink);
  text-wrap: balance;
}
.aes-promise__title em,
.aes-promise__lead em { font-style: normal; color: var(--pr-cyan); }
.aes-promise__lead {
  margin: 22px 0 0;
  font-family: var(--pr-body);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--pr-slate-150);
  text-wrap: pretty;
}
.aes-promise__cta { margin-top: 32px; }

.aes-promise__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px; }
.aes-promise__logos { display: flex; flex: 0 0 auto; margin: 0; padding: 0 0 0 12px; list-style: none; }
.aes-promise__logos li {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin-left: -12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #0a1522;
  background: #000;
  overflow: hidden;
}
.aes-promise__logos img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aes-promise__logos li.aes-promise__logo--light { background: #fff; }
.aes-promise__logo--beauty img { filter: grayscale(1) brightness(.6) contrast(8); }
.aes-promise__trust p { flex: 1 1 130px; min-width: 0; margin: 0; max-width: 260px; font-family: var(--pr-body); font-size: .95rem; line-height: 1.45; color: var(--pr-ink); }
.aes-promise__fine { margin: 28px 0 0; font-family: var(--pr-body); font-size: .84rem; line-height: 1.55; color: var(--pr-slate-450); text-wrap: pretty; }

/* ---------- Kurve links (frei im Bild, kein Kasten) ---------- */
.aes-promise__chart { position: relative; width: 100%; aspect-ratio: 700 / 460; }
.aes-promise__chart::before { /* Raster, läuft nach aussen aus */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    linear-gradient(rgba(98, 189, 240, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 189, 240, .1) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 60% 45%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 75% at 60% 45%, #000, transparent 80%);
}
.aes-promise__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aes-promise__axis { fill: none; stroke: rgba(245, 248, 251, .4); stroke-width: 1.2; }
.aes-promise__line {
  fill: none;
  stroke: var(--pr-cyan);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 8px rgba(98, 189, 240, .65));
}
.aes-promise__area { opacity: 0; }
.aes-promise__end { stroke: rgba(98, 189, 240, .5); stroke-width: 1.2; stroke-dasharray: 5 7; opacity: 0; }

.aes-promise__ylabel {
  position: absolute;
  left: 2.6%;
  top: 6%;
  bottom: 12.2%;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aes-promise__ylabel span {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--pr-display);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pr-slate-300);
}

/* Punkte: Position über Wrapper, Animation über Kind → kein Transform-Konflikt */
.aes-promise__node { position: absolute; width: 0; height: 0; }
.aes-promise__node i {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #0c1724;
  border: 2px solid var(--pr-cyan);
  opacity: 0;
}
.aes-promise__node--last i {
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(98, 189, 240, .22), 0 0 30px 8px rgba(98, 189, 240, .75);
}

.aes-promise__xlabel {
  position: absolute;
  top: 91.7%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pr-display);
  font-weight: 600;
  font-size: .78rem;
  color: var(--pr-slate-300);
  white-space: nowrap;
}
.aes-promise__xlabel b { font-weight: 700; color: var(--pr-cyan); }

.aes-promise__badge { position: absolute; left: 92.3%; top: 2%; }
.aes-promise__badge-inner {
  transform: translateX(-108%);
  width: max-content;
  text-align: right;
  white-space: nowrap;
  opacity: 0;
}
.aes-promise__day {
  font-family: var(--pr-display);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: .95;
  letter-spacing: -.06em;
  color: var(--pr-cyan);
  font-variant-numeric: tabular-nums;
}
.aes-promise__badge-label {
  margin-top: 8px;
  font-family: var(--pr-display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pr-ink);
}

/* ---------- Animation (startet mit .is-playing) ---------- */
@keyframes pr-draw { to { stroke-dashoffset: 0; } }
@keyframes pr-fade { to { opacity: 1; } }
@keyframes pr-pop  { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes pr-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .45; } }

.is-playing .aes-promise__line { animation: pr-draw 2.4s var(--pr-ease) .2s forwards; }
.is-playing .aes-promise__area { animation: pr-fade 1.4s ease 1s forwards; }
.is-playing .aes-promise__end  { animation: pr-fade .6s ease 2.3s forwards; }
.is-playing .aes-promise__badge-inner { animation: pr-fade .5s ease .5s forwards; }
.is-playing .aes-promise__node i { animation: pr-pop .45s var(--pr-ease) var(--d, 0s) forwards; }
.is-playing .aes-promise__node--last i { animation: pr-pop .45s var(--pr-ease) var(--d, 0s) forwards, pr-pulse 2.4s ease-in-out 3s infinite; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .aes-promise { padding: 72px 0 64px; }
  .aes-promise__grid { grid-template-columns: 1fr; gap: 28px; }
  .aes-promise__text { display: contents; } /* Reihenfolge: Titel → Kurve → Button → Personen */
  .aes-promise__title { order: 2; font-size: 2.4rem; line-height: 1; }
  .aes-promise__lead { order: 3; margin-top: -14px; font-size: 1.05rem; }
  .aes-promise__chart { order: 4; margin: 0 -6px; width: calc(100% + 12px); }
  .aes-promise__cta { order: 5; margin-top: 0; }
  .aes-promise__cta > * { width: 100%; justify-content: space-between; }
  .aes-promise__trust { order: 6; margin-top: 0; gap: 14px; }
  .aes-promise__fine { order: 7; margin-top: -6px; font-size: .8rem; }

  .aes-promise__chart::before { background-size: 32px 32px; }
  .aes-promise__line { stroke-width: 4; }
  .aes-promise__ylabel span { font-size: .52rem; }
  .aes-promise__xlabel { flex-direction: column; gap: 2px; font-size: .6rem; }
  .aes-promise__xlabel span { display: none; } /* nur Nummern auf Mobile */
  .aes-promise__badge { top: 0; }
  .aes-promise__day { font-size: 2rem; }
  .aes-promise__badge-label { margin-top: 4px; font-size: .56rem; }
  .aes-promise__node i { left: -5px; top: -5px; width: 10px; height: 10px; }
  .aes-promise__node--last i { left: -7px; top: -7px; width: 14px; height: 14px; }

  .aes-promise__trust { gap: 14px; }
  .aes-promise__logos { padding-left: 10px; }
  .aes-promise__logos li { width: 44px; height: 44px; margin-left: -10px; }
  .aes-promise__trust p { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aes-promise__line { stroke-dashoffset: 0; }
  .aes-promise__area, .aes-promise__end, .aes-promise__badge-inner, .aes-promise__node i { opacity: 1; }
  .is-playing .aes-promise__line, .is-playing .aes-promise__area, .is-playing .aes-promise__end,
  .is-playing .aes-promise__badge-inner, .is-playing .aes-promise__node i { animation: none; }
}

/* Integration in die bestehende AES-Website. Ohne JavaScript bleibt die Kurve sichtbar. */
.aes-promise { scroll-margin-top: 96px; }
.aes-promise__anchor { position: absolute; top: 0; scroll-margin-top: 96px; }
.aes-promise__line { stroke-dashoffset: 0; }
.aes-promise__area, .aes-promise__end, .aes-promise__badge-inner, .aes-promise__node i { opacity: 1; }
.aes-promise__chart.is-ready .aes-promise__line { stroke-dashoffset: 1; }
.aes-promise__chart.is-ready .aes-promise__area,
.aes-promise__chart.is-ready .aes-promise__end,
.aes-promise__chart.is-ready .aes-promise__badge-inner,
.aes-promise__chart.is-ready .aes-promise__node i { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .aes-promise__chart.is-ready .aes-promise__line { stroke-dashoffset: 0; }
  .aes-promise__chart.is-ready .aes-promise__area, .aes-promise__chart.is-ready .aes-promise__end,
  .aes-promise__chart.is-ready .aes-promise__badge-inner, .aes-promise__chart.is-ready .aes-promise__node i { opacity: 1; }
}