.tm-din500{margin:18px 0 22px;color:#10233b}
.tm-din500-media{position:relative;aspect-ratio:4/3;background:#fff;isolation:isolate}
.tm-din500 .tm-din500-media img,.tm-din500 .tm-din500-video{display:block;width:100%;height:100%;max-width:none;object-fit:contain;border:0;border-radius:0;box-shadow:none;margin:0}
/* Let the in-flow image size its picture; Safari resolves a percentage height differently. */
.tm-din500-home{display:block;width:100%;height:auto}
.tm-din500 .tm-din500-detail,.tm-din500-video,.tm-din500-hotspots{position:absolute;inset:0}
.tm-din500 .tm-din500-detail[hidden]{display:none}
.tm-din500-video{opacity:0;pointer-events:none;transition:opacity .14s ease}
.tm-din500.is-playing .tm-din500-video,.tm-din500.is-preview .tm-din500-video{opacity:1}
.tm-din500-hotspots{visibility:hidden;pointer-events:none}
.tm-din500.is-ready:not(.is-active) .tm-din500-hotspots{visibility:visible}
.tm-din500-hotspot{position:absolute;cursor:pointer;pointer-events:auto}
/* Keep visible markers above neighboring transparent tap areas on narrow phones. */
.tm-din500-marker{position:absolute;z-index:1;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.94);color:#19477b;border:1px solid #19477b80;transform:translate(-50%,-50%);transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .18s}
.tm-din500-marker:before,.tm-din500-marker:after{content:"";position:absolute;background:currentColor;left:50%;top:50%;width:8px;height:1px;transform:translate(-50%,-50%)}
.tm-din500-marker:after{transform:translate(-50%,-50%) rotate(90deg)}
/* Marker centers from the user-saved DIN500-N position editor layout. */
.tm-din500-hotspot--controller{left:26.72922%;top:26.91781%;width:29%;height:37%}
.tm-din500-hotspot--sensor{left:calc(52.27304% - 22px);top:calc(87.92064% - 22px);width:44px;height:44px}
.tm-din500-hotspot--adapter{left:calc(81.23111% - 22px);top:calc(56.35550% - 22px);width:44px;height:44px}
.tm-din500-hotspot--dry-contact{left:calc(61.76042% - 22px);top:calc(81.22866% - 22px);width:44px;height:44px}
.tm-din500-hotspot--gland{left:calc(43.22774% - 22px);top:calc(63.37806% - 22px);width:44px;height:44px}
.tm-din500-hotspot:after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border:1px solid #19477b;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .24s;pointer-events:none}
.tm-din500-hotspot.is-highlighted .tm-din500-marker{transform:translate(-50%,-50%) scale(1.15);border-color:#19477b}
.tm-din500-hotspot.is-highlighted:after{transform:translate(-50%,-50%) scale(1);opacity:.35}
.tm-din500-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;padding:8px 0 0;visibility:hidden}
.tm-din500.is-ready .tm-din500-choices{visibility:visible}
.tm-din500 .tm-din500-choice{position:relative;min-height:44px;padding:8px 11px;border:1px solid #e2e8ef;border-radius:22px;background:transparent;color:#536174;font-family:inherit;font-size:12px;font-weight:500;line-height:1.35;box-shadow:none;cursor:pointer;touch-action:manipulation;transition:background .12s,color .12s,border-color .12s}
.tm-din500 .tm-din500-choice.is-highlighted,.tm-din500 .tm-din500-choice[aria-pressed="true"]{background:#f2f6fa;border-color:#dce5ef;color:#19477b}
.tm-din500 .tm-din500-choice:focus-visible{outline:2px solid #19477b;outline-offset:2px}
.tm-din500.is-loading .tm-din500-choice[aria-pressed="true"]{border-style:dotted}
.tm-din500-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(hover:hover) and (pointer:fine){.tm-din500 .tm-din500-choice:hover{background:#f2f6fa;color:#19477b}}
@media(hover:none),(pointer:coarse){.tm-din500-hotspot{min-width:44px;min-height:44px}}
@media(max-width:480px){.tm-din500-choices{column-gap:2px;padding-top:6px}.tm-din500 .tm-din500-choice{flex-basis:calc((100% - 4px)/3);padding:8px 5px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.tm-din500-video,.tm-din500-marker,.tm-din500-hotspot:after,.tm-din500 .tm-din500-choice{transition:none}.tm-din500-hotspot.is-highlighted .tm-din500-marker{transform:translate(-50%,-50%)}}

@media(prefers-reduced-motion:no-preference){
 @keyframes din500-invite-marker{0%,100%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.12)}}
 @keyframes din500-invite-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}30%{opacity:.4}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
 .tm-din500.is-inviting:not(.is-active) .tm-din500-marker{animation:din500-invite-marker .9s ease-in-out both;animation-delay:var(--invite-delay,0s)}
 .tm-din500.is-inviting:not(.is-active) .tm-din500-hotspot:after{animation:din500-invite-ring .9s ease-out both;animation-delay:var(--invite-delay,0s)}
 .tm-din500-hotspot:nth-child(2){--invite-delay:.1s}
 .tm-din500-hotspot:nth-child(3){--invite-delay:.2s}
 .tm-din500-hotspot:nth-child(4){--invite-delay:.3s}
 .tm-din500-hotspot:nth-child(5){--invite-delay:.4s}
}

.tm-din500 .tm-din500-video.is-held{z-index:2;opacity:1;transition:none}

.tm-din500.is-continuing .tm-din500-video{opacity:1;transition:none}