/* --- Themenpunkt mit Feldmarke -----------------------------------------
   Offenes Ankreuzfeld mit Haken, kein gefuellter Kreis. Der Haken gehoert
   zum Vorteil, nicht zu technischen Angaben (DESIGN.md 6 Themenpunkt).
   Icon dekorativ, die Aussage steht im Text (Bauauftrag N12). */

.epi-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    /* min-content wie bei .epi-point: sonst reserviert der Grid-Standard
       "auto" pro Punkt mehr Hoehe als dessen Inhalt braucht und reisst die
       Liste sichtbar auseinander. */
    grid-auto-rows: min-content;
    /* Deutlich groesser als der 6-px-Abstand zwischen Titel und Beschreibung
       (.epi-point__body): der Punkt selbst muss dichter wirken als der
       Zwischenraum zum naechsten Punkt, sonst zerfaellt die Gruppierung. */
    gap: var(--wp--preset--spacing--md);
}

.epi-point {
    display: grid;
    grid-template-columns: 24px 1fr;
    /* min-content statt des Grid-Standards "auto": ohne das reserviert die
       erste Zeile mehr Hoehe als Icon und Titel brauchen und reisst Titel
       und Beschreibung sichtbar auseinander. */
    grid-auto-rows: min-content;
    column-gap: 0.75rem;
    align-items: start;
}

/* Der Haken ist das ausgespielte Asset aus Figma (Knoten 101:175, "Icon
   Haken"): ein offener Kasten, dessen Strich oben rechts ueber die Ecke
   hinauslaeuft. Nicht nachgezeichnet — die handgezogene Ueberlaenge ist das
   Merkmal. Dekorativ (Bauauftrag N12), deshalb ein Pseudoelement: so steht
   im Markup nur Text und der Baustein bleibt im Editor bearbeitbar.
   Auf der ersten Zeile des Titels zentriert, nicht an deren Oberkante. */
.epi-point::before {
    content: "";
    grid-row: 1;
    grid-column: 1;
    inline-size: 24px;
    block-size: 24px;
    margin-block-start: calc((1.4 * 1.125em - 24px) / 2);
    background-image: url("../../img/haken.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.epi-point__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
    /* Der Themenpunkt ist ein h3 (Editor-Semantik), nicht die Sektions-H3:
       Farbe, Versalien und Laufweite von h3 (global.css) gehoeren hier nicht
       her. Figma zeigt Gross-/Kleinschreibung in Textfarbe, Türkis traegt nur
       die Feldmarke (DESIGN.md 6 Ankreuzfeld). */
    text-transform: none;
    letter-spacing: normal;
}

/* Buendig unter dem Titel, nicht unter dem Icon (DESIGN.md 6 Icons). */
.epi-point__body {
    grid-column: 2;
    margin: 6px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Ohne Marker: dasselbe Textpaar ohne Haken. Ein Haken behauptet Nutzen,
   eine Modul- oder Technikauskunft tut das nicht. */
.epi-points--plain .epi-point {
    grid-template-columns: 1fr;
}

.epi-points--plain .epi-point::before {
    content: none;
}

.epi-points--plain :is(.epi-point__title, .epi-point__body) {
    grid-column: 1;
}

/* .epi-points setzt einen eigenen (engeren) gap fuer die Haken-Liste. Steht
   zusaetzlich .epi-grid (Modul-Auskuenfte im Zwei-Spalten-Raster, 104:182),
   soll dessen groesserer Gitterabstand gelten, nicht der der Haken-Liste:
   ueber die doppelte Klasse gewinnt das unabhaengig von der Regelreihenfolge
   in den Stylesheets. */
.epi-points.epi-grid {
    gap: var(--epi-grid-gap);
}


/* --- Modul (104:182) -----------------------------------------------------
   Titel plus Absatz ohne Marker. Derselbe Satz wie der Themenpunkt, nur ohne
   Haken: ein Haken behauptet Nutzen, eine Modulauskunft tut das nicht. Die
   Klasse epi-points--plain traegt genau das. */