/*
 * Autor: Autark Innovations
 * Entwickler: Pierre Hasberg
 * Website: https://autarkinnovations.com
 * App: https://app.autarkinnovations.com
 * E-Mail: info@autarkinnovations.com
 * Erstellt: 11.10.2026
 * Zuletzt bearbeitet: 11.10.2026 (Mitschnitt .ae-clip)
 * Projekt: autark-website
 * Beschreibung: Abschnitt „App-Einblick“ – waagerecht wischbare Reihe echter App-Bildschirme
 *               (Material 2.1.16) auf Solar-, Klima-, Wärmepumpen-, Lisa- und Wartungsseite.
 */

/* Wischreihe: feste Spaltenbreite, Einrasten je Bild, auf dem Handy mit Finger scrollbar */
.ae-shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,236px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ae-shots:focus-visible{outline:2px solid var(--w-accent,#0EA5E9);outline-offset:4px;border-radius:12px}
.ae-shots figure{margin:0;scroll-snap-align:start}
.ae-shots img{display:block;width:100%;height:auto;aspect-ratio:1170/2532;border-radius:24px;border:1px solid var(--w-border);background:#F6F8FB;box-shadow:var(--w-shadow-sm)}
.ae-shots figcaption{font-size:13.5px;line-height:1.45;color:var(--w-t2);margin-top:10px;text-align:center}
.ae-shots figcaption b{display:block;color:var(--w-text);font-size:14.5px;margin-bottom:2px}

/* Hinweis zu Beispieldaten und Wisch-Hinweis */
.ae-hint{font-size:13px;line-height:1.5;color:var(--w-t2);text-align:center;max-width:72ch;margin:8px auto 0}
.ae-wisch{font-size:12.5px;color:var(--w-t2);text-align:center;margin:0 0 4px}
@media (min-width:1100px){.ae-wisch{display:none}}

/* Handlungsknöpfe unter der Reihe */
.ae-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* Echter Mitschnitt aus der App (Video links, Text rechts; mobil untereinander) */
.ae-clip{display:grid;grid-template-columns:minmax(0,340px) minmax(0,440px);gap:36px;align-items:center;justify-content:center;margin:6px auto 38px}
.ae-clip video{display:block;width:100%;height:auto;aspect-ratio:720/878;border-radius:24px;border:1px solid var(--w-border);background:#F6F8FB;box-shadow:var(--w-shadow-sm);cursor:pointer}
.ae-clip-marke{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#047857;background:rgba(16,185,129,.12);border-radius:999px;padding:5px 12px;margin-bottom:12px}
.ae-clip-marke::before{content:"";width:7px;height:7px;border-radius:50%;background:#10B981}
.ae-clip-text h3{font-size:22px;line-height:1.25;margin:0 0 10px;color:var(--w-text)}
.ae-clip-text p{font-size:15px;line-height:1.6;color:var(--w-t2);margin:0 0 10px}
.ae-clip-text .ae-clip-quelle{font-size:12.5px;margin:0}
@media (max-width:760px){.ae-clip{grid-template-columns:1fr;gap:18px}.ae-clip video{max-width:320px;margin:0 auto}.ae-clip-text{text-align:center}}