/* layout.php — umgezogen am 28.09.2026 aus dem <style>-Block
   der Seite. Zeichen fuer Zeichen, ohne Aenderung am Aussehen.
   Diese Datei lag bis heute ausserhalb jedes Waechtermusters. */

.notif-wrap{ position:relative; }
/* Der Hilfe-Knopf daneben sieht aus wie die Glocke (09.10.2026, DESIGN.md
   „Hilfe-neben-der-Glocke") — dieselbe Regel, damit sie nicht auseinanderlaufen.
   :visited, weil er ein Link ist und a:visited ihn sonst umfaerbte. */
.notif-bell,
.topbar-hilfe{ position:relative; background:none; border:none; cursor:pointer; padding:6px; border-radius:10px; color:inherit; display:inline-flex; align-items:center; }
.topbar-hilfe,
.topbar-hilfe:visited{ color:inherit; text-decoration:none; }
/* Ein <button> rechnet den Innenabstand in Breite und Hoehe ein, ein Link nicht —
   auf der Kopfzone wurde der Hilfe-Knopf sonst 56px gross statt 44px. */
.topbar-hilfe{ box-sizing:border-box; justify-content:center; }
.notif-bell:hover,
.topbar-hilfe:hover{ background:color-mix(in srgb, var(--text) 5%, transparent); }
.notif-badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--danger-ink); color:var(--card); font-size:10px; font-weight:700; line-height:16px; text-align:center; }
.notif-dropdown{ position:absolute; right:0; top:calc(100% + 8px); width:340px; max-width:92vw; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 24px color-mix(in srgb, var(--text) 12%, transparent); z-index:1000; overflow:hidden; }
.notif-dropdown[hidden]{ display:none; }
.notif-head{ padding:12px 14px; font-weight:700; border-bottom:1px solid var(--border); }
/* dvh: Auf iOS rechnet vh die Adressleiste nicht ein — die Liste reichte
   darunter und die letzte Meldung war nicht erreichbar (08.10.2026). */
.notif-list{ max-height:60dvh; overflow-y:auto; }
.notif-empty{ padding:20px 14px; color:var(--text-light); text-align:center; font-size:.9rem; }
.notif-item{ display:flex; gap:10px; padding:11px 14px; text-decoration:none; color:inherit; border-bottom:1px solid var(--border-light); }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--bg); }
.notif-item.is-new{ background:var(--info-wash); }
.notif-icon{ font-size:20px; color:var(--primary); flex-shrink:0; }
.notif-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.notif-title{ font-weight:600; font-size:.9rem; overflow-wrap:anywhere; }
.notif-msg{ font-size:.82rem; color:var(--text-light); overflow-wrap:anywhere; }
.notif-time{ font-size:.75rem; color:var(--text-light); }
.notif-foot{ display:block; text-align:center; padding:10px 14px; font-size:.85rem; font-weight:600; color:var(--primary); text-decoration:none; border-top:1px solid var(--border); }
.notif-foot:hover{ background:var(--bg); }
@media (max-width:640px){ .notif-dropdown{ position:fixed; left:8px; right:8px; top:60px; width:auto; max-width:none; } }