/* KREITER.ONE — „Aus Code wird Website“: Scanner-Kartenstrom (frei nach scanner-card-stream von 21st.dev, ohne React/three.js) */
#kscan {
  --kc-w: 400px;
  --kc-h: 250px;
  --kc-gap: 60px;
  position: relative;
  background: #0a0a0a;
  color: #fff;
  overflow: hidden;
  padding: 7rem 0 4.5rem;
}
#kscan .kscan-head { position: relative; z-index: 30; padding: 0 2.5rem; margin-bottom: 2.6rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
#kscan .kscan-head em { font-family: var(--font-serif, "Playfair Display", serif); font-style: italic; color: rgba(255, 255, 255, 0.6); font-size: 1rem; display: block; margin-bottom: 0.6rem; }
#kscan h2 { margin: 0; font-family: var(--font-head, "Montserrat", sans-serif); font-weight: 900; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; }
#kscan h2 span { color: var(--lime, #ccff00); }
#kscan .kscan-hint { margin: 0; max-width: 30ch; font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); }

#kscan .kscan-stage { position: relative; height: calc(var(--kc-h) + 70px); display: flex; align-items: center; }
#kscan canvas { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; pointer-events: none; }
#kscan .kscan-dust { height: var(--kc-h); z-index: 0; }
#kscan .kscan-sparks { height: calc(var(--kc-h) + 50px); z-index: 10; }

#kscan .kscan-line {
  position: absolute; left: 50%; top: 50%; width: 3px; height: calc(var(--kc-h) + 30px); transform: translate(-50%, -50%);
  border-radius: 3px; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: linear-gradient(to bottom, transparent, var(--lime, #ccff00) 18%, #fff 50%, var(--lime, #ccff00) 82%, transparent);
  box-shadow: 0 0 10px #ccff00, 0 0 22px #ccff00, 0 0 40px rgba(0, 229, 255, 0.8), 0 0 70px rgba(0, 229, 255, 0.5);
  animation: kscan-pulse 1.5s infinite alternate ease-in-out;
}
#kscan .kscan-line.on { opacity: 1; }
@keyframes kscan-pulse { from { opacity: 0.75; transform: translate(-50%, -50%) scaleY(1); } to { transform: translate(-50%, -50%) scaleY(1.04); } }
#kscan .kscan-line:not(.on) { animation: none; }

#kscan .kscan-track { position: relative; z-index: 5; display: flex; gap: var(--kc-gap); align-items: center; will-change: transform; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
#kscan .kscan-track.dragging { cursor: grabbing; }
#kscan .kc { position: relative; width: var(--kc-w); height: var(--kc-h); flex: 0 0 auto; }
#kscan .kc-face, #kscan .kc-code { position: absolute; inset: 0; border-radius: 15px; overflow: hidden; }
/* Code liegt rechts vom Scanner, die fertige Website links davon */
#kscan .kc-face { z-index: 2; background: #111; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45); clip-path: inset(0 var(--kc-cut, 0%) 0 0); }
#kscan .kc-code { z-index: 1; background: #0d1210; clip-path: inset(0 0 0 var(--kc-show, 100%)); }
#kscan .kc-face video, #kscan .kc-face img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#kscan .kc-name {
  position: absolute; left: 14px; bottom: 12px; z-index: 3; font-family: var(--font-head, "Montserrat", sans-serif); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; background: rgba(10, 10, 10, 0.78); color: #fff; padding: 6px 10px; border-radius: 999px;
}
#kscan .kc-name i { font-style: normal; color: var(--lime, #ccff00); margin-left: 6px; }
#kscan .kc-code pre {
  margin: 0; padding: 14px 16px; height: 100%; box-sizing: border-box; font: 11px/13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(204, 255, 0, 0.75); white-space: pre; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.85) 35%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.85) 35%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.25) 100%);
  animation: kscan-glitch 0.12s infinite linear alternate-reverse;
}
#kscan .kc-code pre b { font-weight: 400; color: rgba(0, 229, 255, 0.9); }
@keyframes kscan-glitch { 0%, 16%, 50%, 100% { opacity: 1; } 15%, 99% { opacity: 0.9; } 49% { opacity: 0.8; } }

#kscan .kscan-foot { position: relative; z-index: 30; padding: 0 2.5rem; margin-top: 1.6rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
#kscan .kscan-foot a { font-family: var(--font-head, "Montserrat", sans-serif); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 8px 14px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
#kscan .kscan-foot a:hover, #kscan .kscan-foot a:focus-visible { background: var(--lime, #ccff00); color: #0a0a0a; border-color: var(--lime, #ccff00); }

@media (max-width: 760px) {
  #kscan { --kc-w: 280px; --kc-h: 175px; --kc-gap: 34px; padding: 5rem 0 3.5rem; }
  #kscan .kscan-head, #kscan .kscan-foot { padding: 0 1.25rem; }
  #kscan .kc-code pre { font-size: 9px; line-height: 11px; }
}
/* Ohne Bewegung: ruhige Reihe der Websites, keine Partikel, kein Code */
@media (prefers-reduced-motion: reduce) {
  #kscan .kscan-track { overflow-x: auto; padding: 0 2.5rem; }
  #kscan canvas, #kscan .kscan-line, #kscan .kc-code { display: none; }
  #kscan .kc-face { clip-path: none; }
}