/* Kapitel 335 — NUR Modul-Spezialoptik (Hash-Gitter, Balkenmischer, Rechner-Kacheln).
   Alles, was assets/css/style.css schon bietet (Boxen, Buttons, Tabellen, Quiz, .token,
   .output, .chart-container, .value-display), wird hier NICHT wiederholt.
   Praefix aller Klassen: ng-  ·  Mobile first: das Gitter fuellt sich per auto-fill. */

/* ---------------------------------------------------------- 1) Hash-Tabelle */
.ng-norm { margin: .6rem 0; }
.ng-nz {
  font-family: 'Courier New', monospace; font-size: .88rem;
  background: var(--hk-blau-hell); border-radius: 6px; padding: .3rem .6rem; margin: .2rem 0;
  overflow-x: auto; white-space: nowrap;
}
.ng-gramme { margin: .6rem 0; }
.ng-gr-kopf { font-weight: 600; font-size: .9rem; margin: .5rem 0 .2rem; }
.ng-gr-leer { font-size: .88rem; color: var(--hk-text-soft); }
.ng-gr-box { display: flex; flex-wrap: wrap; gap: .2rem; }
.ng-chip { font-size: .78rem; }
.ng-chip.ng-suffix { background: #fff3cd; border-color: #e0a800; font-weight: 700; }

/* Fix 2026-09-05 (Freigabe 335): Satz-Eingaben waren bei 1280 px nur ~220 px breit
   (Browser-Default fuer <input type=text>) und schnitten "Die Hauptstadt von Frankreich"
   ab. Volle Zeilenbreite bis 520px, ohne die anderen Regler/Selects zu veraendern;
   das Label bricht in .input-group dadurch bei schmalen Viewports oberhalb um. */
#ngSatz, #ngSatzB { width: 100%; max-width: 520px; box-sizing: border-box; }

/* Das Regal: 101 Zellen, quadratisch, fuellen die Breite */
.ng-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 3px; margin: .5rem 0;
}
.ng-zelle {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--hk-grau-hell); border: 1px solid var(--hk-rahmen); border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: .62rem; color: #9aa1ab;
}
.ng-zelle.ng-treffer { color: #fff; border-color: transparent; font-weight: 700; }
.ng-zelle.ng-koll {
  background: var(--hk-rot) !important; border: 2px solid var(--hk-rot-dunkel);
  animation: ng-puls 1.2s ease-in-out 3;
}
@keyframes ng-puls { 50% { transform: scale(1.18); } }

.ng-legende { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .8rem; margin: .4rem 0 .8rem; }
.ng-lg { display: inline-flex; align-items: center; gap: .3rem; color: var(--hk-text-soft); }
.ng-punkt { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ng-punkt-koll { background: var(--hk-rot); border: 2px solid var(--hk-rot-dunkel); }

/* Gate-Mischer: drei Reihen mit je 8 Balken, Nulllinie in der Mitte */
.ng-mix { margin: .6rem 0; }
.ng-bz { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; }
.ng-bz-name {
  flex: 0 0 8.5em; font-size: .78rem; font-weight: 600; color: var(--hk-text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ng-bz-spur { flex: 1; display: flex; gap: 3px; height: 54px; }
.ng-bar {
  flex: 1; position: relative; background:
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--hk-rahmen) calc(50% - 1px),
                    var(--hk-rahmen) calc(50% + 1px), transparent calc(50% + 1px));
  border-radius: 3px;
}
.ng-bar i { position: absolute; left: 15%; right: 15%; border-radius: 2px; }
.ng-bar i.ng-pos { bottom: 50%; }
.ng-bar i.ng-neg { top: 50%; }

/* ---------------------------------------------------------- 2) U-Kurve */
.ng-canvas { background: #fff; }

/* ---------------------------------------------------------- 3) Bandbreiten-Rechner */
.ng-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem; margin: .8rem 0;
}
.ng-kachel {
  background: var(--hk-grau-hell); border: 1px solid var(--hk-rahmen);
  border-radius: 8px; padding: .5rem .6rem; text-align: center;
}
.ng-kachel.ng-ja { border-color: var(--hk-gruen); background: var(--hk-gruen-hell); }
.ng-kachel.ng-nein { border-color: var(--hk-rot); background: var(--hk-rot-hell); }
.ng-k-titel { font-size: .74rem; color: var(--hk-text-soft); }
.ng-k-wert { font-size: 1.15rem; font-weight: 700; color: var(--hk-blau); line-height: 1.3; }
.ng-kachel.ng-ja .ng-k-wert { color: var(--hk-gruen-dunkel); }
.ng-kachel.ng-nein .ng-k-wert { color: var(--hk-rot-dunkel); }
.ng-k-zusatz { font-size: .7rem; color: var(--hk-text-soft); }

/* ---------------------------------------------------------- Mobil (360 px) */
@media (max-width: 600px) {
  .ng-gitter { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 2px; }
  .ng-zelle { font-size: .55rem; }
  .ng-bz-name { flex-basis: 6.5em; font-size: .72rem; }
  .ng-kacheln { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .ng-k-wert { font-size: 1rem; }
}