/* Cinematic desktop treatment for the immediate-help sequence. */
html .accident-help{--accident-image:url('/img/unfall/farbwelten/stone.webp')}
html[data-color-theme="ember"] .accident-help{--accident-image:url('/img/unfall/farbwelten/ember.webp')}
html[data-color-theme="violet"] .accident-help{--accident-image:url('/img/unfall/farbwelten/violet.webp')}
html[data-color-theme="legacy"] .accident-help{--accident-image:url('/img/unfall/farbwelten/legacy.webp')}
html[data-color-theme="petrol"] .accident-help{--accident-image:url('/img/unfall/farbwelten/petrol.webp')}
html[data-color-theme="red"] .accident-help{--accident-image:url('/img/unfall/farbwelten/red.webp')}
html[data-color-theme="lime"] .accident-help{--accident-image:url('/img/unfall/farbwelten/lime.webp')}
html[data-color-theme="gold"] .accident-help{--accident-image:url('/img/unfall/farbwelten/gold.webp')}
.accident-cinema-hud,.accident-cinema-feature,.accident-step-hit{display:none}
@media (min-width:701px){
  body.home-five section.accident-help.cinematic-ready{
    --accident-tilt-x:0deg;
    --accident-tilt-y:0deg;
    position:relative;
    isolation:isolate;
    min-height:980px;
    padding:138px 0 88px;
    overflow:hidden;
    background:#070908!important;
    color:#f7f4ed;
  }
  body.home-five section.accident-help.cinematic-ready::before{
    content:"";
    position:absolute;
    z-index:-3;
    inset:-5%;
    width:auto;
    height:auto;
    background:
      linear-gradient(90deg,rgba(7,9,8,.88) 0%,rgba(7,9,8,.64) 38%,rgba(7,9,8,.18) 72%,rgba(7,9,8,.4) 100%),
      linear-gradient(180deg,rgba(7,9,8,.08),rgba(7,9,8,.35) 65%,#070908 100%),
      var(--accident-image) center 53%/cover no-repeat;
    opacity:.85;
    filter:saturate(.8) contrast(1.08);
    transform:scale(1.06) translate3d(calc(var(--accident-pointer-x,0) * -10px),calc(var(--accident-pointer-y,0) * -7px),0);
    transition:transform .35s ease-out;
    pointer-events:none;
  }
  body.home-five section.accident-help.cinematic-ready::after{
    content:"";
    position:absolute;
    z-index:-2;
    inset:0;
    background:
      radial-gradient(circle at calc(72% + var(--accident-pointer-x,0) * 8%) calc(45% + var(--accident-pointer-y,0) * 6%),color-mix(in srgb,var(--orange) 23%,transparent),transparent 24%),
      repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),rgba(255,255,255,.028) calc(8.333% - 1px) 8.333%),
      linear-gradient(180deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:auto,auto,100% 72px;
    mask-image:linear-gradient(#000,rgba(0,0,0,.82) 76%,transparent);
    pointer-events:none;
  }
  body.home-five .accident-help.cinematic-ready .wrap{position:relative;z-index:2}
  body.home-five .accident-help.cinematic-ready .head{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.62fr);
    column-gap:clamp(70px,9vw,145px);
    align-items:end;
    max-width:none;
    margin:0;
  }
  body.home-five .accident-help.cinematic-ready .head .kicker{grid-column:1/-1;margin-bottom:22px}
  body.home-five .accident-help.cinematic-ready .head h2{
    max-width:9.8ch;
    margin:0;
    color:#f7f4ed;
    font-size:clamp(4.7rem,6.7vw,7.2rem);
    line-height:.79;
    letter-spacing:-.055em;
    text-transform:uppercase;
    text-shadow:0 24px 70px rgba(0,0,0,.58);
  }
  body.home-five .accident-help.cinematic-ready .head>p{
    max-width:39ch;
    margin:0 0 6px;
    padding:25px 0 3px 27px;
    border-left:1px solid color-mix(in srgb,var(--orange) 68%,transparent);
    color:#c4c9c5;
    font-size:1rem;
    line-height:1.72;
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-stage{
    position:relative;
    height:520px;
    margin-top:58px;
    perspective:1800px;
    transform-style:preserve-3d;
    pointer-events:none;
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-stage::before{
    content:"";
    position:absolute;
    left:3%;
    right:2%;
    bottom:8px;
    height:38%;
    border:1px solid color-mix(in srgb,var(--orange) 28%,transparent);
    background:linear-gradient(90deg,color-mix(in srgb,var(--orange) 12%,transparent),transparent 52%),repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.035) 80px),repeating-linear-gradient(0deg,transparent 0 49px,rgba(255,255,255,.03) 50px);
    box-shadow:0 0 85px color-mix(in srgb,var(--orange) 9%,transparent);
    transform:rotateX(69deg) translateZ(-85px);
    transform-origin:center bottom;
    pointer-events:none;
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-hud{
    position:absolute;
    z-index:20;
    left:22px;
    right:16px;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#aeb4af;
    font:650 .7rem/1 var(--f-m);
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-hud span{display:flex;align-items:center;gap:9px}
  body.home-five .accident-help.cinematic-ready .accident-cinema-hud span i{width:28px;height:1px;background:var(--orange);box-shadow:0 0 18px var(--orange)}
  body.home-five .accident-help.cinematic-ready .accident-cinema-hud b{color:#fff;font:inherit}
  body.home-five .accident-help.cinematic-ready .accident-cinema-hud strong{color:var(--orange);font:inherit}
  body.home-five .accident-help.cinematic-ready .accident-checklist{
    position:absolute;
    inset:42px 0 0;
    display:block;
    height:auto;
    margin:0;
    padding:0;
    list-style:none;
    transform:rotateX(var(--accident-tilt-x)) rotateY(var(--accident-tilt-y));
    transform-style:preserve-3d;
    pointer-events:none;
    transition:transform .22s ease-out;
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist::before{display:none}
  body.home-five .accident-help.cinematic-ready .accident-checklist li,
  body.home-five .accident-help.cinematic-ready .accident-checklist li:nth-child(even){
    position:absolute;
    z-index:calc(8 - var(--slot));
    top:calc(var(--slot) * 72px);
    right:1.5%;
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    align-items:center;
    width:39%;
    min-height:62px;
    margin:0;
    padding:14px 19px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
    border-radius:0;
    background:linear-gradient(105deg,rgba(20,24,22,.92),rgba(8,10,9,.64));
    box-shadow:0 19px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
    color:#f7f4ed;
    text-align:left;
    opacity:.66;
    cursor:pointer;
    transform:translate3d(calc(var(--slot) * 8px),0,var(--depth)) rotateY(-13deg);
    transform-origin:right center;
    transition:top .58s cubic-bezier(.16,1,.3,1),right .58s cubic-bezier(.16,1,.3,1),width .58s cubic-bezier(.16,1,.3,1),height .58s cubic-bezier(.16,1,.3,1),padding .58s cubic-bezier(.16,1,.3,1),opacity .32s ease,transform .58s cubic-bezier(.16,1,.3,1),border-color .3s ease,background .3s ease;
    pointer-events:none;
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist li:hover,
  body.home-five .accident-help.cinematic-ready .accident-checklist li:focus-visible{
    opacity:1;
    border-color:color-mix(in srgb,var(--orange) 65%,transparent);
    outline:none;
    transform:translate3d(-9px,0,18px) rotateY(-7deg);
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist li::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:2px;
    background:var(--orange);
    opacity:.18;
    box-shadow:0 0 24px var(--orange);
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist li::after{
    content:"";
    position:absolute;
    right:-32px;
    top:50%;
    width:100px;
    height:100px;
    border:1px solid color-mix(in srgb,var(--orange) 18%,transparent);
    border-radius:50%;
    transform:translateY(-50%);
    box-shadow:0 0 0 19px color-mix(in srgb,var(--orange) 3%,transparent),0 0 0 39px color-mix(in srgb,var(--orange) 2%,transparent);
    pointer-events:none;
  }
  body.home-five .accident-help.cinematic-ready .accident-step-hit{
    position:absolute;
    z-index:8;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    color:transparent;
    cursor:pointer;
    pointer-events:auto;
  }
  body.home-five .accident-help.cinematic-ready .accident-step-hit:focus{outline:none}
  body.home-five .accident-help.cinematic-ready .accident-step-hit::after{
    content:"↗";
    position:absolute;
    right:17px;
    top:50%;
    color:var(--orange);
    font:700 1rem/1 var(--f-d);
    opacity:.42;
    transform:translateY(-50%);
    transition:opacity .2s ease,transform .2s ease;
  }
  body.home-five .accident-help.cinematic-ready .accident-step-hit:hover::after,
  body.home-five .accident-help.cinematic-ready .accident-step-hit:focus-visible::after{opacity:1;transform:translate(3px,-50%)}
  body.home-five .accident-help.cinematic-ready .accident-checklist li:has(.accident-step-hit:focus-visible){
    opacity:1;
    border-color:var(--orange);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 24%,transparent),0 22px 54px rgba(0,0,0,.44);
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist .accident-no,
  body.home-five .accident-help.cinematic-ready .accident-checklist li:nth-child(even) .accident-no{
    position:relative;
    z-index:2;
    display:block;
    width:auto;
    height:auto;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:var(--orange);
    font:900 1.26rem/1 var(--f-d);
    text-align:left;
    text-shadow:0 0 20px color-mix(in srgb,var(--orange) 55%,transparent);
    transform:none;
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist li>div{position:relative;z-index:2;min-width:0}
  body.home-five .accident-help.cinematic-ready .accident-checklist h3{
    max-width:none;
    margin:0;
    color:#f7f4ed;
    font:780 1.02rem/1.15 var(--f-d);
    letter-spacing:-.015em;
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist p{display:none;margin:0;color:#c1c7c2}
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature{
    position:absolute;
    z-index:15;
    top:86px;
    left:1.5%;
    display:flex;
    align-items:flex-end;
    width:51%;
    height:342px;
    padding:42px 45px;
    overflow:hidden;
    border-color:color-mix(in srgb,var(--orange) 52%,transparent);
    border-style:solid;
    border-width:1px;
    background:
      linear-gradient(128deg,color-mix(in srgb,var(--orange) 16%,rgba(18,21,19,.96)),rgba(8,10,9,.91) 64%),
      rgba(8,10,9,.94);
    box-shadow:0 48px 110px rgba(0,0,0,.58),-16px 0 70px color-mix(in srgb,var(--orange) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.11);
    transform:translate3d(calc(var(--accident-pointer-x,0) * 8px),calc(var(--accident-pointer-y,0) * 6px),70px) rotateY(7deg) rotateX(-2deg);
    transform-origin:right center;
    transition:transform .22s ease-out,border-color .3s ease;
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:var(--orange);
    box-shadow:0 0 26px var(--orange);
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature::after{
    content:"";
    position:absolute;
    right:-74px;
    top:50%;
    width:280px;
    height:280px;
    border:1px solid color-mix(in srgb,var(--orange) 20%,transparent);
    border-radius:50%;
    box-shadow:0 0 0 34px color-mix(in srgb,var(--orange) 3%,transparent),0 0 0 68px color-mix(in srgb,var(--orange) 2%,transparent);
    opacity:.72;
    transform:translateY(-50%);
    pointer-events:none;
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature>span{
    position:relative;
    z-index:2;
    align-self:flex-start;
    flex:0 0 auto;
    width:95px;
    color:#fff;
    font:900 4.8rem/1 var(--f-d);
    letter-spacing:-.07em;
    text-shadow:0 0 42px color-mix(in srgb,var(--orange) 68%,transparent);
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature>div{
    position:relative;
    z-index:2;
    align-self:flex-end;
    margin:0 0 3px 20px;
    padding-left:28px;
    border-left:1px solid rgba(255,255,255,.13);
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature h3{
    max-width:14ch;
    margin:0;
    color:#fff;
    font:780 clamp(2rem,2.7vw,3rem)/.94 var(--f-d);
    line-height:.94;
    letter-spacing:-.035em;
  }
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature p{
    display:block;
    max-width:38ch;
    margin-top:18px;
    color:#c2c8c3;
    font-size:.95rem;
    line-height:1.65;
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist li.is-active,
  body.home-five .accident-help.cinematic-ready .accident-checklist li:nth-child(even).is-active{
    z-index:12;
    opacity:1;
    border-color:color-mix(in srgb,var(--orange) 72%,transparent);
    background:linear-gradient(105deg,color-mix(in srgb,var(--orange) 19%,rgba(20,24,22,.96)),rgba(8,10,9,.82));
    box-shadow:0 24px 58px rgba(0,0,0,.46),-10px 0 34px color-mix(in srgb,var(--orange) 11%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
    transform:translate3d(-15px,0,28px) rotateY(-5deg);
  }
  body.home-five .accident-help.cinematic-ready .accident-checklist li.is-active::before{width:4px;opacity:1}
  body.home-five .accident-help.cinematic-ready .accident-checklist li.is-active .accident-no,
  body.home-five .accident-help.cinematic-ready .accident-checklist li:nth-child(even).is-active .accident-no{color:#fff}
  body.home-five .accident-help.cinematic-ready .accident-actions{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:12px;
    margin-top:13px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  body.home-five .accident-help.cinematic-ready .accident-actions>span{justify-self:end}
}

@media (min-width:701px) and (max-width:1000px){
  body.home-five section.accident-help.cinematic-ready{min-height:920px;padding-top:126px}
  body.home-five .accident-help.cinematic-ready .head{grid-template-columns:1fr .58fr;column-gap:45px}
  body.home-five .accident-help.cinematic-ready .head h2{font-size:clamp(4rem,7.6vw,5.2rem)}
  body.home-five .accident-help.cinematic-ready .accident-checklist li,
  body.home-five .accident-help.cinematic-ready .accident-checklist li:nth-child(even){width:43%}
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature{width:54%;padding:36px 31px}
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature>span{width:77px;font-size:3.8rem}
}

@media (prefers-reduced-motion:reduce){
  body.home-five .accident-help.cinematic-ready::before,
  body.home-five .accident-help.cinematic-ready .accident-checklist,
  body.home-five .accident-help.cinematic-ready .accident-checklist li,
  body.home-five .accident-help.cinematic-ready .accident-cinema-feature{transition:none!important;transform:none!important}
}


/* Light photography requires light overlays and readable dark cards as one system. */
html[data-color-theme="legacy"] body.home-five section.accident-help{background:#fff!important;color:#111827!important}
@media (min-width:701px){
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready::before{
    background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.65) 38%,rgba(255,255,255,.05) 75%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(246,243,255,.15) 65%,#fff),var(--accident-image) center 53%/cover no-repeat;
    opacity:1;filter:none;
  }
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready::after{opacity:.3}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready :is(h2,h3,strong,b){color:#111827!important;text-shadow:none}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready :is(.head>p,.accident-checklist p,.accident-cinema-feature p,.accident-cinema-hud){color:#4b4659!important}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .head>p{padding:20px 24px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(71,42,135,.06)}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-checklist li,
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-checklist li:nth-child(even){background:linear-gradient(105deg,rgba(255,255,255,.97),rgba(246,243,255,.94))!important;border-color:rgba(111,71,255,.25)!important;box-shadow:0 12px 34px rgba(71,42,135,.08)!important;opacity:1}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-checklist li.is-active{background:linear-gradient(105deg,#eee7ff,#fff)!important;border-color:#6f47ff!important}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-cinema-feature{background:linear-gradient(128deg,rgba(237,231,255,.97),rgba(255,255,255,.98) 64%)!important;border-color:rgba(111,71,255,.45)!important;box-shadow:0 24px 65px rgba(71,42,135,.14)!important}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-cinema-feature>div{border-color:rgba(111,71,255,.2)}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-no,
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-checklist li:nth-child(even) .accident-no,
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-cinema-feature>span{border:0!important;background:transparent!important;color:#6f47ff!important;box-shadow:none!important;text-shadow:none}
  html[data-color-theme="legacy"] body.home-five section.accident-help.cinematic-ready .accident-actions{border-color:rgba(111,71,255,.2)}
}
/* Keep the same theme-specific image layer on narrow screens and in the OS. */
@media(max-width:700px){
  html body.home-five section.accident-help{isolation:isolate;overflow:hidden}
  html body.home-five section.accident-help::before{content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;transform:none;pointer-events:none;background:linear-gradient(180deg,rgba(7,9,8,.86),rgba(7,9,8,.72)),var(--accident-image) 65% center/cover no-repeat}
  html[data-color-theme="legacy"] body.home-five section.accident-help::before{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.74)),var(--accident-image) 65% center/cover no-repeat}
}
