/* ============================================================
   idf-hint — Hinweis-Box mit Icon (Info / Warnung / Fehler)
   ------------------------------------------------------------
   Der erklaerende Kasten ueber oder unter einer Feldgruppe: Icon links,
   Fliesstext daneben. Ersetzt die Modul-Nachbauten .ws-modal-hint,
   .vtr-modal-hint, .vvl-modal-hint, .sgds-av-hint und die frueher im
   Standard-Artefakt wohnende .idf-sa-relation-hint.

   WARUM DIESER BAUSTEIN EXISTIERT (bitte vor dem naechsten Nachbau lesen):

   Alle Nachbauten waren Flex-Container. In einem Flex- ODER Grid-Container
   wird JEDES Kind ein eigenes Item auf eigener Zeile — auch ein <strong>
   mitten im Satz, auch das Icon, auch jeder Textknoten dazwischen. Genau
   daran sind die Boxen reihenweise zerbrochen: "Vertraege mit dem /
   Kunden / dieser Website." auf drei Zeilen.

   Verschaerft wurde das im Formular: `.idf-form > .idf-form-row-full`
   (blocks/forms) setzt `display: grid` mit hoeherer Spezifitaet als eine
   Modul-Klasse — das `display: flex` des Moduls hat dort NIE gewonnen.
   Deshalb stand das Icon im Formular immer auf einer eigenen Zeile ueber
   dem Text, waehrend dieselbe Box ausserhalb eines `.idf-form` (z.B. im
   Relation-Reiter) einzeilig aussah.

   Dieser Block loest beides an der Wurzel: die Box ist ein ganz normaler
   Textblock (`display: block`), das Icon haengt absolut positioniert im
   linken Rand. Damit gibt es keine Flex-/Grid-Items im Text, und beliebiges
   Inline-Markup (<strong>, <em>, <a>, <code>) ist erlaubt.

   Voraussetzung: idf-tokens.css, FontAwesome (beides via page-head/
   page-styles). CSS-only, kein JS.
   ============================================================ */

.idf-hint {
  /* Icon-Spalte: fixe Breite (FA-Standard 1.25em) + Abstand. Der Text
     bekommt sie als padding-left, damit auch die zweite und dritte Zeile
     buendig unter der ersten stehen (haengender Einzug). */
  --idf-hint-pad:    var(--space-3, 12px);
  --idf-hint-icon-w: 1.25em;
  --idf-hint-gap:    var(--space-2, 8px);
  --idf-hint-ton:    var(--accent, #167ea0);

  display: block;
  position: relative;
  padding: var(--idf-hint-pad);
  padding-left: calc(var(--idf-hint-pad) + var(--idf-hint-icon-w) + var(--idf-hint-gap));
  background: var(--neutral-bg, #f0f1f3);
  border-left: 3px solid var(--idf-hint-ton);
  border-radius: var(--idf-form-radius, var(--radius-xs, 3px));
  color: var(--ink, #111);
  /* Fliesstext, den man lesen soll = --font-base. --font-sm ist die Groesse
     fuer kleine Buttons und Stats (Joerg 2026-07-27). */
  font-size: var(--font-base, 1rem);
  line-height: 1.45;
  margin: 0 0 var(--space-3, 12px);
}

/* Icon: erstes <i> im Kasten. `line-height: inherit` laesst seine Zeilenbox
   exakt auf der ersten Textzeile liegen — kein Pixel-Nachschieben noetig. */
.idf-hint > i:first-child {
  position: absolute;
  left: var(--idf-hint-pad);
  top: var(--idf-hint-pad);
  width: var(--idf-hint-icon-w);
  text-align: center;
  line-height: inherit;
  color: var(--idf-hint-ton);
}

/* Platzhalter und Feldnamen im Hinweistext. Lange Tokens ohne Leerzeichen
   ({{kunde.name}}) brechen sonst nirgends um und ziehen den Kasten breit. */
.idf-hint code {
  background: var(--shade-08);
  border-radius: var(--radius-xs, 3px);
  padding: 1px 4px;
  font-size: 0.85em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Tonalitaet ---- */

/* Warnung: etwas stimmt nicht, ist aber nicht kritisch. */
.idf-hint.is-warnung {
  --idf-hint-ton: var(--orange, #e8710a);
  background: var(--tint-orange);
}

/* Fehler/kritisch: etwas ist schiefgegangen oder fehlt hart. */
.idf-hint.is-fehler {
  --idf-hint-ton: var(--red, #e11d21);
  background: var(--tint-red);
}

/* ---- Groesse ---- */

/* Kompakt: Nebenschauplatz-Hinweis (Platzhalter-Legende, Fussnote im
   Modal) — kleinere Schrift, engeres Polster. */
.idf-hint.is-kompakt {
  --idf-hint-pad: var(--space-2, 8px);
  font-size: var(--font-sm, 0.8125rem);
  color: var(--mid, #555);
}

/* ---- Kontext: im Formular ----
   `.idf-form > .idf-form-row-full { display: grid }` (blocks/forms) hat
   (0,2,0) und wuerde `display: block` von oben schlagen. Diese Regel hat
   (0,3,0) und gewinnt — ohne sie stuende das Icon wieder ueber dem Text.
   Die Klasse `idf-form-row-full` bleibt am Kasten Pflicht, sonst sitzt er
   in der linken Spalte des zweispaltigen Rasters. */
.idf-form > .idf-form-row-full.idf-hint {
  display: block;
}

/* ---- Versteckt heisst versteckt ----
   `display: block` oben und die Formular-Regel darueber sind Autoren-Regeln
   und schlagen `[hidden] { display: none }` aus dem Browser-Stylesheet, egal
   wie die Spezifitaet steht. Ein Kasten, den ein Modul per `hidden` wegnimmt,
   blieb deshalb als leerer farbiger Streifen stehen (aufgefallen am
   Kommentar-Hinweis der Aufgaben, #634: nach dem Loeschen des letzten
   Kommentars stand die rote Zeile weiter da). Beide Kontexte brauchen ihre
   eigene Zeile, die zweite (0,4,0) schlaegt die Block-Regel darueber. */
.idf-hint[hidden],
.idf-form > .idf-form-row-full.idf-hint[hidden] {
  display: none;
}

/* `.idf-form > .idf-form-row-full > span` faerbt Label-Spans grau und
   klein — im Hinweis-Text waere das falsch. Zurueckdrehen fuer den Fall,
   dass jemand doch ein <span> im Satz braucht. */
.idf-form > .idf-form-row-full.idf-hint > span {
  color: inherit;
  font-size: inherit;
}