/**
 * Projekte-Kapitel — "Unsere Projekte und Aktionen" (tt_content:1591, pid 472).
 *
 * Owner: Projektgalerie (LILY, 2026-08-25). Additiv, komponenten-skopiert nach
 * dem Vorbild von news-aktuelles.css -- KEIN Rubrik-Token wird hier neu
 * definiert, alle --gsl-rubric-aktuelles-* Werte kommen aus homepage-source.css
 * (die auf dieser Seite laeuft, siehe setup.typoscript Zeile ~198, Bedingung
 * backend_layout in [pagets__gs_lotte_home, pagets__gs_lotte_default] --
 * pid 472 hat pagets__gs_lotte_default). Klassen-Namespace ausschliesslich
 * .gsl-proj* -- kollisionsfrei geprueft gegen homepage-source.css UND
 * news-aktuelles.css (Stand 25.08.2026). .gsl-tile, .gsl-container,
 * .min-container, .gsl-section-loud, .gsl-h2, .gsl-rubric-aktuelles werden
 * bewusst WIEDERVERWENDET (identische Basis in beiden Quelldateien bzw.
 * global verfuegbare Utility), nicht dupliziert.
 *
 * Farbschema (Stefan-Korrektur 25.08.2026 -- siehe Bericht): AUSSCHLIESSLICH
 * die Aktuelles-Familie (Lachs/Berry). Kapitel-Baender wechseln zwischen der
 * vollen Rubrik-Fill-Flaeche (--gsl-rubric-aktuelles-fill) und Papier/Weiss
 * (--gsl-paper) -- niemals eine andere Rubrik-Farbe. Kachel-Koerper bleiben
 * ÜBERALL Rubrik-Dark + weisse Schrift (11,15:1), unabhaengig vom Band. Der
 * Mittelton (--gsl-rubric-aktuelles) ist ausschliesslich Rahmen/Fokusring,
 * nie Flaeche, nie Schrift (siehe Kontrast-Paare unten).
 *
 * Erlaubte Kontrast-Paare (hart, siehe Auftrag §8):
 *   1) Flaeche -fill  + Schrift -dark   (Kapitel-Ueberschrift auf Vollton-Band, 4,62:1, grosse Schrift)
 *   2) Flaeche -dark  + Schrift weiss   (jede Kachel, 11,15:1)
 *   3) Flaeche Papier + Schrift -dark   (Kapitel-Ueberschrift auf Papier-Band, 11,15:1)
 */

.gsl-proj-chapter--vivid {
  background: var(--gsl-rubric-aktuelles-fill);
}
.gsl-proj-chapter--paper {
  background: var(--gsl-paper);
}

.gsl-proj-chapter__heading {
  color: var(--gsl-rubric-aktuelles-dark);
  margin: 0 0 var(--gsl-space-6);
}

.gsl-proj-grid {
  --gsl-proj-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--gsl-proj-cols), 1fr);
  gap: var(--gsl-space-5);
}
@media (min-width: 600px)  { .gsl-proj-grid { --gsl-proj-cols: 2; } }
@media (min-width: 900px)  { .gsl-proj-grid { --gsl-proj-cols: 3; } }
@media (min-width: 1200px) { .gsl-proj-grid { --gsl-proj-cols: 4; } }

/* Grosse Kachel: erstes Kind eines Kapitels ab drei Beitraegen (reine
   CSS-Bedingung ueber Geschwister-Anzahl, kein Fluid-Zaehler noetig). */
@media (min-width: 900px) {
  .gsl-proj-grid > .gsl-proj:first-child:nth-last-child(n+3) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gsl-proj-grid > .gsl-proj:first-child:nth-last-child(n+3) .gsl-proj__title {
    font-size: var(--gsl-fs-lg);
  }
  /* Ohne dies bliebe am Fuss der grossen Kachel eine weisse Leerflaeche --
     das Foto waechst in die zusaetzliche Grid-Hoehe, object-fit:cover haelt
     den Ausschnitt sauber, der Koerper bleibt unveraendert unten. */
  .gsl-proj-grid > .gsl-proj:first-child:nth-last-child(n+3) {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }
  .gsl-proj-grid > .gsl-proj:first-child:nth-last-child(n+3) .gsl-proj__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
  }
}

/* -----------------------------------------------------------------
   Kachel (.gsl-proj auf Basis von .gsl-tile -- Compound-Selektor schlaegt
   die Basisregel unabhaengig von der CSS-Ladereihenfolge, siehe Bericht).
   ----------------------------------------------------------------- */
.gsl-tile.gsl-proj {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  min-height: 0;
  text-decoration: none;
  border-radius: var(--gsl-radius-md);
  overflow: hidden;
  box-shadow: var(--gsl-shadow-sm);
  background: var(--gsl-rubric-aktuelles-dark);
  color: var(--gsl-paper);
}
.gsl-proj__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gsl-rubric-aktuelles-dark);
}
.gsl-proj__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.gsl-proj__body {
  background: var(--gsl-rubric-aktuelles-dark);
  color: var(--gsl-paper);
  padding: var(--gsl-space-5);
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gsl-space-2);
}
.gsl-proj__month {
  margin: 0;
  font-size: var(--gsl-fs-xs);
  font-weight: var(--gsl-fw-bold);
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-paper);
}
.gsl-proj__title {
  margin: 0;
  font-size: var(--gsl-fs-md, var(--gsl-fs-lg));
  font-weight: var(--gsl-fw-bold);
  line-height: var(--gsl-lh-snug);
  color: var(--gsl-paper);
  padding-right: var(--gsl-space-6);
  overflow-wrap: break-word;
  hyphens: auto;
}
.gsl-proj__arrow {
  position: absolute;
  right: var(--gsl-space-4);
  bottom: var(--gsl-space-4);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gsl-radius-full);
  background: rgb(255 255 255 / 18%);
  color: var(--gsl-paper);
  transition: transform var(--gsl-duration-fast) var(--gsl-ease-out);
}
/* Zusaetzlicher, dezenter Mittelton-Akzent auf Papier-Baendern -- der
   Mittelton bleibt Rahmen, nie Flaeche/Schrift (Auftrag §8). */
.gsl-proj-chapter--paper .gsl-proj__arrow {
  box-shadow: inset 0 0 0 1.5px var(--gsl-rubric-aktuelles);
}
.gsl-tile.gsl-proj:hover .gsl-proj__arrow {
  transform: translateX(4px);
}
.gsl-tile.gsl-proj:hover .gsl-proj__title {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.gsl-tile.gsl-proj:focus-visible {
  outline: 3px solid var(--gsl-rubric-aktuelles);
  outline-offset: 3px;
}

/* Kein Foto (heute bei keinem der 17 Beitraege der Fall, robustheitshalber
   siehe Auftrag §9): Kachel wird reine Farbflaeche, Monat gross. */
.gsl-proj__month-fallback {
  display: none;
}
.gsl-proj:not(:has(img)) {
  aspect-ratio: auto;
  min-block-size: 20rem;
}
.gsl-proj:not(:has(img)) .gsl-proj__body {
  justify-content: flex-end;
}
.gsl-proj:not(:has(img)) .gsl-proj__month {
  display: none;
}
.gsl-proj:not(:has(img)) .gsl-proj__month-fallback {
  display: block;
  margin: 0 0 var(--gsl-space-3);
  font-size: var(--gsl-fs-2xl, var(--gsl-fs-xl));
  font-weight: var(--gsl-fw-black);
  color: var(--gsl-paper);
  line-height: var(--gsl-lh-tight);
}
.gsl-proj:not(:has(img)) .gsl-proj__title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* -----------------------------------------------------------------
   Projekt-Detailseite (LILY, 2026-08-25). Auftrag: die Detailseiten waren
   komplett ungestaltet (EXT:news-Vendor-Default). Kopf nach dem etablierten
   Unterseiten-Muster gsl-subhero (siehe Hero/frontend.html, Unterseiten-
   Zweig) -- gespeist mit dem Beitragsfoto statt einem CE-Bild. Farben
   ausschliesslich aus der Aktuelles-Familie (Stefan-Vorgabe 25.08.2026,
   "Farbschemata muessen harmonieren"), keine sechste Farbe, kein Mittelton
   als Flaeche/Schrift -- siehe Kontrast-Kommentar oben in dieser Datei.
   ----------------------------------------------------------------- */

/* Der Seitenkopf der Listenansicht (tt_content CType=header, "Unsere
   Projekte und Aktionen") teilt sich die Seite mit der News-Detailansicht,
   weil beide auf derselben Seite (pid 472) liegen. Ohne diese Regel
   erscheint er ZUSAETZLICH ueber dem eigenen Beitragskopf -- der Fehler aus
   dem Auftrag ("darueber haengt noch der Rest der Listenseite"). :has()
   erkennt die Detailansicht am eigenen Marker (.gsl-proj-detail-hero) und
   blendet ausschliesslich dann den fremden Seitenkopf aus -- die Listen-
   ansicht selbst (ohne diesen Marker) bleibt unveraendert. */
.gsl-main:has(.gsl-proj-detail-hero) [data-ce-type="header"] {
  display: none;
}

/* Kein Foto beim Beitrag (heute nicht der Fall, siehe Auftrag): die Zeile
   faellt auf eine Spalte zurueck statt eine leere 45%-Flaeche zu zeigen. */
.gsl-proj-detail-hero:not(:has(.gsl-subhero__image)) {
  grid-template-columns: 1fr;
}

/* Datum-Metazeile im Kopf -- eigene, kleinere Stufe unterhalb von h1, auf
   demselben Weiss-Overlay-Token wie die Brotkrume (schon anderswo geprueft). */
.gsl-proj-detail__date {
  margin: var(--gsl-space-4) 0 0;
  font-size: var(--gsl-fs-sm);
  color: var(--gsl-overlay-white-82);
}

/* Fliesstext-Sektion: Lesebreite kommt bereits von .gsl-container-text
   (720px, siehe Zeile ~520 in homepage-source.css) -- hier nur Abstand und
   die Actions-Reihe. */
.gsl-proj-detail-body {
  background: var(--gsl-paper);
}
.gsl-proj-detail__prose {
  font-size: var(--gsl-fs-base);
  line-height: var(--gsl-lh-relaxed);
}
.gsl-proj-detail__prose :is(h2, h3) {
  color: var(--gsl-rubric-aktuelles-dark);
}
/* Absichtlich EIGENE Linkfarbe statt .gsl-prose zu benutzen: .gsl-prose a
   greift auf den kaskadierten Mittelton --gsl-rubric zurueck und faellt,
   wenn keine .gsl-rubric-Huelle im Geltungsbereich liegt, auf --gsl-blue
   zurueck (das Blau aus dem Auftrag). Kein Beitragstext enthaelt heute
   Links, aber die Redaktion kann jederzeit welche einfuegen -- die Farbe
   muss von Anfang an in der Aktuelles-Familie und AA-konform sein
   (11,15:1, gleiches Paar wie Kachel-Sockel/Chapter-Ueberschrift). */
.gsl-proj-detail__prose a {
  color: var(--gsl-rubric-aktuelles-dark);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
.gsl-proj-detail__prose a:hover {
  color: var(--gsl-rubric-aktuelles);
}

.gsl-proj-detail__actions {
  margin-top: var(--gsl-space-8);
}

/* Eigener Button-Grundzustand statt .gsl-btn--rubric: dessen Grundflaeche
   ist der Mittelton --gsl-rubric (im Auftrag verboten als Flaeche). -dark
   ist eines der beiden gesperrten Kontrast-Paare (weisse Schrift, 11,15:1).
   Compound-Selektor .gsl-btn.gsl-btn--proj (Spezifitaet 0,2,0) ist PFLICHT,
   nicht nur .gsl-btn--proj (0,1,0): min_core setzt sitenweit ueber JS
   data-contrast="default" auf <html>, wodurch [data-contrast] a (0,1,1)
   jede einfache Klassenregel auf einem <a> schlaegt und die Schrift auf das
   globale Kontrast-Blau (#0066cc) zurueckfaellt -- exakt der "blaue Text"
   aus dem Auftrag, hier am eigenen Button gemessen (computed color) statt
   vermutet. Betrifft vermutlich auch .gsl-btn--primary/--rubric anderswo,
   aber das ist eine min_core-weite Altlast, nicht Teil dieses Auftrags. */
.gsl-btn.gsl-btn--proj {
  background: var(--gsl-rubric-aktuelles-dark);
  color: var(--gsl-paper);
}
.gsl-btn.gsl-btn--proj:hover {
  background: color-mix(in oklch, var(--gsl-rubric-aktuelles-dark), black 15%);
  color: var(--gsl-paper);
}
.gsl-btn.gsl-btn--proj:focus-visible {
  outline: 3px solid var(--gsl-rubric-aktuelles);
  outline-offset: 3px;
}

/* =====================================================
   RUBRIKEN-SPRUNGMARKEN + KLEINE KAPITEL (Stefan 2026-08-26)
   =====================================================
   Zwei Beobachtungen aus der Abnahme:
   1. Die Kapitel sind erst nach langem Scrollen zu erkennen und nicht
      ansteuerbar. Die Liste steht deshalb oben, direkt unter dem Seitentitel.
   2. Kapitel mit nur ein oder zwei Beitraegen wirkten verloren, weil das
      Raster die Kacheln ueber die volle Breite zog. Statt einer eigenen
      Sonderoptik bekommen sie eine begrenzte, zentrierte Spaltenbreite -
      dieselben Kacheln, nur nicht mehr auseinandergezogen.

   Farbvertrag unveraendert: ausschliesslich die Aktuelles-Familie, Flaeche
   -fill mit Schrift -dark, Mittelton nur als Rahmen und Fokusring.
   ===================================================== */

.gsl-proj-nav {
  padding-block: var(--gsl-section-pad-y);
  background: var(--gsl-paper);
}

.gsl-proj-nav__label {
  margin: 0 0 var(--gsl-space-4);
  font-size: var(--gsl-fs-sm);
  font-weight: 700;
  letter-spacing: var(--gsl-tracking-caps);
  text-transform: uppercase;
  color: var(--gsl-rubric-aktuelles-dark);
}

.gsl-proj-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gsl-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gsl-proj-nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gsl-space-2);
  padding: var(--gsl-space-3) var(--gsl-space-5);
  border: 2px solid var(--gsl-rubric-aktuelles);
  border-radius: var(--gsl-radius-full);
  background: var(--gsl-paper);
  color: var(--gsl-rubric-aktuelles-dark);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--gsl-duration-base) var(--gsl-ease-out),
              color var(--gsl-duration-base) var(--gsl-ease-out);
}

.gsl-proj-nav__link:hover,
.gsl-proj-nav__link:focus-visible {
  background: var(--gsl-rubric-aktuelles-dark);
  color: var(--gsl-paper);
}

.gsl-proj-nav__link:focus-visible {
  outline: 3px solid var(--gsl-rubric-aktuelles);
  outline-offset: 3px;
}

.gsl-proj-nav__count {
  font-size: var(--gsl-fs-sm);
  font-weight: 400;
  opacity: 0.75;
}

/* Kapitel mit ein oder zwei Beitraegen: Raster nicht ueber die volle Breite
   ziehen. Die Kacheln behalten ihre normale Groesse und stehen als Gruppe
   links auf der Inhaltskante, statt vereinzelt im Weissraum zu haengen. */
.gsl-proj-chapter--count-1 .gsl-proj-grid,
.gsl-proj-chapter--count-2 .gsl-proj-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 26rem));
  justify-content: start;
}

@media (prefers-reduced-motion: reduce) {
  .gsl-proj-nav__link { transition: none; }
}

/* =====================================================
   DURCHGEHENDE GALERIE (Vorgabe der Schule, 2026-08-26)
   =====================================================
   Die Skizze der Kundin zeigt gleich grosse, quadratische Kacheln in einer
   durchgehenden Reihe. Die hervorgehobene Doppelkachel oben war Teil der
   Kapitel-Optik und wird hier deshalb zurueckgenommen -- die Regel bleibt fuer
   das Layout 'gs-projekte-kapitel' unveraendert bestehen.
   ===================================================== */
.gsl-proj-galerie .gsl-proj-grid > .gsl-proj:first-child:nth-last-child(n+3) {
  grid-column: auto;
  grid-row: auto;
  display: block;
  block-size: auto;
}

.gsl-proj-galerie .gsl-proj-grid > .gsl-proj:first-child:nth-last-child(n+3) .gsl-proj__media {
  aspect-ratio: 1 / 1;
  flex: none;
}

.gsl-proj-galerie .gsl-proj-grid > .gsl-proj:first-child:nth-last-child(n+3) .gsl-proj__title {
  font-size: inherit;
}