/* ---------------------------------------------------------------------------
   FOGSMOKE — Gefahrenhinweise im Reiter "Sicherheit" (Sitzung FOOTER)

   Gestaltung des umgezogenen Blocks. Die Verlagerung selbst macht fs-hazard.js;
   hier geht es nur um das Aussehen im Reiter.

   GRUNDSATZ: Die roten Rauten sind das einzige Farbige. Sie sind genormt
   (CLP Anhang V) und duerfen weder eingefaerbt noch veraendert werden — sie
   tragen die Warnung von allein. Alles drumherum bleibt ruhig, damit die
   Symbole wirken. Kein zusaetzliches Rot, keine Warnfarben im Rahmen: Wer
   Gefahr durch Gestaltung verstaerkt, macht die Angabe nicht klarer, nur
   lauter.
   --------------------------------------------------------------------------- */

.fs-hazard-pane {
    /* Haarlinie INNERHALB des Bauteils. Verbindlicher Ton laut Farbbeschluss
       vom 20.08.2026: #e4e4e7. Mein urspruengliches #e6e4ea hatte einen
       Lila-Anteil und gehoerte zur Familie, die gerade ausgemistet wird.
       Bauteil-RAENDER (Karten, Chips, Eingabefelder) waeren #d9d9de — hier
       nicht einschlaegig, es sind Trennlinien zwischen Textbloecken. */
    --fh-linie: #e4e4e7;
    --fh-grau: #6a6672;
}

/* Der Plugin-Block bringt eine eigene Panel-Huelle mit (Rahmen, Kopfzeile,
   zentrierte Ueberschrift). Im Reiter ist das eine Schachtel in der Schachtel —
   die Huelle faellt weg, der Inhalt bleibt. */
.fs-hazard-pane .css-panel,
.fs-hazard-pane .panel-default {
    border: 0;
    box-shadow: none;
    background: none;
    margin: 0;
}
.fs-hazard-pane .panel-header {
    border: 0;
    background: none;
    padding: 0 0 18px 0;
}
.fs-hazard-pane .panel-title {
    text-align: left !important;   /* Plugin setzt text-center inline am Element */
}
.fs-hazard-pane .panel-title h4,
.fs-hazard-pane .panel-title {
    font-family: "FS Display", "FS Body", sans-serif;
    font-size: clamp(19px, 2.2vw, 23px);
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0;
}
.fs-hazard-pane .panel-body { padding: 0; }

/* --- Die Piktogramm-Reihe ---
   Das Plugin liefert eine Flexbox mit je Symbol + Erklaertext. Auf schmalen
   Fenstern stapelt sie sonst zu einer sehr langen Spalte; ein Raster mit
   Mindestbreite haelt sie zweispaltig, solange Platz ist. */
.fs-hazard-pane .css-hazard-flexbox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 18px 26px;
}
.fs-hazard-pane .css-hazard-flexbox-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 0;
}
/* Das Plugin haengt eine Abstandsklasse top15 an und gibt jedem Block eine
   Unterlinie. Beides stammt aus seiner gestapelten Eigenanordnung: Dort trennte
   die Linie die untereinanderliegenden Symbole. Im Raster stehen sie
   nebeneinander, die Linien liefen quer durch und endeten mitten im Nichts. */
.fs-hazard-pane .css-hazard-flexbox-item.top15 { margin-top: 0; }
.fs-hazard-pane .css-hazard-flexbox-item { border: 0; }

.fs-hazard-pane .css-hazard-pictogramm { flex: 0 0 auto; padding: 0; }
.fs-hazard-pane .css-hazard-pictogramm img {
    width: 62px; height: 62px;
    /* Ausdruecklich KEIN filter, KEIN border-radius: Gefahrenpiktogramme sind
       genormte Zeichen. Wer sie entfaerbt oder beschneidet, veraendert eine
       gesetzliche Kennzeichnung. */
}

/* --- Die Textblöcke (Signalwort, H-Saetze, P-Saetze) --- */
.fs-hazard-pane h5 {
    font-family: "FS Display", "FS Body", sans-serif;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 26px 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--fh-linie);
}
.fs-hazard-pane h5 strong { font-weight: inherit; }
.fs-hazard-pane h5:first-of-type { border-top: 0; padding-top: 0; }

.fs-hazard-pane ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fs-hazard-pane ul li {
    position: relative;
    padding: 4px 0 4px 18px;
    line-height: 1.5;
    max-width: 76ch;
}
.fs-hazard-pane ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 12px;
    width: 6px; height: 1px;
    background: var(--fh-grau);
}

/* Der Reiter bekommt kein Sondermerkmal in der Leiste: Er soll wie die anderen
   aussehen, sonst wirkt die Seite alarmiert. Die Information ist durch ihre
   Position auffindbar, nicht durch Farbe. */