*{box-sizing:border-box;margin:0;padding:0}
body,html{background:#111;font-family:'Montserrat',sans-serif;height:100%;overflow:hidden}
/* ── BASE ── */
deck-stage>section{font-family:'Montserrat',sans-serif;background:#f8f5f0;overflow:hidden;position:relative}
/* ── CHAPTER OPENER ── */
.co{width:100%;height:100%;background:var(--cc,#2e7d32);display:flex;flex-direction:column;justify-content:center;padding:110px 140px;position:relative;overflow:hidden}
.co::before{content:'';position:absolute;right:-80px;top:-80px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,0.07)}
.co::after{content:'';position:absolute;right:140px;bottom:-130px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,0.04)}
.co-logo{position:absolute;top:40px;right:60px;height:120px;width:auto;opacity:0.95;animation:fadeIn 0.8s ease-in-out}@keyframes fadeIn{from{opacity:0}to{opacity:0.95}}
.co-n{font-size:190px;font-weight:900;color:rgba(255,255,255,0.13);line-height:1;margin-bottom:-10px}
.co-t{font-size:82px;font-weight:900;color:#fff;line-height:1.1}
.co-s{font-size:28px;font-weight:500;color:rgba(255,255,255,0.7);margin-top:28px}
/* ── CONTENT SLIDE ── */
.sl{width:100%;height:100%;padding:72px 110px 72px 144px;display:flex;flex-direction:column;position:relative}
.sl::before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--cc,#2e7d32)}
.ribbon{position:absolute;top:36px;right:60px;background:var(--cc,#2e7d32);color:#fff;font-size:20px;font-weight:700;letter-spacing:.1em;padding:7px 20px;border-radius:999px;opacity:.85;text-transform:uppercase}
.kk{font-size:24px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--cc,#2e7d32);margin-bottom:14px}
.sh{font-size:68px;font-weight:900;color:#3e2723;line-height:1.1;margin-bottom:24px}
.sh2{font-size:48px;font-weight:800;color:#3e2723;line-height:1.15;margin-bottom:20px}
.sh3{font-size:36px;font-weight:700;color:#3e2723;line-height:1.2}
.sb{font-size:30px;font-weight:400;color:#6d4c41;line-height:1.6}
.hi{color:var(--cc,#2e7d32)}
.big{font-size:170px;font-weight:900;color:var(--cc,#2e7d32);line-height:1}
/* ── LISTS ── */
.lst{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:8px}
.lst li{font-size:30px;font-weight:500;color:#3e2723;padding-left:30px;position:relative;line-height:1.4}
.lst li::before{content:'';position:absolute;left:0;top:14px;width:10px;height:10px;border-radius:50%;background:var(--cc,#2e7d32)}
/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:24px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;margin-top:24px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:24px}
.g3-ch{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px;flex:1;align-content:center}
.ch-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px;border-radius:12px;background:#fff;border:none;transition:transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.ch-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.ch-card.ch1{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%)}
.ch-card.ch2{background:linear-gradient(135deg,#f3e5f5 0%,#e1bee7 100%)}
.ch-card.ch3{background:linear-gradient(135deg,#ffe0b2 0%,#ffcc80 100%)}
.ch-card.ch4{background:linear-gradient(135deg,#ffcdd2 0%,#ef9a9a 100%)}
.ch-card.ch5{background:linear-gradient(135deg,#c8e6c9 0%,#a5d6a7 100%)}
.ch-num{font-size:64px;font-weight:900;color:#3e2723;opacity:0.3;margin-bottom:12px}
.ch-title{font-size:28px;font-weight:700;color:#3e2723;line-height:1.3}
.gr-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:52px 40px;border-radius:12px;background:#fff;border:none;transition:transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.08);min-height:280px;justify-content:center}
.gr-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.gr-card.gr1{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%)}
.gr-card.gr2{background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%)}
.gr-card.gr3{background:linear-gradient(135deg,#f3e5f5 0%,#e1bee7 100%)}
.gr-num{font-size:76px;font-weight:900;color:#1565c0;opacity:0.25;margin-bottom:16px}
.gr-title{font-size:32px;font-weight:700;color:#3e2723;line-height:1.3;margin-bottom:14px}
.gr-desc{font-size:26px;color:#6d4c41;line-height:1.5}
.sc-card{padding:48px 36px;border-radius:12px;border:none;transition:transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.08);min-height:240px;display:flex;flex-direction:column;justify-content:center}
.sc-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.sc-card.sc-bad{background:linear-gradient(135deg,#ffcdd2 0%,#ef9a9a 100%)}
.sc-card.sc-good{background:linear-gradient(135deg,#c8e6c9 0%,#a5d6a7 100%)}
.sc-title{font-size:28px;font-weight:700;margin-bottom:16px;line-height:1.3}
.sc-text{font-size:26px;color:#3e2723;line-height:1.6}
.warn-card{background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%);border:none;border-radius:12px;padding:48px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;box-shadow:0 8px 24px rgba(230, 81, 0, 0.15);min-height:280px}
.warn-icon{font-size:96px;margin-bottom:20px}
.warn-title{font-size:32px;font-weight:700;color:#3e2723;line-height:1.3;margin-bottom:16px}
.warn-desc{font-size:26px;color:#6d4c41;line-height:1.6}
.psa-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px;border-radius:12px;border:none;transition:transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.08);min-height:260px;justify-content:center}
.psa-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.psa-card.psa1{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%)}
.psa-card.psa2{background:linear-gradient(135deg,#f3e5f5 0%,#e1bee7 100%)}
.psa-card.psa3{background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%)}
.psa-card.psa4{background:linear-gradient(135deg,#f1f8e9 0%,#dcedc8 100%)}
.psa-emoji{font-size:96px;margin-bottom:16px}
.psa-title{font-size:30px;font-weight:700;color:#3e2723;line-height:1.3}
.hand-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px;border-radius:12px;border:none;transition:transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.08);min-height:200px;justify-content:center}
.hand-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.hand-icon{font-size:68px;margin-bottom:12px}
.hand-title{font-size:24px;font-weight:700;color:#3e2723;line-height:1.3;margin-bottom:8px}
.hand-desc{font-size:22px;color:#6d4c41;line-height:1.5}
.shoe-card{display:flex;flex-direction:column;padding:36px 24px;border-radius:12px;border:none;transition:transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.shoe-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.shoe-class{font-size:48px;font-weight:900;color:#fff;margin-bottom:12px}
.shoe-desc{font-size:22px;color:#fff;line-height:1.5;opacity:0.95}
.gcol{display:flex;flex-direction:column;gap:16px}
/* ── CARDS ── */
.card{background:#fff;border-radius:16px;padding:28px 24px;border:1.5px solid #e0d6c9}
.card-l{background:#fff;border-radius:14px;padding:24px 24px 24px 72px;border:1.5px solid #e0d6c9;position:relative}
.cn{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:38px;font-weight:900;color:var(--cc,#2e7d32)}
.ct{font-size:26px;font-weight:700;color:#3e2723;line-height:1.2}
.cb{font-size:24px;color:#6d4c41;line-height:1.45;margin-top:8px}
.c-icon{font-size:42px;margin-bottom:10px}
/* ── INFO / WARN ── */
.warn{background:#fff3f3;border:2px solid #f5c6c6;border-radius:14px;padding:20px 24px}
.warn .ct{color:#c62828}.warn .cb{color:#b71c1c}
.info{background:#e8f5e9;border:2px solid #c8e6c9;border-radius:14px;padding:20px 24px}
.info .ct{color:#2e7d32}.info .cb{color:#1b5e20}
/* ── STEPS / CHAIN ── */
.steps{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.step{display:flex;align-items:flex-start;gap:22px}
.sn{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:var(--cc,#2e7d32);color:#fff;font-size:24px;font-weight:900;display:flex;align-items:center;justify-content:center}
.st{flex:1}.st-t{font-size:28px;font-weight:700;color:#3e2723}.st-b{font-size:24px;color:#6d4c41;line-height:1.5;margin-top:4px}
.chain{display:flex;align-items:center;gap:0;margin-top:36px}
.cbox{flex:1;background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%);border-radius:12px;padding:32px 16px;border:none;text-align:center;transition:transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.08);display:flex;flex-direction:column;justify-content:center}
.cbox:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.cn2{font-size:56px;font-weight:900;color:#1565c0;margin-bottom:8px}
.ct2{font-size:26px;font-weight:700;color:#3e2723;line-height:1.4}
.carr{font-size:48px;color:#1565c0;padding:0 12px;flex-shrink:0;opacity:0.6;font-weight:900}
/* ── GHS ── */
.ghs-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 100px;flex:1;background:#fff;min-height:0}
.ghs-item{display:flex;flex-direction:column;align-items:center;gap:14px;justify-content:center}
.ghs-frame{width:130px;height:130px;background:transparent;transform:rotate(0deg);border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ghs-frame svg{transform:rotate(-45deg);width:78px;height:78px}
.ghs-n{font-size:24px;font-weight:700;color:#3e2723;text-align:center}
/* ── SPLIT ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;height:100%;padding:72px 110px 72px 144px;position:relative}
.split::before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--cc,#2e7d32)}
/* ── PULSE anim for CPR ── */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.pulse{animation:pulse 0.7s ease-in-out infinite}
/* ── ANIMATIONS ── */
.fu{opacity:1;transform:translateY(0);transition:opacity .55s ease,transform .55s ease}
.fi{opacity:1;transition:opacity .6s ease}
section.is-active .fu,section.is-active .fi{opacity:1;transform:translateY(0)}
.d1{transition-delay:.15s}.d2{transition-delay:.3s}.d3{transition-delay:.45s}
.d4{transition-delay:.6s}.d5{transition-delay:.75s}.d6{transition-delay:.9s}
.d7{transition-delay:1.05s}.d8{transition-delay:1.2s}.d9{transition-delay:1.35s}
/* ── UTIL ── */
.row{display:flex;gap:28px;align-items:flex-start}
.mt1{margin-top:14px}.mt2{margin-top:26px}.mt3{margin-top:40px}
.flex1{flex:1}.small{font-size:22px}.center{text-align:center}
/* ── FOOTER ── */
deck-stage>section::after{content:'Diese Videoschuldung zur internen Nutzung durch Mitarbeitende der Janning Group. © 2026 • Janning Group • E-Mail info@janning-group.de';position:absolute;bottom:16px;right:32px;font-size:14px;color:rgba(0,0,0,0.3);font-weight:500;max-width:420px;text-align:right;line-height:1.4}
/* ── PLAY BUTTON (desktop) ── */
#deck-play-btn{position:fixed;bottom:32px;left:20%;padding:12px 28px;background:#FFC107;color:#fff;border:none;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;z-index:100;box-shadow:0 4px 12px rgba(183,28,28,0.4);transition:all 0.3s ease}
/* ── FULLSCREEN MODE (WHEN PLAYING) ── */
body.deck-fullscreen .rail{display:none!important}
body.deck-fullscreen .overlay{display:none!important}
body.deck-fullscreen .ctxmenu{display:none!important}
body.deck-fullscreen nav{display:none!important}
body.deck-fullscreen .menu{display:none!important}
/* ── GLOBAL CONTROLS BAR ── */
.deck-mobile-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 12px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2147483500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.deck-mobile-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.deck-mobile-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}
.deck-mobile-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.deck-back-original {
    display: none !important;
}
.deck-mobile-btn svg { width: 22px; height: 22px; }
.deck-play-btn {
    background: #FFC107 !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 12px rgba(183, 28, 28, 0.4);
    cursor: pointer;
}
.deck-rotate-btn { position: relative; }
/* Rotate button: show landscape icon by default, swap when in portrait fullscreen */
body.deck-landscape-mode .rotate-icon-landscape { display: none; }
body.deck-landscape-mode .rotate-icon-por { display: block; }
/* Hamburger icon swap when rail is visible */
.deck-mobile-btn[data-rail-open] .icon-hamburger { display: none; }
.deck-mobile-btn:not([data-rail-open]) .icon-close { display: none; }
/* Hide the standalone desktop play button globally now */
#deck-play-btn { display: none !important; }

/* ── MOBILE FULLSCREEN / LAYOUT RESET ── */
@media(max-width:768px){
  body{margin:0!important;padding:0!important;width:100%!important;height:100vh!important;overflow:hidden!important;background:#000!important}
  /* Hide page elements on mobile except player, controls and overlays */
  body>*:not(deck-stage):not(.deck-mobile-controls):not(.rotate-device-overlay){display:none!important}
  deck-stage{display:block!important;width:100vw!important;height:100vh!important;margin:0!important;padding:0!important}
  deck-stage>section{width:100vw!important;height:100vh!important;margin:0!important;padding:0!important}
}

body.deck-fullscreen .deck-mobile-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}
body.deck-fullscreen.deck-controls-visible .deck-mobile-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── ROTATE DEVICE OVERLAY (UX helper) ── */
.rotate-device-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2147483600; /* Above mobile controls */
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rotate-device-overlay.active {
  display: flex;
  opacity: 1;
}
.rotate-overlay-content {
  text-align: center;
  padding: 24px;
}
.phone-rotate-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  animation: phoneRotate 2.5s ease-in-out infinite;
}
.phone-rotate-icon svg {
  width: 100%;
  height: 100%;
  stroke: #FFC107;
}
@keyframes phoneRotate {
  0% {
    transform: rotate(0deg);
  }
  30%, 70% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.rotate-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 280px;
  margin: 0 auto;
}