/* AIOS-Schau (Ralph 06.11.2026): echte AIOS-Bildschirmfotos auf den Unterseiten.
   Am Desktop klebt der Abschnitt, beim Scrollen wechselt das Bild Schritt für Schritt
   (Startseite → Menü → Chat). Am Handy und ohne Bewegung: einfache Liste mit Bildern.
   Inhalt kommt aus /assets/js/aios-schau.js, eingebunden per <div data-aios-schau></div>. */
.aios-schau { --as-text: var(--marke-text, #14141d); --as-text-2: var(--marke-text-2, #4a4a5a); --as-text-3: var(--marke-text-3, #6b6b7b);
  --as-grund: var(--marke-grund, #f5f5fa); --as-flaeche: var(--marke-flaeche, #ffffff); --as-linie: var(--marke-linie, rgba(15, 15, 30, .10));
  --as-akzent: var(--marke-akzent, #5b54e8); --as-schatten: var(--marke-schatten, 0 12px 30px rgba(15, 23, 42, .18));
  --as-schatten-leise: var(--marke-schatten-leise, 0 1px 3px rgba(15, 23, 42, .08)); --as-schrift: var(--marke-schrift, 'Inter', system-ui, sans-serif);
  font-family: var(--as-schrift); color: var(--as-text); background: var(--as-grund);
  border-top: 1px solid var(--as-linie); border-bottom: 1px solid var(--as-linie); text-align: left; }
.aios-schau *, .aios-schau *::before, .aios-schau *::after { box-sizing: border-box; }
.aios-schau-buehne { max-width: 1240px; margin: 0 auto; padding: 64px 24px; display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr; gap: 48px; align-items: center; }
.aios-schau .aios-schau-kopf h2 { border: 0; padding: 0; text-align: left; margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; color: var(--as-text); }
.aios-schau .aios-schau-kopf p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--as-text-2); }
.aios-schau-schritte { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aios-schau .aios-schau-schritt { margin: 0; list-style: none; background: none; border: 0; position: relative; padding: 12px 0 12px 20px; opacity: .4; transition: opacity .35s ease; cursor: pointer; }
.aios-schau .aios-schau-schritt::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: var(--marke-r-pill, 999px); background: var(--as-linie); transition: background .35s ease; }
.aios-schau .aios-schau-schritt.ist-aktiv { opacity: 1; }
.aios-schau .aios-schau-schritt.ist-aktiv::before { background: var(--as-akzent); }
.aios-schau .aios-schau-schritt h3 { padding: 0; border: 0; margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--as-text); }
.aios-schau .aios-schau-schritt p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--as-text-2); }
.aios-schau-rahmen { position: relative; aspect-ratio: 16 / 10; border-radius: var(--marke-r-l, 12px); overflow: hidden;
  background: var(--as-flaeche); border: 1px solid var(--as-linie); box-shadow: var(--as-schatten); }
.aios-schau-rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block;
  opacity: 0; transform: scale(1.035) translateY(8px); transition: opacity .55s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.aios-schau-rahmen img.ist-aktiv { opacity: 1; transform: none; }
.aios-schau .aios-schau-hinweis { margin: 12px 0 0; font-size: 12px; color: var(--as-text-3); }
.aios-schau-mobilbild { display: none; }

/* Klebende Fassung: nur Desktop mit Bewegung */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .aios-schau-spur { position: relative; height: 300vh; }
  .aios-schau-spur > .aios-schau-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: 88px; padding-bottom: 32px; }
  .aios-schau-rahmen { max-height: calc(100svh - 140px); width: 100%; justify-self: center; }
}
/* Handy / ohne Bewegung: Liste, Bild unter jedem Schritt */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .aios-schau-buehne { grid-template-columns: 1fr; gap: 0; padding: 48px 16px; }
  .aios-schau-rahmen { display: none; }
  .aios-schau .aios-schau-schritt { margin: 0; list-style: none; background: none; border: 0; opacity: 1; cursor: default; padding-left: 0; }
  .aios-schau .aios-schau-schritt::before { display: none; }
  .aios-schau-mobilbild { display: block; margin-top: 12px; width: 100%; border-radius: var(--marke-r-l, 12px); border: 1px solid var(--as-linie); box-shadow: var(--as-schatten-leise); }
}