/* ============================================================
   Karte

   Masse aus Prototyp.dc.html Zeile 1991-2004.

   `grid-template-rows: subgrid` ist die entscheidende Zeile: Die Karte
   ist selbst ein Rasterfeld und uebernimmt die Zeilen des Elternrasters,
   statt eigene aufzumachen. Damit stehen Titel neben Titel und Liste
   neben Liste — auch wenn der Text darueber in einer Karte drei und in der
   naechsten fuenf Zeilen lang ist.
   ============================================================ */

.ps-karte {
  /* Die Kantenlaenge des Symbols. Sie bestimmt zugleich die Hoehe der
     Kopfzeile — siehe unten. Muss zur Groesse in render.php passen. */
  --ps-karte-symbol: 26px;

  display: grid;
  grid-row: span var(--ps-karten-zeilen, 5);
  grid-template-rows: subgrid;
  row-gap: var(--space-5);
  border-top: 2px solid var(--highlight);
  padding-top: var(--space-5);
  margin-block: 0;
  min-width: 0; /* sonst sprengt ein langes Wort die Rasterspalte */
}

/*
   Rueckfall fuer Browser ohne subgrid (Safari vor 16, Chrome vor 117).
   Die Karte wird dann eine gewoehnliche Spalte: alles sitzt richtig,
   nur die Zeilen der Nachbarkarten liegen nicht mehr auf einer Hoehe.
*/
@supports not (grid-template-rows: subgrid) {
  .ps-karte {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
}

/* Jede Zeile sitzt oben in ihrem Rasterfeld, nicht mittig — sonst
   schwimmen kurze Zeilen in der Hoehe der laengsten Nachbarzeile. */
.ps-karte > * { align-self: start; }

/* ---------- 1 · Kopfzeile ---------- */

/*
   Die Mindesthoehe ist kein Schoenheitsfehler, sondern der Punkt:

   Ohne sie bestimmt der hoechste Inhalt die Zeilenhoehe — mit Symbol 26px,
   ohne nur die Versalzeile mit rund 17px. Da alle Karten dieselben
   Rasterzeilen teilen, ruecken dann Titel, Text und alles darunter neun
   Pixel nach oben, sobald das letzte Symbol aus dem Raster verschwindet.
   Die Karte saehe je nach Symbolwahl anders proportioniert aus.
*/
.ps-karte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--ps-karte-symbol);
}

.ps-karte__kennung {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ps-karte__symbol {
  display: inline-flex;
  flex: none;
  color: var(--highlight);
}

/* ---------- 2 · Titel ---------- */

/* Zwei Klassen im Selektor, damit die Regel sicher ueber den globalen
   Ueberschriftenstilen aus theme.json liegt — siehe Abschnittskopf. */
.ps-karte .ps-karte__titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight: var(--weight-medium);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  text-wrap: pretty;
}

/* Eine Ebene tiefer in der Gliederung, eine Spur kleiner im Satz. */
.ps-karten--titel-h4 .ps-karte__titel {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.3;
}

/*
   Auf dem Band gibt es keine Ueberschriften — dort steht als Titel eine
   gesperrte Versalzeile wie die Kennung. render.php setzt dann auch kein
   <h3>, sondern einen Absatz: Was nicht gliedert, soll auch nicht so
   ausgezeichnet sein.
*/
.ps-karten--titel-auszeichnung .ps-karte__titel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- 3 · Fliesstext ---------- */

.ps-karte__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-body);
  text-wrap: pretty;
}

/* ---------- 4 · Aufzaehlung ---------- */

/*
   Die Trennlinie laeuft nur ueber 60% der Breite und laeuft dann aus. Der
   Prototyp macht das mit `border-image` und einem harten Verlaufsstop —
   uebernommen, weil eine durchgezogene Linie die Karte optisch zerteilt.
*/
.ps-karte__liste,
.ps-karte__nutzen {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  border-image: linear-gradient(to right, var(--border-default) 60%, transparent 60%) 1;
}

/* Leere Zeile: keine Linie ins Nichts. render.php gibt diese Zeilen ohne
   Leerraum aus, damit :empty ueberhaupt greifen kann. */
.ps-karte__liste:empty,
.ps-karte__nutzen:empty {
  padding-top: 0;
  border-top: 0;
}

.ps-karte__liste ul,
.ps-karte__liste ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
}

.ps-karte__liste li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

/* Der Punkt vor jedem Eintrag. Als Pseudo-Element und nicht als ::marker:
   ::marker kennt weder Groesse noch Verschiebung zuverlaessig. */
.ps-karte__liste li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--highlight);
  transform: translateY(-2px);
}

/* Verschachtelte Listen bleiben lesbar, statt eine zweite Punktspalte
   aufzumachen. */
.ps-karte__liste li > ul,
.ps-karte__liste li > ol {
  flex: 1 0 100%;
  padding-left: var(--space-5);
}

/* ---------- 5 · Nutzen ---------- */

.ps-karte__nutzen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-karte__nutzen-titel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--highlight);
}

.ps-karte__nutzen-text {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-strong);
  text-wrap: pretty;
}