/* ============================================================
   Protemics — product.css
   Produktseiten-spezifische Komponenten.
   Signature: SVG-Sonden-Schemazeichnung auf dunklem Panel.
   ============================================================ */

/* ---------- Breadcrumb (full-bleed Leiste zwischen Nav und Hero) ---------- */
.crumb-bar{
  background:var(--paper-2);
  border-bottom:1px solid var(--hair);
}
.crumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  height:44px;
  /* Einrueckung gegenueber dem Content-Raster — s. Spec §8 / Handover §6.5 */
  padding-left:calc(var(--gutter) + 44px);
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.06em;
  color:var(--mist);
}
.crumb a{transition:color .18s var(--ease)}
.crumb a:hover{color:var(--signal-dim)}
.crumb .sep{color:var(--mist);opacity:.6;user-select:none}
.crumb .cur{color:var(--graphite)}

/* ---------- Schema-Panel (Signature) ---------- */
.panel{
  border:1px solid var(--hair-dark);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)),
    #08131C;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  border-bottom:1px solid var(--hair-dark);
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.06em;
}
.panel-title{color:#A9BBC5}
.panel-tag{
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--signal);
}
.panel svg{display:block;width:100%;height:300px}

/* ---------- Datenblatt-Tabelle ---------- */
.ds-wrap{
  border:1px solid var(--hair);
  overflow-x:auto;
}
table.ds{font-size:15px}
table.ds th,table.ds td{
  text-align:left;
  padding:15px 22px;
  border-bottom:1px solid var(--hair);
  vertical-align:baseline;
}
table.ds thead th{
  background:var(--paper-2);
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--mist);
  white-space:nowrap;
}
table.ds tbody tr:last-child th,
table.ds tbody tr:last-child td{border-bottom:0}
table.ds tbody tr{transition:background .16s var(--ease)}
table.ds tbody tr:hover{background:var(--paper-2)}
table.ds .param{
  width:38%;
  color:var(--graphite);
  border-right:1px solid var(--hair);
}
table.ds .val{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--graphite);
  white-space:nowrap;
}

.ds-note{
  margin-top:22px;
  max-width:78ch;
  font-size:15px;
  line-height:1.65;
  color:var(--mist);
}
.ds-note strong{color:var(--graphite);font-weight:600}

/* ---------- Varianten-Karten ---------- */
.variants{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
  margin-top:44px;
}
.vcard{
  background:var(--paper);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.badge{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--signal-dim);
}
.vcard p{color:var(--mist);font-size:15.5px;line-height:1.6}

/* ---------- Anwendungen (2er) ---------- */
.apps2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.app2{
  background:var(--paper-2);
  padding:34px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background .2s var(--ease);
}
.app2:hover{background:var(--paper)}
.app2 p{color:var(--mist);font-size:15.5px;line-height:1.6}
.app2 .more{margin-top:auto;padding-top:8px}

/* ---------- Downloads ---------- */
.dl-list{border-top:1px solid var(--hair)}
.dl-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:22px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--hair);
  transition:padding-left .22s var(--ease);
}
.dl-row:hover{padding-left:10px}
.dl-ico{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mist);
}
.dl-name{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:-.01em;
}
.dl-meta{
  display:block;
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.06em;
  color:var(--mist);
}
.dl-act{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--signal-dim);
  white-space:nowrap;
  transition:transform .2s var(--ease);
}
.dl-row:hover .dl-act{transform:translateX(4px)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .crumb{
    height:auto;
    padding:12px var(--gutter);
    row-gap:4px;
  }
  .panel svg{height:240px}
  table.ds th,table.ds td{padding:13px 16px}
  table.ds .param{width:auto}
  .variants,.apps2{grid-template-columns:1fr}
  .vcard,.app2{padding:28px}
  .dl-row{grid-template-columns:auto 1fr;row-gap:10px}
  .dl-act{grid-column:2}
}