/* ============================================================
   Drohnenpark-Zentrale — gemeinsame UI-Komponenten
   Ursprünglich in hangar.html entwickelt (Flotten-Karten, Akku-
   Karten, Ersatzteil-Zeilen, Betriebsarten-Karten, Kompatibilitäts-
   Matrix). Hierher ausgelagert, damit katalog.html/produkt.html/
   vergleich.html/admin.html dieselbe Bildsprache nutzen, statt
   eigene Kartenstile zu erfinden — eine Änderung hier wirkt sich
   auf alle Seiten aus, die diese Klassen verwenden.
   ============================================================ */

/* ---------- Flotten-/Produktkarten ---------- */
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.craft{background:var(--panel-hi);border:1px solid var(--line);display:flex;flex-direction:column;transition:.18s;position:relative;text-decoration:none;color:inherit}
.craft:hover{border-color:var(--signal);box-shadow:0 6px 22px rgba(0,0,0,.35);transform:translateY(-2px)}
.craft-top{display:flex;gap:14px;padding:18px 18px 14px}
.craft-svg{flex:0 0 78px;width:78px;height:78px;border:1px solid var(--line);background:var(--void);display:flex;align-items:center;justify-content:center}
.craft-id{flex:1;min-width:0;padding-right:118px}
.craft-id h3{font-size:17.5px;line-height:1.05}
.craft-id .sub{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:4px}
.role{display:inline-block;margin-top:9px;margin-right:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--link);background:rgba(90,209,230,.10);padding:3px 8px}
.vtx-badge{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:3px 8px}
.vtx-badge i{width:7px;height:7px;border-radius:50%;display:inline-block}
.vtx-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.status{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;font-weight:500}
.status.ok{color:var(--grass);background:rgba(159,188,104,.12)}
.status.amber{color:var(--signal);background:rgba(255,176,32,.10)}
.status.mute{color:var(--dim);background:var(--panel)}
.status.sig{color:var(--link);background:rgba(90,209,230,.10)}
.spec-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.spec-row.cols-2{grid-template-columns:repeat(2,1fr)}
.spec{padding:11px 14px;border-right:1px solid var(--line)}
.spec:last-child{border-right:0}
.spec .v{font-family:var(--mono);font-size:13.5px;font-weight:500}
.spec .k{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.craft-foot{padding:13px 18px 16px;border-top:1px solid var(--line);margin-top:auto}
.craft-foot .note{font-size:12.5px;color:var(--ink);line-height:1.45;border:0;padding:0;margin:0}
.batt-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.btag{font-family:var(--mono);font-size:10px;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:2px 7px}

/* ---------- Akku-Karten ---------- */
.batt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.bcard{background:var(--panel-hi);border:1px solid var(--line);padding:16px;position:relative;text-decoration:none;color:inherit;display:block}
.bcard h4{font-size:15px;font-family:var(--display);font-weight:600;padding-right:108px}
.bcard .bcell{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:4px}
.qty{display:flex;align-items:center;gap:10px;margin:14px 0 10px}
.qbtn{width:28px;height:28px;border:1px solid var(--line);background:var(--void);font-family:var(--mono);font-size:16px;cursor:pointer;color:var(--ink);line-height:1}
.qbtn:hover{border-color:var(--signal);color:var(--signal)}
.qnum{font-family:var(--display);font-weight:700;font-size:24px;min-width:34px;text-align:center}
.qlab{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.bfits{font-size:12px;color:var(--ink);border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.bfits b{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:3px}

/* ---------- Kompatibilitäts-Matrix ---------- */
.matrix-scroll{overflow-x:auto;border:1px solid var(--line)}
table.matrix{border-collapse:collapse;width:100%;min-width:640px;background:var(--panel-hi)}
table.matrix th,table.matrix td{padding:12px 14px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px}
table.matrix thead th{background:var(--panel);font-weight:500;font-size:11px;letter-spacing:.04em}
table.matrix tbody th{text-align:left;font-weight:600;font-family:var(--display);font-size:13px;background:var(--void)}
.cell-yes{color:var(--grass);font-size:15px}
.cell-no{color:var(--line)}
.cell-part{color:var(--signal)}

/* ---------- Ersatzteil-Zeilen ---------- */
.spare-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.spare{background:var(--panel-hi);display:grid;grid-template-columns:1.4fr 1fr 90px;gap:16px;padding:15px 18px;align-items:center;text-decoration:none;color:inherit}
@media(max-width:680px){.spare{grid-template-columns:1fr;gap:6px}}
.spare .sn{font-family:var(--display);font-weight:600;font-size:14.5px}
.spare .sn small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim);font-weight:400;margin-top:3px;letter-spacing:.02em}
.spare .sfit{font-size:12.5px;color:var(--ink)}
.spare .sq{font-family:var(--mono);font-size:11px;text-align:right}
.spare .sq .b{display:inline-block;padding:3px 9px;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.sq .b.have{color:var(--grass);background:rgba(159,188,104,.12)}
.sq .b.count{color:var(--link);background:rgba(90,209,230,.10)}

/* ---------- Betriebsarten-/generische Info-Karten ---------- */
.modes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.mode-card{background:var(--panel-hi);border:1px solid var(--line);padding:18px;position:relative;text-decoration:none;color:inherit;display:block;transition:.15s}
.mode-card[href]:hover{border-color:var(--signal);transform:translateY(-2px)}
.mode-card h4{font-size:16px;font-family:var(--display);font-weight:700;margin-bottom:3px}
.mode-card .mc-sub{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-bottom:14px;letter-spacing:.03em}
.mode{border-top:1px solid var(--line);padding:11px 0}
.mode:last-child{padding-bottom:0}
.mode .mtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mode .mname{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--link)}
.mode .mtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.mode .mdesc{font-size:12.5px;color:var(--ink);margin-top:4px;line-height:1.45}

@media(prefers-reduced-motion:reduce){.craft:hover,.mode-card[href]:hover{transform:none}}