/* ==========================================================================
   RDemers.de - Sophos WAF Authentifizierungsvorlage
   Stylesheet (extern, via <?assets_path?>/styles.css eingebunden)
   Netzwerk-/Infrastruktur-Look + animierte Datenleitungen im Hintergrund
   ========================================================================== */

:root{
  --bg:#0b0f14;
  --bg-grid:#0e141b;
  --panel:#0f161e;
  --panel-2:#111c26;
  --line:#1d2b39;
  --line-soft:#16222e;
  --trace:#20374a;    /* Basis-Leitungen */
  --txt:#d7e0ea;
  --muted:#6b7c8f;
  --accent:#3fb6e6;   /* Signal-Blau / Lichtspur */
  --ok:#4ec9a5;
  --warn:#e0a13c;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(63,182,230,.10), transparent 60%),
    linear-gradient(0deg, var(--bg) 0%, var(--bg-grid) 100%);
  background-attachment:fixed;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* feines Raster - sehr dezent, unter den Leitungen */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 30%, #000 0%, transparent 85%);
          mask-image:radial-gradient(1000px 700px at 50% 30%, #000 0%, transparent 85%);
  opacity:.28;
}

/* ===== Datenleitungs-Hintergrund ===== */
.bg{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
.bg .traces use{
  fill:none;
  stroke:var(--trace);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* wanderndes Licht: kurzer heller Abschnitt, der sich hin- und herbewegt */
.bg .spark{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* pathLength=1 -> Dash-Werte sind Anteile der Gesamtlänge */
  stroke-dasharray:0.08 2;
  filter:drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 7px rgba(63,182,230,.7));
  animation-name:travel;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;   /* hin und zurück */
}
@keyframes travel{
  from{ stroke-dashoffset:0; }
  to  { stroke-dashoffset:-1; }
}
.bg .nodes circle{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent));
  animation:nodePulse 3.2s ease-in-out infinite;
}
.bg .nodes circle:nth-child(2n){ animation-delay:.8s }
.bg .nodes circle:nth-child(3n){ animation-delay:1.6s }
@keyframes nodePulse{
  0%,100%{ opacity:.35 }
  50%    { opacity:1 }
}

/* ---- Kopfleiste: Status wie an Netzwerk-Hardware ---- */
.statusbar{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(17,28,38,.85), rgba(15,22,30,.55));
  font-family:var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
}
.statusbar .sig{display:inline-flex; align-items:center; gap:7px}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(78,201,165,.6);
  animation:pulse 2.4s infinite;
}
.dot.blue{background:var(--accent); animation-delay:.6s}
.dot.warn{background:var(--warn); animation:none; box-shadow:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(78,201,165,.5)}
  70%{box-shadow:0 0 0 7px rgba(78,201,165,0)}
  100%{box-shadow:0 0 0 0 rgba(78,201,165,0)}
}
.statusbar .spacer{flex:1}
.statusbar .node{color:var(--txt)}

/* ---- Hauptbereich ---- */
main{
  position:relative; z-index:1;
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.card{
  width:100%; max-width:440px;
  background:linear-gradient(180deg, rgba(17,28,38,.94), rgba(15,22,30,.94));
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  overflow:hidden;
}
.card-head{
  padding:26px 30px 20px;
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{
  width:44px; height:44px; flex:none;
  border:1px solid var(--accent);
  border-radius:9px;
  background:rgba(63,182,230,.07);
  display:grid; place-items:center;
}
.brand .mark svg{display:block}
.brand .name{
  font-family:var(--mono);
  font-size:19px; font-weight:600; letter-spacing:.02em;
  color:var(--txt);
}
.brand .name b{color:var(--accent); font-weight:600}
.brand .name .tld{color:var(--muted); font-weight:400}
.kicker{
  margin-top:16px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:20px; height:1px; background:var(--accent); display:inline-block}
h1{
  margin:8px 0 4px;
  font-size:20px; font-weight:600; letter-spacing:-.01em;
  color:var(--txt);
}
.sub{margin:0; color:var(--muted); font-size:13px; line-height:1.5}

/* ---- Formular (selbst geschrieben, Pflichtfelder httpd_*) ---- */
.card-body{padding:22px 30px 26px}
.card-body form{margin:0}
.card-body label{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  display:block; margin-top:10px;
}
.card-body input[type="text"],
.card-body input[type="password"]{
  width:100%;
  background:#0a1017;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--txt);
  font-family:var(--mono);
  font-size:14px;
  padding:12px 14px;
  margin:6px 0 4px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.card-body input[type="text"]:focus,
.card-body input[type="password"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(63,182,230,.15);
}
.card-body input[type="submit"]{
  width:100%;
  background:linear-gradient(180deg, var(--accent), #2f97c4);
  color:#04121b;
  border:0; border-radius:8px;
  font-family:var(--mono);
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:13px 16px;
  margin-top:18px;
  cursor:pointer;
  transition:filter .15s, transform .05s;
}
.card-body input[type="submit"]:hover{filter:brightness(1.08)}
.card-body input[type="submit"]:active{transform:translateY(1px)}

/* ---- Fuß ---- */
.card-foot{
  padding:14px 30px;
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.lock{display:inline-flex; align-items:center; gap:6px; color:var(--ok)}
.card-foot .contact b{color:var(--txt); font-weight:600}

footer.page{
  position:relative; z-index:1;
  text-align:center;
  padding:16px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.08em;
  color:#455566;
}
footer.page b{color:var(--muted)}

/* ---- Barrierefreiheit: Animationen aus, wenn gewünscht ---- */
@media (prefers-reduced-motion:reduce){
  .dot,
  .bg .spark,
  .bg .nodes circle{animation:none}
  .bg .spark{stroke-dasharray:none; opacity:.5}
}
@media (max-width:480px){
  .statusbar{font-size:10px; gap:12px; padding:9px 12px}
  .statusbar .hide-sm{display:none}
  .card-head,.card-body,.card-foot{padding-left:20px; padding-right:20px}
}