/* ==========================================================================
   Nexus Werkbank — Gestaltung
   ==========================================================================

   RICHTUNG: "Maschinenraum" — Werkstatt-Industrie statt Software-Ästhetik.

   Das Alleinstellungsmerkmal ist körperlich: Es gibt eine echte Grafikkarte,
   die in Deutschland warm wird. Also wird auch das Design maschinell statt
   abstrakt: sichtbare Hardware, Glühdraht-Orange als einzige Signalfarbe,
   Messwerte wie an einem Prüfstand.

   -------------------------------------------------------------------------
   DIE WICHTIGSTE REGEL: ZWEI ZONEN, STRENG GETRENNT
   -------------------------------------------------------------------------

     HALLE    = Startseite, Werkzeugwand, Maschinenraum.
                Fest dunkel. Darf beeindrucken. 3D, große Typografie.

     WERKBANK = der Arbeitsbereich innerhalb eines Werkzeugs.
                Folgt der Systemeinstellung. Eine Spalte. NULL Dekoration.
                Kein 3D, kein Leuchten, kein Verlauf.

   Warum: Laut Bitkom-Erhebung 2025 glauben 59 % der Handwerksbetriebe,
   digitale Anwendungen lohnten sich nur für größere Firmen. Eine durchgehend
   dunkle "Hacker"-Optik im Arbeitsbereich bestätigt genau dieses Vorurteil.
   Die Bühne darf beeindrucken — das Werkzeug muss langweilig zuverlässig wirken.

   -------------------------------------------------------------------------
   BEWUSST WEGGELASSEN
   -------------------------------------------------------------------------
   Bento-Raster (2026 das Standardlayout, macht austauschbar) · Glasoptik
   (haben Collins andere Apps, und großflächig teuer) · lila-blaue KI-Verläufe ·
   Stockfotos und KI-erzeugte Gesichter (Glaubwürdigkeitsbruch bei einer
   Datenschutz-Marke) · Cookie-Banner (weil keine Verfolgung stattfindet) ·
   Karussells · Vorlade-Bildschirme · Emoji als Symbole.

   KEINE Anfrage an einen fremden Server. Schriften und 3D-Bibliothek liegen
   auf unserem eigenen Rechner. Das ist die technische Einlösung des
   Datenschutz-Versprechens, nicht Sparsamkeit.
   ========================================================================== */

/* ------------------------------------------------------------------ Schriften */

@font-face {
  font-family: "Archivo";
  src: url("../schrift/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../schrift/jetbrains.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift-text: "Archivo", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;
  /* Ausschließlich für Maschinendaten: Messwerte, Warteschlange, Temperatur,
     Werkzeugnummern. Niemals für Fließtext. */
  --schrift-daten: "JetBrains Mono", ui-monospace, "SF Mono",
                   "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ Farben */

:root {
  color-scheme: light dark;

  /* --- HALLE: fest dunkel, kein Umschalter --------------------------- */
  --halle-000: oklch(0.130 0.012 258);      /* nie reines Schwarz */
  --halle-100: oklch(0.175 0.014 258);
  --halle-200: oklch(0.235 0.016 258);
  --halle-300: oklch(0.320 0.018 258);
  --halle-txt: oklch(0.940 0.006 258);
  --halle-mut: oklch(0.720 0.012 258);

  /* --- MARKE: Nexus-Blau (Variablenname bleibt --glut aus Kompatibilität) --- */
  --glut:       oklch(0.617 0.207 263.2);       /* #3F7BFF  Nexus-Blau */
  --glut-tief:  oklch(0.547 0.209 264.3);       /* #2F63E8  auf hell / Knopf */
  --glut-hell:  oklch(0.700 0.170 262);         /* helleres Blau für Hover */
  --glut-hauch: oklch(0.617 0.207 263.2 / 0.14);

  /* --- Zierfarbe: Petrol --------------------------------------------- */
  --zier:       oklch(0.613 0.108 218.8);       /* #0E93B0  Petrol */
  --zier-hell:  oklch(0.712 0.116 214.1);       /* #2CB4CE  auf dunkel */

  /* --- Maschinenzustand: Nexus-Signaltöne, nie Dekoration ------------ */
  --laeuft:  oklch(0.756 0.208 147);            /* #30D158 */
  --stau:    oklch(0.782 0.171 67.2);           /* #FF9F0A */
  --stoerung:oklch(0.663 0.224 28.3);           /* #FF453A */

  --radius:       4px;
  --radius-gross: 8px;
  --takt-kurz:    120ms;
  --takt:         240ms;
  --takt-lang:    480ms;
  --kurve:        cubic-bezier(0.22, 0.61, 0.36, 1);

  --bahn-max: 1180px;
  --rand:     clamp(1.15rem, 4.5vw, 2.75rem);
}

/* --- WERKBANK: folgt dem Betriebssystem ------------------------------ */
/* Zuerst die helle Fassung als Grundlage (funktioniert überall), */
:root {
  --bank-grund:  oklch(0.985 0.004 95);
  --bank-platte: oklch(1 0 0);
  --bank-tief:   oklch(0.955 0.005 95);
  --bank-txt:    oklch(0.240 0.012 262);
  --bank-leise:  oklch(0.470 0.012 262);
  --bank-still:  oklch(0.600 0.010 262);
  --bank-linie:  oklch(0.890 0.006 95);
  --bank-kante:  oklch(0.780 0.010 262);
  --bank-schatten: 0 1px 2px oklch(0.24 0.012 262 / 0.06),
                   0 4px 14px oklch(0.24 0.012 262 / 0.05);
}

/* dann die dunkle per Systemeinstellung überschreiben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-fassung="hell"]) {
    --bank-grund:  oklch(0.175 0.014 258);
    --bank-platte: oklch(0.235 0.016 258);
    --bank-tief:   oklch(0.150 0.013 258);
    --bank-txt:    oklch(0.940 0.006 258);
    --bank-leise:  oklch(0.760 0.010 258);
    --bank-still:  oklch(0.630 0.010 258);
    --bank-linie:  oklch(0.320 0.018 258);
    --bank-kante:  oklch(0.430 0.018 258);
    --bank-schatten: 0 1px 2px oklch(0 0 0 / 0.35),
                     0 6px 18px oklch(0 0 0 / 0.30);
  }
}

/* Umschalter von Hand — überstimmt beides. */
:root[data-fassung="dunkel"] {
  --bank-grund:  oklch(0.175 0.014 258);
  --bank-platte: oklch(0.235 0.016 258);
  --bank-tief:   oklch(0.150 0.013 258);
  --bank-txt:    oklch(0.940 0.006 258);
  --bank-leise:  oklch(0.760 0.010 258);
  --bank-still:  oklch(0.630 0.010 258);
  --bank-linie:  oklch(0.320 0.018 258);
  --bank-kante:  oklch(0.430 0.018 258);
  --bank-schatten: 0 1px 2px oklch(0 0 0 / 0.35),
                   0 6px 18px oklch(0 0 0 / 0.30);
}

/* Sehr alte Browser ohne oklch bekommen wenigstens lesbare Farben. */
@supports not (color: oklch(0.5 0.1 250)) {
  :root {
    --halle-000: #16181f; --halle-100: #1e212a; --halle-200: #2a2e3a;
    --halle-300: #3d4351; --halle-txt: #eceef2; --halle-mut: #a8adb8;
    --glut: #3F7BFF; --glut-tief: #2F63E8; --glut-hell: #6f9dff; --zier: #0E93B0;
    --bank-grund: #fbfaf8; --bank-platte: #fff; --bank-txt: #35383f;
    --bank-leise: #6b6f78; --bank-linie: #e3e1dd; --bank-kante: #b8b6b1;
  }
}

/* ------------------------------------------------------------------ Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* Die Halle ist die Grundstimmung. Die Werkbank setzt sich selbst hell. */
  background: var(--halle-000);
  color: var(--halle-txt);
  font-family: var(--schrift-text);
  /* 17px Grundgröße — die Zielgruppe ist im Schnitt über 50. */
  font-size: clamp(1.0625rem, 0.99rem + 0.22vw, 1.125rem);
  line-height: 1.65;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bewegung: die Einstellung des Betriebssystems gilt.
   WebGL beachtet sie nie von selbst — das erledigt maschinenraum.js. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------ Typografie */

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  /* Archivo ist eine Variable Font — die Breite trägt die Wirkung. */
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 1.3rem + 4.6vw, 5.2rem); font-variation-settings: "wdth" 116; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); font-weight: 700;
     font-variation-settings: "wdth" 105; letter-spacing: -0.01em; }

p { margin: 0 0 1em; max-width: 66ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Rubrik über einem Abschnitt — trägt eine Aussage, keine Deko. */
.rubrik {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--schrift-daten);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--glut);
  margin-bottom: 0.9rem;
}
.rubrik::before {
  content: ""; width: 1.6rem; height: 2px; background: var(--glut); flex: none;
}

/* Alle Zahlen, die von der Maschine kommen. Tabellenziffern, damit
   sich beim Zählen nichts verschiebt. */
.messwert {
  font-family: var(--schrift-daten);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--glut); }

:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------------ Aufbau */

.bahn { width: 100%; max-width: var(--bahn-max); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: clamp(3.5rem, 9vw, 7rem); }

/* ================================================================== HALLE */

.halle { background: var(--halle-000); color: var(--halle-txt); }
.halle-tief { background: var(--halle-100); }

/* ================================================================== WERKBANK */

.werkbank {
  background: var(--bank-grund);
  color: var(--bank-txt);
  min-height: 100dvh;
}
.werkbank p { color: var(--bank-txt); }

.platte {
  background: var(--bank-platte);
  border: 1px solid var(--bank-linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--bank-schatten);
}

/* ------------------------------------------------------------------ Knöpfe */

.knopf {
  --k-grund: transparent;
  --k-schrift: currentColor;
  --k-kante: currentColor;

  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem;                     /* 46px — auch mit Arbeitshandschuhen */
  padding: 0.62rem 1.2rem;
  border: 1px solid var(--k-kante);
  border-radius: var(--radius);
  background: var(--k-grund);
  color: var(--k-schrift);
  font-family: var(--schrift-text);
  font-size: 0.97rem; font-weight: 600;
  font-variation-settings: "wdth" 102;
  cursor: pointer; text-decoration: none;
  transition: background var(--takt-kurz) var(--kurve),
              border-color var(--takt-kurz) var(--kurve),
              color var(--takt-kurz) var(--kurve),
              transform var(--takt-kurz) var(--kurve);
}
.knopf:active:not(:disabled) { transform: translateY(1px); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }

/* Der eine Knopf, der die Maschine anwirft. Deshalb Marken-Blau. */
.knopf--start {
  --k-grund: var(--glut-tief);
  --k-schrift: oklch(1 0 0);
  --k-kante: var(--glut-tief);
  font-size: 1.03rem; padding: 0.78rem 1.6rem;
}
.knopf--start:hover:not(:disabled) { --k-grund: var(--glut); --k-kante: var(--glut); }

/* In der Halle */
.halle .knopf { --k-kante: var(--halle-300); --k-schrift: var(--halle-txt); }
.halle .knopf:hover:not(:disabled) { --k-grund: var(--halle-200); --k-kante: var(--halle-mut); }
.halle .knopf--start { --k-grund: var(--glut-tief); --k-kante: var(--glut-tief); --k-schrift: oklch(1 0 0); }

/* Auf der Werkbank */
.werkbank .knopf { --k-kante: var(--bank-kante); --k-schrift: var(--bank-txt); --k-grund: var(--bank-platte); }
.werkbank .knopf:hover:not(:disabled) { --k-grund: var(--bank-tief); --k-kante: var(--bank-still); }
.werkbank .knopf--start { --k-grund: var(--glut-tief); --k-kante: var(--glut-tief); --k-schrift: oklch(1 0 0); }
.werkbank .knopf--start:hover:not(:disabled) { --k-grund: var(--glut); --k-kante: var(--glut); }

.knopf--leise { --k-kante: transparent; --k-grund: transparent; opacity: 0.85; }
.knopf--leise:hover:not(:disabled) { opacity: 1; }
.knopf--klein { min-height: 2.3rem; padding: 0.36rem 0.8rem; font-size: 0.86rem; }

/* ------------------------------------------------------------------ Formular */

.feldgruppe { margin-bottom: 1.5rem; }

.feldgruppe > label {
  display: block; margin-bottom: 0.3rem;
  font-size: 1.02rem; font-weight: 650;
  font-variation-settings: "wdth" 104;
  color: var(--bank-txt);
}

.feldhilfe {
  margin: 0 0 0.55rem; max-width: 62ch;
  font-size: 0.875rem; line-height: 1.5;
  color: var(--bank-leise);
}

.werkbank input[type="text"],
.werkbank textarea,
.werkbank select {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-family: var(--schrift-text); font-size: 1rem; line-height: 1.55;
  color: var(--bank-txt);
  background: var(--bank-platte);
  border: 1px solid var(--bank-kante);
  border-radius: var(--radius);
  transition: border-color var(--takt-kurz) var(--kurve),
              box-shadow var(--takt-kurz) var(--kurve);
}
.werkbank input[type="text"]:hover,
.werkbank textarea:hover,
.werkbank select:hover { border-color: var(--bank-still); }

.werkbank input[type="text"]:focus,
.werkbank textarea:focus,
.werkbank select:focus {
  outline: none;
  border-color: var(--glut);
  box-shadow: 0 0 0 3px var(--glut-hauch);
}

.werkbank textarea { min-height: 7.5rem; resize: vertical; }
.werkbank ::placeholder { color: var(--bank-still); opacity: 1; }

.werkbank select {
  appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.78rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ Meldungen */

.meldung {
  display: flex; gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--bank-linie);
  border-left: 3px solid var(--bank-still);
  background: var(--bank-platte);
  font-size: 0.93rem; line-height: 1.55;
}
.meldung--hinweis  { border-left-color: var(--glut); }
.meldung--achtung  { border-left-color: var(--stau); }
.meldung--fehler   { border-left-color: var(--stoerung); }
.meldung--gut      { border-left-color: var(--laeuft); }

/* ------------------------------------------------------------------ Zustandslampe */

.lampe {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--schrift-daten);
  font-size: 0.71rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.lampe::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.lampe--laeuft   { color: var(--laeuft); }
.lampe--warte    { color: var(--stau); }
.lampe--stoerung { color: var(--stoerung); }

.lampe--laeuft::before { box-shadow: 0 0 0 3px oklch(0.756 0.208 147 / 0.20); }
.lampe--warte::before  { box-shadow: 0 0 0 3px oklch(0.782 0.171 67.2 / 0.20); }
.lampe--stoerung::before{ box-shadow: 0 0 0 3px oklch(0.663 0.224 28.3 / 0.20); }

/* ------------------------------------------------------------------ Hilfsmittel */

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.zum-inhalt {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--glut-tief); color: oklch(1 0 0);
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
  transition: top var(--takt) var(--kurve);
}
.zum-inhalt:focus { top: 0.5rem; }

/* ------------------------------------------------------------------ Druck */

@media print {
  body, .werkbank { background: #fff; color: #000; font-size: 11pt; }
  .nicht-drucken, header, footer, nav,
  .maschinenraum, .werkzeugwand, .knopf, .reglerleiste { display: none !important; }
  .ergebnistext { border: 0; box-shadow: none; padding: 0; }
}