/* Das Thema. EINE Datei fuer die ganze Seite - Kanal wie Praesidium.
   Wer hier etwas aendert, aendert es ueberall. Das ist der Punkt.

   RICHTUNG: Fabrik, nicht Buero. Vorbild ist Factorio - warme Erdtoene,
   Metall, Orange als einzige Leuchtfarbe, alles wirkt gebaut statt gelayoutet.
   Das ersetzt die frueheren Regeln ("keine Kacheln, keine Schatten"): die
   galten fuer eine Apple-artige Richtung. Hier SIND die Platten die Aesthetik.

   Drei Regeln, aus denen alles folgt:

   1. ALLES IST AUS MATERIAL. Platten haben eine Kante: hell oben, dunkel
      unten. Nichts schwebt, nichts ist flach aufgemalt.
   2. ORANGE IST STROM. Es markiert, was aktiv ist oder Aufmerksamkeit
      braucht - niemals Zierde. Wer es fuer Deko verbraucht, hat es getoetet.
   3. ROT IST ALARM, und zwar nur fuer blockiert. Gruen ist "laeuft".
      Mehr Farben gibt es nicht.

   Kein Hellmodus. Ein Spiel committet sich auf einen Look.
*/

:root {
  /* Sagt dem Browser: dies ist eine dunkle Oberflaeche. Damit werden auch die
     Dinge dunkel, die WIR nicht gestalten koennen - die aufgeklappte Liste
     eines Auswahlfeldes zeichnet das Betriebssystem, nicht wir. Ohne das bleibt
     sie weiss, egal wie schoen das geschlossene Feld aussieht. */
  color-scheme: dark;

  /* Boden und Material */
  --boden:   #1c1815;   /* der dunkelste Grund - einen Tick dunkler, damit Platten mehr abheben */
  --platte:  #322c27;   /* Bauteile, Seitenleiste */
  --platte2: #3d362f;   /* erhoehte Platte */
  --fuge:    #120f0c;   /* harte Kante zwischen Teilen */
  --kante-hell: rgba(255, 236, 210, .16);
  --kante-dunkel: rgba(0, 0, 0, .6);

  /* Niete: helle Kuppe, dunkler Kern - macht aus einem Punkt einen Kopf. */
  --niete-hell: rgba(255, 238, 214, .5);
  --niete-dunkel: rgba(0, 0, 0, .7);

  /* Schrift */
  --ink:   #ede3d4;
  --dim:   #ac9f8c;   /* ~6:1 auf --platte */
  --leise: #8a7f70;   /* ~4,5:1 - Untergrenze fuer lesbaren Text */

  /* Signale. Drei, nicht mehr. */
  --strom: #f7a920;   /* Orange: aktiv, ausgewaehlt, wichtig - satter als vorher */
  --alarm: #e5573f;   /* Rot: blockiert. Sonst nichts. */
  --ok:    #6db33f;   /* Gruen: laeuft */

  /* Gebuerstetes Blech: zwei feine, gegenlaeufige Riefen-Raster. Als Variable,
     damit jede Platte dieselbe Kornrichtung traegt - eine Fabrik hat ein
     Walzwerk, nicht eines pro Bauteil. */
  --textur-stahl:
    repeating-linear-gradient(125deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(35deg, rgba(0,0,0,.05) 0px, rgba(0,0,0,.05) 1px, transparent 1px, transparent 7px);

  /* Vier Nietenkoepfe, fuer Bauteile mit sichtbarer Aussenkante. Fester
     12px-Einzug - passt zum vorhandenen Innenabstand der Platten. */
  --textur-nieten:
    radial-gradient(circle 3.4px at 12px 12px, var(--niete-hell) 0%, var(--niete-hell) 28%, var(--niete-dunkel) 68%, transparent 78%),
    radial-gradient(circle 3.4px at calc(100% - 12px) 12px, var(--niete-hell) 0%, var(--niete-hell) 28%, var(--niete-dunkel) 68%, transparent 78%),
    radial-gradient(circle 3.4px at 12px calc(100% - 12px), var(--niete-hell) 0%, var(--niete-hell) 28%, var(--niete-dunkel) 68%, transparent 78%),
    radial-gradient(circle 3.4px at calc(100% - 12px) calc(100% - 12px), var(--niete-hell) 0%, var(--niete-hell) 28%, var(--niete-dunkel) 68%, transparent 78%);

  --schrift: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --breite: none; /* Cockpit ist die einzige Seite mehr - keine Breitenbremse noetig (2026-07-21) */
  --luft: 26px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink);
  background: var(--boden);
  font: 14.5px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Rohrleitungen im Hintergrund - kaum sichtbar, aber sie sind da, wie in
   jeder echten Anlage. Fixiert, damit sie beim Scrollen nicht mitlaufen und
   den Blick auf die eigentlichen Daten nicht stoeren. z-index -1 haelt sie
   sicher hinter allem, unabhaengig davon, was sonst positioniert ist. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/texturen.svg");
  background-repeat: repeat; background-size: 160px 160px;
  opacity: .05; mix-blend-mode: overlay;
}

/* --- Material -----------------------------------------------------------
   Die Kante macht das Bauteil: hell oben, dunkel unten, dazu Kornrichtung
   und Nietenkoepfe an den Ecken. Ohne das ist es ein Rechteck, mit alldem
   ein Stueck gewalztes, vernietetes Blech. */
.platte {
  background-color: var(--platte);
  background-image: var(--textur-stahl), var(--textur-nieten);
  border: 1px solid var(--fuge);
  box-shadow:
    inset 0 1px 0 var(--kante-hell), inset 0 -2px 0 var(--kante-dunkel),
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 3px 6px rgba(0,0,0,.35);
}
.eingesenkt {
  background-color: var(--boden);
  background-image: var(--textur-stahl);
  border: 1px solid var(--fuge);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.3);
}

/* Warnstreifen: schwarz-rot diagonal, reserviert fuer Alarm-/Engpasszustaende.
   Nutzt bewusst KEIN neues Gelb - die Palette bleibt bei drei Signalfarben,
   Rot ist bereits "Alarm". Wird ab der Bottleneck-Erkennung eingesetzt. */
.warnstreifen {
  background-image: repeating-linear-gradient(
    45deg, var(--alarm) 0px, var(--alarm) 10px,
    var(--fuge) 10px, var(--fuge) 20px
  );
  background-size: 200% 200%;
  animation: warnlauf 12s linear infinite;
}
@keyframes warnlauf { to { background-position: 56px 0; } }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 46px; flex: none;
  background-color: var(--platte);
  background-image: var(--textur-stahl);
  border-bottom: 1px solid var(--fuge);
  box-shadow: inset 0 1px 0 var(--kante-hell), inset 0 -1px 0 var(--kante-dunkel),
              0 2px 5px rgba(0,0,0,.3);
  position: relative; z-index: 1;
}
.kopf h1 {
  font-size: 13px; font-weight: 700; margin: 0;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}

/* --- Dekor (dekor.mjs) ---------------------------------------------------
   Reine Zierde: kein Zustand, keine Daten. */
.dek-kopf-zahnrad {
  color: var(--leise); flex: none;
  animation: dreh 9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.dek-lampenleiste {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 6px var(--luft, 26px) 0; max-width: var(--breite); margin: 0 auto;
}
.dek-led {
  width: 6px; height: 6px; border-radius: 50%; background: #4a423a;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
  animation: blinken 2.6s ease-in-out infinite;
}
.dek-led:nth-child(1) { animation-delay: 0s; }
.dek-led:nth-child(2) { animation-delay: .4s; background: var(--ok); }
.dek-led:nth-child(3) { animation-delay: .9s; }
.dek-led:nth-child(4) { animation-delay: 1.5s; background: var(--strom); }
.dek-led:nth-child(5) { animation-delay: 2.1s; }
@keyframes blinken {
  0%, 76%, 100% { opacity: .35; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
  84% { opacity: 1; box-shadow: 0 0 5px currentColor, inset 0 1px 1px rgba(0,0,0,.3); }
}
.spacer { flex: 1; }
.zustand { font-size: 12.5px; color: var(--dim); }

.zurueck {
  color: var(--dim); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
}
.zurueck:hover { color: var(--strom); background: rgba(240,160,32,.10); }

.puls { width: 7px; height: 7px; border-radius: 50%; background: #5a5148; flex: none;
        transition: background .4s, box-shadow .4s; }
.puls.live { background: var(--ok); box-shadow: 0 0 6px rgba(109,179,63,.7); }

/* --- Beschriftung ------------------------------------------------------- */
.schild {
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--leise); user-select: none;
}

/* --- Bedienelemente -----------------------------------------------------
   Knoepfe sind Bauteile: kantig, gestanzt, kein Pillenrund. */
input, textarea, select, button { font: inherit; color: var(--ink); }

input, textarea, select {
  width: 100%; padding: 8px 10px;
  background: var(--boden); border: 1px solid var(--fuge);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
/* iOS-Falle (2026-07-26): Safari zoomt beim Antippen automatisch in JEDES
   Eingabefeld hinein, dessen Schrift kleiner als 16px ist - danach steht die
   Seite verschoben da und man muss von Hand zurueckzoomen. 16px verhindert
   das. Gilt nur fuer Beruehrungsgeraete, damit die kompaktere Desktop-
   Typografie unangetastet bleibt. */
@media (hover: none) {
  input, textarea, select { font-size: 16px; }
}
/* Das Auswahlfeld traegt sonst seinen Windows-Pfeil und seine Systemfarben
   mitten in die Fabrik. Also selbst zeichnen: eigener Pfeil, eigene Kante. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:hover { background-image: linear-gradient(45deg, transparent 50%, var(--strom) 50%),
                                 linear-gradient(135deg, var(--strom) 50%, transparent 50%); }
textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--strom);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(240,160,32,.4);
}
input::placeholder, textarea::placeholder { color: var(--leise); }

.knopf {
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  width: auto;
  color: var(--ink); background-color: var(--platte2);
  background-image: var(--textur-stahl);
  border: 1px solid var(--fuge);
  box-shadow: inset 0 1px 0 var(--kante-hell), inset 0 -2px 0 var(--kante-dunkel),
              0 1px 2px rgba(0,0,0,.35);
}
.knopf:hover { background-color: #4a423a; }
.knopf:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.knopf.ja { background: var(--strom); color: #241a08; border-color: #8a5a10; }
.knopf.ja:hover { background: #ffb43c; }
.knopf.nein:hover { background: #4a2e28; color: var(--alarm); }
.knopf.still { background: transparent; border-color: transparent; box-shadow: none; color: var(--dim); }
.knopf.still:hover { color: var(--strom); background: rgba(240,160,32,.10); }

.err { color: var(--alarm); font-size: 12.5px; min-height: 17px; }
.leer { color: var(--leise); font-size: 13.5px; }

/* --- Tor ---------------------------------------------------------------- */
.tor { max-width: 360px; margin: 16vh auto; padding: 24px; }
.tor h1 { font-size: 19px; font-weight: 700; margin: 0 0 6px; letter-spacing: .04em; text-transform: uppercase; }
.tor p { color: var(--dim); font-size: 13.5px; margin: 0 0 16px; }
.tor button {
  width: 100%; margin-top: 10px; padding: 10px;
  background: var(--strom); color: #241a08; border: 1px solid #8a5a10;
  font-weight: 700; cursor: pointer; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.3);
}
.tor button:hover { background: #ffb43c; }

/* Scrollbalken gehoeren auch zur Fabrik. */
* { scrollbar-width: thin; scrollbar-color: #4a423a var(--boden); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--boden); }
::-webkit-scrollbar-thumb { background: #4a423a; border: 2px solid var(--boden); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #5d5449; }