/* Datei: Sprachfoerderung/sf-core.css
   Shared: Snippet + Chips + Error – für Viewer UND Editoren/Preview */

.sf-snippets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each snippet wrapper */
.sf-snippet {
  border: 1px solid var(--gray);
  border-radius: 8px;
  padding: 10px;
  background-color: var(--color-background);
}

/* Textabstände innerhalb der Fragmente */
.sf-snippet p {
  margin: 0 0 8px 0;
}
.sf-snippet p:last-child {
  margin-bottom: 0;
}

/* Abschnitts-Titel (z.B. Beispiele oder optional Block-Titel) */
.sf-snippet .sf-snippet__section-title {
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 400;
}

/* Bild im Snippet */
.sf-snippet .sf-snippet__image {
  margin-top: 8px;
  margin-bottom: 8px;
}

.sf-snippet .sf-snippet__image img {
  max-width: 400px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--gray);
  display: block;
}

/* Beispiele */
.sf-snippet ul {
  margin: 0 0 0 18px;
  padding: 0;
}
.sf-snippet li {
  margin-bottom: 6px;
}
.sf-snippet li:last-child {
  margin-bottom: 0;
}

/* refHtml Block */
.sf-snippet .sf-snippet__refhtml {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray);
}

/* Error-Box (auch im Editor nützlich) */
.sf-errorbox {
  border: 1px solid var(--color-buchner);
  background: var(--color-background-buchner);
  border-radius: 8px;
  padding: 10px;
  color: var(--color-text-primary);
}

/* ============================
   Blocks/Chips (Shared)
   ============================ */

.sf-forms {
  margin-top: 8px;
}

.sf-forms__group {
  margin-top: 8px;
}

/* (Nicht mehr aktiv genutzt, kann aber bleiben, falls du später Block-Labels brauchst) */
.sf-forms__label {
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}

/* Chips-Container */
.sf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

/* Einzelner Chip */
.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 8px;
  border-radius: 999px;

  background-color: var(--gray-light);
  border: 1px solid var(--gray);

  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Key/Label im Chip (z.B. "Plural:") */
.sf-chip__key {
  color: var(--color-text-secondary);
  font-weight: 700;
}

/* Value im Chip */
.sf-chip__value {
  color: var(--color-text-primary);
}

/* Optional */
.sf-forms__hint {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}