/* Erklärfilme (Freunde, Familie): Szenen in einem Handy, nur HTML, CSS und film.js. Keine Videodatei, nichts von Dritten.
   Eingebunden in index.html; film.html zeigt einen Film groß im Hochformat zum Mitschneiden (z. B. als Reel). */
.film { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.f-phone { width: 270px; border-radius: 36px; padding: 10px; background: #15201b; box-shadow: 0 18px 40px rgba(21, 32, 27, 0.22); flex: none; }
.f-screen { position: relative; height: 541px; border-radius: 28px; background: #fbfbf7; color: #15201b; overflow: hidden;
  font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Schmale Handys: das Film-Handy etwas kleiner, damit nichts seitlich herausragt */
@media (max-width: 340px) { .f-phone { zoom: 0.88; } }
@media (max-width: 300px) { .f-phone { zoom: 0.76; } }
.f-scene { position: absolute; inset: 0; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateX(26px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
.f-scene.on { opacity: 1; transform: none; }
.f-scene.off { transform: translateX(-26px); }
.f-in { opacity: 0; }
.f-scene.on .f-in { animation: f-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards; animation-delay: var(--d, 0s); }
@keyframes f-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }

.f-top { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 15px; }
.f-top img { width: 22px; height: 22px; border-radius: 6px; }
.f-top small { margin-left: auto; font-size: 11px; color: #5b665f; font-weight: 700; }
.f-h { font-size: 18px; font-weight: 900; margin: 2px 0 2px; }
.f-small { font-size: 11px; color: #5b665f; font-weight: 700; }
.f-note { font-size: 12px; color: #2f7a62; font-weight: 800; text-align: center; margin-top: auto; }

/* Szenen aus echten App-Screenshots (390 × 844, aufgenommen mit Demo-Daten). Ein zweites Bild (.next) blendet
   nach --d über, der goldene Punkt (.f-tap) zeigt, wo getippt wird (--x/--y in Prozent des Bildschirms). */
.f-scene.shot { padding: 0; background: #f6f6f2; }
.f-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.f-shot.next { opacity: 0; }
.f-scene.on .f-shot.next { animation: f-fade 0.45s ease forwards; animation-delay: var(--d, 2s); }
@keyframes f-fade { to { opacity: 1; } }
.f-tap { position: absolute; left: var(--x); top: var(--y); width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  background: rgba(255, 200, 46, 0.6); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); opacity: 0; z-index: 3; pointer-events: none; }
.f-scene.on .f-tap { animation: f-tap 1s ease forwards; animation-delay: var(--d, 1.6s); }
@keyframes f-tap { 0% { opacity: 0; transform: scale(1.7); } 35% { opacity: 1; transform: scale(1); } 55% { transform: scale(0.8); } 100% { opacity: 0; transform: scale(1); } }

/* Gruppenchat: weiße Blasen auf getöntem Grund, damit die Szene sofort als Chat erkennbar ist und nicht leer wirkt */
.f-scene.chat { background: #e6eee8; }
.f-chathead { display: flex; align-items: baseline; gap: 8px; font-weight: 900; font-size: 15px; padding-bottom: 6px; border-bottom: 1px solid #e3e3dc; }
.f-scene.chat .f-chathead { margin: -16px -14px 4px; padding: 16px 14px 8px; background: #fbfbf7; border-bottom-color: #d5ded8; }
.f-chathead small { font-size: 11px; color: #5b665f; }
.f-msg { align-self: flex-start; max-width: 84%; background: #fff; border-radius: 14px 14px 14px 4px; padding: 6px 10px; font-size: 13px;
  box-shadow: 0 1px 2px rgba(21, 32, 27, 0.14); }
.f-msg b { display: block; font-size: 10px; color: #2f7a62; }
.f-typing { align-self: flex-start; background: #fff; border-radius: 14px; padding: 9px 12px; display: flex; gap: 4px; box-shadow: 0 1px 2px rgba(21, 32, 27, 0.14); }
.f-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8a958f; animation: f-blink 1s infinite; }
.f-typing i:nth-child(2) { animation-delay: 0.2s; } .f-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes f-blink { 50% { opacity: 0.25; } }

/* Karten, Mitglieder, Termine */
.f-card { background: #fff; border: 1px solid #e3e3dc; border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); display: flex; align-items: center; gap: 8px; }
.f-pill { margin-left: auto; background: #ffc82e; border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 900; }
.f-member { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.f-face { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 900; font-size: 13px; color: #15201b;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); position: relative; flex: none; }
.f-face.ok::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; background: #2e9e6b; color: #fff; font-size: 9px; display: grid; place-items: center; }
.f-faces { display: flex; gap: 6px; justify-content: center; }
.f-date { background: #fff; border: 1px solid #e3e3dc; border-radius: 14px; padding: 8px 10px; }
.f-date b { display: block; font-size: 15px; }
.f-votes { display: flex; gap: 4px; margin-top: 4px; align-items: center; }
.f-votes i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; }
.f-votes .y { background: #2e9e6b; } .f-votes .m { background: #e0a100; } .f-votes .n { background: #d64545; }
.f-star { margin-left: auto; font-size: 11px; font-weight: 900; background: #ffc82e; border-radius: 99px; padding: 2px 8px; }

/* Ideen-Kacheln */
.f-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-tile { border-radius: 16px; background: linear-gradient(135deg, #3f9b7d, #2f7a62); color: #fff; padding: 8px 6px; text-align: center; font-size: 12px; font-weight: 800; }
.f-tile .ic { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 4px; border-radius: 50%; background: #ffc82e; font-size: 26px; overflow: hidden; }
.f-tile .ic img { width: 100%; height: 100%; object-fit: cover; }
.f-tile small { display: block; font-size: 10px; opacity: 0.8; font-weight: 700; }
.f-tile.sel { outline: 3px solid #ffc82e; }

/* Wischen */
.f-bar { height: 4px; border-radius: 4px; background: #e3e3dc; overflow: hidden; }
.f-bar i { display: block; height: 100%; width: 25%; background: #ffc82e; }
.f-vcard { position: relative; flex: 1; border-radius: 22px; background: #fff; border: 1px solid #e3e3dc; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); overflow: hidden; display: flex; flex-direction: column; }
.f-vcard .pic { flex: 5; background: linear-gradient(135deg, #d8efe5, #ffe08a); display: grid; place-items: center; font-size: 80px; overflow: hidden; }
.f-vcard .pic img { width: 100%; height: 100%; object-fit: cover; }
.f-vcard .txt { padding: 8px 12px 10px; }
.f-vcard .txt b { font-size: 19px; display: block; }
.f-scene.on .f-swipe { animation: f-swipe 0.7s ease-in forwards; animation-delay: var(--d, 2.4s); }
@keyframes f-swipe { to { transform: translateX(150%) rotate(18deg); opacity: 0; } }
.f-stamp { position: absolute; top: 18px; left: 16px; border: 3px solid #2e9e6b; color: #2e9e6b; font-weight: 900; padding: 1px 10px; border-radius: 8px; transform: rotate(-14deg); font-size: 22px; background: rgba(255, 255, 255, 0.8); z-index: 2; }
.f-buttons { display: flex; justify-content: center; gap: 26px; }
.f-rb { width: 50px; height: 50px; border-radius: 50%; border: 3px solid; display: grid; place-items: center; font-size: 22px; font-weight: 900; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.f-rb.no { border-color: #d64545; color: #d64545; } .f-rb.yes { border-color: #2e9e6b; color: #2e9e6b; }
.f-scene.on .f-press { animation: f-press 0.4s ease forwards; animation-delay: var(--d, 2.2s); }
@keyframes f-press { 50% { transform: scale(0.85); background: #2e9e6b; color: #fff; } 100% { transform: none; } }

/* Kinder rufen durcheinander */
.f-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; margin-top: 8px; }
.f-kid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.f-kid .f-face { width: 48px; height: 48px; font-size: 20px; }
.f-say { background: #fff; border: 2px solid #15201b; border-radius: 14px; padding: 4px 10px; font-weight: 900; font-size: 14px; }
.f-scene.on .f-shake { animation: f-pop 0.5s forwards, f-shake 0.5s 3 ease-in-out; animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.6s); }
@keyframes f-shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* Wer ist dran: Hervorhebung wandert und bleibt stehen */
.f-pick .f-face { width: 54px; height: 54px; font-size: 22px; }
.f-scene.on .f-pick .f-face { animation: f-glow 0.5s ease 2 alternate; animation-delay: var(--d, 0s); }
.f-scene.on .f-pick .f-face.win { animation: f-glow 0.5s ease 2 alternate, f-chosen 0.4s ease forwards; animation-delay: var(--d, 0s), 2.4s; }
@keyframes f-glow { to { box-shadow: 0 0 0 5px #ffc82e; transform: scale(1.08); } }
@keyframes f-chosen { to { box-shadow: 0 0 0 6px #ffc82e, 0 0 26px rgba(255, 200, 46, 0.9); transform: scale(1.15); } }
.f-banner { background: #d8efe5; border-radius: 16px; padding: 10px; text-align: center; }
.f-banner b { font-size: 18px; display: block; }

/* Flasche */
.f-spin { position: relative; height: 230px; display: grid; place-items: center; }
.f-opt { position: absolute; top: 50%; transform: translateY(-50%); width: 92px; text-align: center; font-size: 12px; font-weight: 900; }
.f-opt .ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 4px; background: #ffc82e; display: grid; place-items: center; font-size: 32px; overflow: hidden; }
.f-opt .ic img { width: 100%; height: 100%; object-fit: cover; }
.f-opt.l { left: 0; } .f-opt.r { right: 0; }
.f-bottle { width: 22px; height: 86px; border-radius: 9px 9px 10px 10px; background: linear-gradient(90deg, #1c4a3b, #2f7a62 60%, #1c4a3b); position: relative; }
.f-bottle::before { content: ""; position: absolute; left: 6px; top: -22px; width: 10px; height: 26px; border-radius: 4px 4px 2px 2px; background: #2f7a62; }
.f-bottle::after { content: ""; position: absolute; left: 3px; top: 34px; width: 16px; height: 18px; border-radius: 3px; background: #ffc82e; }
.f-scene.on .f-bottle { animation: f-bottle 3s cubic-bezier(0.15, 0.6, 0.2, 1) forwards; animation-delay: 0.4s; }
@keyframes f-bottle { from { transform: rotate(0); } to { transform: rotate(1530deg); } }

/* Ergebnis */
.f-win { flex: 1; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 38%, #ffe08a, transparent 62%); }
.f-big { width: 130px; height: 130px; border-radius: 50%; background: #ffc82e; display: grid; place-items: center; font-size: 64px; margin: 0 auto 8px; box-shadow: 0 0 40px rgba(255, 200, 46, 0.7); overflow: hidden; }
.f-big img { width: 100%; height: 100%; object-fit: cover; }
.f-win b { font-size: 22px; display: block; line-height: 1.15; }
.f-cal { border: 2px solid #15201b; border-radius: 99px; text-align: center; font-weight: 900; font-size: 13px; padding: 8px; }
.f-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.f-confetti i { position: absolute; top: -14px; width: 7px; height: 12px; border-radius: 2px; opacity: 0; }
.f-scene.on .f-confetti i { animation: f-fall 2.4s ease-in forwards; animation-delay: var(--d, 0.3s); }
@keyframes f-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0.9; transform: translateY(560px) rotate(540deg); } }

/* Untertitel und Steuerung */
/* Feste Höhe für drei Zeilen, damit Knopf und Punkte beim Szenenwechsel nicht springen (Usability-Prüfung 17.10.2026) */
.f-caption { min-height: 4.1em; max-width: 320px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: 17px; line-height: 1.35; margin: 4px 0 0; }
.f-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.f-ctl { min-height: 44px; border: 2px solid rgba(127, 127, 127, 0.35); background: transparent; color: inherit; border-radius: 99px; padding: 0 18px; font: 800 14px system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.f-ctl:hover { border-color: #ffc82e; }
/* Punkte: sichtbar klein, zum Tippen 28 × 44 px groß (elf Punkte passen in 320 px) (unsichtbare Fläche um den Punkt) */
.f-dots { display: flex; gap: 0; }
.f-dots button { position: relative; width: 28px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.f-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 6px; background: rgba(127, 127, 127, 0.45); transition: width 0.3s, margin 0.3s; }
.f-dots button.on::before { background: #ffc82e; width: 22px; margin-left: -11px; }
.f-dots button:focus-visible { outline: 2px solid #ffc82e; outline-offset: -6px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .f-scene, .f-scene.on .f-in, .f-scene.on .f-swipe, .f-scene.on .f-bottle, .f-scene.on .f-confetti i, .f-scene.on .f-shake,
  .f-scene.on .f-pick .f-face, .f-scene.on .f-press, .f-scene.on .f-tap { animation: none !important; transition: none !important; }
  .f-scene.on .f-shot.next { animation: none !important; opacity: 1; }
  .f-in { opacity: 1; }
  .f-bottle { transform: rotate(90deg); }
}