/* ==========================================================================
     Gestaltung wie die Wartungsanzeige der Arbeitsplaetze
     (ansible-clients/roles/subalis_client_wartung/files/subalis-wartungsfenster).
     Uebernommen: Hintergrundbild abgedunkelt um 0.82, Farbwerte, Kopfzeile mit
     Firma in Subalis-Gruen, mittiger Ring, Fusszeile mit Richtlinie.
     Grundsatz von dort: die MARKE ist immer gruen, nur der ZUSTAND faerbt sich.
     Zustand hier = "gesperrt" -> FEHLERFARBE #F04A50 (dieselbe, die das Fenster
     fuer den Zustand "fehler" benutzt). So entschieden: eine Sperre soll als
     Sperre gelesen werden, nicht als Hinweis.
     ========================================================================== */
  :root {
    --akzent:      #93C83E;   /* Subalis-Gruen, Marke                */
    --fehler:      #F04A50;   /* Zustand "gesperrt" - Fehlerfarbe    */
    --hell:        #E8EBE3;   /* hell   (0.91 0.92 0.89)             */
    --grau:        #A8B0A1;   /* grau   (0.66 0.69 0.63)             */
    --dunkelgrau:  #7A8275;   /* dunkelgrau (0.48 0.51 0.46)         */
    --linie:       rgba(255,255,255,.10);
    --linie-fein:  rgba(255,255,255,.07);
    --rand:        max(20px, 6vw);
  }
  * { box-sizing: border-box; }
  html { height: 100%; }
  body {
    margin: 0; min-height: 100%;
    color: var(--hell);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Fehlt das Bild, bleibt der dunkle Verlauf - genau wie im Fenster. */
    background:
      linear-gradient(rgba(5,8,5,.82), rgba(5,8,5,.82)),
      url("/static/hintergrund.jpg") center / cover no-repeat fixed,
      linear-gradient(135deg, #0E100E, #050605);
    background-color: #0A0C0A;
    display: flex; flex-direction: column;
    padding: max(16px, 3.7vw) var(--rand) max(20px, 3.4vw);
  }

  /* --- Kopfzeile ---------------------------------------------------------- */
  .kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .firma {
    font-size: 15px; font-weight: 700; letter-spacing: 3.2px;
    color: var(--akzent); opacity: .95; text-transform: uppercase;
  }
  .bereich { font-size: 12.5px; color: var(--dunkelgrau); margin-top: 4px; }
  .kennung {
    font-size: 12.5px; color: var(--dunkelgrau); text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding-top: 2px; word-break: break-all;
  }
  .strich { height: 1px; background: var(--linie); margin-top: 20px; }

  /* --- Mitte -------------------------------------------------------------- */
  .mitte {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: clamp(28px, 5vh, 64px) 0;
  }
  .ring { width: clamp(96px, 14vh, 156px); height: clamp(96px, 14vh, 156px); margin-bottom: 46px; }

  /* Die Animation aus subalis-wartungsfenster, Methode ring():
     zwei gegenlaeufige Boegen, drei Trabanten, pulsender Kern.
     Umlaufzeiten = 2*pi / Winkelgeschwindigkeit des Originals:
       Aussenbogen t*1.5  -> 4.189 s      Trabanten-Umlauf t*0.9  -> 6.981 s
       Innenbogen  t*1.05 -> 5.984 s      Trabanten-Puls   t*2.4  -> 2.618 s
       Kern-Puls   t*1.8  -> 3.491 s
     transform-box: view-box, damit 80/80 wirklich die Mitte des viewBox ist -
     die Umhuellende eines Teilbogens ist NICHT die Kreismitte. */
  .ring g, .ring .kern { transform-box: view-box; transform-origin: 80px 80px; }
  .bogen-aussen { animation: dreh       4.189s linear infinite; }
  .bogen-innen  { animation: dreh-zurueck 5.984s linear infinite; }
  .trabanten    { animation: dreh       6.981s linear infinite; }
  .kern         { animation: puls-kern  3.491s ease-in-out infinite; }
  .trabant      { opacity: .52;            /* Ruhewert = Mitte des Pulses */
                  animation: puls-trabant 2.618s ease-in-out infinite;
                  transform-box: fill-box; transform-origin: center; }
  .trabant:nth-of-type(2) { animation-delay: -.417s; }   /* Phase +1 rad */
  .trabant:nth-of-type(3) { animation-delay: -.833s; }   /* Phase +2 rad */

  @keyframes dreh         { to { transform: rotate(360deg); } }
  @keyframes dreh-zurueck { to { transform: rotate(-360deg); } }
  @keyframes puls-kern    { 0%,100% { opacity: .30; } 50% { opacity: .52; } }
  @keyframes puls-trabant {
    0%,100% { opacity: .25; transform: scale(.76); }
    50%     { opacity: .80; transform: scale(1.24); }
  }
  /* Wie im Original: wer Bewegung abbestellt hat, bekommt das ruhende Bild. */
  @media (prefers-reduced-motion: reduce) {
    .bogen-aussen, .bogen-innen, .trabanten, .kern, .trabant { animation: none; }
  }
  h1 {
    font-size: clamp(26px, 3vw, 46px); font-weight: 700; letter-spacing: -.01em;
    margin: 0 0 18px; color: var(--hell);
  }
  .text {
    font-size: clamp(15px, 1.7vw, 24px); margin: 0 0 14px;
    color: var(--fehler); opacity: .92;
  }
  .zusatz {
    font-size: 14.5px; color: var(--grau); margin: 0;
    max-width: 62ch;
  }

  /* --- Datenteil ---------------------------------------------------------- */
  /* Breite wie der Fortschrittsbalken im Fenster: min(880, 52 % der Breite). */
  .daten { width: min(880px, 92vw); margin: clamp(30px, 5vh, 54px) auto 0; text-align: left; }

  .ip { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .ip .lbl { font-size: 13px; color: var(--dunkelgrau); }
  .ip .val {
    font-size: clamp(18px, 2vw, 26px); font-weight: 600; color: var(--fehler);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
  }
  .ip + .strich { margin-top: 14px; }

  h2 {
    font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--dunkelgrau); font-weight: 600;
    margin: 34px 0 6px;
  }
  table { width: 100%; border-collapse: collapse; }
  tr { border-top: 1px solid var(--linie-fein); }
  tr:first-child { border-top: 0; }
  th {
    text-align: left; font-weight: 400; color: var(--dunkelgrau);
    font-size: 13px; padding: 7px 16px 7px 0; vertical-align: top;
    white-space: nowrap; width: 38%;
  }
  td {
    padding: 7px 0; vertical-align: top; word-break: break-word; color: var(--grau);
    font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  td.leer { font-family: inherit; font-size: 13px; color: var(--dunkelgrau); }

  /* --- Fusszeile ---------------------------------------------------------- */
  .fuss { text-align: center; }
  .fuss .strich { margin-bottom: 16px; }
  .richtlinie { font-size: 14px; color: var(--akzent); opacity: .80; margin: 0; }
  .kontakt { font-size: 13px; color: var(--dunkelgrau); margin: 8px 0 0; }

  @media (max-width: 640px) {
    .kopf { flex-direction: column; gap: 10px; }
    .kennung { text-align: left; }
    th { width: 44%; white-space: normal; }
  }

/* --- Abweichungen fuer secret.alldata.world -------------------------------
   Zustand hier = "in Betrieb, nur ueber persoenliche Links" -> Subalis-Gruen,
   wie das Wartungsfenster im Zustand "laeuft". Marke bleibt ohnehin gruen. */
.text { color: var(--akzent); }
.ip .val { color: var(--akzent); }
.hinweis-speicher { font-size: 12.5px; color: var(--dunkelgrau); margin: 22px 0 0; text-align: left; }

/* --- Abholseite und Hinweise (gleicher Stil) ------------------------------ */
.abholung { width: min(640px, 92vw); margin: clamp(26px, 4vh, 44px) auto 0; text-align: left; }
.abholung .knopfzeile { text-align: center; margin: 22px 0 6px; }
.abholung button {
  font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 13px 30px; border-radius: 8px; border: 1px solid var(--akzent);
  background: var(--akzent); color: #0A0C0A; cursor: pointer; letter-spacing: .02em;
}
.abholung button:hover { filter: brightness(1.08); }
.abholung button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.abholung button.zweit { background: transparent; color: var(--akzent); padding: 9px 20px; font-size: 14.5px; }
.abholung label { display: block; font-size: 13px; color: var(--dunkelgrau); margin: 18px 0 6px; }
.abholung textarea, .abholung input#code {
  width: 100%; color: var(--hell); background: rgba(255,255,255,.04);
  border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px;
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.abholung textarea:focus, .abholung input#code:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.abholung input#code { width: 11em; font-size: 22px; letter-spacing: .35em; text-align: center; }
.abholung #sms { border-top: 1px solid var(--linie-fein); border-bottom: 1px solid var(--linie-fein);
  padding: 6px 0 20px; margin: 10px 0 0; }
.abholung #sms p { color: var(--grau); font-size: 14.5px; margin: 14px 0 0; }
.abholung #status { min-height: 1.6em; text-align: center; color: var(--grau); font-size: 14.5px; margin: 14px 0 0; }
.abholung #ausgabe .knopfzeile { margin-top: 14px; }
.abholung .hinweis { color: var(--fehler); text-align: center; }
.text.fehlerzustand { color: var(--fehler); }