/* Eingangsseite nxum.de / app.nxum.de — bewusst wortkarg (Pilotphase).
   Farbwelt aus der Wortmarke: Grund #0a0c10, Akzent das Glühen der Marke. */
:root{
  --bg:#0a0c10;
  --fg:#e6eef2;
  --mut:#4d5a63;
  --line:#1a2128;
  --field:#0e1218;
  --acc:#79d6e0;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;
  background:var(--bg);color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 1.25rem 1rem;
}
/* margin:auto oben UND unten zentriert den Block in der Restfläche und
   schiebt die Fußzeile trotzdem an den unteren Rand. */
main{width:min(26rem,86vw);margin:auto 0;display:flex;flex-direction:column;align-items:center;
     position:relative;z-index:1}

/* --- Leiterbahnen (Markup: mkcircuit.py) --------------------------------
   Ruhende Bahnen sehr dunkel, darüber laufen kurze Signalpunkte. Zur Mitte
   hin wird alles ausgeblendet, damit Wortmarke und Eingabefeld ruhig bleiben
   — die Fläche lebt, der Blickpunkt nicht. */
.circuit{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 44%,#0000 0 30%,#000 72%);
  mask-image:radial-gradient(115% 85% at 50% 44%,#0000 0 30%,#000 72%);
}
.c-lines path{stroke:#18262e;stroke-width:1.1}
.c-pads circle{fill:#1b2c35}
/* Ein Schein für die ganze Gruppe, nicht je Bahn — ein Filter statt 26. */
.c-flow{filter:drop-shadow(0 0 3px rgba(140,230,240,.5))}
.c-flow path{
  stroke:#bdf0f6;stroke-width:1.7;opacity:.8;
  stroke-dasharray:3 97;                 /* pathLength=100 -> 3 % Signalstrich */
  animation:signal 12s linear infinite;
}
@keyframes signal{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
/* Geschwindigkeiten und Startversatz: nichts läuft im Gleichschritt */
.s0{animation-duration:9s}   .s1{animation-duration:12s}  .s2{animation-duration:15s}
.s3{animation-duration:18s}  .s4{animation-duration:22s}  .s5{animation-duration:26s}
.d0{animation-delay:0s}      .d1{animation-delay:-1.7s}   .d2{animation-delay:-3.4s}
.d3{animation-delay:-5.1s}   .d4{animation-delay:-6.8s}   .d5{animation-delay:-8.5s}
.d6{animation-delay:-10.2s}  .d7{animation-delay:-11.9s}  .d8{animation-delay:-13.6s}
.d9{animation-delay:-15.3s}  .d10{animation-delay:-17s}   .d11{animation-delay:-18.7s}

@media (prefers-reduced-motion:reduce){
  /* Bewegung aus, Bild bleibt: die Punkte stehen still auf den Bahnen. */
  .c-flow path{animation:none;opacity:.35}
}

.logo{
  display:block;width:100%;height:auto;margin-bottom:1.6rem;
  animation:in .7s ease-out both;
}
@keyframes in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.logo{animation:none}}

form{display:flex;gap:.5rem;width:100%}
input{
  flex:1;min-width:0;padding:.72rem .9rem;
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  color:var(--fg);font:inherit;
}
input::placeholder{color:var(--mut)}
input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(121,214,224,.16)}

button{
  flex:0 0 3rem;padding:.72rem 0;
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  color:var(--acc);font:inherit;font-size:1.15rem;line-height:1;cursor:pointer;
}
button:hover{border-color:var(--acc)}
button:focus-visible{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(121,214,224,.16)}
button:disabled{opacity:.5;cursor:wait}

.msg{min-height:1.3rem;margin:.9rem 0 0;font-size:.86rem;color:var(--mut);text-align:center}
.list{display:flex;flex-direction:column;gap:.4rem;width:100%;margin-top:.4rem}
.list a{
  padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;
  color:var(--fg);text-decoration:none;font-size:.92rem;
}
.list a:hover{border-color:var(--acc)}

/* Zuletzt genutzter Zugang — steht nur im Browser des Nutzers, für Fremde
   ist das Feld leer und unsichtbar. */
.chip{
  margin-bottom:.9rem;padding:.35rem .8rem;border:1px solid var(--line);
  border-radius:999px;color:var(--mut);text-decoration:none;font-size:.8rem;
}
.chip:hover{border-color:var(--acc);color:var(--fg)}
.chip[hidden]{display:none}

footer{padding-top:2.5rem;display:flex;gap:1.1rem;position:relative;z-index:1}
footer a{color:#2f3941;text-decoration:none;font-size:.72rem}
footer a:hover{color:var(--mut)}