/* ============================================================
   Komponente: message
   ------------------------------------------------------------
   Quelle: Figma „Design System" → message, node 11157-796,
   übergeben am 27.08.2026.

   Ersetzt: error message · loading message · info message ·
   no wifi message.

   ABGRENZUNG ZU toast (§20)
     message  bleibt stehen, bis sich der Zustand ändert, und
              steht IM FLUSS. Kein Schatten, kein Timer, kein ✕,
              kein Fortschrittsbalken.
     toast    läuft nach Zeit ab und schwebt unten über dem
              Inhalt. → toast.css

   Zwei Dimensionen:
     rolle        fehler · info · laden
     ausrichtung  mittig (einzeilig) · oben (Text bricht um)

   „erfolg" gibt es hier bewusst NICHT — Erfolg ist immer ein
   Toast (§20).

   VERWENDUNG
     <div class="message message--info" role="status">
       <span class="message__icon"><svg …></svg></span>
       <div class="message__texte">
         <div class="message__zeilen">
           <p class="message__titel">Kein Netz</p>
           <p class="message__untertitel">Wir versuchen es erneut.</p>
         </div>
         <a class="message__aktion" href="#">Erneut versuchen</a>
       </div>
     </div>

   Titel, Untertitel und Aktion sind einzeln weglassbar.
   Bei umbrechendem Text: .message--oben ergänzen.
   ============================================================ */

.message {
  display: flex;
  gap: var(--space-2xs);                                  /* 4 */
  padding: var(--space-md);                               /* 16 */
  border-radius: var(--radius-md);                        /* 20 */
  width: 100%;                                            /* Figma: FILL */

  /* Der Strich liegt in Figma INNEN und zählt nicht zur Höhe;
     ein CSS-border tut das bei automatischer Höhe doch und macht
     das Element 2 px höher. AGENTS.md §8a verbietet ihn
     ausdrücklich („NIE ein CSS-border an beiden"). Er liegt
     deshalb als inset box-shadow in --message-outline.
     Nachgezogen am 04.09.2026, zusammen mit .btn. */
  --message-outline: transparent;
  box-shadow: inset 0 0 0 var(--outline-default) var(--message-outline);
}

/* Icon optisch auf Zeilenhöhe bringen. Die Zeilenhöhe ist 150 %,
   die Glyphe sitzt darin mittig — das Padding schiebt das Icon auf
   dieselbe optische Achse wie die erste Textzeile. */
.message__icon {
  display: flex;
  flex: 0 0 auto;
  padding-block: var(--space-2xs);                        /* 4 oben und unten */
}

.message__texte {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                                   /* 8 */
  flex: 1;
  min-width: 0;                                           /* damit langer Text umbricht */
}

/* Die 8 px links gleichen das horizontale Padding des Link Buttons
   in .message__aktion aus. NUR dadurch fluchten Titel, Untertitel
   und Aktions-Link auf einer senkrechten Achse. Nicht entfernen,
   ohne das Padding der Aktion mit zu ändern. */
.message__zeilen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);                                  /* 4 */
  padding-left: var(--space-xs);                          /* 8 */
}

.message__titel {
  font-size: var(--font-size-small-text);                 /* 14 */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small-text);             /* 150 % */
  color: var(--text-primary);
}

.message__untertitel {
  font-size: var(--font-size-small-text);                 /* 14 */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small-text);             /* 150 % */
  color: var(--text-primary);
}

/* Slot für den Link Button (§4, Typ 1 freistehend). Er bringt seine
   Textfarbe selbst mit — hier wird sie NICHT gesetzt. Padding 4 × 8
   ist das Status-Label-Maß aus §4 und der Bezug für die 8 px an
   .message__zeilen.
   OFFEN: Der Link Button hat noch keine eigene Datei in /components. */
.message__aktion {
  align-self: flex-start;
  padding: var(--space-2xs) var(--space-xs);              /* 4 / 8 */
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
}

/* ------------------------------------------------------------
   Ausrichtung
   ------------------------------------------------------------
   mittig ist der Standard und gilt für einzeiligen Text.
   oben gilt, sobald der Text umbricht — dann steht das Icon auf
   Höhe der ERSTEN Zeile, nicht in der Mitte des Blocks.
   ------------------------------------------------------------ */

.message,
.message--mittig {
  align-items: center;
}

.message--oben {
  align-items: flex-start;
}

/* ------------------------------------------------------------
   Rollen
   ------------------------------------------------------------
   Meldungstext bleibt immer --text-primary, nie rot oder blau
   (Farbtext-Längenregel, §5). Die Semantik tragen Icon, Rahmen
   und Fläche.
   ------------------------------------------------------------ */

.message--fehler {
  background-color: var(--warning-red-fill);
  --message-outline: var(--red-label-stroke);
}

.message--fehler .message__icon {
  color: var(--red-label-text);
}

.message--info,
.message--laden {
  background-color: var(--blue-label-fill);
  --message-outline: var(--blue-label-stroke);
}

.message--info  .message__icon,
.message--laden .message__icon {
  color: var(--blue-label-text);
}