/* All styles are scoped to the demo to avoid interfering with the WordPress theme. */
.hilfe-sl, .hilfe-sl * { box-sizing: border-box; }
.hilfe-sl { --hs-bg:#080913; --hs-violet:#9a7bff; --hs-pink:#fa73a6; --hs-muted:#a0a1b9; color:#f9f8ff; font-family:system-ui,-apple-system,'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif; margin:0 auto; padding:0; line-height:1.55; width:100%; isolation:isolate; background:radial-gradient(ellipse 54% 33% at 2% 13%,rgba(114,76,202,.24),transparent 80%),radial-gradient(ellipse 60% 46% at 98% 73%,rgba(209,68,127,.16),transparent 83%),var(--hs-bg); }
.hilfe-sl button { font:inherit; cursor:pointer; }
.hilfe-sl button:focus-visible { outline:3px solid #f3d478; outline-offset:4px; }
.hilfe-sl__shell { max-width:1210px; margin:0 auto; padding:clamp(25px,4.5vw,65px) clamp(16px,4vw,48px) 23px; }
.hilfe-sl__heading { max-width:760px; margin:0 auto 37px; text-align:center; }
.hilfe-sl__eyebrow { text-transform:uppercase; color:#c4b6ff; font-size:11px; font-weight:800; letter-spacing:.23em; display:flex; justify-content:center; align-items:center; gap:12px; }
.hilfe-sl__spark { color:#f5baed; font-size:17px; }
.hilfe-sl__line { display:block; width:25px; height:1px; background:#78669d; }
.hilfe-sl__heading h1 { color:#fff; font-size:clamp(30px,4.4vw,53px); letter-spacing:-.065em; line-height:1.28; font-weight:840; margin:14px 0 15px; }
.hilfe-sl__heading h1 span { background:linear-gradient(95deg,#f0c0ff,#ffa3c9 56%,#fee0a7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hilfe-sl__heading p { color:#b8b5cd; font-size:clamp(13px,1.5vw,15px); margin:0 auto 17px; line-height:1.9; max-width:600px; }
.hilfe-sl__demo-label { display:inline-flex; gap:8px; padding:5px 14px; font-size:11px; border-radius:99px; border:1px solid #433552; background:rgba(91,74,111,.25); color:#d7cae4; }
.hilfe-sl__layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(23px,5vw,70px); align-items:start; max-width:1020px; margin:0 auto; }
.hilfe-sl__stage-panel { min-width:0; display:flex; flex-direction:column; align-items:center; }
.hilfe-sl__switcher { display:flex; gap:6px; padding:5px; border:1px solid #3a3651; background:#171423; border-radius:15px; width:min(100%,385px); margin-bottom:15px; }
.hilfe-sl__performer { min-width:0; flex:1; border:1px solid transparent!important; background:transparent!important; color:#aaa7bb!important; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; border-radius:10px!important; font-size:14px!important; font-weight:750!important; padding:12px 7px!important; box-shadow:none!important; line-height:1.3!important; transition:.2s; }
.hilfe-sl__performer small { color:inherit; opacity:.68; font-weight:650; font-size:8px; letter-spacing:.06em; width:100%; }
.hilfe-sl__performer.is-active { color:#fff!important; background:#3a2b64!important; border-color:#8069bf!important; box-shadow:0 3px 18px rgba(98,62,211,.18)!important; }
.hilfe-sl__person-dot { width:7px; height:7px; border-radius:50%; background:#826a9e; }
.hilfe-sl__performer.is-active .hilfe-sl__person-dot { background:#ff70a7; box-shadow:0 0 0 3px rgba(255,112,167,.14); }
.hilfe-sl__phone-frame { width:min(100%,356px); padding:7px; border:1px solid #665b83; border-radius:32px; background:linear-gradient(140deg,#282333,#090911 70%); box-shadow:0 29px 65px rgba(0,0,0,.43),0 0 0 5px rgba(255,255,255,.027); }
.hilfe-sl__video-wrap { position:relative; aspect-ratio:9/16; width:100%; border-radius:26px; overflow:hidden; background:#11101d; isolation:isolate; }
.hilfe-sl__main-video { display:block; width:100%; height:100%; object-fit:cover; background:#111; }
.hilfe-sl__video-dim { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 18%,transparent 73%,rgba(0,0,0,.72)); }
.hilfe-sl__overlay { position:absolute; z-index:4; inset:0; pointer-events:none; overflow:hidden; }
.hilfe-sl__effect-video { position:absolute; z-index:1; width:100%; height:100%; inset:0; object-fit:contain; mix-blend-mode:screen; animation:hilfe-sl-effect-entry .25s ease-out both; }
.hilfe-sl__effect-lottie { position:absolute; z-index:1; inset:0; width:100%; height:100%; display:grid; place-items:center; animation:hilfe-sl-effect-entry .25s ease-out both; }
.hilfe-sl__effect-lottie svg { max-width:100%; max-height:100%; }
@keyframes hilfe-sl-effect-entry { from { opacity:.1; transform:scale(.78); } to { opacity:1; transform:scale(1); } }
.hilfe-sl__phone-top { position:absolute; z-index:5; top:17px; left:14px; right:12px; display:flex; align-items:center; gap:8px; text-shadow:0 1px 5px #0008; pointer-events:none; }
.hilfe-sl__avatar { width:36px; height:36px; display:grid; place-items:center; border:2px solid #ff85b3; color:#fff; background:linear-gradient(145deg,#b8488e,#6a40b5); border-radius:50%; font-size:14px; font-weight:800; }
.hilfe-sl__host { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.25; }
.hilfe-sl__host strong { font-weight:760; color:#fff; font-size:14px; }
.hilfe-sl__host span { font-size:10px; color:#e6dbea; }
.hilfe-sl__live-badge { display:flex; flex-shrink:0; align-items:center; gap:5px; background:#ed4081; border-radius:7px; color:#fff; padding:5px 8px; font-size:9px; font-weight:850; letter-spacing:.04em; }
.hilfe-sl__live-badge span { border-radius:50%; background:white; width:5px; height:5px; }
.hilfe-sl__phone-bottom { position:absolute; z-index:5; bottom:18px; left:13px; right:13px; text-align:center; pointer-events:none; }
.hilfe-sl__phone-bottom>span { font-size:10px; padding:6px 8px; display:inline-block; color:#eae5ed; background:#17142299; border:1px solid #ffffff20; border-radius:10px; }
.hilfe-sl__floating-hearts { color:#ffd0ed; opacity:.8; letter-spacing:1em; margin-bottom:7px; text-align:right; font-size:14px; }
.hilfe-sl__effect-name { position:absolute; z-index:6; left:50%; top:22%; transform:translateX(-50%); border-radius:12px; background:linear-gradient(90deg,#6a2dc8dd,#ea4895dd); border:1px solid #ffffff60; box-shadow:0 7px 22px #0007; padding:8px 12px; color:#fff; text-shadow:0 1px 2px #0005; font-size:12px; font-weight:800; max-width:88%; text-align:center; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; }
.hilfe-sl__effect-name.is-visible { opacity:1; }
.hilfe-sl__unblock { position:absolute; z-index:8; top:50%; left:50%; transform:translate(-50%,-50%); background:#282039ee!important; border:1px solid #eee7ff88!important; color:white!important; border-radius:16px!important; padding:14px 20px!important; white-space:nowrap; }
.hilfe-sl__unblock[hidden] { display:none!important; }
.hilfe-sl__player-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; max-width:370px; width:100%; margin-top:16px; }
.hilfe-sl__player-actions button { font-size:11px!important; font-weight:750!important; color:#e5def7!important; background:#29233c!important; border:1px solid #45405e!important; padding:9px 12px!important; border-radius:11px!important; line-height:1.2!important; }
.hilfe-sl__player-actions button:hover { background:#3d315b!important; }
.hilfe-sl__player-note { font-size:10px; color:#89849f; }
.hilfe-sl__gifts-panel { min-width:0; padding:clamp(3px,2vw,30px) 0; }
.hilfe-sl__panel-top { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 19px; color:#a7a0c1; font-size:11px; }
.hilfe-sl__step { color:#eac0ff; font-size:10px; font-weight:800; letter-spacing:.1em; padding:5px 8px; border-radius:7px; background:#3d2b5c; }
.hilfe-sl__gifts-panel h2 { color:#fff; font-size:clamp(26px,3vw,39px); font-weight:820; letter-spacing:-.05em; line-height:1.34; margin:0 0 16px; }
.hilfe-sl__gifts-panel h2 em { color:#d1b1ff; font-style:normal; }
.hilfe-sl__panel-caption { color:#aaa5c0; font-size:13px; margin:0 0 25px; line-height:1.9; }
.hilfe-sl__gift-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.hilfe-sl__gift { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:93px; border:1px solid #37314b!important; border-radius:15px!important; background:linear-gradient(145deg,#242033,#171522)!important; color:#eae7f2!important; padding:10px 4px!important; box-shadow:none!important; transition:transform .17s,border-color .17s,background .17s; }
.hilfe-sl__gift:hover { transform:translateY(-3px); border-color:#986dce!important; background:#332640!important; }
.hilfe-sl__gift.is-active { border:1.5px solid #df83ed!important; background:linear-gradient(160deg,#49305f,#301f4c)!important; box-shadow:inset 0 0 0 1px #a855bf22,0 4px 23px #dd69ec1c!important; }
.hilfe-sl__gift-icon { line-height:1.25; font-size:29px; filter:drop-shadow(0 5px 8px #0e0817b0); }
.hilfe-sl__gift-label { font-weight:720; font-size:10px; text-align:center; line-height:1.4; }
.hilfe-sl__gift-tip { color:#c2b5d4; font-size:11px; margin-top:19px; line-height:1.7; padding:14px 15px; border:1px solid #3b3350; border-radius:11px; background:#241d34a0; }
.hilfe-sl__gift-tip span { color:#e0a3fa; font-size:16px; padding-right:6px; }
.hilfe-sl__cta-note { display:flex; align-items:flex-start; gap:7px; flex-direction:column; margin-top:21px; padding:17px 17px; border-top:1px solid #4d415c; font-size:11px; }
.hilfe-sl__cta-note strong { font-size:10px; color:#86dece; font-weight:860; letter-spacing:.1em; }
.hilfe-sl__cta-note span { color:#b1acc0; }
.hilfe-sl__footerline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:10px; letter-spacing:.07em; gap:9px; color:#79738e; border-top:1px solid #3a304c; max-width:1020px; margin:38px auto 0; padding:18px 0 0; }
@media (max-width:820px) {
  .hilfe-sl__layout { gap:22px; grid-template-columns:minmax(0,1fr); }
  .hilfe-sl__heading { margin-bottom:27px; }
  .hilfe-sl__gifts-panel { max-width:570px; width:100%; margin:0 auto; padding-top:13px; }
  .hilfe-sl__gifts-panel h2 { font-size:29px; }
  .hilfe-sl__gifts-panel h2 br { display:none; }
  .hilfe-sl__panel-caption { margin-bottom:16px; }
  .hilfe-sl__gift-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hilfe-sl__gift { min-height:85px; }
  .hilfe-sl__phone-frame { width:min(100%,344px); }
  .hilfe-sl__player-note { display:none; }
}
@media (max-width:420px) {
  .hilfe-sl__shell { padding-left:12px; padding-right:12px; }
  .hilfe-sl__heading h1 { font-size:30px; }
  .hilfe-sl__heading p { font-size:12px; }
  .hilfe-sl__eyebrow { font-size:9px; gap:5px; letter-spacing:.16em; }
  .hilfe-sl__phone-frame { width:min(100%,330px); }
  .hilfe-sl__gift-grid { gap:7px; }
  .hilfe-sl__gift { padding:9px 3px!important; min-height:81px; }
  .hilfe-sl__gift-icon { font-size:25px; }
  .hilfe-sl__gift-label { font-size:9px; }
  .hilfe-sl__performer { font-size:12px!important; }
  .hilfe-sl__live-badge { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) { .hilfe-sl__gift,.hilfe-sl__performer,.hilfe-sl__effect-video,.hilfe-sl__effect-lottie { animation:none; transition:none; } }

/* DemoLive v1.1: branded icon in place of the former page/hero title. */
.hilfe-sl__shell { padding-top:clamp(20px,3vw,40px); }
.hilfe-sl__heading { margin-bottom:28px; }
.hilfe-sl__brand { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-bottom:15px; }
.hilfe-sl__brand-icon { display:grid; place-items:center; border-radius:18px; box-shadow:0 6px 28px #a14ded44; }
.hilfe-sl__brand-icon svg { display:block; width:49px; height:49px; }
.hilfe-sl__brand-name { color:#fff; font-size:clamp(27px,4vw,37px); font-weight:840; letter-spacing:-.04em; line-height:1.2; }
.hilfe-sl__brand-by { color:#b5a3d7; font-size:10px; font-weight:760; letter-spacing:.15em; border-left:1px solid #615278; padding-left:12px; }
/* Only on the auto-generated demo page: hide the WordPress theme page title. */
body.hilfe-sl-page .entry-title,
body.hilfe-sl-page .page-title,
body.hilfe-sl-page .wp-block-post-title,
body.hilfe-sl-page .entry-header > h1,
body.hilfe-sl-page .ast-article-single > header.entry-header { display:none!important; }
body.hilfe-sl-page #content .ast-container { max-width:1240px; }
body.hilfe-sl-page .site-content { padding-top:0; }
@media (max-width:820px) {
  .hilfe-sl__heading { margin-bottom:19px; }
  .hilfe-sl__brand-icon svg { width:43px; height:43px; }
  .hilfe-sl__brand { gap:9px; }
  .hilfe-sl__brand-name { font-size:29px; }
  .hilfe-sl__brand-by { font-size:9px; padding-left:9px; }
  .hilfe-sl__phone-frame { scroll-margin-block:16px; }
}
/* Error messages wrap inside the player instead of overflowing on mobile. */
.hilfe-sl__unblock { width:max-content; max-width:calc(100% - 24px); white-space:normal; text-align:center; line-height:1.5; }

/* v1.2.0: Astra / WP full-bleed page and mobile edge-to-edge sizing. */
body.hilfe-sl-page { overflow-x:clip; }
body.hilfe-sl-page #content .ast-container,
body.hilfe-sl-page #primary,
body.hilfe-sl-page #primary .site-main,
body.hilfe-sl-page #primary article,
body.hilfe-sl-page #primary .entry-content,
body.hilfe-sl-page #primary .post-content,
body.hilfe-sl-page #main { max-width:none!important; width:100%!important; margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important; }
body.hilfe-sl-page #secondary { display:none!important; }
.hilfe-sl { width:100vw!important; max-width:100vw!important; margin-left:calc(50% - 50vw)!important; margin-right:0!important; overflow:hidden; }
.hilfe-sl__shell { max-width:1280px; }
/* Always show a repeated DemoLive watermark over video AND gift playback. */
.hilfe-sl__watermark { position:absolute; inset:-12%; z-index:7; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; align-items:center; justify-items:center; transform:rotate(-23deg) scale(1.16); opacity:.27; pointer-events:none; overflow:hidden; }
.hilfe-sl__watermark span { color:#fff; font-size:clamp(12px,3.5vw,20px); font-weight:900; white-space:nowrap; letter-spacing:.03em; text-shadow:0 1px 2px #08060c99; user-select:none; }
/* A clearly labelled IMAGE/sample badge is visible whenever any gift effect plays. */
.hilfe-sl__effect-disclosure { position:absolute; z-index:9; left:50%; bottom:22%; display:none; align-items:center; gap:7px; transform:translateX(-50%); padding:6px 12px; border-radius:999px; border:1px solid #fff8; color:#fff; white-space:nowrap; background:#161020d9; box-shadow:0 5px 20px #0009; pointer-events:none; }
.hilfe-sl.is-playing-gift .hilfe-sl__effect-disclosure { display:inline-flex; }
.hilfe-sl__effect-disclosure strong { font-size:12px; font-weight:850; }
.hilfe-sl__effect-disclosure-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:linear-gradient(125deg,#7851e4,#f462aa); font-size:15px; }
.hilfe-sl__illustration-note { display:flex; gap:9px; align-items:flex-start; margin-top:17px; padding:11px 14px; border:1px solid #d3a56477; border-radius:12px; background:#382c27; color:#f8ddb7; line-height:1.65; font-size:11px; }
.hilfe-sl__illustration-note > span:first-child { font-size:19px; }
.hilfe-sl__lang-nav { display:flex; gap:5px; align-items:center; justify-content:center; flex-wrap:wrap; margin:15px auto 0; }
.hilfe-sl__lang-nav a { color:#baaed9; border:1px solid #49405c; font-size:11px; text-decoration:none; padding:5px 8px; border-radius:999px; line-height:1.3; white-space:nowrap; }
.hilfe-sl__lang-nav a:hover,.hilfe-sl__lang-nav a.is-active { background:#46326c; color:#fff; border-color:#a17feb; }
@media (max-width:820px) {
  .hilfe-sl { width:100vw!important; margin-left:calc(50% - 50vw)!important; }
  .hilfe-sl__shell { padding:18px 8px 15px!important; }
  .hilfe-sl__layout { width:100%; max-width:none; gap:24px; }
  .hilfe-sl__stage-panel,.hilfe-sl__gifts-panel { width:100%; max-width:none; }
  .hilfe-sl__phone-frame { width:min(calc(100vw - 16px),430px); max-width:100%; }
  .hilfe-sl__switcher { width:min(calc(100vw - 16px),430px); max-width:100%; }
  .hilfe-sl__gift-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .hilfe-sl__gift { min-width:0; }
  .hilfe-sl__gifts-panel { padding:0 5px; }
  .hilfe-sl__heading { padding:0 6px; }
  .hilfe-sl__watermark span { font-size:clamp(12px,4vw,18px); }
}
@media (max-width:340px) { .hilfe-sl__gift-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* v1.3.0: Lottie overlays are transparent; the underlying Live video remains visible. */
.hilfe-sl__effect-lottie { background:transparent!important; }
.hilfe-sl__effect-lottie svg { overflow:visible; pointer-events:none; }