b4um_generators 0.1.0

data/lib/generators/b4um/install/templates/b4um/forms.css

@@ -0,0 +1,924 @@
+/* -------------------------------------------------------
+   Forms
+------------------------------------------------------- */
+
+.form {
+  width: 100%;
+}
+
+.form-field {
+  position: relative;
+
+  width: 100%;
+
+  margin: 18px 0;
+}
+
+.form-label {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  z-index: 1;
+
+  padding: 0 5px;
+
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text-muted);
+
+  line-height: 1;
+  pointer-events: none;
+
+  transform: translateY(-50%);
+  transform-origin: left center;
+
+  transition:
+    top 0.18s ease,
+    transform 0.18s ease,
+    color 0.18s ease;
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  margin: 0;
+  padding: 1rem 1.15rem;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--b4um-border);
+  border-radius: 8px;
+
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text);
+
+  font: inherit;
+
+  outline: none;
+
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.form-input:hover,
+.form-textarea:hover {
+  border-color: var(--b4um-border-hover);
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  border-color: var(--b4um-primary);
+  box-shadow: 0 0 0 3px var(--b4um-primary-soft);
+}
+
+.form-field:not(.form-field--checkbox):focus-within .form-label,
+.form-input:not(:placeholder-shown) + .form-label {
+  top: 0;
+
+  color: var(--b4um-primary);
+
+  transform: translateY(-50%) scale(0.82);
+}
+
+/* -------------------------------------------------------
+   Textareas
+------------------------------------------------------- */
+
+.form-textarea {
+  min-height: 10rem;
+  padding-top: 1.15rem;
+
+  resize: vertical;
+}
+
+.form-field--textarea .form-label {
+  top: 1.25rem;
+
+  transform: none;
+}
+
+.form-field--textarea:focus-within .form-label,
+.form-field--textarea .form-textarea:not(:placeholder-shown) + .form-label {
+  top: 0;
+
+  color: var(--b4um-primary);
+
+  transform: translateY(-50%) scale(0.82);
+}
+
+/* -------------------------------------------------------
+   File uploads
+------------------------------------------------------- */
+
+.form-field--file {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  /*align-items: center;*/
+  gap: 1rem;
+
+  width: 100%;
+  padding: 12px 14px;
+  box-sizing: border-box;
+
+  border: 1px solid var(--b4um-border);
+  border-radius: 8px;
+
+  background-color: var(--b4um-surface);
+
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.form-field--file:hover {
+  border-color: var(--b4um-border-hover);
+}
+
+.form-field--file:focus-within {
+  border-color: var(--b4um-primary);
+  box-shadow: 0 0 0 3px var(--b4um-primary-soft);
+}
+
+.form-file-label {
+  flex: 0 0 auto;
+
+  color: var(--b4um-text-secondary);
+  font-weight: 500;
+}
+
+.form-file-input {
+  min-width: 0;
+
+  color: var(--b4um-text-muted);
+  font: inherit;
+}
+
+.form-file-input::file-selector-button {
+  margin-right: 12px;
+  padding: 0.65rem 1rem;
+
+  border: 1px solid var(--b4um-primary);
+  border-radius: 7px;
+
+  background-color: var(--b4um-surface);
+  color: var(--b4um-primary);
+
+  font: inherit;
+  font-weight: 500;
+
+  cursor: pointer;
+
+  transition:
+    background-color 0.18s ease,
+    border-color 0.18s ease,
+    color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.form-file-input::file-selector-button:hover {
+  background-color: var(--b4um-surface-soft);
+  border-color: var(--b4um-primary-hover);
+  color: var(--b4um-primary-hover);
+
+  box-shadow: 0 3px 10px var(--b4um-primary-shadow-soft);
+}
+
+.form-file-control {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  width: 100%;
+}
+
+.form-image-preview {
+  margin-top: 12px;
+}
+
+.form-image-preview[hidden] {
+  display: none;
+}
+
+.form-image-preview--multiple {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.form-image-preview__image {
+  display: block;
+
+  width: 120px;
+  height: 90px;
+
+  border: 1px solid var(--b4um-border-light);
+  border-radius: 8px;
+
+  object-fit: contain;
+}
+
+.form-image-preview__item {
+  position: relative;
+
+  width: 120px;
+  height: 90px;
+
+  border-radius: 8px;
+
+  cursor: pointer;
+
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
+}
+
+.form-image-preview__item .form-image-preview__image {
+  width: 100%;
+  height: 100%;
+}
+
+.form-image-preview__remove-checkbox {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+
+  opacity: 0;
+  pointer-events: none;
+}
+
+.form-image-preview__remove-status {
+  position: absolute;
+  inset: auto 5px 5px;
+
+  display: none;
+
+  padding: 4px 6px;
+
+  border-radius: 5px;
+
+  background-color: var(--b4um-danger);
+  color: var(--b4um-text-on-primary);
+
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.form-image-preview__item--removed .form-image-preview__image {
+  opacity: 0.28;
+}
+
+.form-image-preview__item--removed .form-image-preview__remove-status {
+  display: block;
+}
+
+/* -------------------------------------------------------
+   Checkboxes
+------------------------------------------------------- */
+
+.form-field--checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+
+  min-height: 32px;
+  margin: 18px 0;
+}
+
+.form-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+
+  width: 18px;
+  height: 18px;
+  margin: 0;
+
+  flex: 0 0 18px;
+
+  border: 1px solid var(--b4um-border-checkbox);
+  border-radius: 5px;
+
+  background-color: var(--b4um-surface);
+
+  cursor: pointer;
+
+  transition:
+    background-color 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.12s ease;
+}
+
+.form-checkbox:hover {
+  border-color: var(--b4um-primary);
+}
+
+.form-checkbox:checked {
+  border-color: var(--b4um-primary);
+  background-color: var(--b4um-primary);
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 13px 13px;
+}
+
+.form-checkbox:focus-visible {
+  outline: none;
+
+  border-color: var(--b4um-primary);
+
+  box-shadow: 0 0 0 3px var(--b4um-primary-soft);
+}
+
+.form-checkbox:active {
+  transform: scale(0.94);
+}
+
+.form-label--checkbox {
+  position: static;
+
+  display: inline;
+  padding: 0;
+
+  background: none;
+  color: var(--b4um-text-checkbox);
+
+  line-height: 1.4;
+
+  transform: none;
+
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* -------------------------------------------------------
+   Form actions
+------------------------------------------------------- */
+
+.form-actions {
+  margin: 20px 0 10px;
+}
+
+/* -------------------------------------------------------
+   Validation errors
+------------------------------------------------------- */
+
+.error-messages {
+  width: 100%;
+  box-sizing: border-box;
+
+  margin-bottom: 20px;
+  padding: 0 0 12px;
+
+  border: 2px solid var(--b4um-danger-border);
+
+  background-color: var(--b4um-neutral-background);
+
+  font-size: 12px;
+}
+
+.error-messages h2 {
+  margin: 0;
+  padding: 5px 10px;
+
+  background-color: var(--b4um-danger);
+  color: var(--b4um-text-on-primary);
+
+  font-size: 12px;
+  font-weight: bold;
+  text-align: left;
+}
+
+.error-messages p {
+  margin: 8px 10px;
+}
+
+.error-messages ul {
+  margin: 0;
+  padding-left: 30px;
+}
+
+.error-messages li {
+  margin: 5px 0;
+}
+
+.field_with_errors {
+  display: contents;
+}
+
+/* -------------------------------------------------------
+   Rich Text
+------------------------------------------------------- */
+
+.form-field--rich-text {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.form-field--rich-text trix-toolbar {
+  grid-row: 1;
+
+  position: sticky;
+  top: 61px;
+  z-index: 10;
+
+  padding: 12px 0 4px;
+  margin: -4px 0 12px;
+
+  background-color: var(--b4um-surface);
+  box-shadow: 0 2px 6px var(--b4um-primary-shadow-soft);
+}
+
+.form-field--rich-text trix-toolbar .trix-button-group {
+  border-color: var(--b4um-border);
+}
+
+.form-field--rich-text trix-toolbar .trix-button {
+  border-color: var(--b4um-border);
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text-secondary);
+}
+
+/* Trix liefert seine Standard-Icons als schwarze SVGs aus.
+   Im dunklen Theme werden sie deshalb aufgehellt. */
+.form-field--rich-text trix-toolbar .trix-button--icon::before {
+  filter: none;
+}
+
+[data-b4um-theme='dark'] .form-field--rich-text trix-toolbar .trix-button--icon::before {
+  filter: invert(1);
+}
+
+.form-field--rich-text trix-toolbar .trix-button:not([data-trix-attribute^='bgColor']):hover {
+  background-color: var(--b4um-surface-soft);
+}
+
+.form-field--rich-text trix-toolbar .trix-button.trix-active:not([data-trix-attribute^='bgColor']) {
+  background-color: var(--b4um-primary-soft);
+}
+
+.form-field--rich-text trix-toolbar .trix-dialog {
+  border-color: var(--b4um-border);
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text);
+  box-shadow: 0 4px 14px var(--b4um-primary-shadow-soft);
+}
+
+.form-field--rich-text trix-toolbar .trix-dialog__link-fields {
+  background-color: var(--b4um-surface);
+}
+
+/* Heading-Auswahl H1–H6 kompakt halten */
+.form-field--rich-text trix-toolbar .trix-dialog--heading {
+  width: fit-content;
+  max-width: none;
+
+  margin-left: 185px;
+}
+
+.form-field--rich-text trix-toolbar .trix-dialog--heading .trix-dialog__link-fields {
+  width: fit-content;
+}
+
+.form-field--rich-text trix-toolbar .trix-dialog--heading .trix-button-group {
+  width: auto;
+  margin: 0;
+}
+
+.form-field--rich-text trix-toolbar .trix-input {
+  border-color: var(--b4um-border);
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text);
+}
+
+.form-field--rich-text .form-textarea {
+  grid-row: 2;
+}
+
+.form-field--rich-text .form-label {
+  grid-row: 2;
+
+  top: 0;
+
+  align-self: start;
+
+  color: var(--b4um-primary);
+
+  transform: translateY(-50%) scale(0.82);
+}
+/* -------------------------------------------------------
+   Rich Text Attachments
+------------------------------------------------------- */
+
+.form-field--rich-text trix-editor .attachment-gallery {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1em;
+}
+
+.form-field--rich-text trix-editor .attachment-gallery--2,
+.form-field--rich-text trix-editor .attachment-gallery--4 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.form-field--rich-text trix-editor .attachment-gallery > .attachment {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.form-field--rich-text trix-editor .attachment-gallery > [data-trix-cursor-target] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.form-field--rich-text trix-editor .attachment img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+
+  border-radius: var(--b4um-radius);
+}
+
+/* Rich-text videos */
+
+.form-field--rich-text trix-editor video,
+.trix-content video,
+.trix-content .b4um-rich-text-video {
+  display: block;
+
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+
+  border-radius: var(--b4um-radius);
+
+  background-color: #000;
+}
+
+/* Video attachments stay clearly visible inside the editor. */
+
+.form-field--rich-text trix-editor .attachment--mp4 {
+  display: block;
+
+  width: 100%;
+  min-height: 70px;
+
+  margin: 1rem 0;
+  padding: 1rem;
+
+  box-sizing: border-box;
+
+  border: 1px solid currentColor;
+  border-radius: var(--b4um-radius);
+
+  box-shadow: none;
+}
+
+.form-field--rich-text trix-editor .attachment--mp4 .attachment__caption {
+  display: block;
+
+  position: static;
+
+  width: auto;
+  height: auto;
+  min-height: 1em;
+
+  visibility: visible;
+  opacity: 1;
+
+  text-align: left;
+}
+
+.form-field--rich-text trix-editor .attachment--mp4 .attachment__caption::before {
+  content: '▶';
+  display: inline-block;
+  margin-right: 0.5em;
+}
+
+/* The rendered video does not need the Trix attachment frame or caption. */
+
+.trix-content .attachment--mp4 {
+  border: 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+.trix-content .attachment--mp4 .attachment__caption {
+  display: none;
+}
+
+/* -------------------------------------------------------
+   Rich Text Content
+------------------------------------------------------- */
+
+/* Code blocks */
+
+.form-field--rich-text trix-editor pre,
+.trix-content pre {
+  display: block;
+
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+
+  margin: 1.25em 0;
+  padding: 1em 1.15em;
+
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: normal;
+
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.9em;
+  line-height: 1.6;
+
+  color: var(--b4um-code-text);
+  background-color: var(--b4um-code-background);
+  border: 1px solid var(--b4um-code-border);
+  border-radius: var(--b4um-radius);
+}
+
+.trix-content .attachment-gallery {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1em;
+
+  margin: 1em 0;
+}
+
+.trix-content .attachment-gallery--2,
+.trix-content .attachment-gallery--4 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.trix-content action-text-attachment img,
+.trix-content .attachment img,
+.trix-content .attachment-gallery img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+
+  border-radius: var(--b4um-radius);
+}
+
+.trix-content action-text-attachment[content-type='vnd.rubyonrails.horizontal-rule.html'] {
+  display: block;
+  width: 100%;
+  max-width: none;
+}
+
+.trix-content action-text-attachment[content-type='vnd.rubyonrails.horizontal-rule.html'] > figure {
+  display: block;
+  width: 100%;
+  max-width: none;
+}
+
+.trix-content .attachment--content.attachment--horizontal-rule,
+.trix-content .attachment--content[data-trix-content-type~='vnd.rubyonrails.horizontal-rule.html'] {
+  width: 100%;
+  max-width: none;
+  padding: 1.5em 0 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.trix-content .attachment--content.attachment--horizontal-rule hr,
+.trix-content .attachment--content[data-trix-content-type~='vnd.rubyonrails.horizontal-rule.html'] hr {
+  display: block;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-top: 1px solid currentColor;
+}
+
+.form-field--rich-text .trix-button--icon-align-left::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>');
+}
+
+.form-field--rich-text .trix-button--icon-align-center::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>');
+}
+
+.form-field--rich-text .trix-button--icon-align-right::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>');
+}
+
+.form-field--rich-text .trix-button--icon-horizontal-rule::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor"><path d="M0 13h24v-2H0z"/><path d="M5 8.5h14v-3H5z"/><path d="M5 18.5h14v-3H5z"/></g></svg>');
+}
+
+.form-field--rich-text .trix-button--icon-color::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3a9 9 0 1 0 0 18h1.5a2.5 2.5 0 0 0 0-5H12a1.5 1.5 0 0 1 0-3h3a6 6 0 0 0 0-12h-3Zm-5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm2-5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm6 1a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"/></svg>');
+}
+
+.form-field--rich-text .trix-dialog--color {
+  max-width: 300px;
+}
+
+.form-field--rich-text .trix-dialog--color .trix-dialog__link-fields {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.form-field--rich-text .trix-dialog--color .trix-button-group {
+  margin: 2px 0;
+}
+
+.form-field--rich-text .trix-dialog--color .trix-button {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute^='fgColor']::after {
+  content: 'Ab';
+}
+
+.form-field--rich-text .trix-dialog--color .trix-active::after {
+  content: '✓';
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor1'] {
+  color: rgb(136, 118, 38);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor2'] {
+  color: rgb(185, 94, 6);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor3'] {
+  color: rgb(207, 0, 0);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor4'] {
+  color: rgb(216, 28, 170);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor5'] {
+  color: rgb(144, 19, 254);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor6'] {
+  color: rgb(5, 98, 185);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor7'] {
+  color: rgb(17, 138, 15);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor8'] {
+  color: rgb(148, 82, 22);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='fgColor9'] {
+  color: rgb(102, 102, 102);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor1'] {
+  background-color: rgb(250, 247, 133);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor2'] {
+  background-color: rgb(255, 240, 219);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor3'] {
+  background-color: rgb(255, 229, 229);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor4'] {
+  background-color: rgb(255, 228, 247);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor5'] {
+  background-color: rgb(242, 237, 255);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor6'] {
+  background-color: rgb(225, 239, 252);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor7'] {
+  background-color: rgb(228, 248, 226);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor8'] {
+  background-color: rgb(238, 226, 215);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute='bgColor9'] {
+  background-color: rgb(242, 242, 242);
+}
+
+/* -------------------------------------------------------
+   Trix color palette states
+------------------------------------------------------- */
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute^='bgColor']:hover {
+  border-color: var(--b4um-primary);
+  box-shadow: inset 0 0 0 2px var(--b4um-primary);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute^='bgColor'].trix-active {
+  border-color: var(--b4um-primary);
+  box-shadow:
+    inset 0 0 0 2px var(--b4um-primary),
+    0 0 0 2px var(--b4um-surface);
+}
+
+.form-field--rich-text .trix-dialog--color [data-trix-attribute^='fgColor']:hover,
+.form-field--rich-text .trix-dialog--color [data-trix-attribute^='fgColor'].trix-active {
+  background-color: var(--b4um-surface-soft);
+  border-color: var(--b4um-primary);
+}
+
+/* -------------------------------------------------------
+   Trix color palette states
+------------------------------------------------------- */
+
+/* Farbfelder beim Hover nicht mit einem neuen Hintergrund übermalen */
+.form-field--rich-text .trix-dialog--color .trix-button[data-trix-attribute^='fgColor']:hover,
+.form-field--rich-text .trix-dialog--color .trix-button[data-trix-attribute^='bgColor']:hover {
+  border-color: var(--b4um-primary);
+  box-shadow: inset 0 0 0 1px var(--b4um-primary);
+}
+
+/* Schriftfarben: Hintergrund auch bei Hover/aktiv neutral lassen */
+.form-field--rich-text .trix-dialog--color .trix-button[data-trix-attribute^='fgColor']:hover,
+.form-field--rich-text .trix-dialog--color .trix-button[data-trix-attribute^='fgColor'].trix-active {
+  background-color: transparent;
+}
+
+/* Aktives Häkchen deutlicher */
+.form-field--rich-text .trix-dialog--color .trix-button.trix-active::after {
+  font-weight: 800;
+  font-size: 0.9rem;
+}
+
+/* Schriftfarben: Häkchen übernimmt die jeweilige Schriftfarbe */
+.form-field--rich-text .trix-dialog--color .trix-button[data-trix-attribute^='fgColor'].trix-active::after {
+  color: currentColor;
+}
+
+/* Hintergrundfarben: Häkchen kontrastreicher darstellen */
+.form-field--rich-text .trix-dialog--color .trix-button[data-trix-attribute^='bgColor'].trix-active::after {
+  color: #1f2937;
+  text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
+}
+
+/* -------------------------------------------------------
+   Trix heading buttons
+------------------------------------------------------- */
+
+.form-field--rich-text trix-toolbar .trix-button[data-trix-attribute^='heading'] {
+  color: var(--b4um-text-muted);
+  background-color: var(--b4um-surface);
+
+  opacity: 0.65;
+
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.form-field--rich-text trix-toolbar .trix-button[data-trix-attribute^='heading']:hover {
+  color: var(--b4um-text);
+  background-color: var(--b4um-surface-soft);
+  border-color: var(--b4um-primary);
+
+  opacity: 1;
+}
+
+.form-field--rich-text trix-toolbar .trix-button[data-trix-attribute^='heading'].trix-active {
+  color: var(--b4um-text-on-primary);
+  background-color: var(--b4um-primary);
+  border-color: var(--b4um-primary);
+
+  opacity: 1;
+}