/* ============================================================
   Projektkarte (Labs)
   ============================================================

   Dieselbe Karte erscheint an zwei Stellen: in der Labs-Sektion der
   Startseite und im Roster auf /studio. Sie sahen unterschiedlich aus,
   weil sie zwei getrennte Regelsaetze in zwei Stylesheets hatten —
   .lab* in rmn-2026.css (nur Startseite) und .labs-roster-* in
   main.css (nur Unterseiten). Dieselbe Ursache wie beim
   Einwilligungsbanner: zwei Einstiegspunkte, zwei Stylesheets, zwei
   Fassungen, die auseinanderliefen.

   Jetzt eine Fassung in einer Datei, geladen von beiden
   Einstiegspunkten. Beide Ansichten nutzen dasselbe Markup.
   ============================================================ */

.labs-roster{border-top:1px solid var(--hairline,#1c1c1c)}
.labs-roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--hairline,#1c1c1c);border:1px solid var(--hairline,#1c1c1c);margin-top:1.5rem}
.labs-roster-card{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem 1.5rem 1.5rem;background:var(--surface-1,#111);text-decoration:none;color:inherit;transition:background .2s}
.labs-roster-card:hover{background:var(--surface-2,#161616)}
.labs-roster-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.labs-roster-tag{color:var(--brand-primary,#ff6a00)}
.labs-roster-code{color:var(--muted,#8a8a8a)}
.labs-roster-name{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.labs-roster-desc{font-size:14px;line-height:1.5;color:var(--muted,#8a8a8a);margin:0}
.labs-roster-go{margin-top:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg,#fafafa)}
.labs-roster-card:hover .labs-roster-go{color:var(--brand-primary,#ff6a00)}

/* Labs-Roster-Thumbnail (/studio) — blutet zum Kartenrand */
.labs-roster-thumb{margin:-1.4rem -1.5rem 1.1rem;aspect-ratio:16/9;overflow:hidden;background:#0c0c0c;border-bottom:1px solid var(--hairline,#1c1c1c)}
.labs-roster-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.labs-roster-card:hover .labs-roster-thumb img{transform:scale(1.03)}

/* Kategorie-Badge auf der Projektkarte */
.labs-roster-cat{
  color:var(--brand-primary,#FF6A00);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.labs-roster-card .labs-roster-tag{
  display:block;color:var(--brand-muted,#8a8a8a);
  font-size:11px;letter-spacing:.06em;margin-top:2px;
}

/* Logo-Kacheln im Studio-Roster — gleiche Regel wie auf der Startseite,
   damit ein Projekt in beiden Ansichten identisch wirkt. */
.labs-roster-thumb--contain{
  display:flex; align-items:center; justify-content:center;
  background:#0c0c0c; padding:0;
}

/* Der <picture>-Wrapper darf nicht mitzaehlen.

   Solange die Karte ein blankes <img> ausgab, war das <img> selbst das
   Flex-Kind — es wurde zentriert und von den Regeln darunter begrenzt.
   Seit die Bilder ueber rmn_picture() laufen, steckt ein <picture>
   dazwischen. Das wurde zum Flex-Kind, blieb ungrossgt und links
   haengen; die Prozentwerte am <img> bezogen sich auf einen Wrapper
   ohne Hoehe und liefen ins Leere.

   Gemessen: Labs (blankes img) 130x144, sauber zentriert — Roster
   (picture) 238x238, also hoeher als die 186px-Kachel, und buendig
   links.

   display:contents nimmt den Wrapper aus dem Layout, ohne ihn aus dem
   Markup zu entfernen: <source> und <img> bleiben, das <img> ist wieder
   direktes Flex-Kind. */
.labs-roster-thumb--contain picture{ display:contents; }

.labs-roster-thumb--contain img{
  width:auto !important; height:auto !important;
  max-width:72% !important; max-height:78% !important;
  object-fit:contain !important;
  padding:0 !important;
  transition:none;
}
.labs-roster-card:hover .labs-roster-thumb--contain img{ transform:none; }

@media (max-width:900px){
  .labs-roster-thumb--contain img{ max-width:82% !important; max-height:84% !important; }
}
/* Der Kategorie-Filter setzt das hidden-Attribut auf die Karten. Das
   display:none dafuer kommt aus dem Standard-Stylesheet des Browsers
   und wird von JEDER eigenen display-Angabe ueberstimmt — hier von
   display:flex oben. Gemessen: Das Skript setzte hidden auf 7 von 8
   Karten, sichtbar blieben alle 8. Der Filter war also wirkungslos,
   und zwar seit es ihn gibt — auch auf /studio.

   Dieselbe Fehlerklasse wie beim Einwilligungsbanner ("Auswahl
   speichern" stand dauerhaft da). Wer display setzt, muss hidden
   wieder herstellen. */
.labs-roster-card[hidden],
.labs-roster-grid [hidden]{ display:none !important; }