/* Modul-Spezialoptik aus sample_intro0.html — Rest (Reset/body/container/info-box/matrix-*/vector-*/
   example-card/arrow-down/shape-badge/btn) deckt assets/css/style.css bereits ab. */

/* Grid-Layout der 4 Rank-Karten (kein Aequivalent in style.css) */
.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)}

/* Rank-Badge (rote Pille "RANK 0" etc.) — eigene Optik, kein shape-badge */
.tensor-rank{display:inline-block;background:var(--hk-rot);color:#fff;padding:.3rem .6rem;
  border-radius:12px;font-size:.75rem;font-weight:600;margin-bottom:.5rem}

/* Weisse Rahmung um die Zahlen-Visualisierungen */
.tensor-visual{background:#fff;border-radius:8px;min-height:100px}

/* Skalar-Visualisierung (grosse rote Zahlen-Box) — kein Aequivalent in style.css */
.scalar-viz{width:60px;height:60px;background:linear-gradient(135deg,var(--hk-rot) 0%,var(--hk-rot-dunkel) 100%);
  border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  font-size:1.5rem;box-shadow:0 4px 8px rgba(220,20,60,.3)}

/* 3D-Tensor: zwei perspektivisch gekippte RGB-Ebenen — eigenes Layout */
.tensor-3d-viz{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;perspective:1000px}
.tensor-3d-layer{background:linear-gradient(135deg,#FF8C00 0%,#FF6347 100%);padding:.5rem;
  border-radius:8px;box-shadow:0 4px 8px rgba(255,140,0,.3);transform:rotateY(-5deg)}
.tensor-3d-layer .matrix-row{gap:.3rem}
.tensor-3d-layer .matrix-element{min-width:30px;width:30px;height:30px;font-size:.7rem;
  background:rgba(255,255,255,.9);border-color:transparent;color:#333}

/* Grid-Layout der 8 Beispiel-Karten */
.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1.5rem 0}
.example-card h5{color:var(--hk-rot);font-size:1rem;margin-bottom:.5rem}

/* V2-Mobile-Fix (2026-09-02): Mehrspalter brechen auf schmalen Displays um */
@media (max-width:700px){.tensor-3d-viz{grid-template-columns:1fr}}