/* Kamera-Demo zum Anfassen: Einfahrt bei Tag/Nacht, Personenerkennung, Meldung aufs Handy.
   Eigenständig gestylt (nutzbar auf Startseite und Kameraseite). Gesteuert von kamera-demo.js. */
.camdemo{padding:88px 0;background:#071c31;color:#fff;overflow:hidden}
.camdemo .camdemo-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-bottom:34px}
.camdemo .camdemo-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:#8fd3ff;font-size:11px;font-weight:800;letter-spacing:.17em}
.camdemo .camdemo-eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.camdemo h2{margin:0;font-size:clamp(34px,4.2vw,54px);line-height:1.06;letter-spacing:-.04em;color:#fff}
.camdemo h2 em{font-style:normal;color:#7dcaff}
.camdemo .camdemo-head p{margin:0;color:#b9cddb;font-size:16px;line-height:1.65}
.camdemo-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:center}

/* Kamerabild */
.camdemo-stage{position:relative;border-radius:16px;overflow:hidden;background:#0b1520;box-shadow:0 30px 70px #0008,0 0 0 1px #ffffff1f}
.camdemo-stage svg{display:block;width:100%;height:auto;transition:filter .9s ease}
.camdemo.is-night .camdemo-stage svg{filter:grayscale(1) brightness(.62) contrast(1.25) sepia(.08)}
.camdemo-stage .sky-day,.camdemo-stage .sun{transition:opacity .9s}
.camdemo.is-night .sky-day,.camdemo.is-night .sun{opacity:0}
.camdemo-stage .stars{opacity:0;transition:opacity .9s}
.camdemo.is-night .stars{opacity:1}
.camdemo-stage .flood{opacity:0;transition:opacity .4s}
.camdemo.is-night.has-motion .flood{opacity:1}
.camdemo-stage .window-glow{opacity:0;transition:opacity .9s}
.camdemo.is-night .window-glow{opacity:1}
.camdemo-stage .zone{opacity:0;transition:opacity .4s}
.camdemo.show-zone .zone{opacity:1}
.camdemo-stage .person{transform:translateX(330px);transition:transform 4.2s cubic-bezier(.35,.1,.3,1)}
.camdemo.is-walking .person{transform:translateX(0)}
.camdemo-stage .person .legs{transform-origin:50% 0;animation:cam-step .5s ease-in-out infinite alternate paused}
.camdemo.is-walking .person .legs{animation-play-state:running}
.camdemo.has-arrived .person .legs{animation-play-state:paused}
@keyframes cam-step{from{transform:skewX(9deg)}to{transform:skewX(-9deg)}}
.camdemo-stage .detect{opacity:0;transition:opacity .25s}
.camdemo.has-motion .detect{opacity:1}
.camdemo-stage .noise{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 3px);opacity:0;transition:opacity .9s}
.camdemo.is-night .noise{opacity:1}
.camdemo-hud{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;gap:10px;font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.05em;color:#fff;text-shadow:0 1px 3px #0009;pointer-events:none}
.camdemo-hud .rec{color:#ff5a52}
.camdemo-hud .rec::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#ff5a52;animation:cam-rec 1.2s steps(2) infinite}
@keyframes cam-rec{50%{opacity:0}}
.camdemo-hud .mode{padding:4px 7px;border-radius:5px;background:#0007}

/* Bedienung */
.camdemo-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.camdemo-controls button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border:1px solid #ffffff2e;border-radius:10px;background:#ffffff0f;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.camdemo-controls button:hover{background:#ffffff1c}
.camdemo-controls button[aria-pressed=true]{background:#7dcaff;border-color:#7dcaff;color:#06223a}
.camdemo-controls button:focus-visible{outline:3px solid #7dcaff;outline-offset:3px}
.camdemo-controls button:disabled{opacity:.5;cursor:wait}

/* Handy mit Meldung */
.camdemo-phone{position:relative;width:250px;height:500px;padding:12px;border-radius:38px;background:linear-gradient(#24272b,#101214);box-shadow:0 30px 60px #0009,inset 0 0 0 1px #ffffff26}
.camdemo-phone::before{content:"";position:absolute;top:22px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:12px;background:#000;z-index:2}
.camdemo-phone .screen{position:relative;height:100%;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#1c3b5a,#0b1d2e 60%,#14324a);padding:58px 12px 12px}
.camdemo-phone .time{text-align:center;font-size:52px;font-weight:300;letter-spacing:-.02em;color:#fff}
.camdemo-phone .date{text-align:center;font-size:12px;color:#c9d9e6;margin-top:2px}
.camdemo-note{margin-top:22px;padding:11px 12px;border-radius:16px;background:#ffffffe6;color:#132535;box-shadow:0 10px 26px #0006;opacity:0;transform:translateY(-14px) scale(.96);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.camdemo.has-alert .camdemo-note{opacity:1;transform:none}
.camdemo-note .app{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;color:#5b6d7c;letter-spacing:.04em}
.camdemo-note .app i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#132535;color:#fff;font-style:normal;font-size:10px}
.camdemo-note .app span{margin-left:auto;font-weight:500}
.camdemo-note strong{display:block;margin-top:7px;font-size:13px}
.camdemo-note p{margin:3px 0 0;font-size:11.5px;line-height:1.4;color:#33495a}
.camdemo-note .thumb{margin-top:8px;height:74px;border-radius:9px;background:#0b1520 center/cover;overflow:hidden}
.camdemo-note .thumb svg{width:100%;height:100%;display:block;filter:grayscale(1) brightness(.7) contrast(1.2)}

/* Fußzeile */
.camdemo-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:30px;color:#9fb6c7;font-size:12px}
.camdemo-foot a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.camdemo-foot .links{display:flex;flex-wrap:wrap;gap:22px}
.camdemo-foot a.primary{padding:0 20px;border-radius:9px;background:#2f6fd6}

@media(max-width:900px){
  .camdemo{padding:64px 0}
  .camdemo .camdemo-head{grid-template-columns:1fr;gap:16px}
  .camdemo-grid{grid-template-columns:1fr}
  .camdemo-phone{width:100%;max-width:360px;height:auto;margin:0 auto;border-radius:24px;padding:8px}
  .camdemo-phone::before{display:none}
  .camdemo-phone .screen{border-radius:18px;padding:12px}
  .camdemo-phone .time,.camdemo-phone .date{display:none}
  .camdemo-note{margin-top:0}
}
/* „Bewegung reduzieren“: keine automatische Animation. Tippt jemand selbst auf
   „Person durchlaufen lassen“ (Klasse user-play), läuft die Person trotzdem. */
@media(prefers-reduced-motion:reduce){
  .camdemo:not(.user-play) .camdemo-stage svg,.camdemo:not(.user-play) .camdemo-note,.camdemo:not(.user-play) .camdemo-stage .person{transition:none}
  .camdemo:not(.user-play) .camdemo-stage .person .legs,.camdemo-hud .rec::before{animation:none}
}
.camdemo-stage .person .legs{transform-box:fill-box}