/* ==========================================================================
   corelay - Unterseite „Projekte“ (Abschnitt 6 der Spezifikation)
   --------------------------------------------------------------------------
   Ergaenzt ausschliesslich die Feinheiten dieser Seite. Seitenkopf, Karte,
   Icon-Kachel, Sektionskopf, Raster und CTA-Band kommen unveraendert aus
   css/layout.css und css/base.css.

   Aufbau der Seite
     Seitenkopf (dunkel) - Filterleiste - Projektraster - Hinweis -
     Zahlen-Band - CTA-Band

   Alle Selektoren stehen unter den Praefixen .projekte bzw. .projekt, damit
   nichts mit den Startseiten-Sektionen kollidiert. Wo Regeln aus
   css/layout.css uebersteuert werden (etwa .card p), geschieht das ueber eine
   hoehere Spezifitaet und nie ueber !important.

   Inhalt
     1. Sektionsgeruest
     2. Filterleiste
     3. Zustaende der Filter-Buttons
     4. Projektraster
     5. Projektkarte - Grundaufbau
     6. Vorschaubild
     7. Kartentext (Branche, Titel, Ergebnis)
     8. Kennzahl-Chip
     9. Ausgeblendete Karten (Filter-Zustand)
    10. Hinweiszeilen
    11. Zahlen-Band
    12. Staffelung des Einblendens
    13. Breakpoint 900px - zwei Spalten
    14. Breakpoint 620px - eine Spalte
    15. Breakpoint 380px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest
   --------------------------------------------------------------------------
   Flaeche (.bg-paper-50 / .bg-paper) und vertikaler Abstand (.section) stehen
   im Markup. Hier bleibt nur der Anker-Abstand, damit ein Sprung auf die
   Sektion nicht unter dem klebenden Header endet.
   -------------------------------------------------------------------------- */

.projekte,
.projekte-zahlen {
  position: relative;
  scroll-margin-top: var(--header-h);
}


/* --------------------------------------------------------------------------
   2. Filterleiste
   --------------------------------------------------------------------------
   Drei Pillen ueber dem Raster. Die Buttons tragen data-filter="alle" bzw.
   "webseiten" und "shops"; js/main.js blendet daraufhin die Karten mit dem
   passenden data-cat ein und aus. Die Leiste bricht auf schmalen Geraeten um
   und laeuft nie waagerecht ueber.
   -------------------------------------------------------------------------- */

.projekte-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--sp-8);
}

/* Etwas kompakter als der Standard-Button (13px 24px) */
.projekte-filter-btn {
  padding: 11px 20px;
  font-size: var(--fs-body-sm);
}


/* --------------------------------------------------------------------------
   3. Zustaende der Filter-Buttons
   --------------------------------------------------------------------------
   Der aktive Filter ist blau. Ausgezeichnet wird der Zustand primaer ueber
   aria-pressed="true"; die Klasse .is-active steht gleichwertig daneben,
   damit die Darstellung stimmt, egal welche der beiden Auszeichnungen
   js/main.js setzt. Beide Selektoren erzeugen exakt dieselbe Optik.
   -------------------------------------------------------------------------- */

.projekte-filter-btn[aria-pressed="true"],
.projekte-filter-btn.is-active {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
}

.projekte-filter-btn[aria-pressed="true"]:hover,
.projekte-filter-btn.is-active:hover {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
}


/* --------------------------------------------------------------------------
   4. Projektraster
   --------------------------------------------------------------------------
   Drei Spalten, ab 900px zwei, ab 620px eine (Abschnitte 13 und 14). Das
   eigene Raster ist noetig, weil .grid-3 aus css/layout.css erst bei 1024px
   und 640px umbricht - die Vorschaubilder brauchen frueher mehr Breite.
   -------------------------------------------------------------------------- */

.projekte-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Genau vier Karten: zwei Spalten statt drei.
   Im Dreierraster bliebe die vierte Karte allein in der zweiten Reihe -
   als 2x2 wirkt die Galerie geschlossen und die Vorschaubilder werden
   groesser. Die Regel loest sich von selbst auf, sobald eine fuenfte Karte
   dazukommt: dann gilt wieder das Dreierraster darueber.
   Browser ohne :has() (sehr alte Versionen) zeigen einfach drei Spalten.

   Die min-width-Abfrage ist Absicht und keine Doppelung: :has() zaehlt fuer
   die Spezifitaet mit, der Selektor ist damit staerker als die schmalen
   Breakpoints in den Abschnitten 13 und 14. Ohne diese Klammer wuerde er
   deren ein- bzw. zweispaltiges Raster ueberstimmen. */
@media (min-width: 900px) {

  .projekte-grid:has(> .projekt-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --------------------------------------------------------------------------
   5. Projektkarte - Grundaufbau
   --------------------------------------------------------------------------
   .card liefert Flaeche, Rahmen, Radius, Schatten und den Hover. Das
   Vorschaubild sitzt buendig an drei Kanten, deshalb wandert der Innenabstand
   der Karte in den Textblock. overflow:hidden schneidet das Bild sauber an
   der abgerundeten Oberkante ab.
   -------------------------------------------------------------------------- */

.projekt-card {
  position: relative; /* Bezug fuer den flaechendeckenden Link, Abschnitt 5a */
  height: 100%;
  padding: 0;
  overflow: hidden;
}

/* Textblock unter dem Bild - fuellt die Restflaeche der Karte */
.projekt-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px;
}


/* --------------------------------------------------------------------------
   5a. Karten mit Live-Demo (.projekt-card--demo)
   --------------------------------------------------------------------------
   Vier Karten verweisen auf die vollstaendigen Demo-Auftritte unter
   referenzen/<ordner>/index.html. Damit die ganze Karte anklickbar ist und
   trotzdem nur ein einziger Link im Tab-Fokus liegt, legt der Titel-Link ein
   unsichtbares ::after ueber die gesamte Karte ("stretched link"). Das Bild
   bleibt ein reines Bild, der Screenreader liest genau einen Linktext.

   .projekt-media ist der Bezugsrahmen fuer die Plakette und haelt das Bild in
   seiner Ecke - ohne diesen Wrapper saesse die Plakette am Kartenrand.
   -------------------------------------------------------------------------- */

.projekt-media {
  position: relative;
  flex: none;
}

/* Plakette auf dem Vorschaubild: heller Grund, blauer Punkt davor */
.projekt-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .92);
  box-shadow: var(--sh-card);
  color: var(--t-on-light);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.projekt-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background-color: var(--blue-500);
}

/* Titel-Link: optisch unveraendert, Flaeche ueber die ganze Karte */
.projekt-title-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.projekt-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-card);
}

/* Pfeil hinter dem Titel - ruecklaeufig, bis die Karte beruehrt wird */
.projekt-ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--blue-500);
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
  opacity: .75;
}

@media (hover: hover) {

  .projekt-card--demo:hover .projekt-title-link {
    color: var(--blue-600);
  }

  .projekt-card--demo:hover .projekt-ico {
    opacity: 1;
    transform: translate(2px, -2px);
  }
}

/* Tastaturfokus liegt auf dem Link, sichtbar wird die ganze Karte */
.projekt-title-link:focus-visible {
  outline: none;
}

.projekt-card--demo:focus-within {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   6. Vorschaubild
   --------------------------------------------------------------------------
   Feste Proportion 16:10. Die SVG-Dateien liegen auf 640x420 vor und werden
   ueber object-fit sauber in das Format eingepasst - so sind alle sechs
   Karten unabhaengig von der Textlaenge gleich aufgebaut. Die Grundfarbe
   verhindert ein Aufblitzen, bevor das SVG gezeichnet ist.
   -------------------------------------------------------------------------- */

.projekt-img {
  width: 100%;
  height: auto;
  flex: none; /* das Bild darf im Flex-Stapel der Karte nie gestaucht werden */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
  background-color: var(--paper-100);
  border-bottom: 1px solid var(--paper-200);
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}


/* --------------------------------------------------------------------------
   7. Kartentext (Branche, Titel, Ergebnis)
   --------------------------------------------------------------------------
   Branchen-Label im Eyebrow-Stil (12px/700, Versalien, Tracking 0.16em) in
   --t-on-light-soft: dezent, aber kontraststark genug fuer AA. Darunter der
   Projekttitel aus der Typo-Skala .card-title und ein Satz zum Ergebnis
   (14px/--t-on-light-soft aus .card p in css/layout.css).

   Der Ergebnis-Satz traegt den Mindestabstand zum Kennzahl-Chip. Dieser wird
   ueber margin-top:auto an den unteren Kartenrand geschoben - ohne den
   Abstand hier wuerde er in der hoechsten Karte direkt am Text kleben.
   -------------------------------------------------------------------------- */

.projekt-branche {
  margin-bottom: 10px;
  color: var(--t-on-light-soft);
}

.projekt-title {
  margin-bottom: 8px;
}

.projekt-card p {
  margin: 0;
}

.projekt-card .projekt-title + p {
  margin-bottom: 18px;
}


/* --------------------------------------------------------------------------
   8. Kennzahl-Chip
   --------------------------------------------------------------------------
   Die hervorgehobene Kennzahl sitzt als blau hinterlegte Pille am unteren
   Rand der Karte; margin-top:auto haelt die Chips einer Reihe auf einer
   Linie. Die Schrift bleibt dunkel (--t-on-light), damit der Kontrast auf
   --blue-50 deutlich ueber AA liegt - die Farbe steckt in Flaeche und Icon.
   Die doppelte Klasse uebersteuert die 14px aus .card p.
   -------------------------------------------------------------------------- */

.projekt-card .projekt-kpi {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-pill);
  background-color: var(--blue-50);
  color: var(--t-on-light);
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1.35;
}

.projekt-kpi .ico {
  width: 16px;
  height: 16px;
  color: var(--blue-500);
}


/* --------------------------------------------------------------------------
   9. Ausgeblendete Karten (Filter-Zustand)
   --------------------------------------------------------------------------
   .card setzt display:flex und wuerde damit das [hidden]-Attribut des
   Browsers uebersteuern. Die folgenden Regeln fangen alle ueblichen
   Auszeichnungen ab, mit denen js/main.js eine Karte aus dem Raster nimmt -
   das Attribut hidden, eine Zustandsklasse oder data-hidden="true".
   -------------------------------------------------------------------------- */

.projekt-card[hidden],
.projekt-card.is-hidden,
.projekt-card[data-hidden="true"] {
  display: none;
}


/* --------------------------------------------------------------------------
   10. Hinweiszeilen
   --------------------------------------------------------------------------
   Dezenter Hinweis unter dem Raster und unter dem Zahlen-Band: die Inhalte
   sind Beispiele und gehoeren durch eigene Referenzen und Zahlen ersetzt.
   -------------------------------------------------------------------------- */

.projekte-hinweis {
  margin-top: var(--sp-6);
  color: var(--t-on-light-soft);
  text-align: center;
}


/* --------------------------------------------------------------------------
   11. Zahlen-Band
   --------------------------------------------------------------------------
   Vier Kennzahlen in .grid-4 (ab 1024px zwei Spalten, ab 640px eine). Jede
   Kachel ist eine zentrierte .card mit kleiner Icon-Kachel, grosser Zahl und
   Beschriftung. Die Zahl steht in --blue-600 statt --blue-500, damit der
   Kontrast auf Weiss auch als normaler Text ueber 4.5:1 bleibt.
   Beide Textzeilen sind Absaetze und brauchen deshalb die doppelte Klasse,
   um die Vorgaben aus .card p zu uebersteuern.
   -------------------------------------------------------------------------- */

.projekte-stats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.projekte-stat {
  align-items: center;
  height: 100%;
  padding: 24px 20px;
  text-align: center;
}

.projekte-stat-tile {
  margin-bottom: 16px;
}

.projekte-stat .projekte-stat-value {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 2.6vw, 2.125rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-h2);
  color: var(--blue-600);
}

.projekte-stat .projekte-stat-label {
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--t-on-light-soft);
}


/* --------------------------------------------------------------------------
   12. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay.
   Im Dreierraster laeuft jede Reihe von links nach rechts ein.
   -------------------------------------------------------------------------- */

.projekt-card:nth-child(3n + 1) { --reveal-delay: 0ms; }
.projekt-card:nth-child(3n + 2) { --reveal-delay: 90ms; }
.projekt-card:nth-child(3n + 3) { --reveal-delay: 180ms; }

/* Im 2x2-Raster (genau vier Karten, siehe Abschnitt 4) laeuft jede Reihe
   paarweise ein - sonst saehe die Staffelung 0/90/180/0 unruhig aus.
   Gleiche Klammer, gleicher Grund wie oben: der :has()-Selektor waere sonst
   staerker als die Staffelung der schmalen Breakpoints. */
@media (min-width: 900px) {

  .projekte-grid:has(> .projekt-card:nth-child(4):last-child) .projekt-card:nth-child(2n + 1) { --reveal-delay: 0ms; }
  .projekte-grid:has(> .projekt-card:nth-child(4):last-child) .projekt-card:nth-child(2n) { --reveal-delay: 90ms; }
}

.projekte-stat:nth-child(1) { --reveal-delay: 0ms; }
.projekte-stat:nth-child(2) { --reveal-delay: 80ms; }
.projekte-stat:nth-child(3) { --reveal-delay: 160ms; }
.projekte-stat:nth-child(4) { --reveal-delay: 240ms; }


/* --------------------------------------------------------------------------
   13. Breakpoint 900px - zwei Spalten
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .projekte-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* Staffelung paarweise, passend zu zwei Spalten */
  .projekt-card:nth-child(2n + 1) { --reveal-delay: 0ms; }
  .projekt-card:nth-child(2n) { --reveal-delay: 90ms; }
}


/* --------------------------------------------------------------------------
   14. Breakpoint 620px - eine Spalte
   --------------------------------------------------------------------------
   Einspaltig kommt jede Karte einzeln in den Sichtbereich - eine Staffelung
   waere dort nur eine Verzoegerung, deshalb faellt sie weg.
   -------------------------------------------------------------------------- */

@media (max-width: 619.98px) {

  .projekte-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .projekt-card {
    --reveal-delay: 0ms;
  }

  .projekte-filter {
    gap: 8px;
    margin-bottom: var(--sp-7);
  }

  .projekte-filter-btn {
    padding: 10px 16px;
  }
}


/* --------------------------------------------------------------------------
   15. Breakpoint 380px
   --------------------------------------------------------------------------
   Kleinste Stufe: kompaktere Innenabstaende, damit ab 320px nichts
   waagerecht ueberlaeuft. Die Filterpillen duerfen hier gemeinsam die volle
   Breite ausfuellen.
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .projekte-filter-btn {
    flex: 1 1 auto;
    padding: 10px 12px;
  }

  .projekt-body {
    padding: 18px;
  }

  .projekt-card .projekt-kpi {
    padding: 8px 12px 8px 10px;
    font-size: 12.5px;
  }

  .projekte-stat {
    padding: 22px 16px;
  }
}