/* ==========================================================================
   AES — "Direkt aus der Zusammenarbeit" · WhatsApp-Band mit iPhone-Rahmen
   - eine Reihe, läuft endlos (Desktop 80s, Mobile 40s)
   - Hover (Desktop) bzw. Finger drauf (Mobile) hält an
   - iPhone-Höhe passt sich automatisch an den Screenshot an (img height:auto)
   - Klick öffnet den Chat gross (<dialog>)
   ========================================================================== */

.aes-wa {
  --wa-cyan: var(--cyan, #62bdf0);
  --wa-ink: var(--ink, #f5f8fb);
  --wa-muted: var(--muted, #96a7b7);
  --wa-line: var(--line, rgba(255, 255, 255, .105));
  --wa-display: "Sora", sans-serif;
  --wa-body: "DM Sans", sans-serif;
  --wa-ease: cubic-bezier(.2, .7, .25, 1);
  --wa-w: 280px;          /* iPhone-Breite */
  --wa-dur: 80s;          /* ein kompletter Durchlauf */
  --wa-gap: 44px;
  --wa-tilt: 1;           /* Stärke der Kippung */

  position: relative;
  overflow: hidden;
  padding: 112px 0 88px;
  background: linear-gradient(180deg, #0c1724, #08111d);
}

/* ---------- Kopf ---------- */
.aes-wa__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 72px;
  align-items: end;
}
.aes-wa__eyebrow {
  margin: 0;
  font-family: var(--wa-display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wa-cyan);
}
.aes-wa__title {
  margin: 20px 0 0;
  font-family: var(--wa-display);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--wa-ink);
}
.aes-wa__title em { display: block; font-style: normal; color: var(--wa-cyan); }
.aes-wa__lead {
  margin: 0;
  max-width: 380px;
  font-family: var(--wa-body);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--wa-muted);
}
.aes-wa__scope { display: block; margin-top: 10px; font-size: .82rem; }

/* ---------- Band ---------- */
.aes-wa__marquee {
  margin-top: 40px;
  padding: 30px 0 60px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.aes-wa__track {
  display: flex;
  align-items: center;
  gap: var(--wa-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: aes-wa-scroll var(--wa-dur) linear infinite;
}
@keyframes aes-wa-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--wa-gap) / 2)); }
}
/* Anhalten: Hover (Desktop), Finger drauf / Dialog offen (JS setzt .is-held) */
@media (hover: hover) {
  .aes-wa__marquee:not(.is-resuming):has(.aes-wa__phone:hover) .aes-wa__track { animation-play-state: paused; }
}
.aes-wa__marquee.is-held .aes-wa__track { animation-play-state: paused; }
.aes-wa__marquee:not(.is-resuming):has(.aes-wa__open:focus-visible) .aes-wa__track { animation-play-state: paused; }

/* ---------- Item ---------- */
.aes-wa__item { flex: none; }
.aes-wa__open {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  transform: translateY(var(--y, 0px)) rotate(calc(var(--r, 0deg) * var(--wa-tilt)));
  transition: transform .45s var(--wa-ease);
}
/* Rhythmus: Kippung + Höhenversatz wiederholt sich alle 6 */
.aes-wa__item:nth-child(6n+1) { --r: -2.2deg; --y: 0px; }
.aes-wa__item:nth-child(6n+2) { --r:  1.6deg; --y: 28px; }
.aes-wa__item:nth-child(6n+3) { --r: -1.2deg; --y: 10px; }
.aes-wa__item:nth-child(6n+4) { --r:  2deg;   --y: 34px; }
.aes-wa__item:nth-child(6n+5) { --r: -1.6deg; --y: 6px; }
.aes-wa__item:nth-child(6n+6) { --r:  1.2deg; --y: 20px; }
@media (hover: hover) {
  .aes-wa__open:has(.aes-wa__phone:hover) { transform: translateY(calc(var(--y, 0px) - 10px)) rotate(0deg) scale(1.03); }
}
.aes-wa__open:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 44px; }

/* ---------- iPhone-Rahmen (Höhe = Bildhöhe) ---------- */
.aes-wa__phone {
  display: block;
  position: relative;
  width: var(--wa-w);
  box-sizing: border-box;
  padding: 10px;
  border-radius: calc(var(--wa-w) * .14);
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(150deg, #22364a 0%, #0d1824 38%, #060b11 100%);
  box-shadow:
    inset 0 0 0 2px #03070b,
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 28px 60px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(98, 189, 240, .06);
}
/* Seitentasten */
.aes-wa__phone::before,
.aes-wa__phone::after {
  content: "";
  position: absolute;
  width: 3px;
  background: #1b2a38;
}
.aes-wa__phone::before { left: -3px; top: 84px; height: 30px; border-radius: 3px 0 0 3px; box-shadow: 0 40px 0 0 #1b2a38; }
.aes-wa__phone::after  { right: -3px; top: 110px; height: 62px; border-radius: 0 3px 3px 0; }

.aes-wa__screen {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 38px 0 20px;
  border-radius: calc(var(--wa-w) * .14 - 9px);
  background: #0b141a; /* WhatsApp-Dunkel, füllt Statusleiste + Home-Bereich */
}
/* Dynamic Island */
.aes-wa__screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  width: 32%;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #000;
}
/* Home-Balken */
.aes-wa__screen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 34%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: rgba(255, 255, 255, .32);
}
.aes-wa__screen img {
  display: block;
  width: 100%;
  height: auto; /* ← passt die iPhone-Höhe automatisch an den Ausschnitt an */
}

/* ---------- Beschriftung ---------- */
.aes-wa__cap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid var(--wa-line);
  background: rgba(9, 21, 33, .88);
  font-family: var(--wa-display);
  font-weight: 600;
  font-size: .88rem;
  color: var(--wa-ink);
  max-width: 340px;
  white-space: normal;
  text-align: left;
}
.aes-wa__cap b { font-weight: 600; color: var(--wa-cyan); }

/* ---------- Grossansicht ---------- */
.aes-wa__dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wa-ink);
}
.aes-wa__dialog::backdrop { background: rgba(5, 11, 18, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.aes-wa__dialog-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
}
.aes-wa__dialog figure { display: flex; flex-direction: column; align-items: center; margin: 0; }
.aes-wa__dialog .aes-wa__phone {
  --wa-w: min(420px, 82vw);
  box-shadow: inset 0 0 0 2px #03070b, inset 0 1px 0 rgba(255, 255, 255, .12), 0 50px 120px rgba(0, 0, 0, .6);
}
.aes-wa__dialog .aes-wa__screen { max-height: calc(100dvh - 180px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #345264 #0b141a; }
.aes-wa__dialog .aes-wa__cap { max-width: min(420px, calc(100vw - 32px)); }
body:has(.aes-wa__dialog[open]) { overflow: hidden; }
.aes-wa__nav,
.aes-wa__close {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(98, 189, 240, .35);
  background: rgba(9, 21, 33, .9);
  color: var(--wa-ink);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .25s var(--wa-ease), color .25s var(--wa-ease);
}
.aes-wa__nav:hover, .aes-wa__close:hover { border-color: var(--wa-cyan); color: var(--wa-cyan); }
.aes-wa__close { position: absolute; top: 24px; right: 24px; font-size: 1.2rem; }

/* ---------- Tablet ---------- */
@media (max-width: 1040px) {
  .aes-wa__head { gap: 40px; }
  .aes-wa__title { font-size: 2.6rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .aes-wa { --wa-w: 220px; --wa-dur: 40s; --wa-gap: 28px; --wa-tilt: .7; padding: 72px 0 56px; }
  .aes-wa__head { grid-template-columns: 1fr; gap: 14px; }
  .aes-wa__eyebrow { font-size: .66rem; }
  .aes-wa__title { margin-top: 16px; font-size: 2.1rem; line-height: 1.04; }
  .aes-wa__lead { font-size: 1rem; }
  .aes-wa__marquee { margin-top: 20px; padding: 24px 0 40px; -webkit-mask-image: none; mask-image: none; }
  .aes-wa__item:nth-child(n) { --y: calc(var(--y-m, 0px)); }
  .aes-wa__item:nth-child(6n+2) { --y-m: 14px; }
  .aes-wa__item:nth-child(6n+3) { --y-m: 5px; }
  .aes-wa__item:nth-child(6n+4) { --y-m: 17px; }
  .aes-wa__item:nth-child(6n+5) { --y-m: 3px; }
  .aes-wa__item:nth-child(6n+6) { --y-m: 10px; }
  .aes-wa__cap { margin-top: 16px; padding: 8px 14px; font-size: .82rem; }
  .aes-wa__cap { max-width: 280px; }
  .aes-wa__dialog-inner { gap: 0; padding: 72px 16px 100px; }
  .aes-wa__dialog .aes-wa__phone { --wa-w: min(420px, calc(100vw - 32px)); }
  .aes-wa__dialog .aes-wa__screen { max-height: calc(100dvh - 280px); }
  .aes-wa__nav { position: absolute; bottom: 24px; width: 44px; height: 44px; }
  .aes-wa__nav[data-wa-prev] { left: calc(50% - 58px); }
  .aes-wa__nav[data-wa-next] { right: calc(50% - 58px); }
}

/* ---------- Reduzierte Bewegung: Band steht, wird horizontal scrollbar ---------- */
@media (prefers-reduced-motion: reduce) {
  .aes-wa__track { animation: none; }
  .aes-wa__marquee { overflow-x: auto; }
  .aes-wa__track [aria-hidden="true"] { display: none; }
  .aes-wa__open { transition: none; }
}