/* MeetLoop – Startseite */

/* Screenshots im Handy-Rahmen: Ecken außerhalb des Rahmens abschneiden */
.hm-phone { border-radius: 9.6% / 5.3%; display: block; width: 100%; height: auto; }

/* Hero: Zeilen der Überschrift schalten das Handy um */
.hm-line { transition: color .5s ease; }
.hm-bar { transform-origin: left; transform: scaleX(0); }
.hm-line.is-active .hm-bar { animation: hm-fill var(--dur) linear forwards; }
.hm-paused .hm-line.is-active .hm-bar { animation-play-state: paused; }
.hm-shot { transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.hm-glow { transition: background-color .8s ease; }
.hm-note { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
@keyframes hm-fill { to { transform: scaleX(1); } }

/* Browser-Rahmen für breite Screenshots */
.hm-browser {
    border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 30px 80px -20px rgba(15,27,45,.35), 0 0 0 1px rgba(15,27,45,.08);
}
.dark .hm-browser { background: #111827; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.hm-browser-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.dark .hm-browser-bar { background: #1f2937; border-color: #374151; }
.hm-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; display: block; }
.dark .hm-browser-bar i { background: #4b5563; }
.hm-browser-bar span { margin-left: 14px; flex: 1; max-width: 320px; height: 20px; border-radius: 6px; background: #fff; font-size: 11px; line-height: 20px; padding: 0 10px; color: #6b7280; }
.dark .hm-browser-bar span { background: #111827; color: #9ca3af; }

/* Umschalter mit Fortschrittsbalken */
.hm-tabbar { transform-origin: left; transform: scaleX(0); }
.hm-tabbar.run { animation: hm-fill var(--dur) linear forwards; }
.hm-tabbar.done { transform: scaleX(1); }

/* Scanner-Linie im QR-Kärtchen */
.hm-scan { animation: hm-scan 3.2s ease-in-out infinite; }
@keyframes hm-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(92px); } }

/* Kartenreihe */
.hm-row { scrollbar-width: none; }
.hm-row::-webkit-scrollbar { display: none; }

/* Laufband der Stimmen */
.hm-marquee { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hm-marquee-track { animation: hm-marquee var(--dur, 60s) linear infinite; }
.hm-marquee:hover .hm-marquee-track, .hm-marquee:focus-within .hm-marquee-track { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* Schrittlinie zeichnet sich einmal */
.hm-howline path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
.hm-howline.is-in path { stroke-dashoffset: 0; }

/* Beschreibungen aus dem Admin (HTML) */
.hm-rich ul { list-style: disc; padding-left: 1.25rem; margin-top: .5rem; }
.hm-rich ol { list-style: decimal; padding-left: 1.25rem; margin-top: .5rem; }
.hm-rich li { margin-bottom: .25rem; }
.hm-rich p { margin-bottom: .5rem; }
.hm-rich p:last-child { margin-bottom: 0; }
.hm-rich strong { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .hm-line .hm-bar { animation: none !important; transform: scaleX(1); }
    .hm-shot, .hm-note, .hm-glow { transition: none; }
    .hm-tabbar.run { animation: none; transform: scaleX(1); }
    .hm-scan { animation: none; }
    .hm-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
    .hm-marquee-track { animation: none; }
    .hm-marquee [data-dup] { display: none; }
    .hm-howline path { transition: none; stroke-dashoffset: 0; }
}