/* Reel Scroller, nutzt die CI Variablen aus ../styles.css (--primary-color, --font-main, --font-body ...) */
:root{--nav-h:72px}
html,body.reels-page{height:100%;overflow:hidden;background:var(--bg-color)}
.reels-page #particle-canvas{display:none} /* Partikel würden über den Videos liegen */

.reels-feed{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;outline:none;z-index:1}
.reels-feed::-webkit-scrollbar{display:none}
.reel{position:relative;height:calc(100dvh - var(--nav-h));scroll-snap-align:start;scroll-snap-stop:always;display:flex;justify-content:center;align-items:center}
.reel-frame{position:relative;height:100%;width:100%;background:#000;overflow:hidden}
@media (min-aspect-ratio:9/16){.reel-frame{width:auto;aspect-ratio:9/16}}
@media (min-width:769px){
  .reel{padding:16px 0}
  .reel-frame{border-radius:16px;border:1px solid rgba(255,255,255,.08);box-shadow:var(--accent-glow)}
}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel-info{position:absolute;left:0;right:0;bottom:0;padding:48px 18px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(7,7,10,.92));font-family:var(--font-body)}
.reel-product{font-family:var(--font-main);color:var(--primary-color);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin:0 0 4px}
.reel-info h2{font-family:var(--font-main);text-transform:uppercase;margin:0 0 6px;font-size:1.35rem;line-height:1.2}
.reel-info p.desc{margin:0 0 14px;font-size:.95rem;font-weight:300;line-height:1.45;opacity:.92}
.reel-cta{display:inline-block;background:var(--primary-gradient);color:#000;padding:10px 22px;border-radius:30px;font-family:var(--font-main);font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.reel-cta:focus-visible,.reels-feed:focus-visible{outline:3px solid var(--primary-color);outline-offset:3px}
/* Untertitel: Position wird per JS oberhalb der Info Box gesetzt */
.reel video::cue{background:rgba(7,7,10,.8);color:#fff;font-family:var(--font-body);font-size:1rem}
/* Footer als letzter Snap Abschnitt im Feed */
.reels-feed footer{scroll-snap-align:end}
.reels-noscript{position:fixed;top:var(--nav-h);padding:24px}
.reels-noscript a{color:var(--primary-color)}
@media (prefers-reduced-motion:reduce){.reels-feed{scroll-behavior:auto}}
/* Produktion: kompaktere Info Box, damit eingebrannte Overlays sichtbar bleiben */
.reel-info{padding:28px 14px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(7,7,10,.85) 45%)}
.reel-info h2{font-size:1.05rem;margin-bottom:4px}
.reel-info p.desc{font-size:.82rem;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-product{font-size:.7rem}
.reel-cta{padding:8px 18px;font-size:.85rem}
/* UI2: monochrome Icons, einheitliche Buttons rechts */
.reel-actions{position:absolute;right:12px;bottom:170px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px}
.reel-btn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(7,7,10,.45);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;padding:0;cursor:pointer}
.reel-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reel-like{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;color:#fff;cursor:pointer;font-family:var(--font-main)}
.reel-like[aria-pressed="true"] .reel-like-heart svg{fill:#fff}
.reel-like:active .reel-like-heart,.reel-sound:active{transform:scale(.9)}
.reel-like-heart{transition:transform .15s}
.reel-like-count{font-size:.8rem;text-shadow:0 1px 2px #000}
.reel-sound:focus-visible,.reel-like:focus-visible{outline:3px solid var(--primary-color);outline-offset:2px}
/* UI2: kompakter Header (iOS Safe Area) */
.reels-page .navbar{padding-top:calc(20px + env(safe-area-inset-top));transition:padding .25s ease,background .25s ease}
.reels-page .navbar .logo{transition:font-size .25s ease}
.reels-page .navbar .logo-icon,.reels-page .hamburger{transition:height .25s ease,font-size .25s ease}
.reels-page .navbar.reels-compact{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px;background:rgba(7,7,10,.9)}
.reels-page .navbar.reels-compact .logo{font-size:1.1rem}
.reels-page .navbar.reels-compact .logo-icon{height:1.1rem}
.reels-page .navbar.reels-compact .hamburger{font-size:1.35rem}
.reels-page .reel{height:100%}
@media (prefers-reduced-motion:reduce){.reels-page .navbar,.reels-page .navbar *,.reel-like-heart{transition:none!important}}
/* UI3: Info Box blendet beim Abspielen nach ca. 3 s aus */
.reel-info{transition:opacity .4s ease,transform .4s ease}
.reel-frame.info-hidden .reel-info{opacity:0;transform:translateY(12px);pointer-events:none}
.reel-frame.info-hidden .reel-info:focus-within{opacity:1;transform:none;pointer-events:auto}
@media (hover:hover) and (pointer:fine){.reel-frame.info-hidden:hover .reel-info{opacity:1;transform:none;pointer-events:auto}}
.reel video{cursor:pointer}
.reel-indicator{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(7,7,10,.45);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:2}
.reel-indicator svg{width:28px;height:28px;fill:#fff;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.reel-indicator.show{animation:reel-ind .7s ease forwards}
@keyframes reel-ind{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.reel-info{transition:none}.reel-frame.info-hidden .reel-info{transform:none}.reel-indicator.show{animation:none;opacity:0}}
/* UI3b: eigene Untertitel Ebene, umbricht innerhalb der Videobreite */
.reel video::cue{opacity:0;background:transparent;color:transparent}
.reel-sub{position:absolute;left:16px;right:16px;top:9%;z-index:2;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .15s}
.reel-sub.on{opacity:1}
.reel-sub-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;text-align:center;white-space:pre-line;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;
  font-family:var(--font-body);font-size:clamp(14px,4vw,19px);line-height:1.35;font-weight:500;color:#fff;background:rgba(7,7,10,.72);padding:4px 10px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-reduced-motion:reduce){.reel-sub{transition:none}}