/* OPS-Console-Look der City-Security-Website, reduziert auf eine Wartungsseite.
   System-Fonts (kein CDN, keine Drittabfragen, DSGVO-konform). */

:root {
  --beton: #eaeae8;
  --paper: #ffffff;
  --ash: #e3e1da;
  --anthrazit: #1f2429;
  --slate: #5a5f65;
  --stone: #8a8d8f;
  --signal-rot: #ff3030;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--beton);
  color: var(--anthrazit);
  font-family: var(--sans);
  line-height: 1.55;
  min-height: 100vh;
}

body.home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.wrap {
  width: 100%;
  max-width: 560px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
}

.shield {
  position: relative;
  display: inline-flex;
  color: var(--anthrazit);
}

.shield .dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 5px;
  height: 5px;
  background: var(--signal-rot);
  border-radius: 50%;
}

.wordmark {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.reddot {
  width: 6px;
  height: 6px;
  background: var(--signal-rot);
  border-radius: 50%;
  display: inline-block;
}

h1 {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-bottom: 22px;
}

.lead {
  font-size: 17px;
  color: var(--slate);
  max-width: 46ch;
  margin-bottom: 44px;
}

.contact {
  border-top: 1px solid var(--ash);
  border-bottom: 1px solid var(--ash);
}

.contact .row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  text-decoration: none;
  color: var(--anthrazit);
  border-bottom: 1px solid var(--ash);
}

.contact .row:last-child {
  border-bottom: none;
}

.contact .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  width: 80px;
  flex-shrink: 0;
}

.contact .value {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--anthrazit);
}

.contact .row:hover .value,
.contact .row:focus-visible .value {
  color: var(--signal-rot);
}

.foot {
  margin-top: 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--stone);
}

.foot p + p {
  margin-top: 8px;
}

.foot a {
  color: var(--slate);
}

.foot a:hover,
a:focus-visible {
  color: var(--signal-rot);
}

/* Impressum-Seite */
.legal {
  max-width: 640px;
  padding: 56px 24px;
  margin: 0 auto;
}

.legal a.back {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 40px;
}

.legal h1 {
  font-size: 30px;
  margin-bottom: 28px;
}

.legal h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 32px 0 10px;
}

.legal p {
  color: var(--slate);
  font-size: 15px;
  margin-bottom: 6px;
}

.legal .muted {
  color: var(--stone);
  font-size: 13px;
}

/* ---------- Baustellen-/Security-Szene (dekorativ, reines CSS + SVG, kein JS) ---------- */
.scene {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(215px, 31vh, 275px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--stone);
}

.wrap {
  position: relative;
  z-index: 1;
}

body.home {
  padding-bottom: clamp(235px, 33vh, 300px);
}

.scene .ground {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  border-top: 1px solid var(--ash);
}

.fence {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  height: 34px;
  opacity: 0.4;
  background:
    linear-gradient(var(--slate), var(--slate)) left 6px / 100% 1.5px repeat-x,
    linear-gradient(var(--slate), var(--slate)) left 25px / 100% 1.5px repeat-x,
    repeating-linear-gradient(90deg, var(--slate) 0 3px, transparent 3px 15px);
}

.digger,
.mound {
  position: absolute;
  bottom: 40px;
  color: var(--slate);
  opacity: 0.9;
}

.mound {
  left: 27%;
  transform-origin: bottom center;
  animation: mound-grow 36s ease-in-out infinite;
}

.digger {
  left: 27%;
  margin-left: -86px;
  animation: digger-cycle 9s ease-in-out infinite;
}

.bucket {
  transform-box: fill-box;
  transform-origin: left center;
  animation: bucket-dump 9s ease-in-out infinite;
}

.barrow {
  position: absolute;
  bottom: 38px;
  left: 27%;
  margin-left: -34px;
  color: var(--slate);
  animation: barrow-haul 36s ease-in-out infinite;
}

.barrow .load {
  stroke: var(--slate);
}

.crane,
.tower,
.drone,
.runner {
  position: absolute;
}

.crane {
  bottom: 40px;
  color: var(--stone);
  opacity: 0.8;
}

.crane-left {
  left: clamp(-26px, 2vw, 40px);
  transform: scale(1.34);
  transform-origin: bottom left;
}

.crane-right {
  right: 6px;
  transform: scaleX(-1) scale(1.05);
  transform-origin: bottom center;
}

.tower {
  bottom: 40px;
  left: 50%;
  margin-left: 155px;
  color: var(--slate);
  opacity: 0.95;
}

.tower svg {
  width: auto;
  height: clamp(155px, 23vh, 190px);
}

.beam {
  fill: #ffcf47;
  opacity: 0.4;
  animation: beam-flicker 2.8s ease-in-out infinite;
}

.torch {
  stroke: var(--slate);
}

.drone {
  top: clamp(12px, 6vh, 42px);
  left: -72px;
  color: var(--slate);
  animation: drone-fly 17s linear infinite;
}

.drone .rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotor 0.3s linear infinite;
}

.blink {
  fill: var(--signal-rot);
  animation: blink 1.4s steps(1, end) infinite;
}

.runner {
  bottom: 33px;
  color: var(--anthrazit);
}

.thief {
  animation: run-across 11s linear infinite;
  animation-delay: -1.15s;
}

.guard {
  animation: run-across 11s linear infinite;
}

.guard .cap {
  stroke: var(--signal-rot);
  stroke-width: 2.6;
}

.thief .loot {
  stroke: var(--slate);
}

.runner svg {
  animation: bob 0.42s ease-in-out infinite;
}

.runner .arms {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: arm-swing 0.42s ease-in-out infinite;
}

.runner .leg-a {
  transform-box: fill-box;
  transform-origin: 100% 0;
  animation: leg-swing 0.42s ease-in-out infinite;
}

.runner .leg-b {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: leg-swing 0.42s ease-in-out infinite reverse;
}

.hook {
  transform-box: fill-box;
  transform-origin: top;
  animation: hook-lift 5s ease-in-out infinite;
}

.hook-delayed {
  animation-delay: -2.4s;
}

@keyframes run-across {
  0% { transform: translateX(-14vw); }
  100% { transform: translateX(114vw); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes leg-swing {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(-20deg); }
}

@keyframes arm-swing {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}

@keyframes drone-fly {
  0% { transform: translate(0, 0); }
  50% { transform: translate(52vw, -10px); }
  100% { transform: translate(112vw, 0); }
}

@keyframes rotor {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(0.2); }
  100% { transform: scaleX(1); }
}

@keyframes blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.12; }
}

@keyframes hook-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

@keyframes beam-flicker {
  0%, 100% { opacity: 0.42; }
  45% { opacity: 0.3; }
  70% { opacity: 0.5; }
}

@keyframes digger-cycle {
  0% { transform: translateX(-155px); }
  20% { transform: translateX(0); }
  44% { transform: translateX(0); }
  66% { transform: translateX(-155px); }
  100% { transform: translateX(-155px); }
}

@keyframes bucket-dump {
  0%, 22% { transform: rotate(0deg); }
  30%, 38% { transform: rotate(-48deg); }
  46%, 100% { transform: rotate(0deg); }
}

@keyframes mound-grow {
  0%, 7% { transform: scale(0.14); }
  10%, 32% { transform: scale(0.42); }
  35%, 57% { transform: scale(0.6); }
  60%, 82% { transform: scale(0.78); }
  85%, 87% { transform: scale(0.95); }
  96%, 100% { transform: scale(0.14); }
}

@keyframes barrow-haul {
  0%, 78% { transform: translateX(58vw) scaleX(-1); }
  86%, 90% { transform: translateX(0) scaleX(-1); }
  92%, 93% { transform: translateX(0) scaleX(1); }
  99%, 100% { transform: translateX(92vw) scaleX(1); }
}

@media (max-width: 560px) {
  .scene { height: clamp(180px, 30vh, 235px); }
  body.home { padding-bottom: clamp(200px, 32vh, 255px); }
  .crane-left { left: -36px; transform: scale(0.8); transform-origin: bottom left; }
  .crane-right { right: -14px; transform: scaleX(-1) scale(0.58); transform-origin: bottom center; }
  .tower { margin-left: 82px; }
  .tower svg { height: 120px; }
  .runner svg { height: 44px; width: auto; }
  .digger,
  .mound,
  .barrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drone,
  .thief,
  .guard,
  .rotor,
  .blink,
  .hook,
  .beam,
  .digger,
  .mound,
  .bucket,
  .barrow,
  .runner svg,
  .runner .arms,
  .runner .leg-a,
  .runner .leg-b {
    animation: none;
  }
  .drone { left: 58%; }
  .digger { transform: translateX(0); }
  .mound { transform: scale(0.72); }
  .barrow { transform: translateX(80vw) scaleX(-1); }
}