/* Offline-PWA-Ergänzungen zur bestehenden Routes-Manager-Startseite */
.offline-icon { display:inline-block; font-weight:800; font-style:normal; line-height:1; }
.card-icon .offline-icon {font-size:25px}
.demo-content { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; padding:12px 18px 15px; background:#edf3ef; gap:10px; }
.step-bar {width:min(100%,1220px); display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:50px;}
.step-kicker {font-size:11px; color:#4c7944; font-weight:850; text-transform:uppercase; letter-spacing:.11em}
.step-instruction {font-size:clamp(14px,1.5vw,19px); font-weight:740; color:#1d3431; margin-top:3px}
.step-progress {display:flex;gap:7px}
.step-progress span {width:27px;height:7px;border-radius:20px;background:#c8d8ce}
.step-progress span.active {background:#64a936}
.screenshot-frame {position:relative; width:min(100%,1220px,calc((100dvh - 245px) * 16 / 9)); aspect-ratio:16/9; border:1px solid #cad8cf; border-radius:13px; box-shadow:0 15px 35px #162d2524; overflow:hidden; background:white; margin:auto 0; }
.screenshot-frame img {width:100%;height:100%;display:block;object-fit:contain;user-select:none;-webkit-user-select:none;}
.hotspot {position:absolute; left:85%;top:18%; width:10%;height:9%;transform:translate(-50%,-50%);border:3px solid #70c93b;border-radius:11px;background:#93db4750;box-shadow:0 0 0 4px #ffffffaa,0 0 0 8px #5da9344a;cursor:pointer;touch-action:manipulation;z-index:5;min-width:46px;min-height:38px;}
.hotspot-pulse {position:absolute;inset:-6px;border:2px solid #76cb42;border-radius:14px;animation:hotspotPulse 1.9s ease-out infinite;pointer-events:none}
.hotspot-label {position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#1e3831;color:#fff;padding:8px 12px;border-radius:8px;font-size:clamp(10px,1.15vw,15px);font-weight:750;box-shadow:0 5px 15px #0003;pointer-events:none;}
@keyframes hotspotPulse {0%{opacity:.85;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.3)}}
.demo-controls {width:min(100%,1220px);display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:50px}
.sample-note {color:#60756b;font-size:11px}
.control-buttons {display:flex;gap:10px}
.control-secondary,.control-primary {min-height:45px;border-radius:9px;padding:9px 20px;font-weight:760;border:1px solid #cad9ce;touch-action:manipulation}
.control-secondary {background:white;color:#243b31}.control-primary {background:#67b438;color:white;border-color:#67b438}
.control-secondary:disabled {opacity:.35;cursor:default}
@media(max-width:850px){.demo-content{padding:9px}.screenshot-frame{max-height:calc(100dvh - 230px)}.sample-note{display:none}.step-instruction{font-size:14px}.hotspot-label{padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.hotspot-pulse{animation:none}}


/* Dezente Schrittanweisung direkt oberhalb des Screenshots */
.screenshot-instruction {
  align-self:flex-start; display:flex; align-items:center;
  margin:2px 0 8px; padding:8px 13px;
  background:#edf5eb; border-left:3px solid #79ae57; border-radius:4px 8px 8px 4px;
  color:#284438; max-width:100%;
}
.screenshot-instruction .step-instruction {
  margin:0; font-size:clamp(14px,1.35vw,18px); line-height:1.35; font-weight:650; color:#284438;
}
@media(max-width:850px){.screenshot-instruction{margin:1px 0 6px;padding:7px 10px}.screenshot-instruction .step-instruction{font-size:14px}}

/* Anleitung unmittelbar an den oberen Rand des Screenshots koppeln. */
.screenshot-group {
  width:min(100%,1220px,calc((100dvh - 260px) * 16 / 9));
  display:flex; flex-direction:column; gap:5px;
  margin:auto 0; min-height:0; flex:0 1 auto;
}
.screenshot-group .screenshot-instruction {
  align-self:stretch; box-sizing:border-box;
  margin:0; padding:6px 11px;
  background:#f3f7f2; border-left:3px solid #8cb678;
  border-radius:4px;
}
.screenshot-group .screenshot-instruction .step-instruction {
  font-size:clamp(14px,1.2vw,17px); font-weight:600; line-height:1.3;
}
.screenshot-group .screenshot-frame {
  width:100%; max-width:100%; margin:0; flex:0 1 auto;
  aspect-ratio:16/9;
}
@media(max-width:850px) {
  .screenshot-group {width:min(100%,1220px,calc((100dvh - 220px) * 16 / 9));gap:4px}
  .screenshot-group .screenshot-instruction {padding:5px 9px}
}

/* Corporate Design override */
.demo-content{background:#fff}
.screenshot-group .screenshot-instruction{background:#f5f9fa;border-left-color:#0393ad}
.screenshot-group .screenshot-instruction .step-instruction{color:#36545c}
.step-kicker{color:#0393ad}
.step-progress span.active{background:#89c200}
.hotspot{border-color:#89c200;background:#89c20024;box-shadow:0 0 0 3px #ffffffbb,0 0 0 6px #89c20040}
.hotspot-pulse{border-color:#89c200}
.hotspot-label{background:#0393ad}
.control-primary{background:#0393ad;border-color:#0393ad}