/* ══════════════════════════════════════════════════════════════════════════
   Whiteboard-Foto — erklärter Prozess an der Tafel

   Gebaut am 21.08.2026 für /klimaneutralitaet/, dort noch im Seiten-Stilblock.
   Ab /energiemanagement/ (22.08.2026) als eigene Datei, weil vier weitere
   Seiten dasselbe Muster brauchen (Bericht, EcoVadis, Umweltmanagement).
   Wer Seite 3 das nächste Mal anfasst, zieht sie dort nach und löscht den
   lokalen Block — vorher nicht, die Seite ist freigegeben.

   Regeln aus dem Bildplan, Abschnitt 2:
     · volle Textbreite statt schmaler Streifen
     · KEIN fester Zuschnitt — der gesetzlich vorgeschriebene Vermerk
       „Hintergrund mit KI erstellt" sitzt am unteren Bildrand (Regel 2.1)
     · Vermerk zusätzlich als echter Text
     · die Stationen der Tafel zusätzlich als echter Text: im Bild sind sie
       auf dem Handy nicht lesbar und für Suchmaschinen gar nicht vorhanden
   ══════════════════════════════════════════════════════════════════════════ */

.board { margin: var(--space-6) 0 0; max-width: 1000px; }
/* 1200 px waren im Rendern zu dominant: das Foto erschlug die Sektion, in der
   es nur der Beleg zum Prozess ist. 1000 px halten die volle Textbreite und
   die Lesbarkeit der Tafel. */
.board img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
/* --text-muted-aa traegt seine 4,54:1 nur auf reinem Weiss. Auf getoenten
   Flaechen (--surface-subtle, --surface-tint) sinkt es auf 4,27 und liegt
   damit unter AA — gemessen am Render, nicht am Token (22.08.2026). Beide
   Zeilen tragen echte Aussagen (Einordnung, gesetzlicher KI-Vermerk), also
   bekommen sie Lesefarbe statt Fussnotenfarbe. */
.board figcaption { margin-top: var(--space-3); font-size: var(--fs-body-sm);
  line-height: var(--lh-body); color: var(--text-primary); max-width: var(--measure); }
.board__ki { display: block; margin-top: .35rem; font-size: var(--fs-caption);
  color: var(--text-primary); }

.board__stationen { list-style: none; counter-reset: station;
  margin: var(--space-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.board__stationen--sechs { grid-template-columns: repeat(3, 1fr); }
.board__stationen li { counter-increment: station; font-size: var(--fs-body-sm);
  color: var(--text-primary); padding-top: var(--space-4);
  border-top: 2px solid var(--border-subtle); position: relative; }
.board__stationen li::before { content: counter(station); position: absolute;
  top: -.85rem; left: 0; width: 1.7rem; height: 1.7rem; display: grid;
  place-items: center; border-radius: 50%;
  background: var(--color-brand); color: var(--text-inverse);
  font-family: var(--font-display); font-weight: var(--fw-extra); font-size: .85rem; }
.board__stationen b { display: block; color: var(--text-heading); }

/* Auf dunklem Grund tragen Text und Trennlinie die hellen Rollen-Tokens. */
.section-dark .board__stationen li { color: var(--text-on-dark);
  border-top-color: var(--border-on-dark); }
.section-dark .board__stationen b { color: var(--text-inverse); }
.section-dark .board figcaption,
.section-dark .board__ki { color: var(--text-on-dark-muted); }

@media (max-width: 900px) {
  .board__stationen,
  .board__stationen--sechs { grid-template-columns: 1fr 1fr; }
  .board__stationen li { font-size: 1rem; }
  .board figcaption { font-size: 1rem; }
  .board__ki { font-size: 1rem; }
}
@media (max-width: 560px) {
  .board__stationen,
  .board__stationen--sechs { grid-template-columns: 1fr; }
}

/* Vier Stationen — /eco-ratings/, Whiteboard „EcoVadis Gold-Strategie".
   Angehängt am 22.08.2026, damit die geteilte Datei nicht neu geschrieben
   werden muss (Regel: an gemeinsamen Dateien nur anhängen oder gezielt
   ersetzen). */
.board__stationen--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .board__stationen--vier { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .board__stationen--vier { grid-template-columns: 1fr; }
}