/* ============================================================
   FiF-IT News-Modul — eigenes CSS

   BIS 25.09.2026 stand hier eine zweite Fassung des gesamten
   Seiten-Designs: 198 Regeln, von denen 151 Wort fuer Wort auch in
   css/fif-base.css standen. Zwei Fassungen heisst zwei Stellen zum
   Pflegen, und sie sind auseinandergelaufen:

     - --text-muted stand hier noch auf #5e6b7d. Die Hauptsite hat
       den Wert am 17.08.2026 auf #8a97a8 aufgehellt, weil #5e6b7d
       gegen den Seitenhintergrund nur 3,57:1 ergab und WCAG AA
       4,5:1 verlangt. Im News-Bereich blieb der zu dunkle Wert.
     - Der Chat-Knopf fuhr hier beim Ueberfahren auf 148 Pixel aus
       und zeigte seine Beschriftung; auf dem Rest der Site nicht.
     - Das Untermenue "Loesungen" war anders verankert und ragte auf
       Schirmen um 1440 Pixel 74 Pixel ueber den rechten Rand
       hinaus - jede News-Seite hatte einen Querbalken.

   JETZT laedt der News-Bereich css/fif-base.css wie jede andere
   Seite (ueber includes/kopf.php) und diese Datei nur noch fuer
   das, was es wirklich nur hier gibt. Alles, was in fif-base.css
   steht, wurde entfernt - auch die Regeln, die davon abwichen.

   Wer hier etwas ergaenzt, prueft bitte vorher, ob es nicht in
   css/fif-base.css gehoert.
   ============================================================ */

/* ------------------------------------------------------------
   Textlinks. fif-base.css hat bewusst keine Regel fuer ein blankes
   <a>, weil dort jeder Link ueber seine Umgebung gestylt wird. Im
   News-Bereich stehen aber Links mitten im Fliesstext von Artikeln
   und Newsletter-Seiten, die eine Grundfarbe brauchen.
   ------------------------------------------------------------ */
a { color: var(--accent-secondary); text-decoration: none; }
a:hover { color: var(--accent); }

/* ------------------------------------------------------------
   Kennzeichen ("News · Artikel", "Entwurf", "Geplant").
   Gibt es nur im News-Bereich und in dessen Verwaltung.
   ------------------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  background: rgba(0, 229, 168, 0.08);
  border: 1px solid rgba(0, 229, 168, 0.2);
  padding: 6px 14px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}
.tag::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2s infinite;
}
.tag.warn { color: var(--warn); background: rgba(255, 184, 77, 0.08); border-color: rgba(255, 184, 77, 0.25); }
.tag.warn::before { background: var(--warn); box-shadow: 0 0 10px var(--warn); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .tag::before { animation: none; }
}

/* ------------------------------------------------------------
   Meldungsbalken auf den Newsletter-Seiten und in der Verwaltung.
   ------------------------------------------------------------ */
.alert {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-family: var(--font-display);
  border: 1px solid;
}
.alert-error   { background: rgba(255, 107, 107, 0.08); border-color: rgba(255, 107, 107, 0.3); color: #ff8585; }
.alert-success { background: rgba(0, 229, 168, 0.08);   border-color: rgba(0, 229, 168, 0.3);   color: var(--accent); }
.alert-warn    { background: rgba(255, 184, 77, 0.08);  border-color: rgba(255, 184, 77, 0.3);  color: var(--warn); }

/* ------------------------------------------------------------
   Roter Knopf. Nur die Verwaltung braucht ihn (Loeschen,
   Abmelden); fif-base.css kennt nur den gruenen und den leeren.
   ------------------------------------------------------------ */
.btn-danger { background: var(--danger); color: #fff !important; }
.btn-danger:hover { background: #e85555; }