/* ============================================================================
   NEXUSGO — die Handy-Schale (Regelwerk `nexusgo-ist-eine-schale`).

   Eigene Datei, damit style.css unangetastet bleibt: Diese Seite ist die
   EINZIGE ohne Topbar und ohne Sichten-Leiste, und ihre Regeln haben auf den
   28 Schreibtisch-Seiten nichts verloren. Die Farbwelt kommt vollstaendig aus
   den Variablen von style.css — hier steht kein eigener Farbwert.

   Der Zuschnitt folgt dem, was am Handy anders ist als am Schirm:
     · Daumenreichweite — Bedienung unten, Anzeige oben.
     · Ein Ziel je Beruehrung — mindestens 44 px, kein Hover als Traeger.
     · Eine Spalte, immer. Kein Umbruch-Verhalten, das kippen kann.
   ========================================================================== */

body.go {
  /* Der Koerper scrollt NICHT — nur die Ansicht in der Mitte. Sonst wandert
     die Reiterleiste beim Wischen aus dem Bild, und genau sie soll bleiben. */
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.go-rahmen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 640px;      /* am Tablet/Schirm nicht auseinanderlaufen */
  margin: 0 auto;
  background: var(--bg);
}

/* --- Kopf ----------------------------------------------------------------- */
.go-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
  flex: none;
}
.go-kopf .go-titel {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.go-kopf button,
.go-kopf a {
  background: none;
  border: 0;
  color: var(--accent);
  font: 600 15px/1 inherit;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
}
.go-kopf a { color: var(--muted); font-size: 18px; }
.go-kopf button:focus-visible,
.go-kopf a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- Koerper -------------------------------------------------------------- */
.go-koerper {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 20px;
}
.go-ansicht { display: none; flex-direction: column; gap: 12px; }
.go-ansicht.aktiv { display: flex; }

/* --- Reiterleiste --------------------------------------------------------- */
.go-reiter {
  display: grid;
  /* minmax(0,1fr) statt 1fr, und min-width:0 am Kind: Ein Grid-Item ist von
     sich aus mindestens so breit wie sein INHALT. Mit „Inventur" und
     „Stempeln" als Beschriftung wurden fuenf Spalten dadurch zusammen breiter
     als ein 390-px-Bildschirm — der ganze Rahmen wuchs mit, und die rechte
     Kachel stand halb ausserhalb. Derselbe Merksatz wie beim Warenkorb in der
     Shop-Kopfzeile (`warenkorb-steht-fest`), nur fuer Grid statt Flexbox. */
  /* SO VIELE SPALTEN, WIE ES REITER GIBT. Bis zum 28.08.2026 stand hier fest
     `repeat(5, ...)`. Seit die Startseite die Stempeluhr ist, sind es aber nur
     noch vier — die fuenfte Spalte blieb leer, und alles rutschte nach links.
     Michael: „die Symbole unten linksbuendig. Die sollten wir gleichmaessig
     verteilen." `grid-auto-flow: column` zaehlt selbst. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 6px 4px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  flex: none;
}
.go-reiter > * {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font: 500 10.5px/1.2 inherit;
  padding: 6px 2px;
  border-radius: 9px;
  text-decoration: none;
  min-height: 46px;
  min-width: 0;
  overflow: hidden;
}
.go-reiter svg {
  width: 21px; height: 21px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.go-reiter [aria-current="page"] { color: var(--accent); }
.go-reiter > *:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Kacheln und Banner: ENTFERNT am 30.08.2026 -----------------------------
 * Hier standen 21 Regeln zu `.go-kachel`, `.go-kacheln` und `.go-banner` — der
 * Startbildschirm der Schale. Der ist am 28.08.2026 weggefallen (Michael: *„Ich
 * würde die Stempeluhr als Startseite nehmen, da das die Hauptverwendung der App
 * sein dürfte."*); `/nexusgo.html` ohne Raute leitet seither weiter.
 *
 * Die Regeln blieben stehen. Durchgang 11 hat sie am 30.08.2026 gefunden und
 * TROTZDEM nicht angefasst — es gab keinen Nachweis, weil NexusGO nicht im
 * Bildnetz stand. Erst nachdem die Schale aufgenommen wird (`bilder.js`, drei
 * Ansichten in 390x844), ist die Löschung belegbar.
 *
 * Gegengeprüft, bevor sie fiel: Die Namen kommen im gesamten Quelltext nicht
 * mehr vor. Der einzige Treffer auf `.go-kacheln` steht in
 * `scripts/klicktest/abschnitte/16-lager.js` — und ist ein KOMMENTAR, der genau
 * sagt, dass es sie nicht mehr gibt.
 * ------------------------------------------------------------------------- */

/* --- Zeilen (Auftraege, Positionen, Belege) -------------------------------- */
.go-zeile {
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  min-height: 52px;
}
button.go-zeile { cursor: pointer; }
button.go-zeile:active { background: var(--card-2); }
button.go-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.go-zeile .txt { flex: 1; min-width: 0; }
/* `display:block` ist hier kein Schoenheitsfehler, sondern die Bedingung:
   `.t` und `.s` sind <span>, und auf einem INLINE-Element wirken weder
   `overflow` noch `text-overflow`. Ohne das lief ein langer Artikelname
   ungekuerzt weiter und schob sich ueber die Mengenangabe rechts. */
.go-zeile .t {
  display: block;
  font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.go-zeile .s {
  display: block;
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.go-zeile .n {
  font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.go-zeile.warn { border-color: var(--warn-bdr); background: var(--warn-bg); }
.go-zeile.ok { border-color: var(--accent-border); background: var(--accent-dim); }
.go-zeile.erledigt .t { text-decoration: line-through; color: var(--muted); }

/* Der Haken ist das meistberuehrte Ziel der Seite — entsprechend gross. */
.go-haken {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  border: 1.6px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.go-haken.an { background: var(--accent); border-color: var(--accent); color: #04120a; }
.go-haken:disabled { cursor: not-allowed; opacity: .45; }
.go-haken:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Knoepfe -------------------------------------------------------------- */
.go-knopf {
  border: 0;
  border-radius: 11px;
  padding: 14px;
  font: 600 15px/1 inherit;
  background: var(--accent);
  color: #04120a;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
}
.go-knopf:disabled { background: var(--card-3); color: var(--subtle); cursor: not-allowed; }
.go-knopf.geist { background: transparent; border: 1px solid var(--line-2); color: var(--fg); }
.go-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Kamera-/Scanflaeche --------------------------------------------------- */
.go-fotofeld {
  border: 1.6px dashed var(--line-2);
  border-radius: var(--r-card);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  background: var(--card);
  cursor: pointer;
  color: inherit;
  font: inherit;
  width: 100%;
}
.go-fotofeld:active { background: var(--card-2); }
.go-fotofeld svg {
  width: 32px; height: 32px;
  stroke: var(--accent); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.go-fotofeld .f-t { font-weight: 600; font-size: 14.5px; }
.go-fotofeld .f-s { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.go-fotofeld:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Kleinkram ------------------------------------------------------------- */
.go-fortschritt { height: 7px; border-radius: 99px; background: var(--card-3); overflow: hidden; }
.go-fortschritt i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

.go-meldung {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  color: var(--fg);
}
.go-meldung.warn { border-color: var(--warn-bdr); background: var(--warn-bg); }
.go-meldung.bad { border-color: var(--bad-bdr); background: var(--bad-bg); }

.go-notiz { font-size: 11.5px; color: var(--subtle); line-height: 1.5; margin: 0; }
.go-trenner {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--subtle); font-weight: 600; margin-top: 4px;
}
.go-leer {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  padding: 28px 12px;
  line-height: 1.5;
}

/* ============================================================================
   WAS style.css FÜR JEDEN KNOPF SETZT — und hier nicht gilt.

   Der Hausstil kennt genau eine Sorte Knopf: klein, grün, einzeilig
   (`button{padding:8px 16px;background:var(--accent);white-space:nowrap}` und
   `button:hover{background:var(--accent-hover)}`). Am Schreibtisch ist das
   richtig. Hier sind Kacheln, Listenzeilen, Haken und Kamerafelder ebenfalls
   <button> — und liefen deshalb in zwei Fallen:

     · `white-space:nowrap` verhinderte JEDEN Umbruch. Der Zähler in der
       Kachel und der Hinweistext im Kamerafeld liefen einzeilig aus ihrem
       Kasten heraus, statt umzubrechen.
     · `button:hover` hat die Spezifität (0,1,1) und schlägt damit eine
       einfache Klassenregel (0,1,0) — unabhängig von der Reihenfolge der
       Dateien. Der aktive Reiter wurde beim Überfahren grün ausgemalt und
       seine Beschriftung unlesbar.

   Beides wird hier gezielt zurückgenommen, mit ausreichender Spezifität.
   ========================================================================== */
/* `.go-kachel` stand hier mit drin und ist am 30.08.2026 herausgenommen
   worden — die drei anderen leben und behalten die Regel. Wer den Selektor
   ganz geloescht haette, haette ihnen den Zeilenumbruch genommen. */
.go-fotofeld,
.go-knopf,
.go-zeile { white-space: normal; }

.go-reiter > *:hover,
.go-reiter > *:active { background: none; }
.go-fotofeld:hover { background: var(--card-2); }
button.go-zeile:hover { background: var(--card-2); }
.go-zeile.warn:hover { background: var(--warn-bg); }
.go-zeile.ok:hover { background: var(--accent-dim); }
.go-knopf:hover { background: var(--accent-hover); }
.go-knopf.geist:hover { background: var(--card-2); }
.go-knopf:disabled:hover { background: var(--card-3); }
.go-haken:hover { background: transparent; }
.go-haken.an:hover { background: var(--accent); }

/* Positionszeilen dürfen umbrechen — anders als die Auftragsliste.
   Ein Auftrag ist an Kundenname und Nummer erkennbar, da ist Kürzen richtig
   und hält die Liste kompakt. Im Regal steht man aber vor „…Zielscheiben DSB
   10 m,…" und weiss nicht, welche Packungsgrösse gemeint ist. Der volle Name
   IST hier die Information. */
#goPositionen .go-zeile .t {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* --- Geräte-Anmeldung ------------------------------------------------------
   Nur sichtbar, solange dieses Gerät noch nicht verbunden ist. */
.go-feld { display: flex; flex-direction: column; gap: 5px; }
.go-feld label { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.go-feld input {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 13px;
  color: var(--fg);
  font: 400 16px/1.2 inherit;   /* 16px: darunter zoomt iOS beim Antippen hinein */
  width: 100%;
}
.go-feld input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

/* Der Code wird abgelesen und woanders eingetippt — er darf gross sein. */
.go-code {
  margin: 0;
  text-align: center;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  padding: 14px 0;
  user-select: all;
}

/* --- Platz-Marker (`der-pickcode-verbindet-ware-und-auftrag`, 29.08.2026) ---
   Michael: „Ich scanne mein Zeugs und diesen Barcode und klebe ihn an die
   Kiste." Der Code ist die Antwort auf „wo steht das Zeug?" — deshalb steht er
   gross und oben, nicht als Fussnote. */
.go-platz {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--accent-border); background: var(--accent-dim);
}
.go-platz .p-code { font: 700 20px/1 inherit; color: var(--accent); letter-spacing: .04em; }
.go-platz .p-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.go-platz .p-los {
  background: transparent; border: 1px solid var(--line-2); color: var(--muted);
  border-radius: 8px; padding: 7px 11px; font: 600 12px/1 inherit; cursor: pointer;
  min-height: 34px; white-space: nowrap;
}
/* Ohne Marker steht dort eine Aufforderung, kein leeres Feld: Ein Pickgang
   ohne Marker endet damit, dass die Ware irgendwo steht. */
.go-platz.leer {
  display: block; border-style: dashed; border-color: var(--line-2);
  background: transparent; color: var(--subtle);
  font-size: 11.5px; line-height: 1.45;
}

/* --- Der eine Scanner (`ein-scanner-versteht-jeden-code`, 29.08.2026) -------
   Michael: „Platz und Auftrag und Ware erkennt gleich schon alles…" — Die
   Karte sagt in drei Zeilen, WAS gescannt wurde und was sich damit tun laesst.
   Gross genug, um sie im Lager mit einer Hand zu bedienen. */
.go-scankarte {
  border: 1px solid var(--accent-border); background: var(--accent-dim);
  border-radius: var(--r-card); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.go-scankarte .sk-typ {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.go-scankarte .sk-titel { font-weight: 600; font-size: 16px; line-height: 1.25; }
.go-scankarte .sk-unter { font-size: 12px; color: var(--muted); }
.go-scankarte .sk-zeile { font-size: 12.5px; color: var(--fg); }
.go-scankarte .go-knopf { margin-top: 8px; }