/*
 * Lokalheld des Sports — LIGHT SLIDE BACKGROUND SYSTEM
 * Source of truth: supplied lokalheld_html_background_kit/background.css
 *
 * IMPORTANT HOST ADAPTATION ONLY:
 * - The kit's demo/stage/foreground rules are intentionally not loaded because the
 *   existing V14 deck, slide sizing, content grid and navigation must remain untouched.
 * - The original kit background geometry, positions, opacities, SVGs, dot grids,
 *   textures and color values below are retained.
 * - The kit grain layer originally lived on .slide::after; here it is moved into
 *   .lh-bg::after because the V14 presentation already uses slide pseudo-elements.
 */

:root{
  --lh-orange:#ff6b1a;
  --lh-navy:#071722;
  --lh-ink:#111b23;
  --lh-grey-1:#66727c;
  --lh-grey-2:#98a4ac;
  --lh-grey-3:#c7d0d5;
  --lh-ice:#eef4f6;
  --lh-white:#ffffff;
  --ref-w:1672;
  --ref-h:941;
}

/* Exact light-paper base from the supplied kit. */
.slide.slide-light{
  background:
    radial-gradient(circle at 9% 38%, rgba(216,228,234,.62) 0%, rgba(235,242,245,.24) 22%, transparent 37%),
    radial-gradient(circle at 87% 22%, rgba(255,107,26,.035) 0%, transparent 30%),
    radial-gradient(circle at 64% 82%, rgba(213,225,231,.18) 0%, transparent 30%),
    linear-gradient(118deg,#f4f8fa 0%,#ffffff 44%,#f8f7f5 100%);
}

/* Remove the older V13.x invented light-slide backdrops so the kit is the sole system. */
#s2.slide-light::before,#s2.slide-light::after,
#s3.slide-light::before,#s3.slide-light::after,
#s5.slide-light::before,#s5.slide-light::after,
#s6.slide-light::before,#s6.slide-light::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  animation:none!important;
}
#s3 .section-top::after,#s5 .copy-block.compact::after,#s6 .copy-block.compact::after,
#s3 .slide-content::before,#s3 .slide-content::after,
#s5 .slide-content::before,#s5 .slide-content::after,
#s6 .slide-content::before,#s6 .slide-content::after{
  content:none!important;
  display:none!important;
}

/* ---------- BACKGROUND DECORATION LAYER ---------- */
.lh-bg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.lh-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background-image:url('../background-kit/texture-grain.png');
  background-repeat:repeat;
  opacity:.16;
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* top orange hairline */
.lh-bg__top-line{
  position:absolute;
  top:0;left:0;
  width:28.15%;
  height:3px;
  background:var(--lh-orange);
}

/* individual extracted texture elements */
.lh-texture{
  position:absolute;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.lh-texture--nrw{left:4.3%;top:9.2%;width:23%;opacity:.58}
.lh-texture--city-center{left:45.3%;top:24.9%;width:12.1%;opacity:.48}
.lh-texture--stadium{left:-.1%;bottom:-.2%;width:25.9%;opacity:.55}
.lh-texture--cologne{right:2.3%;top:21.2%;width:13.5%;opacity:.58}
.lh-texture--move{right:.9%;top:9.8%;width:10%;opacity:.75}
.lh-texture--hashtag{left:5.3%;bottom:6.5%;width:18.2%;opacity:.72}

/* coordinate label */
.lh-coordinates{
  position:absolute;
  left:32.9%;
  top:15.9%;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  color:rgba(91,109,121,.44);
  font-size:clamp(8px,.84vw,15px);
  line-height:1.45;
  letter-spacing:.16em;
  font-weight:400;
}
.lh-coordinates::after{
  content:"";
  position:absolute;
  left:104%;
  top:22%;
  width:34%;
  height:1px;
  background:rgba(91,109,121,.27);
}

/* tiny symbols */
.lh-plus,.lh-x{position:absolute;line-height:1;font-weight:300}
.lh-plus{color:var(--lh-orange)}
.lh-plus--grey{color:rgba(74,95,109,.38)}
.lh-x{color:var(--lh-orange)}
.p-a{left:47.3%;top:12.0%;font-size:2.15vw}
.p-b{left:25.4%;top:25.5%;font-size:2.1vw}
.p-c{left:49.8%;top:29.1%;font-size:2vw}
.p-d{left:50.8%;top:52.7%;font-size:2.25vw}
.p-e{left:3.0%;top:80.4%;font-size:1.65vw}
.p-f{left:39.1%;top:84.5%;font-size:1.95vw}
.p-g{left:79.6%;top:87.6%;font-size:2.1vw}
.p-h{left:5.4%;top:40.4%;font-size:2vw}
.x-a{left:50.4%;top:77.1%;font-size:2.15vw}

/* dot matrices */
.lh-dotgrid{
  position:absolute;
  background-image:radial-gradient(circle, rgba(57,79,94,.64) 1.2px, transparent 1.45px);
  background-size:18px 18px;
}
.lh-dotgrid::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(255,107,26,.95) 1.2px, transparent 1.45px);
  background-size:54px 54px;
  opacity:.72;
}
.dg-a{left:1.7%;top:11.7%;width:7.2%;height:9.7%}
.dg-b{left:43.9%;top:66.8%;width:6.3%;height:9.7%}
.dg-c{right:2.4%;bottom:2.7%;width:5.8%;height:9.3%;opacity:.82}
.dg-d{left:67.5%;bottom:2.7%;width:8.2%;height:7.6%;opacity:.62}

/* vertical word stack */
.lh-wordstack{
  position:absolute;
  right:2.9%;
  top:60.8%;
  display:flex;
  flex-direction:column;
  gap:.34em;
  color:rgba(83,104,118,.48);
  font-size:clamp(7px,.72vw,13px);
  letter-spacing:.33em;
  line-height:1.1;
  text-transform:uppercase;
}
.lh-wordstack::after{
  content:"";
  display:block;
  width:4.4em;
  height:2px;
  margin-top:.65em;
  background:var(--lh-orange);
  transform:rotate(-10deg);
  transform-origin:left center;
}

/* -------- SVG ROUTES / ORBITS / SPORTS LINE ART -------- */
.lh-svg{position:absolute;overflow:visible}
.lh-svg path,.lh-svg circle,.lh-svg rect,.lh-svg line,.lh-svg polyline{vector-effect:non-scaling-stroke}

.orbit-right{left:47.0%;top:7.3%;width:48.6%;height:79.5%}
.orbit-right .g{fill:none;stroke:rgba(68,91,106,.50);stroke-width:1.25;stroke-dasharray:7 10}
.orbit-right .o{fill:none;stroke:rgba(255,107,26,.46);stroke-width:1.15}
.orbit-right .dot{fill:var(--lh-orange);stroke:none}

.route-right{right:4.7%;top:25.4%;width:8.0%;height:44.0%}
.route-right path{fill:none;stroke:rgba(255,107,26,.82);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 9}
.route-right circle{fill:var(--lh-orange)}

.pitch-left{left:-3.6%;bottom:-12%;width:45%;height:42%;color:rgba(84,104,118,.16);transform:rotate(-5deg)}
.pitch-left path,.pitch-left circle,.pitch-left line,.pitch-left rect{fill:none;stroke:currentColor;stroke-width:1.3}

.pitch-mid{left:22.5%;bottom:-3.5%;width:23.2%;height:31%;color:rgba(84,104,118,.20);transform:rotate(8deg)}
.pitch-mid path,.pitch-mid circle,.pitch-mid line,.pitch-mid rect{fill:none;stroke:currentColor;stroke-width:1.45}

.sweep-left{left:3.9%;top:43.9%;width:38.5%;height:12.6%}
.sweep-left path{fill:none;stroke:rgba(255,107,26,.30);stroke-width:7;stroke-linecap:round}
.sweep-left .fine{stroke-width:1.15;stroke:rgba(255,107,26,.72)}
.sweep-left polygon{fill:rgba(255,107,26,.72)}

.tech-route{left:43.9%;top:27.5%;width:10.1%;height:18%}
.tech-route path{fill:none;stroke:rgba(255,107,26,.62);stroke-width:1.2;stroke-dasharray:6 7}

.flourish{left:60%;bottom:5.4%;width:7%;height:7%}
.flourish path{fill:none;stroke:rgba(255,107,26,.65);stroke-width:1.4;stroke-dasharray:6 7}

/* existing content always stays above the kit */
.slide-light .slide-content{position:relative;z-index:4}
.slide-light .page-no{z-index:20}

/* No redesign on mobile: same system, only scale legibility. */
@media(max-width:980px){
  .lh-coordinates{font-size:clamp(7px,1.15vw,12px)}
  .lh-wordstack{font-size:clamp(6px,1vw,10px)}
}

/* V15 — motion layer for the supplied Background Kit.
   Baseline positions/opacities remain unchanged; motion uses tiny composited offsets only. */
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  .slide.is-active .lh-texture--nrw{animation:lhV15FloatA 15s ease-in-out infinite alternate}
  .slide.is-active .lh-texture--city-center{animation:lhV15FloatB 17s ease-in-out infinite alternate}
  .slide.is-active .lh-texture--stadium{animation:lhV15FloatC 19s ease-in-out infinite alternate}
  .slide.is-active .lh-texture--cologne{animation:lhV15FloatB 18s ease-in-out infinite alternate-reverse}
  .slide.is-active .lh-texture--move,.slide.is-active .lh-texture--hashtag{animation:lhV15FloatA 13s ease-in-out infinite alternate-reverse}
  .slide.is-active .lh-dotgrid{animation:lhV15DotBreath 6.5s ease-in-out infinite}
  .slide.is-active .lh-plus,.slide.is-active .lh-x{animation:lhV15Sprinkle 7.5s ease-in-out infinite alternate}
  .slide.is-active .orbit-right .g{animation:lhV15Dash 14s linear infinite}
  .slide.is-active .route-right path{animation:lhV15Dash 10s linear infinite reverse}
  .slide.is-active .tech-route path,.slide.is-active .flourish path{animation:lhV15Dash 12s linear infinite}
  .slide.is-active .orbit-right .dot,.slide.is-active .route-right circle{animation:lhV15Pulse 3.2s ease-in-out infinite}
  .slide.is-active .sweep-left path{stroke-dasharray:900;stroke-dashoffset:900;animation:lhV15Sweep 1.25s .18s cubic-bezier(.2,.8,.2,1) forwards}
  .slide.is-active .sweep-left polygon{opacity:0;animation:lhV15Arrow .32s 1.22s ease forwards}
}
@keyframes lhV15FloatA{0%{translate:0 0}50%{translate:4px -3px}100%{translate:-2px 3px}}
@keyframes lhV15FloatB{0%{translate:0 0}50%{translate:-5px 2px}100%{translate:2px -2px}}
@keyframes lhV15FloatC{0%{translate:0 0}50%{translate:3px 2px}100%{translate:-3px -2px}}
@keyframes lhV15DotBreath{0%,100%{opacity:.82}50%{opacity:.56}}
@keyframes lhV15Sprinkle{0%,100%{opacity:.72;scale:1}50%{opacity:1;scale:1.06}}
@keyframes lhV15Dash{to{stroke-dashoffset:-80}}
@keyframes lhV15Pulse{0%,100%{opacity:.55;scale:.82}50%{opacity:1;scale:1.12}}
@keyframes lhV15Sweep{to{stroke-dashoffset:0}}
@keyframes lhV15Arrow{to{opacity:1}}