/* Feinschliff des Material-Themes Richtung Help-Center-Optik.
   Farben hier zentral anpassen, wenn das ERP-Branding sich ändert. */

:root {
  --md-text-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-code-font: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ERP-Rot: identisch mit .menubox / .grid-logo in public/style/style.css */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #dd0000;
  --md-primary-fg-color--light: #ff3b3b;
  --md-primary-fg-color--dark: #a80000;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Links und Hover im Fließtext ebenfalls in ERP-Rot, aber abgedunkelt:
   #dd0000 auf Weiß erreicht als Textfarbe keinen ausreichenden Kontrast. */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #a80000;
  --md-accent-fg-color--transparent: rgba(221, 0, 0, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Im dunklen Design ist das satte Rot zu grell – aufgehellt statt abgedunkelt. */
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #ff6b6b;
  --md-accent-fg-color--transparent: rgba(255, 107, 107, 0.1);
}

/* Ruhigere, breitere Textspalte – lange Tabellen brauchen Platz */
.md-grid {
  max-width: 68rem;
}

/* Kapitel-Ebene in der linken Navigation immer fett.
   Material setzt die Auszeichnung sonst nur über .md-nav__item--section, das
   ausschließlich Kapitel MIT Unterseiten bekommen – Kapitel aus einer einzigen
   Seite (Projekte, Wiedervorlagen) blieben dadurch dünn. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 700;
}

/* Tabellen im Handbuch: eng, mit Kopfzeile abgesetzt */
.md-typeset table:not([class]) th {
  background-color: var(--md-default-fg-color--lightest);
  font-weight: 600;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  padding: 0.5rem 0.9rem;
}

/* Kachel-Raster auf der Startseite */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.3rem;
}

/* Vektor-Symbole (:erp-...:) vergrößern und feiner zeichnen.
   Tabler-Icons sind strichbasiert und wirken bei Material-Standardgröße
   (1.125em) mit stroke-width 2 gedrängt. */
.md-typeset .twemoji svg {
  height: 2em;
  width: 2em;
  stroke-width: 1;   /* Tabler-Standard ist 2 */
  vertical-align: -0.5em;   /* größeres Icon mittig zur Textzeile halten */
}

/* Raster-Symbole (PNG/GIF) inline auf Texthöhe halten.
   Vektor-Symbole (:erp-...:) brauchen nichts – Material setzt sie über
   .twemoji automatisch auf 1.125em und currentColor. */
.md-typeset img.erp-icon {
  height: 1.2em;
  width: auto;
  vertical-align: text-bottom;
}

/* Einfärbbare Vektor-Symbole, z. B. :erp-trash:{ .erp-danger } */
.md-typeset .erp-danger {
  color: #dd0000;
}
.md-typeset .erp-muted {
  color: var(--md-default-fg-color--light);
}