/* [VIDEO-WALKTHROUGH 20260820] Ersetzt die alte 6-Karten-Demo-Sektion
   (.demo-cards, screenshot-basiert, siehe tagesnachweis-landing-demo.css) —
   dieselbe Geschichte ("So läuft ein Einsatz durch STUNDO24") jetzt mit
   4 echten STUNDO24-Videos statt 6 Standbildern, direkt nach dem Hero statt
   weiter unten. .demo-cards-Regeln bleiben ungenutzt in ihrer Datei stehen
   (bereits etablierte Konvention in diesem Projekt), keine Kollision, da
   diese Datei eigene Klassennamen (.video-*) verwendet. */

body.video-walkthrough-modal-open{overflow:hidden}

.video-walkthrough{padding-top:72px}
.video-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px}
@media(max-width:1100px){.video-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.video-cards{grid-template-columns:1fr}}

.video-card{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid #d4dce6;border-radius:16px;background:var(--paper);cursor:pointer;overflow:hidden;font:inherit;box-shadow:0 10px 26px rgba(18,38,57,.07);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.video-card:hover{border-color:rgba(247,118,37,.72);box-shadow:0 20px 40px rgba(18,38,57,.15);transform:translateY(-4px)}
.video-card:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.video-card-thumb{position:relative;aspect-ratio:16/9;background:#0e1b2c;overflow:hidden}
.video-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-card-play::before{content:"";width:52px;height:52px;border-radius:50%;background:rgba(8,20,36,.55);display:flex;align-items:center;justify-content:center}
.video-card-play::after{content:"▶";position:absolute;color:#fff;font-size:18px;transform:translateX(2px)}
.video-card:hover .video-card-play::before{background:var(--orange)}

.video-card-num{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;background:rgba(8,20,36,.72);color:#fff;font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center}

.video-card-text{padding:17px 18px 19px}
.video-card-text strong{display:block;font-size:16px;line-height:1.3;color:var(--navy);margin-bottom:6px}
.video-card-text small{display:block;font-size:13.5px;color:var(--muted);line-height:1.55}

/* Modal / Viewer */
.video-walkthrough-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.video-walkthrough-modal[hidden]{display:none}
.video-walkthrough-modal-backdrop{position:absolute;inset:0;background:rgba(8,14,24,.78)}
.video-walkthrough-modal-panel{position:relative;width:100%;max-width:780px;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.video-walkthrough-modal-panel video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.video-walkthrough-modal-close{position:absolute;top:10px;right:10px;z-index:1;width:36px;height:36px;border-radius:50%;border:0;background:rgba(8,14,24,.68);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-walkthrough-modal-close:hover{background:var(--orange)}
.video-walkthrough-modal-title{margin:0;padding:12px 18px 16px;color:#fff;font-size:13.5px;font-weight:600;background:#000}

@media(max-width:680px){
  .video-walkthrough-modal{padding:10px}
  .video-walkthrough-modal-panel{max-width:none;width:96vw}
  .video-walkthrough-modal-close{width:44px;height:44px;top:8px;right:8px}
}