/* ===== Häufig gefragt (10c) – AES Consulting ===== */
.aes-faq {
  --fq-ink: var(--ink);
  --fq-slate-150: #c9d4de;
  --fq-slate-300: #a9b8c4;
  --fq-slate-450: #7f91a3;
  --fq-cyan: var(--cyan);
  --fq-cyan-strong: var(--cyan-strong);
  --fq-on-cyan: #04121d;
  --fq-line: var(--line);
  --fq-cyan-a25: rgba(98, 189, 240, .25);
  --fq-display: "Sora", system-ui, sans-serif;
  --fq-body: "DM Sans", system-ui, sans-serif;
  --fq-ease: cubic-bezier(.2, .7, .25, 1);

  position: relative;
  overflow: hidden;
  padding: 112px 0;
  font-family: var(--fq-body);
  color: var(--fq-ink);
  background:
    radial-gradient(ellipse 38% 55% at 76% 55%, rgba(1, 176, 239, .1), transparent 70%),
    linear-gradient(180deg, #08111d, #0c1724);
}
.aes-faq *, .aes-faq *::before, .aes-faq *::after { box-sizing: border-box; }
.aes-faq p, .aes-faq h2, .aes-faq ol { margin: 0; }
.aes-faq__shell {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.aes-faq__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.aes-faq__eyebrow {
  font-family: var(--fq-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fq-cyan);
}
.aes-faq__title {
  margin-top: 18px !important;
  font-family: var(--fq-display); font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.05em;
  text-wrap: balance;
}
.aes-faq__title em { font-style: normal; color: var(--fq-cyan); }

/* ---------- Fragenliste ---------- */
.aes-faq__list { list-style: none; padding: 0; margin-top: 36px !important; display: flex; flex-direction: column; gap: 6px; }
.aes-faq__list button {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; gap: 12px;
  width: 100%; padding: 16px 22px;
  border: 1px solid transparent; border-radius: 18px;
  background: transparent; color: var(--fq-slate-300);
  font: inherit; text-align: left; cursor: pointer;
  transition: background .25s var(--fq-ease), border-color .25s var(--fq-ease), color .25s var(--fq-ease);
}
.aes-faq__list button:hover { color: var(--fq-ink); }
.aes-faq__list button.is-on { border-color: transparent; background: rgba(1, 176, 239, .1); color: var(--fq-ink); }
.aes-faq__n { font-family: var(--fq-display); font-weight: 700; font-size: .85rem; color: var(--fq-cyan); }
.aes-faq__q { font-family: var(--fq-display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; letter-spacing: -.02em; }
.aes-faq__arrow::before { content: "→"; font-size: 1.1rem; color: var(--fq-cyan); opacity: 0; transition: opacity .25s var(--fq-ease); }
.aes-faq__list button.is-on .aes-faq__arrow::before { opacity: 1; }
.aes-faq button:focus-visible, .aes-faq input:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ---------- Chat ---------- */
.aes-faq__chat {
  position: relative; padding: 28px;
  border: 1px solid transparent; border-radius: 28px;
  background: linear-gradient(145deg, #15354a, #0c1a28 70%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .22), 18px 18px 0 #09131f;
}
.aes-faq__head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--fq-line); }
.aes-faq__avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  overflow: hidden; background: #13263a; color: transparent; font-size: 0;
}
.aes-faq__avatar.is-small { width: 32px; height: 32px; }
.aes-faq__name { font-family: var(--fq-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.aes-faq__status { display: flex; align-items: center; gap: 6px; margin-top: 2px !important; font-size: .85rem; color: var(--fq-slate-450); }
.aes-faq__status span { width: 7px; height: 7px; border-radius: 50%; background: var(--fq-cyan-strong); }

.aes-faq__thread { display: flex; flex-direction: column; gap: 14px; min-height: 250px; padding: 26px 0 24px; }
.aes-faq__bubble { font-size: 1.05rem; line-height: 1.6; }
.aes-faq__bubble.is-you {
  align-self: flex-end; max-width: 78%; padding: 14px 18px;
  border-radius: 20px 20px 6px 20px;
  background: var(--fq-cyan-strong); color: var(--fq-on-cyan);
  font-family: var(--fq-display); font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.aes-faq__reply { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; }
.aes-faq__bubble.is-me {
  padding: 16px 20px; border-radius: 20px 20px 20px 6px;
  border: 1px solid var(--fq-line); background: rgba(5, 11, 18, .5);
}
.aes-faq__thread.is-swap .aes-faq__bubble { animation: aes-faq-in .45s var(--fq-ease) both; }
.aes-faq__thread.is-swap .aes-faq__reply .aes-faq__bubble { animation-delay: .12s; }
@keyframes aes-faq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.aes-faq__ask {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px;
  border: 1px solid var(--fq-line); border-radius: 999px;
  background: rgba(5, 11, 18, .4);
  transition: border-color .25s var(--fq-ease);
}
.aes-faq__ask:focus-within { border-color: var(--fq-cyan); }
.aes-faq__ask input {
  flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: none; background: none;
  color: var(--fq-ink); font-family: var(--fq-body); font-size: 1rem;
}
.aes-faq__ask input::placeholder { color: var(--fq-slate-450); }
.aes-faq__ask input:focus-visible { outline: none; }
.aes-faq__send {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 8px 0 20px;
  border: 0; border-radius: 999px;
  background: var(--fq-cyan-strong); color: var(--fq-on-cyan);
  font-family: var(--fq-display); font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background .25s var(--fq-ease);
}
.aes-faq__send:hover { background: #fff; }
.aes-faq__send-chip {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(3, 16, 26, .12); transition: transform .25s var(--fq-ease);
}
.aes-faq__send:hover .aes-faq__send-chip { transform: rotate(45deg); }
.aes-faq__hint { margin-top: 10px !important; padding-left: 22px; font-size: .82rem; color: var(--fq-slate-450); }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .aes-faq { padding: 96px 0; }
  .aes-faq__shell { grid-template-columns: 1fr; gap: 40px; }
  .aes-faq__chat { max-width: 640px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .aes-faq { padding: 72px 0 64px; }
  .aes-faq__eyebrow { font-size: .7rem; }
  .aes-faq__title { margin-top: 14px !important; font-size: 2.2rem; line-height: 1.04; }
  .aes-faq__shell { gap: 20px; }
  .aes-faq__list { margin-top: 24px !important; gap: 4px; }
  .aes-faq__list button { grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 8px; min-height: 48px; padding: 10px 14px; border-radius: 16px; }
  .aes-faq__n { font-size: .76rem; }
  .aes-faq__q { font-size: .95rem; letter-spacing: -.015em; }
  .aes-faq__arrow::before { content: "↓"; font-size: .95rem; }

  .aes-faq__chat { padding: 18px 16px; border-radius: 22px; box-shadow: 0 28px 80px rgba(0, 0, 0, .22), 10px 10px 0 #09131f; }
  .aes-faq__head { display: none; }
  .aes-faq__thread { min-height: 0; gap: 12px; padding: 0; }
  .aes-faq__bubble.is-you { max-width: 85%; padding: 12px 15px; border-radius: 18px 18px 6px 18px; font-size: .92rem; }
  .aes-faq__reply { gap: 8px; max-width: none; }
  .aes-faq__avatar.is-small { width: 28px; height: 28px; }
  .aes-faq__bubble.is-me { padding: 13px 15px; border-radius: 18px 18px 18px 6px; font-size: .95rem; line-height: 1.55; }
  .aes-faq__ask { margin-top: 18px; padding: 4px 4px 4px 16px; gap: 8px; }
  .aes-faq__ask input { padding: 12px 0; font-size: 16px; } /* 16px verhindert iOS-Zoom */
  .aes-faq__send { width: 46px; height: 46px; min-height: 0; padding: 0; justify-content: center; }
  .aes-faq__send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .aes-faq__send-chip { width: auto; height: auto; background: none; font-size: 1.1rem; font-weight: 700; }
  .aes-faq__hint { margin-top: 8px !important; padding-left: 16px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aes-faq *, .aes-faq *::before, .aes-faq *::after { transition: none !important; animation: none !important; }
}

/* Integration und lange Fragen auf schmalen Geräten. */
.aes-faq { scroll-margin-top: 112px; }
.aes-faq__chat { min-width: 0; }
.aes-faq__bubble { overflow-wrap: anywhere; }
.aes-faq__reply .aes-faq__bubble { min-width: 0; }
.aes-faq__fallback { margin-top: 24px; line-height: 1.6; }
.aes-faq__fallback dt { margin-top: 20px; font-weight: 700; }
.aes-faq__fallback dd { margin: 8px 0 0; color: var(--fq-slate-150); }
@media (min-width: 1081px) and (max-width: 1200px) {
  .aes-faq__send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .aes-faq__send { width: 48px; padding: 0; justify-content: center; }
}

/* Originalfoto im runden Avatar auf das Gesicht ausrichten. */
.aes-faq__avatar { display: block; }
.aes-faq__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 50%;
  transform: scale(1.35);
  transform-origin: 50% 35%;
}