/* =========================================================================
   content-service.css - Modul-eigenes CSS (additiv zu _shared).
   Erlaubt laut §7: grid-template-columns und das Layout der eigenen Zellen
   und Bereiche. Listen-Mechanik und -Optik, Pillen (pill-colors,
   flag-check), Karten, Leer-Zustand, der Kasten je Vorschlag
   (domain/vorschlaege) und das Lese-Raster (blocks/info-grid) kommen aus
   _shared.

   Die Regeln fuer Liste und Pruefungs-Fenster standen bis webservice
   v0.62.0 in webservice.css (dort .wsi- und .wsp-) und sind mit der App
   hierher gezogen (Issue 1875).
   ========================================================================= */

/* ---- Einstieg (index.php): nur das Seiten-Padding des Rasters ------------ */
@media (max-width: 1100px) {
  }

/* ---- Uebersicht (uebersicht.php): Rand um die Kacheln -------------------- */
/* Wie die Uebersicht einer Firma (.un-hub) und eines Projekts (.pj-hub). */
.cs-hub { padding: var(--space-6); }

/* ---- Inhalte (inhalte.php): Spaltenraster -------------------------------- */
/* Artikel · Pruefung · Note · Stand · Geprueft. Muss zu `columns` in
   inhalte-list.js passen (fuenf Zellen, Pruefung seit v0.15.0). */
.cs-grid {
  grid-template-columns: var(--cs-cols, minmax(260px, 1fr) 96px 110px 240px 120px);
}
/* Stand (Issue 1514): mehrere Pillen brechen in der Spalte um, statt in die
   Nachbarspalte zu laufen. */
.cs-stand-pillen { flex-wrap: wrap; row-gap: var(--space-1); }
.cs-stand-leer { color: var(--ink-75); }

/* ---- Zulieferungen (zulieferungen.php, Issue 1960): Spaltenraster -------- */
/* Zulieferung · Zielseite · Zuletzt · Stand. Muss zu `columns` in
   zulieferungen-list.js passen (vier Zellen). */
.csz-grid {
  grid-template-columns: var(--csz-cols, minmax(220px, 1fr) 130px 280px 150px);
}

/* Reiter „Ausgelesen“ eines Durchlaufs, eine Liste wie auf der Seite
   (Issue 2073): Stand · Plus · Aktion · Preis · Art */
.csz-auszug-grid {
  display: grid;
  grid-template-columns: 44px 44px minmax(200px, 1fr) 100px 150px;
}

/* ---- Pruefungs-Fenster (pruefung-fenster.js) -----------------------------
   Der Reiter ist kein Formular: alle Bloecke stehen untereinander. Die
   .idf-form-Klasse bleibt fuer Abschnitts-Titel und die --idf-form-* Custom-
   Properties.
   Alle Bloecke nutzen die ganze Breite des Fensters, Kopf, Aendern,
   Knopfzeile und Artikel gleich breit (Issue 1505). Zuerst hatte nur der
   Artikel 78ch und stand links neben leerem Platz; danach standen alle in
   einer Lesespalte von 50rem, und im 1600-px-Fenster blieben links und
   rechts je gut 200 px leer. Joerg will die Breite nutzen (04.10.2026). */
.csp > * { grid-column: 1 / -1; }

.csp-kopf { display: flex; flex-direction: column; gap: var(--space-3); }
.csp-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.csp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--font-base);
}
.csp-link:hover { text-decoration: underline; }
.csp-meta { font-size: var(--font-xs2); color: var(--ink-75); margin: 0; }
.csp-urteil {
  margin: 0;
  font-size: var(--font-base);
  line-height: 1.55;
  color: var(--ink);
}
/* Die Antworten im Kopf: Pille, dann der Satz. Raster und Schrift kommen
   aus blocks/info-grid (is-fliesstext), hier nur der Abstand dazwischen. */
.csp-antworten .idf-pill-tag { margin-right: var(--space-1); }

/* Plan fuer die Ueberarbeitung (Aktualitaet, v0.15.0): Lesetext in 16 px. */
.csp-plan {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--font-base);
  line-height: 1.55;
  color: var(--ink);
}
.csp-plan li + li { margin-top: var(--space-1); }

/* Der Kasten je Vorschlag, sein Stand und die Bewertung kommen aus
   _shared/domain/vorschlaege (.idf-vs, Issue 1822). Hier bleibt der Abstand
   im Artikel und Alt und Neu ausserhalb des Texts. */
.csp-artikel .idf-vs { margin: var(--space-2) 0 var(--space-4); }
.csp-leistung,
.csp-titel,
.csp-kurztext { padding: var(--space-2) var(--space-3); background: var(--white); border-radius: var(--radius-xs); }

/* Der Artikel im Stand der Pruefung: Inhalt in 16 px, Ueberschriften eine
   Stufe darueber, keine Bilder (die bereinigt artikelHtml weg). Die Breite
   ist die des Reiters (.csp). */
.csp-artikel {
  font-size: var(--font-base);
  line-height: 1.65;
  color: var(--ink);
}
.csp-artikel p,
.csp-artikel ul,
.csp-artikel ol,
.csp-artikel blockquote { margin: 0 0 var(--space-3); }
.csp-artikel h2,
.csp-artikel h3,
.csp-artikel h4,
.csp-artikel h5,
.csp-artikel h6 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-lg);
  font-weight: var(--weight-semi);
  line-height: 1.35;
}
.csp-artikel h3,
.csp-artikel h4,
.csp-artikel h5,
.csp-artikel h6 { font-size: var(--font-base); }
.csp-artikel blockquote {
  padding-left: var(--space-4);
  border-left: 3px solid var(--ink-10);
  color: var(--ink);
}
.csp-artikel a { color: var(--accent); }
/* Die Nummer hinter der Marke verbindet sie mit ihrem Kasten unter dem Absatz. */
.csp-marke-nr { margin-left: var(--space-1); vertical-align: 0.1em; }