/* Numeon — Downloadseite und Status.
   Dunkel, weil es so aussehen soll wie etwas, das man ernst nimmt. Der
   Blauton ist derselbe wie in der Anwendung (--numeon-accent). */

:root {
  --blau:    #4f8cff;
  --grund:   #0e1116;
  --karte:   #161b22;
  --rand:    #262c36;
  --text:    #e6e9ef;
  --leise:   #8b95a5;
  --gruen:   #3fb950;
  --gelb:    #d29922;
  --rot:     #f85149;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 50% -12%, #1b2436 0%, transparent 62%),
    var(--grund);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 60px;
}

/* --- Kopf --- */
.marke {
  display: flex; align-items: center; gap: 11px;
  margin: 58px 0 6px;
}
/* Das Zeichen aus der Anwendung selbst — dieselbe .ico, die auch die EXE
   traegt. Nachgebaut waere es irgendwann anders als das Original. */
.punkt {
  width: 30px; height: 30px; border-radius: 8px;
  display: block;
  box-shadow: 0 0 0 5px rgba(79, 140, 255, .13);
}
.marke h1 {
  font-size: 25px; font-weight: 600; margin: 0; letter-spacing: -.4px;
}
.unterzeile {
  color: var(--leise); font-size: 13.5px; margin: 0 0 34px; text-align: center;
}

/* --- Karte --- */
.karte {
  width: 100%; max-width: 460px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 28px;
}
.karte.weit { max-width: 680px; }
.karte h2 {
  font-size: 15px; font-weight: 600; margin: 0 0 4px;
}
.karte .hinweis {
  color: var(--leise); font-size: 13px; margin: 0 0 20px;
}

/* --- Formular --- */
label {
  display: block; font-size: 12px; color: var(--leise);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 7px;
}
input[type="text"] {
  width: 100%; padding: 13px 14px;
  background: #0d1117; color: var(--text);
  border: 1px solid var(--rand); border-radius: 9px;
  font-size: 16px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 1.5px;
}
input[type="text"]:focus {
  outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .16);
}
button {
  width: 100%; margin-top: 14px; padding: 13px;
  background: var(--blau); color: #fff;
  border: 0; border-radius: 9px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
button:hover { background: #3f7cf0; }

/* --- Meldungen --- */
.meldung {
  margin-top: 16px; padding: 11px 14px; border-radius: 9px;
  font-size: 13.5px; border: 1px solid;
}
.meldung.fehler { border-color: #5c2b2b; background: #2a1618; color: #ffb3ae; }
.meldung.ok     { border-color: #1d4a2b; background: #10241a; color: #86e29b; }

/* --- Download --- */
.download {
  display: block; margin-top: 6px; padding: 16px;
  background: #10241a; border: 1px solid #1d4a2b; border-radius: 11px;
  color: #86e29b; text-decoration: none; text-align: center;
  font-weight: 600; font-size: 15px;
}
.download:hover { background: #142e21; }
.download .klein {
  display: block; font-weight: 400; font-size: 12.5px;
  color: var(--leise); margin-top: 3px;
}

/* --- Der pochende Punkt ---
   Ein Ring, der aus dem Punkt herauslaeuft und verblasst. `currentColor`
   statt fester Farben: die Farbe setzt die umgebende Zustandsklasse, und
   Punkt, Schein und Ring folgen automatisch. */
.puls {
  position: relative; flex: 0 0 11px;
  width: 11px; height: 11px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px 1px currentColor;
}
.puls::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: currentColor;
  animation: pochen 1.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pochen {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
/* Wer Bewegung abbestellt hat, bekommt keinen wandernden Ring — aber der
   Punkt atmet weiter, nur ueber die Helligkeit statt ueber Groesse und
   Lage. Genau darum geht es bei der Einstellung: Bewegung im Bild kann
   Schwindel ausloesen, eine Helligkeitsaenderung nicht.
   ⚠️ Windows meldet das schon, wenn unter *Barrierefreiheit ->
   Visuelle Effekte* die Animationseffekte aus sind — deshalb bleibt hier
   etwas sichtbar statt gar nichts. */
@media (prefers-reduced-motion: reduce) {
  .puls::after { animation: none; }
  .puls { animation: glimmen 1.9s ease-in-out infinite; }
}
@keyframes glimmen {
  0%, 100% { box-shadow: 0 0 6px 0 currentColor; opacity: .75; }
  50%      { box-shadow: 0 0 13px 2px currentColor; opacity: 1; }
}

.gruen { color: var(--gruen); }
.gelb  { color: var(--gelb); }
.rot   { color: var(--rot); }

/* --- Statusbox auf der Downloadseite --- */
.statusbox {
  width: 100%; max-width: 460px;
  margin-top: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; text-decoration: none;
}
.statusbox:hover { border-color: #333c4a; background: #1a2029; }
.sb-text { flex: 1; min-width: 0; line-height: 1.35; }
.sb-text b {
  display: block; color: var(--text); font-size: 13.5px; font-weight: 600;
}
.sb-dazu {
  display: block; color: var(--leise); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-knopf {
  flex: 0 0 auto; color: var(--leise); font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--rand); border-radius: 7px; padding: 6px 12px;
}
.statusbox:hover .sb-knopf { color: var(--text); border-color: #3d4657; }

/* --- Status --- */
.ampel {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 11px;
  border: 1px solid var(--rand); background: #0d1117;
  margin-bottom: 22px;
}
.ampel .titel { font-weight: 600; font-size: 15px; color: var(--text); }
.ampel .dazu  { color: var(--leise); font-size: 13px; }

table.werte { width: 100%; border-collapse: collapse; font-size: 14px; }
table.werte td { padding: 9px 0; border-bottom: 1px solid var(--rand); }
table.werte tr:last-child td { border-bottom: 0; }
table.werte td:first-child { color: var(--leise); width: 45%; }
table.werte td:last-child  { text-align: right; font-variant-numeric: tabular-nums; }
.gut  { color: var(--gruen); }
.warn { color: var(--gelb); }
.weg  { color: var(--rot); }

/* --- Fuss ---
   Zurueckhaltend mit Absicht: der Verweis auf das Studio gehoert dazu, aber
   die Seite gehoert dem Kunden, nicht der Marke. Deshalb kein Logo, keine
   Flaeche, nur eine feine Linie und leise Schrift. */
footer {
  width: 100%; max-width: 460px;
  margin-top: 40px; padding-top: 18px;
  border-top: 1px solid var(--rand);
  color: var(--leise); font-size: 12px; text-align: center;
  line-height: 1.9;
}
.karte.weit ~ footer { max-width: 680px; }
footer a { color: var(--leise); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }

.fuss-oben { margin-bottom: 14px; }

/* Marke und Wortmarke wie auf hartix.de — dasselbe SVG, dieselbe
   Akzentfarbe auf den letzten zwei Buchstaben. Nachgebaut waere es
   irgendwann anders als das Original. */
.fuss-marke {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; margin-bottom: 6px;
}
.fuss-marke img { display: block; border-radius: 7px; }
.fuss-wm {
  font-size: 16px; font-weight: 700; letter-spacing: -.2px;
  color: #d7dbe4;
}
.wm-akzent { color: #8b7cff; }
.fuss-marke:hover .fuss-wm { color: #fff; }

.fuss-zeile { color: var(--leise); font-size: 12px; }
.fuss-recht { margin-top: 8px; font-size: 11.5px; opacity: .85; }
.fuss-recht a { margin: 0 7px; }

@media (max-width: 520px) {
  .marke { margin-top: 38px; }
  .karte { padding: 22px; }
  .statusbox { padding: 12px 13px; gap: 11px; }
  .sb-knopf { padding: 5px 9px; font-size: 12px; }
}