/* ==========================================================================
   Video-Security · Galerie „Aus der Praxis“ (Monitorwand)
   Nur auf /it-loesungen/video-security/ geladen. Farben aus der Architektur-Grafik der Seite.
   ========================================================================== */
.vs-gallery-section {
  --vg-cyan: #54cbff; --vg-cyan-soft: #86dcff; --vg-ink: #061522; --vg-panel: #051320;
  --vg-line: #65cff733; --vg-mist: #9fb9ca; --vg-text: #d3e2ec; --vg-rec: #ff5c5c;
  position: relative; overflow: hidden; color: #fff; scroll-margin-top: calc(var(--header-height, 76px) + 8px);
  background:
    radial-gradient(circle at 10% 0%, #2cb1eb1f, transparent 34%),
    radial-gradient(circle at 92% 100%, #2cb1eb14, transparent 42%),
    linear-gradient(#0a1d2d, #061522);
}
.vs-gallery-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(#63bbe20a 1px, transparent 1px), linear-gradient(90deg, #63bbe20a 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.vs-gallery-section > .shell { position: relative; }
.vs-gallery-section .section-heading h2 { color: #fff; }
.vs-gallery-section .section-heading p { color: var(--vg-mist); }

/* Monitorwand */
.vs-wall {
  position: relative; padding: 10px; background: var(--vg-panel);
  border: 1px solid var(--vg-line); border-radius: 4px 30px 4px 4px;
  box-shadow: 0 44px 100px -34px #000000c7, inset 0 1px 0 #ffffff0a;
}
.vs-wall__bar {
  display: flex; align-items: center; gap: 8px 18px; min-height: 34px; padding: 2px 10px 10px 6px; overflow: hidden;
  color: #7f9bb0; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
}
.vs-wall__bar b { display: inline-flex; align-items: center; gap: 8px; color: #e4f4ff; font-weight: 750; }
.vs-wall__bar b i { width: 7px; height: 7px; border-radius: 50%; background: var(--vg-cyan); box-shadow: 0 0 0 3px #54cbff26; }
.vs-wall__bar span:last-child { margin-left: auto; color: var(--vg-cyan); }
.vs-wall__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15.2vw, 212px); gap: 8px;
  grid-template-areas: "a a b b c" "a a g g c" "e f h i d";
  margin: 0; padding: 0; list-style: none;
}
/* Einheitliche Innenabstände: Sucherecken bei --hud, Text immer innerhalb der Ecken */
.vs-tile { position: relative; min-width: 0; container-type: inline-size; --hud: 12px; --arm: 16px; --pad: calc(var(--hud) + 12px); }
.vs-tile--a { --arm: 22px; --hud: 14px; }
.vs-tile--a { grid-area: a; } .vs-tile--b { grid-area: b; } .vs-tile--c { grid-area: c; }
.vs-tile--d { grid-area: d; } .vs-tile--e { grid-area: e; } .vs-tile--f { grid-area: f; }
.vs-tile--g { grid-area: g; } .vs-tile--h { grid-area: h; } .vs-tile--i { grid-area: i; }

.vs-tile__btn {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; isolation: isolate;
  color: #fff; font: inherit; text-align: left; background: #0b2233; border: 0; border-radius: 3px; cursor: zoom-in;
}
.vs-tile__btn:focus-visible { outline: 2px solid var(--vg-cyan-soft); outline-offset: 2px; }
.vs-tile__btn picture, .vs-tile__btn img { display: block; width: 100%; height: 100%; }
.vs-tile__btn img {
  object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
  filter: saturate(.92) brightness(.88); transform: scale(1.001);
  transition: transform 1.3s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.vs-tile__btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #03101a94 0%, transparent 24%, transparent 50%, #03101ae6 100%);
}
.vs-tile__btn::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #65cff724; transition: box-shadow .35s ease;
}
/* Sucherecken */
.vs-tile__hud { position: absolute; inset: var(--hud); z-index: 2; pointer-events: none; opacity: .45; transition: inset .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.vs-tile__hud i { position: absolute; width: var(--arm); height: var(--arm); border: 0 solid var(--vg-cyan-soft); }
.vs-tile__hud i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vs-tile__hud i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vs-tile__hud i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vs-tile__hud i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
/* Kamera-Kennung */
.vs-tile__cam {
  position: absolute; top: calc(var(--hud) + 8px); left: calc(var(--hud) + 8px); z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  max-width: calc(100% - 2 * var(--hud) - 16px); padding: 4px 8px; white-space: nowrap;
  color: #dcf1ff; background: #03101abf; border: 1px solid #65cff733; border-radius: 2px;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .09em;
}
.vs-tile__cam b { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--vg-rec); box-shadow: 0 0 6px #ff5c5c99; }
/* Bildunterschrift */
.vs-tile__cap { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--hud) + 10px); z-index: 2; display: grid; gap: 4px; }
.vs-tile__cap strong { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; text-shadow: 0 1px 14px #000a; }
.vs-tile--a .vs-tile__cap strong { font-size: 1.3rem; }
.vs-tile--b .vs-tile__cap strong, .vs-tile--g .vs-tile__cap strong { font-size: 1.1rem; }
/* Kleine Kacheln: nur Titel (Beschreibung steht in der großen Ansicht) */
:is(.vs-tile--d, .vs-tile--e, .vs-tile--f, .vs-tile--h, .vs-tile--i) .vs-tile__cap > span { display: none; }
:is(.vs-tile--d, .vs-tile--e, .vs-tile--f, .vs-tile--h, .vs-tile--i) .vs-tile__cap strong { font-size: .94rem; }
.vs-tile__cap strong { overflow-wrap: break-word; hyphens: manual; }
/* Schmale Kacheln: Kennung nur „CAM 05“, keine Beschreibung */
@container (max-width: 214px) {
  .vs-tile__cam-loc { display: none; }
  .vs-tile__cap > span { display: none; }
}
@container (max-width: 150px) {
  .vs-tile .vs-tile__cap strong { font-size: .8rem; line-height: 1.25; }
}
.vs-tile__cap > span {
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px);
  color: var(--vg-text); font-size: .86rem; line-height: 1.5;
  transition: max-height .5s ease, opacity .35s ease, transform .5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .vs-wall__grid:hover .vs-tile__btn:not(:hover) img { filter: saturate(.62) brightness(.58); }
  .vs-tile__btn:hover img, .vs-tile__btn:focus-visible img { transform: scale(1.055); filter: saturate(1.05) brightness(1); }
  .vs-tile__btn:hover .vs-tile__hud, .vs-tile__btn:focus-visible .vs-tile__hud { inset: calc(var(--hud) - 5px); opacity: 1; }
  .vs-tile__btn:hover::after, .vs-tile__btn:focus-visible::after { box-shadow: inset 0 0 0 1px #86dcffa8, 0 0 28px #54cbff2e; }
  .vs-tile__btn:hover .vs-tile__cap > span, .vs-tile__btn:focus-visible .vs-tile__cap > span { max-height: 7em; opacity: 1; transform: none; }
}
.vs-gallery__note { margin: 22px 0 0; max-width: 860px; color: #7f9bb0; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; line-height: 1.7; }

/* Einschalten der Monitorwand (einmalig) und REC-Blinken */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .vs-wall.is-ready:not(.is-shown) .vs-tile__btn { clip-path: inset(50% 0 50% 0); }
  html:not([data-motion="paused"]) .vs-wall.is-shown .vs-tile__btn { animation: vs-power .95s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.1s + var(--i, 0) * .075s); }
  html:not([data-motion="paused"]) .vs-wall.is-inview .vs-tile__cam b { animation: vs-rec 2.4s steps(1, end) infinite; animation-delay: calc(var(--i, 0) * .27s); }
}
@keyframes vs-power {
  0% { clip-path: inset(50% 0 50% 0); filter: brightness(2.6); }
  30% { clip-path: inset(49% 0 49% 0); filter: brightness(2.2); }
  72% { clip-path: inset(0 0 0 0); filter: brightness(1.25); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes vs-rec { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) {
  .vs-tile__btn img, .vs-tile__hud, .vs-tile__cap > span, .vs-tile__btn::after { transition: none; }
}
html.st-lite .vs-tile__btn img { transition: filter .3s ease; }
html.st-lite .vs-wall__grid:hover .vs-tile__btn:not(:hover) img { filter: none; }

/* --------------------------------------------------------------------------
   Vergrößerung
   -------------------------------------------------------------------------- */
.vs-lightbox {
  width: min(1320px, calc(100vw - 32px)); height: min(880px, calc(100dvh - 32px)); max-width: none; max-height: none;
  margin: auto; padding: 0; overflow: hidden; color: #fff; background: #030c14;
  border: 1px solid #65cff740; border-radius: 4px 30px 4px 4px; box-shadow: 0 50px 140px #000000d9;
}
.vs-lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.vs-lightbox::backdrop { background: #02070ce0; }
.vs-lightbox__stage { position: relative; min-width: 0; min-height: 0; background: #02080e; touch-action: pan-y; }
.vs-lightbox__stage picture, .vs-lightbox__stage img { display: block; width: 100%; height: 100%; }
.vs-lightbox__stage img { object-fit: contain; transition: opacity .35s ease; }
.vs-lightbox__stage img.is-loading { opacity: 0; }
.vs-lightbox__hud { position: absolute; inset: 16px; pointer-events: none; }
.vs-lightbox__hud i { position: absolute; width: 26px; height: 26px; border: 0 solid #86dcffb3; }
.vs-lightbox__hud i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vs-lightbox__hud i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vs-lightbox__hud i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vs-lightbox__hud i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.vs-lightbox button {
  display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0; cursor: pointer;
  color: #e4f4ff; background: #06172599; border: 1px solid #65cff74d; border-radius: 3px;
  transition: background .18s, border-color .18s;
}
.vs-lightbox button:hover { background: #0a4f7a; border-color: #54cbff; }
.vs-lightbox button:focus-visible { outline: 2px solid var(--vg-cyan-soft, #86dcff); outline-offset: 2px; }
.vs-lightbox button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vs-lightbox__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.vs-lightbox__nav--prev { left: 14px; }
.vs-lightbox__nav--next { right: 14px; }
.vs-lightbox__info {
  display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 18px 20px 20px; overflow-y: auto;
  background: linear-gradient(180deg, #0a1d2d, #061522); border-left: 1px solid #65cff72e;
}
.vs-lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vs-lightbox__cam {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #dcf1ff; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .09em;
}
.vs-lightbox__cam b { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff5c5c; box-shadow: 0 0 6px #ff5c5c99; }
.vs-lightbox__count { margin: 6px 0 0; color: #54cbff; font-family: var(--font-mono); font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.vs-lightbox__title { margin: 0; color: #fff; font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.vs-lightbox__desc { margin: 0; color: #c3d5e1; font-size: .97rem; line-height: 1.65; }
.vs-lightbox__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vs-lightbox__tags li {
  padding: 5px 9px; color: #bfe9ff; background: #54cbff14; border: 1px solid #54cbff40; border-radius: 2px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em;
}
.vs-lightbox__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: 6px; }
.vs-lightbox .vs-lightbox__thumbs button {
  position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; padding: 0;
  background: #0b2233; border: 1px solid #65cff72e; border-radius: 2px; opacity: .6; transition: opacity .2s, border-color .2s;
}
.vs-lightbox .vs-lightbox__thumbs button:hover { opacity: 1; background: #0b2233; }
.vs-lightbox .vs-lightbox__thumbs button[aria-current="true"] { opacity: 1; border-color: #54cbff; box-shadow: 0 0 0 1px #54cbff; }
.vs-lightbox__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.vs-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .vs-lightbox[open] { animation: vs-dlg .32s cubic-bezier(.2, .7, .2, 1); }
  html:not([data-motion="paused"]) .vs-lightbox[open]::backdrop { animation: vs-fade .32s ease; }
}
@keyframes vs-dlg { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vs-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vs-lightbox__stage img { transition: none; } }

/* --------------------------------------------------------------------------
   Tablet & Handy
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .vs-wall { padding: 8px; border-radius: 4px 20px 4px 4px; }
  .vs-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(134px, 34vw, 230px); gap: 6px;
    grid-template-areas: "a a" "a a" "b b" "c g" "c e" "f h" "i d";
  }
  .vs-wall__bar span:nth-child(2) { display: none; }
  .vs-tile--a .vs-tile__cap strong, .vs-tile--b .vs-tile__cap strong, .vs-tile--g .vs-tile__cap strong { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  .vs-tile, .vs-tile--a { --hud: 8px; --arm: 11px; --pad: calc(var(--hud) + 10px); }
  .vs-tile__cam { top: calc(var(--hud) + 6px); left: calc(var(--hud) + 6px); max-width: calc(100% - 2 * var(--hud) - 12px); padding: 3px 6px; font-size: .56rem; }
  .vs-tile__cap { bottom: calc(var(--hud) + 8px); }
  .vs-tile__cap strong, :is(.vs-tile--d, .vs-tile--e, .vs-tile--f, .vs-tile--h, .vs-tile--i) .vs-tile__cap strong { font-size: .86rem; }
  .vs-tile--a .vs-tile__cap strong, .vs-tile--b .vs-tile__cap strong, .vs-tile--g .vs-tile__cap strong { font-size: .98rem; }
}
@media (max-width: 860px), (max-height: 560px) {
  .vs-lightbox { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 4px 18px 4px 4px; }
  .vs-lightbox[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .vs-lightbox__info { max-height: 46dvh; gap: 10px; padding: 14px 14px 16px; border-left: 0; border-top: 1px solid #65cff72e; }
  .vs-lightbox__title { font-size: 1.15rem; }
  .vs-lightbox__desc { font-size: .9rem; }
  .vs-lightbox__thumbs { display: flex; gap: 6px; overflow-x: auto; margin-top: 4px; padding-bottom: 2px; }
  .vs-lightbox .vs-lightbox__thumbs button { flex: 0 0 64px; width: 64px; }
  .vs-lightbox__nav { width: 38px; height: 38px; }
  .vs-lightbox__nav--prev { left: 8px; } .vs-lightbox__nav--next { right: 8px; }
  .vs-lightbox__hud { inset: 10px; }
}
@media (max-height: 560px) and (min-width: 700px) {
  .vs-lightbox[open] { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: none; }
  .vs-lightbox__info { max-height: none; border-top: 0; border-left: 1px solid #65cff72e; }
}