/* McDev.TV — /projekte/ „Meine Projekte" (v140.56)
   Bausteine folgen theme.css. Der Farbakzent kommt aus dem CMS-Feld
   „Farbakzent" und färbt nur Rand, Symbol und Knopf — nie den Text,
   damit die Karten in Hell und Dunkel lesbar bleiben.
   Kein JavaScript: Die Seite ist reines Markup. */

.pj-krumen{margin-bottom:14px}
.pj-krumen a{color:var(--text-dim)}
.pj-krumen span{color:var(--text)}

.pj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:4px 0 18px}

.pj-karte{display:flex;flex-direction:column;padding:18px 20px;position:relative;overflow:hidden}
.pj-karte::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--pj-akzent)}

.pj-gruen{--pj-akzent:var(--gruen)}
.pj-gold{--pj-akzent:var(--gold)}
.pj-cyan{--pj-akzent:var(--blue)}
.pj-lila{--pj-akzent:var(--violett)}
.pj-orange{--pj-akzent:var(--orange)}

.pj-kopf{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.pj-symbol{font-size:28px;line-height:1.1;flex-shrink:0}
.pj-titelzeile{min-width:0}
.pj-name{font-family:var(--font-head);font-size:19px;font-weight:700;margin:0;color:var(--text)}
.pj-meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.pj-art{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--text-dim);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.pj-stand{font-size:11px;font-weight:700;letter-spacing:.03em;border-radius:6px;padding:2px 8px}
.pj-stand--live{color:var(--gruen);border:1px solid var(--gruen-schimmer);background:var(--gruen-schimmer)}
.pj-stand--beta{color:var(--warnung);border:1px solid var(--line);background:var(--bg-hoch)}

.pj-kurz{margin:0 0 8px;font-weight:600;color:var(--text)}
.pj-text{margin:0 0 12px;color:var(--text-dim);font-size:14px;line-height:1.6}

.pj-merkmale{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.pj-merkmale li{position:relative;padding-left:18px;font-size:13px;color:var(--text-dim)}
.pj-merkmale li::before{content:"›";position:absolute;left:4px;top:-1px;color:var(--pj-akzent);font-weight:700}

.pj-cta{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px}
.pj-host{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-top:8px}

.pj-firma{padding:18px 20px}
.pj-firma p{color:var(--text-dim);font-size:14px;line-height:1.65;margin:0 0 12px}
.pj-firma strong{color:var(--text)}

/* Kurzer Streifen auf /partner/, /ueber-mich/ und anderen Seiten.
   Gleiche Daten, weniger Fläche — verlinkt auf /projekte/. */
.pj-streifen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:2px 0 10px}
.pj-streifen__karte{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-klein);background:var(--bg-card2);text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.pj-streifen__karte:hover{border-color:var(--pj-akzent,var(--gruen));transform:translateY(-1px)}
.pj-streifen__symbol{font-size:20px;flex-shrink:0}
.pj-streifen__text{min-width:0}
.pj-streifen__name{display:block;font-weight:700;font-size:14px;color:var(--text)}
.pj-streifen__kurz{display:block;font-size:12px;color:var(--text-dim);line-height:1.45;margin-top:2px}
.pj-streifen__mehr{font-size:13px}

@media (max-width:520px){
  .pj-karte{padding:16px}
  .pj-name{font-size:17px}
}