/**
 * werksprofil.css — Glastyp & Physik-Modell Selektor
 * W-Make Batch 1.1 — Phase 1: Werksprofil-System
 *
 * Komponenten:
 *   .glastyp-grid       — Selektorraster (2–3 Spalten)
 *   .glastyp-btn        — Glastyp-Auswahlkarte
 *   .physik-tabelle     — Aktive Physik-Modell-Übersicht
 *   .glastyp-info-strip — Technische Kenndaten-Zeile
 *   .wp-kuerzel-row     — Werks-Kürzel-Eingabe in Anlage-Card
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. GLASTYP-SELEKTOR-RASTER
   ═══════════════════════════════════════════════════════════════════════════ */

.glastyp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .glastyp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. GLASTYP-KARTE
   ═══════════════════════════════════════════════════════════════════════════ */

.glastyp-btn {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            4px;
  padding:        12px 14px;
  background:     var(--bg3);
  border:         1.5px solid var(--line);
  border-radius:  var(--r-md);
  cursor:         pointer;
  transition:     border-color .18s, background .18s, box-shadow .18s, transform .12s;
  user-select:    none;
  position:       relative;
  overflow:       hidden;
}

.glastyp-btn::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--_gt-farbe, var(--accent));
  opacity:    0;
  transition: opacity .18s;
  pointer-events: none;
}

.glastyp-btn:hover {
  border-color: var(--_gt-farbe, var(--accent));
  background:   var(--bg4);
  transform:    translateY(-1px);
}

.glastyp-btn:hover::before {
  opacity: .05;
}

.glastyp-btn.aktiv {
  border-color: var(--_gt-farbe, var(--accent));
  background:   var(--bg4);
  box-shadow:   0 0 0 1px var(--_gt-farbe, var(--accent)),
                0 4px 16px rgba(0, 0, 0, .4);
}

.glastyp-btn.aktiv::before {
  opacity: .08;
}

/* Aktiv-Häkchen oben rechts */
.glastyp-btn.aktiv::after {
  content:    '✓';
  position:   absolute;
  top:        7px;
  right:      9px;
  font-size:  11px;
  font-weight: 700;
  color:      var(--_gt-farbe, var(--accent));
  line-height: 1;
}

.glastyp-btn-icon {
  font-size:   24px;
  line-height: 1;
  margin-bottom: 2px;
}

.glastyp-btn-label {
  font-size:   13px;
  font-weight: 700;
  color:       var(--t1);
  line-height: 1.2;
}

.glastyp-btn-sub {
  font-size:  10px;
  color:      var(--t3);
  line-height: 1.35;
  font-family: var(--mono);
  letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PHYSIK-MODELL-TABELLE
   ═══════════════════════════════════════════════════════════════════════════ */

.physik-tabelle {
  border:        1px solid var(--line);
  border-radius: var(--r-sm);
  overflow:      hidden;
  margin-top:    4px;
  background:    var(--bg1);
}

.physik-tabelle-header {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     7px 12px;
  background:  var(--bg2);
  border-bottom: 1px solid var(--line);
  font-size:   10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:       var(--t3);
}

.physik-modell-row {
  display:       grid;
  grid-template-columns: 120px 1fr auto;
  align-items:   center;
  gap:           8px;
  padding:       6px 12px;
  border-bottom: 1px solid var(--line2);
  transition:    background .12s;
}

.physik-modell-row:last-child {
  border-bottom: none;
}

.physik-modell-row:hover {
  background: var(--bg3);
}

.physik-modell-typ {
  font-size:   11px;
  font-weight: 600;
  color:       var(--t2);
}

.physik-modell-name {
  font-size:   11px;
  color:       var(--t3);
  font-family: var(--mono);
}

.physik-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 7px;
  border-radius: 10px;
  font-size:     10px;
  font-weight:   700;
  font-family:   var(--mono);
  letter-spacing:.04em;
  white-space:   nowrap;
}

.physik-badge.aktiv {
  background: rgba(45, 224, 156, .15);
  color:      var(--success);
  border:     1px solid rgba(45, 224, 156, .25);
}

.physik-badge.inaktiv {
  background: var(--bg3);
  color:      var(--t4);
  border:     1px solid var(--line2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. GLASTYP INFO-STRIP (Kenndaten)
   ═══════════════════════════════════════════════════════════════════════════ */

.glastyp-info-strip {
  display:       flex;
  gap:           0;
  align-items:   stretch;
  background:    var(--bg2);
  border:        1px solid var(--line);
  border-radius: var(--r-sm);
  overflow:      hidden;
  margin-top:    10px;
  font-size:     11px;
}

.glastyp-info-kpi {
  flex:          1;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
  padding:       8px 6px;
  border-right:  1px solid var(--line2);
  gap:           2px;
}

.glastyp-info-kpi:last-child {
  border-right: none;
}

.glastyp-info-label {
  font-size:  9px;
  color:      var(--t4);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

.glastyp-info-val {
  font-size:   13px;
  font-weight: 700;
  color:       var(--t1);
  font-family: var(--mono);
}

.glastyp-info-unit {
  font-size:  9px;
  color:      var(--t3);
  font-family: var(--mono);
}

.glastyp-info-typisch {
  margin-top:  8px;
  padding:     6px 10px;
  background:  var(--bg2);
  border:      1px solid var(--line2);
  border-radius: var(--r-sm);
  font-size:   11px;
  color:       var(--t3);
  font-style:  italic;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. WERKS-KÜRZEL INLINE (in Anlage-Card)
   ═══════════════════════════════════════════════════════════════════════════ */

.cfg-kuerzel-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  8px;
  padding-top: 8px;
  border-top:  1px solid var(--line2);
}

.cfg-kuerzel-badge {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     52px;
  height:        32px;
  padding:       0 8px;
  background:    var(--bg3);
  border:        1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size:     14px;
  font-weight:   700;
  font-family:   var(--mono);
  color:         var(--accent);
  letter-spacing:.08em;
  text-transform: uppercase;
  transition:    color .15s, border-color .15s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. GLASTYP-BADGE IN TOPBAR / SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-glastyp-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       2px 8px 2px 5px;
  border-radius: 10px;
  font-size:     10px;
  font-weight:   600;
  letter-spacing:.03em;
  background:    rgba(108, 143, 255, .12);
  border:        1px solid rgba(108, 143, 255, .25);
  color:         var(--accent);
  cursor:        default;
  font-family:   var(--mono);
}

.nav-glastyp-badge .gt-icon {
  font-size: 12px;
}