/* Glocke, Hinweise, Änderungsverlauf, Protokoll, Link-Kacheln */
.bell { position: relative; }
.bell-count { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--on-gold);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; transform: translate(30%, -20%); }
.side-foot .bell { color: var(--side-text); }

.hinweise { display: grid; gap: 10px; }
.hinweis { padding: 12px 16px; border-left: 4px solid var(--info); }
.hinweis.warn { border-left-color: var(--warn); }
.hinweis.ok { border-left-color: var(--ok); }
.hinweis.gelesen { opacity: .72; }
.hinweis p { margin: 6px 0 8px; }
.hinweis-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.neu-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; }

.aenderungen { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.aenderungen li { overflow-wrap: anywhere; }
.aenderungen .feld { color: var(--muted); margin-right: 6px; }
.aenderungen del { background: var(--err-soft); color: var(--err); text-decoration: line-through; padding: 0 4px; border-radius: 4px; }
.aenderungen ins { background: var(--ok-soft); color: var(--ok); text-decoration: none; padding: 0 4px; border-radius: 4px; }
.aenderungen .pfeil { margin: 0 6px; color: var(--muted); }

.protokoll { display: grid; gap: 8px; }
.pk { padding: 10px 14px; }
.pk.nach-genehmigung { border-left: 4px solid var(--warn); background: linear-gradient(90deg, var(--warn-soft), var(--surface) 40%); }
.pk.nach-auszahlung { border-left: 4px solid var(--err); background: linear-gradient(90deg, var(--err-soft), var(--surface) 40%); }
.pk-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
.pk pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.protokoll-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.protokoll-filter .field { min-width: 150px; flex: 1 1 150px; margin: 0; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 14px 0; }

.verlauf summary { cursor: pointer; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.zeitleiste { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 12px; }
ol.zeitleiste { border-left: 0; display: block; }
.zeitleiste li { position: relative; }
.zeitleiste li::before { content: ''; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.zeitleiste li.markiert::before { background: var(--err); }
.zl-kopf { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.link-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.link-kacheln .tile { text-decoration: none; }
.link-kacheln .tile strong { font-size: 17px; }
.link-kacheln .tile .ico { color: var(--gold-dark); }
.rollen-liste { margin: 0; padding-left: 18px; display: grid; gap: 4px; }