/* 250_faltung — Modul-Spezialoptik. Alles, was assets/css/style.css schon liefert (interactive-box,
   input-group, output, matrix-viz, shape-badge, chart-container, quiz …) wird hier NICHT wiederholt.
   Hier stehen nur die drei Layouts, die es dort nicht gibt: Zwei-Spalten-Vergleich, das kompakte
   Zahlengitter der Pooling-Demo und die Balken des Parameter-Zaehlers. Mobile first. */

/* ---- Zwei Ansichten nebeneinander (Bild | Feature Map, Eingabe | Pooling-Ausgabe).
        Unter ~500 px bricht die Reihe um und jede Haelfte bekommt die volle Breite. */
.cn-duo{display:flex;flex-wrap:wrap;gap:1rem;margin:.8rem 0}
.cn-halb{flex:1 1 220px;min-width:0}
.cn-halb h4{margin:0 0 .3rem;font-size:.95rem;color:var(--hk-blau-dunkel)}
.cn-halb .chart-container{margin:.2rem 0}

/* ---- Eigener Kernel: 3x3-Raster aus Zahlenfeldern (style.css kennt nur Felder in .input-group) */
.cn-kgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;max-width:290px;margin:.4rem 0}
.cn-kgrid input{width:100%;min-width:0;padding:.4rem .3rem;text-align:center;
  border:1px solid var(--hk-rahmen);border-radius:6px;font-family:'Courier New',monospace;font-size:.95rem}
.cn-kgrid input:focus{outline:2px solid var(--hk-blau);outline-offset:1px}

/* ---- Kleinteile: Checkbox-Label in einer .input-group, Hinweiszeile unter einem Modul */
.cn-check{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;min-width:0}
.cn-hinweis{font-size:.85rem;color:var(--hk-text-soft);margin:.4rem 0}

/* ---- Lupe: Fenster x Kernel nebeneinander, bricht auf schmalen Geraeten um */
.cn-lupe{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;margin:.5rem 0}
.cn-lupe-titel{text-align:center;font-size:.82rem;color:var(--hk-text-soft)}
.cn-lupe .matrix-viz{margin:.2rem 0}
.cn-mal{font-size:1.4rem;color:var(--hk-blau);font-weight:700}

/* ---- Zahlengitter der Pooling-Demo. Spaltenzahl setzt modul.js (grid-template-columns),
        damit dasselbe Gitter fuer 8x8 und 4x4 taugt. Zellen sind quadratisch und schrumpfen mit. */
.cn-gitter{display:grid;gap:2px;margin:.3rem 0}
.cn-zelle{aspect-ratio:1;display:flex;align-items:center;justify-content:center;min-width:0;
  border-radius:3px;font-family:'Courier New',monospace;font-size:.72rem;font-weight:700;color:var(--hk-text)}
.cn-gitter-klein .cn-zelle,.cn-zelle-gross{font-size:.95rem}

/* ---- Parameter-Zaehler: zwei Balken mit Namen links und Zahl rechts */
.cn-balken{margin:.9rem 0}
.cn-balken-zeile{display:flex;align-items:center;gap:.5rem;margin:.45rem 0;flex-wrap:wrap}
.cn-balken-name{flex:0 0 9.5em;font-size:.88rem;font-weight:600}
.cn-balken-spur{flex:1 1 120px;min-width:100px;height:20px;background:var(--hk-grau-hell);
  border:1px solid var(--hk-rahmen);border-radius:10px;overflow:hidden}
.cn-fuell{display:block;height:100%;width:0;border-radius:10px;transition:width .2s ease}
.cn-fuell-rot{background:var(--hk-rot)}
.cn-fuell-blau{background:var(--hk-blau)}
.cn-balken-wert{flex:0 0 6.5em;text-align:right;font-family:'Courier New',monospace;
  font-weight:700;color:var(--hk-blau)}

/* ganz schmal: das Malzeichen bekommt eine eigene Zeile, sonst haengt es neben dem Fenster */
@media (max-width:480px){ .cn-mal{flex:1 0 100%;text-align:center;margin:-.2rem 0} }
@media (max-width:600px){
  .cn-zelle{font-size:.62rem}
  .cn-gitter-klein .cn-zelle,.cn-zelle-gross{font-size:.8rem}
  .cn-balken-name{flex:1 1 100%}
  .cn-lupe .matrix-element{min-width:40px;height:40px;font-size:.8rem}
}