/* ==========================================================================
   Projekte – nur, was es außerhalb dieser Seite nicht gibt.
   Kein eigenes Konzeptbild: Karten nach „Gebaut, nicht behauptet“ auf der Startseite
   (docs/konzept/vermessung/startseite.md, Projekte 12). Hero-Abstand, Rückmeldung,
   „Selbst ansehen“ kommen aus projekt.css,
   Karten mit Bildkopf, Datenliste, Chips, CTA-Kasten und der Pfeil an externen Links aus main.css.
   The demo site cards above the projects (fix pass W6b) come from beispiel-karten.css,
   which is written so the homepage demo section can use it too.
   ========================================================================== */

/* Hero: nur Label, Überschrift und Absatz; ohne Knöpfe darunter kein Abstand nach dem Absatz */
.projekte-hero .hero__inhalt > .lead { margin-bottom: 0; }


/* Projektkarten: Bildkopf 380 : 195 wie auf der Startseite, darunter Text, zwei Chips, Link */

.projektkarten .karte__bild { aspect-ratio: 380 / 195; background: var(--c-lavendel-hell); }
/* „Eigenes Projekt“ auf dem Bild (BILDER.md): eigene Tinte-Fläche, damit es auf jedem Foto lesbar bleibt */
.projektkarte__marke { padding: var(--a-1) var(--a-2); border: var(--kasten-rand); border-radius: var(--r-1); }

/* Technik und Link unten bündig, damit sie in allen Karten einer Reihe auf einer Linie stehen */
.projektkarte__fuss { display: grid; gap: var(--a-5); justify-items: start; margin-top: auto; padding-top: var(--a-3); }


/* Eckdaten: je Projekt eine Karte mit Datenliste; etwas Luft zwischen Name und erster Zeile */
.eckdaten h3 + .daten { margin-top: var(--a-1); }

/* From 640 px BlacklightSMP (five rows) takes the full width with its rows side by side, and the
   two cards with three rows each share the row below. In one row of three, the short cards would
   stretch to BlacklightSMP's height and show a large empty area. Order and zyklus colours stay.
   The reset of the last card beats main.css (.raster--3 > :last-child:nth-child(odd), 640-959 px). */
@media (min-width: 640px) {
    .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eckdaten > :first-child { grid-column: 1 / -1; }
    .eckdaten > :last-child:nth-child(odd):not(:first-child) { grid-column: auto; }
    .eckdaten > :first-child .daten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-6); align-items: start; }
}
@media (min-width: 960px) {
    .eckdaten > :first-child .daten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Tabletbreite: Die dritte Projektkarte stünde allein in der zweiten Reihe, daneben eine leere
   Fläche. Sie nimmt deshalb die ganze Breite ein, mit Bild links und Text rechts. */
@media (min-width: 640px) and (max-width: 959px) {
    .projektkarten > :last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .projektkarten > :last-child:nth-child(odd) .karte__bild { aspect-ratio: auto; }
}