.mmhp-lp-mitnehmer .mmhp-hk-buehne { position: relative; isolation: isolate; }
.mmhp-lp-mitnehmer .mmhp-hk-feld {
  position: relative;
  width: 100%;
  
  grid-column: 1 / -1;
}
.mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-svg { -webkit-mask-image: none; mask-image: none; overflow: visible; }
@media (max-width: 700px) {
  .mmhp-lp-mitnehmer .mmhp-hk-feld { aspect-ratio: 100 / 120; margin-top: 25px; }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk,
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-ui {
    --hk-w: 169%;
    --hk-x: 53%;
    --hk-top: -2%;
    --hk-mark-s: 0.34;
    --hk-lupe-x: 380px;
    --hk-lupe-y: 845px;
  }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mk-lupe {
    transform-box: fill-box; transform-origin: 0 0;
    transform: translate(var(--hk-lupe-x), var(--hk-lupe-y)) scale(1.32);
  }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-ui .mmhp-hk-info { left: 42.58%; top: 75.84%; }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-again {
    right: auto; bottom: auto;
    left: 86%; top: 93%; transform: translate(-86%, -93%);
  }
}
@media (min-width: 701px) and (max-width: 960px) {
  .mmhp-lp-mitnehmer .mmhp-hk-feld { aspect-ratio: 100 / 83; margin-top: 40px; }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk,
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-ui {
    --hk-w: 100%;
    --hk-x: 50%;
    --hk-top: 0%;
    --hk-mark-s: 0.50;
    --hk-lupe-x: 600px;
    --hk-lupe-y: 996px;
  }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mk-lupe {
    transform-box: fill-box; transform-origin: 0 0;
    transform: translate(var(--hk-lupe-x), var(--hk-lupe-y)) scale(1);
  }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-ui .mmhp-hk-info { left: 53.07%; top: 85.92%; }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-again {
    right: auto; bottom: auto;
    left: 100%; top: 100%; transform: translate(-100%, -100%);
  }
}
@media (min-width: 961px) {
  .mmhp-lp-mitnehmer .mmhp-hk-feld { aspect-ratio: 100 / 123; margin-top: 40px; }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk,
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-ui {
    --hk-w: 148%;
    --hk-x: 50%;
    --hk-top: 0%;
    --hk-mark-s: 0.50;
    --hk-lupe-x: 292px;
    --hk-lupe-y: 918px;
  }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mk-lupe {
    transform-box: fill-box; transform-origin: 0 0;
    transform: translate(var(--hk-lupe-x), var(--hk-lupe-y)) scale(1.41);
  }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-ui .mmhp-hk-info { left: 37.89%; top: 82.24%; }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-again {
    right: auto; bottom: auto;
    left: 74%; top: 82%; transform: translate(-74%, -82%);
    
    padding: 15px 20px;
    gap: 11px;
    font-size: 13.5px;
    letter-spacing: .03em;
  }
  .mmhp-lp-mitnehmer .mmhp-hk-feld .mmhp-hk-again svg { width: 20px; height: 20px; }
}
.mmhp-lp-mitnehmer .hero { position: relative; isolation: isolate; }
.mmhp-lp-mitnehmer .hero > .wrap { position: relative; z-index: 1; }
.mmhp-hk,
.mmhp-hk-ui {
  
  --hk-t-draw: 2.4s;    
  --hk-t-morph: 2.2s;   
  --hk-t-read: 6s;      
  --hk-t-replay: 2.1s;  
  --hk-t-after: 1.5s;   
  
  --hk-grow: 1.0677;
  
  
  --hk-w: min(237vw, 1180px);
  --hk-x: 49.7%;
  
  --hk-top: calc(98px + clamp(60px, 9vw, 120px));
  
  --hk-lupe-x: 600px;
  --hk-lupe-y: 996px;
}
.mmhp-hk,
.mmhp-hk-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mmhp-hk { z-index: 0; overflow: hidden; }
.mmhp-hk-ui { z-index: 2; }
.mmhp-hk-box {
  position: absolute;
  left: calc(var(--hk-x) - var(--hk-w) / 2);
  top: var(--hk-top);
  width: var(--hk-w);
  
  aspect-ratio: 1500 / 1250;
  pointer-events: none;
}
.mmhp-hk-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4) 8%, #000 19%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4) 8%, #000 19%);
}
.mmhp-hk .lupe-geo { transform: rotate(-60deg); transform-origin: 0 0; }
.mmhp-hk .mk-detailmark { transform: translate(0, -300px); }
.mmhp-hk .mk-detailmark circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--hk-mark-s, 1));
  vector-effect: non-scaling-stroke;
}
.mmhp-hk .mk-alabel { transform: translate(114px, -110px); }
.mmhp-hk .mk-labels,
.mmhp-hk .mk-dia { display: none; }
@media (min-width: 701px) {
  .mmhp-hk,
  .mmhp-hk-ui {
    
    --hk-col: min(1120px, 100vw);
    --hk-w: calc(var(--hk-col) * 1.27);
    --hk-x: calc(50% + var(--hk-col) * .196);
    --hk-top: clamp(8px, 1.4vw, 26px);
    --hk-lupe-x: 30px;
    --hk-lupe-y: 700px;
  }
  .mmhp-hk-svg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .28) 12%, #000 32%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .28) 12%, #000 32%);
  }
  
  .mmhp-hk .mk-detailmark { transform: none; }
  .mmhp-hk .mk-alabel { transform: none; }
  
  .mmhp-hk .lupe-geo { transform: rotate(60deg); }
  .mmhp-hk .mk-labels,
  .mmhp-hk .mk-dia { display: block; }
}
.mmhp-hk .mk-lupe { transform: translate(var(--hk-lupe-x), var(--hk-lupe-y)); }
.mmhp-hk .dw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mmhp-hk .dw-fade { opacity: 1; }
.mmhp-hk .tf-spalt,
.mmhp-hk .tf-flanke,
.mmhp-hk .tf-hex { transform-box: fill-box; }
.mmhp-hk .tf-spalt { transform-origin: 100% 50%; }  
.mmhp-hk .tf-hex { transform-origin: center; }      
.mmhp-hk .tf-flanke { transform: translateX(36px); }
.mmhp-hk .tf-spalt { transform: scaleX(.1); fill: rgba(199, 255, 63, .22); }
.mmhp-hk .tf-hex { transform: scale(var(--hk-grow)); }
.mmhp-hk .tf-serie { opacity: 0; }
.mmhp-hk .tf-mmhp { opacity: 1; }
.mmhp-hk .mk-tenx { display: none; }
.mmhp-hk[data-hk="on"] .mk-tenx { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .mmhp-hk[data-hk="on"] .dw { stroke-dashoffset: 1; }
  .mmhp-hk[data-hk="on"] .dw-fade { opacity: 0; }
  .mmhp-hk[data-hk="on"] .tf-flanke { transform: none; }
  .mmhp-hk[data-hk="on"] .tf-spalt { transform: none; fill: rgba(248, 113, 113, .20); }
  .mmhp-hk[data-hk="on"] .tf-hex { transform: none; }
  .mmhp-hk[data-hk="on"] .tf-serie { opacity: 1; }
  .mmhp-hk[data-hk="on"] .tf-mmhp { opacity: 0; }
  
  .mmhp-hk[data-hk="on"].is-drawing .dw { animation: mmhp-hk-draw .85s cubic-bezier(.45, .05, .35, 1) forwards; }
  .mmhp-hk[data-hk="on"].is-drawing .dw-fade { animation: mmhp-hk-draw .6s ease forwards; }
  .mmhp-hk[data-hk="on"].is-drawing .d1 { animation-delay: 0s; }
  .mmhp-hk[data-hk="on"].is-drawing .d2 { animation-delay: .25s; }
  .mmhp-hk[data-hk="on"].is-drawing .d3 { animation-delay: .5s; }
  .mmhp-hk[data-hk="on"].is-drawing .d4 { animation-delay: .8s; }
  .mmhp-hk[data-hk="on"].is-drawing .d5 { animation-delay: 1.1s; }
  .mmhp-hk[data-hk="on"].is-drawing .d6 { animation-delay: 1.35s; }
  .mmhp-hk[data-hk="on"].is-drawing .d7 { animation-delay: 1.55s; }
  
  .mmhp-hk[data-hk="on"].is-drawing .tf-flanke {
    animation: mmhp-hk-draw .85s cubic-bezier(.45, .05, .35, 1) 1.55s forwards,
               mmhp-hk-flanke 1s cubic-bezier(.5, 0, .2, 1) 2.9s forwards;
  }
  .mmhp-hk[data-hk="on"].is-drawing .tf-spalt { animation: mmhp-hk-spalt 1s cubic-bezier(.5, 0, .2, 1) 2.9s forwards; }
  .mmhp-hk[data-hk="on"].is-drawing .tf-hex {
    animation: mmhp-hk-draw .85s cubic-bezier(.45, .05, .35, 1) .8s forwards,
               mmhp-hk-hex 1s cubic-bezier(.5, 0, .2, 1) 2.9s forwards;
  }
  .mmhp-hk[data-hk="on"].is-drawing .tf-serie { animation: mmhp-hk-weg .45s ease 2.9s forwards; }
  .mmhp-hk[data-hk="on"].is-drawing .tf-mmhp { animation: mmhp-hk-her 1.1s ease 3.5s forwards; }
  
  .mmhp-hk[data-hk="on"].is-replay .dw { stroke-dashoffset: 0; }
  .mmhp-hk[data-hk="on"].is-replay .dw-fade { opacity: 1; }
  .mmhp-hk[data-hk="on"].is-replay .tf-flanke { animation: mmhp-hk-flanke 1s cubic-bezier(.5, 0, .2, 1) .4s forwards; }
  .mmhp-hk[data-hk="on"].is-replay .tf-spalt { animation: mmhp-hk-spalt 1s cubic-bezier(.5, 0, .2, 1) .4s forwards; }
  .mmhp-hk[data-hk="on"].is-replay .tf-hex { animation: mmhp-hk-hex 1s cubic-bezier(.5, 0, .2, 1) .4s forwards; }
  .mmhp-hk[data-hk="on"].is-replay .tf-serie { animation: mmhp-hk-weg .45s ease .4s forwards; }
  .mmhp-hk[data-hk="on"].is-replay .tf-mmhp { animation: mmhp-hk-her 1.1s ease 1s forwards; }
}
@keyframes mmhp-hk-draw { to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mmhp-hk-flanke { to { transform: translateX(36px); } }
@keyframes mmhp-hk-spalt { to { transform: scaleX(.1); fill: rgba(199, 255, 63, .22); } }
@keyframes mmhp-hk-hex { to { transform: scale(var(--hk-grow)); } }
@keyframes mmhp-hk-weg { to { opacity: 0; } }
@keyframes mmhp-hk-her { 0% { opacity: 0; } 55% { opacity: 1; } 70% { opacity: .35; } 85% { opacity: 1; } 100% { opacity: 1; } }
.mmhp-hk-ui .mmhp-hk-info {
  position: absolute;
  left: 53.07%;   
  top: 85.92%;    
  transform: translate(-50%, -50%);
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid rgba(199, 255, 63, .7);
  border-radius: 50%;
  background: none;
  color: #c7ff3f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .18s ease, color .18s ease;
}
.mmhp-hk-ui .mmhp-hk-info::before {
  
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.mmhp-hk-ui .mmhp-hk-info:hover { border-color: #c7ff3f; }
.mmhp-hk-ui .mmhp-hk-info:focus-visible { outline: 2px solid #c7ff3f; outline-offset: 3px; }
.mmhp-hk-ui .mmhp-hk-info[hidden] { display: none; }
@media (min-width: 701px) {
  .mmhp-hk-ui .mmhp-hk-info {
    left: 15.07%;  
    top: 62.24%;   
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
.mmhp-hk-ui .mmhp-hk-again {
  position: absolute;
  
  right: calc((100% - min(1120px, 100%)) / 2 + clamp(20px, 4vw, 48px));
  
  top: calc(var(--hk-top) + var(--hk-w) * .616 - 22px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 44px;
  padding: 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(14, 14, 13, .82);
  color: #c7ff3f;
  border: 1px solid rgba(199, 255, 63, .4);
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: border-color .18s ease, background .18s ease;
}
.mmhp-hk-ui .mmhp-hk-again[hidden] { display: none; }
.mmhp-hk-ui .mmhp-hk-again:hover { border-color: #c7ff3f; background: rgba(10, 10, 9, .9); }
.mmhp-hk-ui .mmhp-hk-again:focus-visible { outline: 2px solid #c7ff3f; outline-offset: 3px; }
.mmhp-hk-ui .mmhp-hk-again svg { width: 15px; height: 15px; flex: none; }
.mmhp-hk-ui .mmhp-hk-again span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 701px) {
  .mmhp-hk-ui .mmhp-hk-again {
    
    top: calc(var(--hk-top) + var(--hk-w) * .40 - 22px);
    padding: 11px 16px;
  }
  .mmhp-hk-ui .mmhp-hk-again span {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; white-space: nowrap;
  }
}
.mmhp-hk-ui .mmhp-hk-tip {
  pointer-events: auto;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  
  margin: auto;
  padding: 0;
  border: 1px solid rgba(199, 255, 63, .28);
  background: #1a1a19;
  color: rgba(255, 255, 255, .7);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.mmhp-hk-ui .mmhp-hk-tip::backdrop { background: rgba(8, 8, 7, .62); }
.mmhp-hk-ui .mmhp-hk-tipin { position: relative; padding: 18px 20px 20px; }
.mmhp-hk-ui .mmhp-hk-tiphead {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #f0f0f0;
  padding-right: 30px;
}
.mmhp-hk-ui .mmhp-hk-tipin p {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
  max-width: 62ch;
}
.mmhp-hk-ui .mmhp-hk-tipclose {
  position: absolute;
  top: 6px;
  right: 8px;
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .55);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mmhp-hk-ui .mmhp-hk-tipclose:hover { color: #f0f0f0; }
.mmhp-hk-ui .mmhp-hk-tipclose:focus-visible { outline: 2px solid #c7ff3f; outline-offset: 2px; }
@media(max-width:700px){
  .mmhp-lp-mitnehmer .mmhp-hk,
  .mmhp-lp-mitnehmer .mmhp-hk-ui{
    --hk-w: min(237vw, 1180px);
    --hk-top: calc(244px + clamp(60px, 9vw, 120px));
    --hk-mark-s: 0.50;
    --hk-lupe-x: 747px;
    --hk-lupe-y: 2px;
  }
  .mmhp-lp-mitnehmer .mk-lupe{
    
    transform-box: fill-box;
    transform-origin: 0 0;
    transform: translate(var(--hk-lupe-x), var(--hk-lupe-y)) scale(0.80);
  }
  .mmhp-lp-mitnehmer .mmhp-hk-ui .mmhp-hk-info{
    left: 60.27%;   
    top:   5.16%;   
  }
  
  .mmhp-lp-mitnehmer .mmhp-hk-svg{
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  
  .mmhp-lp-mitnehmer .mmhp-hk-ui .mmhp-hk-again{
    top: calc(var(--hk-top) + var(--hk-w) * .09 - 22px);
  }
}