/* ============================================================ R&B PAY — SCROLL-FILM (Styles fuer die PRODUKTSEITE) 1:1-KOPIE der Film-Regeln aus rb-homepage.css (Zeilen 894-1004, Stand 14.08.2026). Die Homepage laedt weiterhin NUR rb-homepage.css; diese Datei laedt NUR /produkte (rb-homepage.css hat globale Neben- wirkungen: lila Scrollbar, #rbp-scrollbar-Styles, html{overflow-x:clip} - die darf die Produktseite nicht erben). !!! BEI JEDER AENDERUNG AN DEN FILM-STYLES IN rb-homepage.css DIESE DATEI MIT AKTUALISIEREN (gleicher Block, gleicher Wortlaut) !!! ============================================================ */ #rbp-film,#rbp-film *{box-sizing:border-box;} /* Seit Video V3 (05.08.2026) hat der Film einen WEISSEN Hintergrund (vorher lila-dunkel). Deshalb steht der ganze Block auf dunkler Schrift + weißem Textschatten. */ #rbp-film{width:100%;background:#FFF;color:#0d0613;font-family:'Poppins',sans-serif;position:relative;} /* GRUNDZUSTAND = statischer Fallback (No-JS, Theme-Editor, Bewegung reduzieren). Erst .rbp-fm--on (setzt das JS) macht daraus den sticky Scroll-Film — so ist nie etwas per CSS versteckt, das JS zeigen müsste (Falle 12). */ .rbp-fm__spacer{height:auto;} .rbp-fm__stage{position:relative;padding:88px 22px 96px;display:flex;flex-direction:column;align-items:center;gap:20px;} .rbp-fm__canvas{display:none;} .rbp-fm__poster{display:block;width:min(100%,1040px);height:auto;border-radius:26px;border:1px solid rgba(13,6,19,.10);box-shadow:0 30px 80px rgba(13,6,19,.18);} .rbp-fm__fade{display:none;} .rbp-fm__ov{position:relative;width:min(100%,640px);max-width:none;background:#F7F5FB;border:1px solid rgba(13,6,19,.08);border-radius:22px;padding:26px 26px 28px;} .rbp-fm__kicker{display:inline-flex;align-items:center;gap:11px;margin-bottom:14px;color:rgba(13,6,19,.66);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;} .rbp-fm__kicker b{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 11px;border-radius:999px;background:#6027A6;color:#FFF;font-size:11px;font-weight:900;letter-spacing:.06em;} .rbp-fm__ov h3{margin:0;color:#0d0613;font-size:clamp(30px,3.6vw,54px);line-height:1.04;letter-spacing:-.045em;font-weight:800;} .rbp-fm__ov p{margin:16px 0 0;max-width:460px;color:rgba(13,6,19,.76);font-size:clamp(14.5px,1.25vw,17px);line-height:1.65;font-weight:500;} /* Pflichthinweis PAngV/UWG. Bewusst KEIN

: die 3-Zeilen-Klammer weiter unten greift auf ".rbp-fm__ov p" und wuerde den Hinweis ab 375x667 abschneiden. */ .rbp-fm__netto{display:block;margin:10px 0 0;color:rgba(13,6,19,.62);font-size:11.5px;line-height:1.45;font-weight:600;} .rbp-fm__cta{margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .rbp-fm__btn{min-height:56px;padding:0 24px;border:0;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Poppins',sans-serif;font-size:15px;line-height:1;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;} .rbp-fm__btn svg{width:18px;height:18px;transition:transform .22s ease;} .rbp-fm__btn--p{background:#6027A6;color:#FFF;box-shadow:0 16px 38px rgba(96,39,166,.4);} .rbp-fm__btn--p:hover{transform:translateY(-3px);background:#0d0613;color:#FFF;box-shadow:0 22px 48px rgba(13,6,19,.28);} .rbp-fm__btn--p:hover svg{transform:translateX(4px);} .rbp-fm__btn--s{background:rgba(13,6,19,.04);color:#0d0613;border:2px solid rgba(13,6,19,.18);} .rbp-fm__btn--s:hover{background:#0d0613;color:#FFF;transform:translateY(-3px);} .rbp-fm__bar{display:none;} .rbp-fm__hint{display:none;} /* KI-Kennzeichnung (Art. 50 KI-VO): fotorealistisches KI-Produktvideo → während der GESAMTEN Wiedergabe sichtbar. Statisch über dem Standbild, im Film oben links im Bild. */ .rbp-fm__ki{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;background:rgba(13,6,19,.05);border:1px solid rgba(13,6,19,.16);color:rgba(13,6,19,.74);font-size:11.5px;line-height:1;font-weight:700;letter-spacing:.02em;pointer-events:none;} /* AKTIVER FILM (JS setzt .rbp-fm--on und steuert Frames + Einblendungen). Zentrierungen von --3/--4 OHNE transform (margin:auto) — das JS nutzt transform nur für den translateY-Drift, nichts kollidiert (Falle 4). */ #rbp-film.rbp-fm--on .rbp-fm__spacer{height:400vh;} #rbp-film.rbp-fm--on .rbp-fm__stage{position:sticky;top:0;height:100vh;height:100dvh;padding:0;display:block;overflow:hidden;} #rbp-film.rbp-fm--on .rbp-fm__canvas{display:block;position:absolute;inset:0;width:100%;height:100%;} #rbp-film.rbp-fm--on .rbp-fm__poster{display:none;} #rbp-film.rbp-fm--on .rbp-fm__fade{display:block;position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,#FFF 0%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:2;} #rbp-film.rbp-fm--on .rbp-fm__ov{position:absolute;z-index:3;opacity:0;background:none;border:0;border-radius:0;padding:0;width:auto;max-width:min(44vw,520px);pointer-events:none;will-change:opacity,transform;} #rbp-film.rbp-fm--on .rbp-fm__ov--1{left:clamp(22px,6vw,120px);bottom:12vh;} #rbp-film.rbp-fm--on .rbp-fm__ov--2{right:clamp(22px,6vw,120px);top:13vh;text-align:right;} #rbp-film.rbp-fm--on .rbp-fm__ov--2 p{margin-left:auto;} #rbp-film.rbp-fm--on .rbp-fm__ov--3{left:clamp(22px,6vw,120px);top:0;bottom:0;margin-block:auto;height:max-content;} #rbp-film.rbp-fm--on .rbp-fm__ov--4{right:clamp(22px,6vw,120px);bottom:10vh;text-align:right;max-width:min(44vw,560px);} #rbp-film.rbp-fm--on .rbp-fm__ov--4 p{margin-left:auto;} #rbp-film.rbp-fm--on .rbp-fm__ov--4 .rbp-fm__cta{justify-content:flex-end;} /* Lesbarkeit auf dem HELLEN Video: dunkle Schrift mit weißem Glow statt Karten-Hintergrund. Erster Layer eng und deckend — am gerenderten Frame gemessen ragen Display, Platine und Akku in die Zeilen von Einblendung 1 und 3 (bis 18 % der Zeilenfläche unter Luminanz 0.45, Tiefstwert 0.04); ein nur weiter Blur trägt dort nicht. */ #rbp-film.rbp-fm--on .rbp-fm__ov h3{text-shadow:0 0 7px rgba(255,255,255,1),0 0 18px rgba(255,255,255,.96),0 2px 30px rgba(255,255,255,.9);} #rbp-film.rbp-fm--on .rbp-fm__ov p{color:rgba(13,6,19,.8);text-shadow:0 0 5px rgba(255,255,255,1),0 0 13px rgba(255,255,255,.96),0 1px 22px rgba(255,255,255,.85);} #rbp-film.rbp-fm--on .rbp-fm__netto{color:rgba(13,6,19,.72);text-shadow:0 0 5px rgba(255,255,255,1),0 0 13px rgba(255,255,255,.96);} #rbp-film.rbp-fm--on .rbp-fm__kicker{text-shadow:0 0 5px rgba(255,255,255,1),0 0 12px rgba(255,255,255,.92);} #rbp-film.rbp-fm--on .rbp-fm__bar{display:block;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(420px,64%);height:4px;border-radius:999px;background:rgba(13,6,19,.13);opacity:0;transition:opacity .3s ease;z-index:4;pointer-events:none;} #rbp-film.rbp-fm--on .rbp-fm__bar.is-on{opacity:1;} #rbp-film.rbp-fm--on .rbp-fm__fill{display:block;height:100%;width:0;border-radius:999px;background:#6027A6;} #rbp-film.rbp-fm--on .rbp-fm__hint{display:flex;position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:4;flex-direction:column;align-items:center;gap:2px;color:rgba(13,6,19,.62);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;transition:opacity .4s ease;} #rbp-film.rbp-fm--on .rbp-fm__ki{position:absolute;top:104px;left:clamp(22px,6vw,120px);z-index:4;background:rgba(255,255,255,.82);border-color:rgba(13,6,19,.16);} .rbp-fm__hint svg{width:18px;height:18px;animation:rbpFmHint 1.6s ease-in-out infinite;} @keyframes rbpFmHint{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(5px);opacity:1;}} /* Bewegung reduzieren: der scroll-gesteuerte Film laeuft weiter (nur Nutzer-Scroll bewegt ihn), aber der autonom huepfende Scroll-Hinweis bleibt still */ @media(prefers-reduced-motion:reduce){.rbp-fm__hint svg{animation:none;}} @media(max-width:989px){ .rbp-fm__stage{padding:64px 14px 72px;} .rbp-fm__ov h3{font-size:clamp(26px,7vw,34px);} /* Aktiver Film am Handy: jede Einblendung unten als kompakte Karte (solider Hintergrund statt backdrop-filter — Mobile-Perf-Regel) */ #rbp-film.rbp-fm--on .rbp-fm__stage{height:100vh;height:100svh;} #rbp-film.rbp-fm--on .rbp-fm__ov, #rbp-film.rbp-fm--on .rbp-fm__ov--1, #rbp-film.rbp-fm--on .rbp-fm__ov--2, #rbp-film.rbp-fm--on .rbp-fm__ov--3, #rbp-film.rbp-fm--on .rbp-fm__ov--4{ left:14px;right:14px;top:auto;margin:0;height:auto;width:auto;max-width:none;text-align:left; background:rgba(255,255,255,.93);border:1px solid rgba(13,6,19,.1);border-radius:20px;padding:18px 18px 20px; /* ABSTAND UNTEN 108px, NICHT 64px (05.08.2026, Fund auf einem echten iPhone): iOS Safari blendet im kompakten Modus eine SCHWEBENDE Adress-Pille über den Viewport. Weder 100vh noch 100svh kennen sie, und env(safe-area-inset-bottom) ist hier 0, weil das viewport-meta kein viewport-fit=cover trägt. Am Screenshot vermessen lag die Pille 69–97px über der Bühnenkante — bei bottom:64px verschluckte sie die letzte Textzeile. 120px hält die Karte frei — die 97px sind aus einem Screenshot hochgerechnet, deshalb bewusst Puffer statt Punktlandung. env() bleibt als Zugabe stehen, falls viewport-fit=cover später dazukommt. */ bottom:calc(120px + env(safe-area-inset-bottom, 0px)); } #rbp-film.rbp-fm--on .rbp-fm__ov--2 p{margin-left:0;} #rbp-film.rbp-fm--on .rbp-fm__ov--4 p{margin-inline:0;} #rbp-film.rbp-fm--on .rbp-fm__ov--4 .rbp-fm__cta{justify-content:flex-start;} #rbp-film.rbp-fm--on .rbp-fm__ov h3{font-size:clamp(22px,6.4vw,30px);text-shadow:none;} #rbp-film.rbp-fm--on .rbp-fm__ov p{max-width:none;font-size:14px;line-height:1.55;text-shadow:none;} #rbp-film.rbp-fm--on .rbp-fm__netto{text-shadow:none;} #rbp-film.rbp-fm--on .rbp-fm__kicker{margin-bottom:10px;} #rbp-film.rbp-fm--on .rbp-fm__btn{min-height:48px;padding:0 18px;font-size:14px;flex:1 1 auto;} /* Leiste und Hinweis lagen bei 16/30px komplett hinter der Safari-Pille */ #rbp-film.rbp-fm--on .rbp-fm__bar{bottom:calc(76px + env(safe-area-inset-bottom, 0px));width:min(320px,70%);} #rbp-film.rbp-fm--on .rbp-fm__hint{bottom:calc(88px + env(safe-area-inset-bottom, 0px));} #rbp-film.rbp-fm--on .rbp-fm__ki{top:76px;left:14px;padding:6px 11px;font-size:11px;} .rbp-fm__cta{gap:10px;} } /* Kleine Höhen (Quermodus, kleine Phones): Karte kompakter, Text begrenzt. Hier ist die Höhe das knappe Gut und Safari versteckt im Quermodus seine Leisten meist ganz — deshalb weniger Abstand als im Hochformat. */ @media(max-width:989px) and (max-height:680px){ #rbp-film.rbp-fm--on .rbp-fm__ov{bottom:calc(92px + env(safe-area-inset-bottom, 0px));padding:14px 14px 16px;} #rbp-film.rbp-fm--on .rbp-fm__bar{bottom:calc(52px + env(safe-area-inset-bottom, 0px));} #rbp-film.rbp-fm--on .rbp-fm__hint{bottom:calc(64px + env(safe-area-inset-bottom, 0px));} #rbp-film.rbp-fm--on .rbp-fm__ov p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} }