/* 110_neuronale_netze — Spezialoptik aus sample0.html (Rest deckt assets/css/style.css ab) */

/* Neuron-Demo: Input-Kreis -> Neuron-Kreis -> Output-Kreis nebeneinander */
.neuron-demo{display:flex;align-items:center;justify-content:center;gap:3rem;margin:2rem 0;flex-wrap:wrap}
.input-section,.neuron-section,.output-section{text-align:center}
.arrow{font-size:2rem;color:var(--hk-text-soft)}

/* Kreis-Elemente: style.css liefert nur border-radius (.circle), Rest ist hier Spezialoptik */
.circle{width:80px;height:80px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.5rem;margin:0 auto .5rem;box-shadow:var(--hk-schatten);transition:all .3s}
.input-circle{background:linear-gradient(135deg,var(--hk-blau) 0%,var(--hk-blau-dunkel) 100%);color:#fff}
.neuron-circle{background:linear-gradient(135deg,var(--hk-rot) 0%,var(--hk-rot-dunkel) 100%);color:#fff}
.output-circle{background:linear-gradient(135deg,var(--hk-gruen) 0%,var(--hk-gruen-dunkel) 100%);color:#fff}

/* Slider-Gruppe: Label ueber Range-Input (anders als .input-group aus style.css) */
.slider-group{margin:1.5rem 0}
.slider-group label{display:block;font-weight:600;color:var(--hk-blau);margin-bottom:.5rem}
.slider-group input[type=range]{width:100%;accent-color:var(--hk-blau)}

/* Formel-Anzeige (Berechnung live aus den Reglern) */
.calc-box{background:var(--hk-gelb-hell);padding:1.5rem;border-radius:var(--hk-radius);
  border-left:4px solid var(--hk-rot);margin:1.5rem 0}
.calc-box h4{color:#856404;margin-bottom:.5rem}
.calc-box code{background:#fff;padding:.5rem 1rem;border-radius:4px;display:block;
  font-size:1.1rem;color:var(--hk-rot);font-weight:600}

/* Aktivierungsfunktion-Auswahl (anklickbare Karten, JS schaltet .active um) */
.activation-viz{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.activation-card{background:#fff;padding:1rem;border-radius:var(--hk-radius);border:2px solid var(--hk-rahmen);
  text-align:center;cursor:pointer;transition:all .3s}
.activation-card:hover{border-color:var(--hk-blau);box-shadow:0 4px 12px rgba(0,71,171,.2);transform:translateY(-2px)}
.activation-card.active{border-color:var(--hk-rot);background:var(--hk-rot-hell)}
.activation-card h4{color:var(--hk-blau);margin-bottom:.5rem}
.activation-card p{color:var(--hk-text-soft);font-size:.85rem}

/* Tensor-Grid (Karten-Reihe) + Kartenoptik obendrauf auf den .tensor-card-Baustein */
.tensor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:1.5rem 0}
.tensor-card:hover{border-color:var(--hk-blau);transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,71,171,.2)}
.tensor-card h4{color:var(--hk-rot);margin-bottom:.5rem;font-size:1.1rem}

/* Tensor-Visual hier als weisse Karte um die Vektor-Anzeige (Zahlenreihe bleibt in einer Zeile) */
.tensor-visual{background:#fff;border-radius:var(--hk-radius);padding:1rem;min-height:100px}

/* V2-Mobile-Fix (2026-09-02): Tensor->Neuron->Tensor-Fluss bricht auf schmalen Displays sauber um */
.fluss-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:1.2rem;align-items:center;margin:2rem 0}
.fluss-pfeil{text-align:center;font-size:2rem}
.calc-box code{overflow-x:auto;white-space:nowrap}
@media (max-width:700px){
  .fluss-grid{grid-template-columns:1fr;gap:.4rem}
  .fluss-pfeil{transform:rotate(90deg);font-size:1.6rem;margin:.2rem 0}
  .neuron-demo{gap:1.2rem}
}