/* =====================================================================
   NeoMail24 v21 - application stylesheet.

   THE 2025 REDESIGN, now with the ONE fixed brand colour of the approved
   start-page mock-up (beispiel.png): an emerald green (#03A375).  The
   v19/v20 colour pickers (Konto -> Design, Admin -> Branding) were removed
   - the whole SaaS (mailbox, auth, account, admin, start page,
   installer) shares this single green token family.

   The light design is the DEFAULT; <html data-theme="dark"> activates
   the dark twin (same layout, dark surfaces, brighter green accent).
   Both themes are driven by the --nm-* tokens - components avoid
   hardcoded colours wherever a token exists, so the dark theme needs
   only the token block plus a few explicit twins at the end.

   New in v21 (start page, exactly like the mock-up): a white header with
   pill CTA buttons and a hamburger menu, a hero with eyebrow/headline/
   lead/check list and a smartphone mock-up on a blurred photo card,
   plus the four feature cards with green icon chips.
   ===================================================================== */

:root {
  color-scheme: light;
  --nm-accent:      #03A375;                     /* emerald - the brand green (v21) */
  --nm-accent-dark: #028C64;                     /* hover = darker on light */
  --nm-accent-soft: #EBF8F4;
  --nm-accent-ring: rgba(3, 163, 117, .12);
  /* v21: fixed brand green - the token family below is re-derived from
     nm_brand_hex() (helpers.php), contrast stays WCAG-checked. */
  --nm-accent-fg:   #FFFFFF;                     /* text on accent (contrast-checked) */
  --nm-accent-deep: #014E38;                     /* deep tone on soft tints */
  --nm-accent-border: rgba(3, 163, 117, .45);    /* softened control border */
  --nm-accent-sel:  rgba(3, 163, 117, .22);      /* text selection */
  --nm-accent-glow: rgba(3, 163, 117, .28);      /* button / FAB shadows */
  --nm-accent-link: var(--nm-accent-dark);       /* links (bright twin in dark) */
  --nm-accent-link-hover: var(--nm-accent);
  --nm-bg:          #F8F9FA;                     /* app canvas             */
  --nm-bg2:         #F5F5F7;                     /* mobile list canvas     */
  --nm-card:        #FFFFFF;
  --nm-card-solid:  #FFFFFF;                     /* menus, popovers        */
  --nm-hover:       #F9FAFB;                     /* hover surface          */
  --nm-text:        #111827;
  --nm-body-text:   #374151;
  --nm-muted:       #6B7280;
  --nm-dim:         #9CA3AF;
  --nm-line:        #F3F4F6;                     /* hairlines              */
  --nm-line2:       #E5E7EB;                     /* control borders        */
  --nm-ok:          #059669;  --nm-ok-soft:   #ECFDF5;  --nm-ok-text:   #047857;
  --nm-warn:        #D97706;  --nm-warn-soft: #FFFBEB;  --nm-warn-text: #B45309;
  --nm-err:         #DC2626;  --nm-err-soft:  #FEF2F2;  --nm-err-text:  #B91C1C;
  --nm-radius:      12px;
  --nm-shadow:      0 10px 25px -5px rgba(17, 24, 39, .05), 0 8px 10px -6px rgba(17, 24, 39, .01);
  --nm-shadow-lg:   0 14px 34px rgba(17, 24, 39, .12);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--nm-text);
  background: var(--nm-bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--nm-accent-sel); }

a { color: var(--nm-accent-link); text-decoration: none; }
a:hover { color: var(--nm-accent-link-hover); text-decoration: underline; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       font-size: .92em; background: var(--nm-accent-soft); color: var(--nm-accent-deep);
       padding: .1em .35em; border-radius: 4px; }

h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
h3 { font-size: .95rem;  margin: 1.2rem 0 .5rem; }

:focus-visible { outline: 2px solid var(--nm-accent-border); outline-offset: 2px; }

/* light, unobtrusive scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 999px; border: 2px solid var(--nm-bg); }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ---------------- shared bits ---------------- */

.nm-muted { color: var(--nm-muted); font-weight: 400; }
/* v14: the folder total next to the page heading - the mock-up's small
   rose pill with the total number of mails in the open folder */
.nm-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; padding: 1px 9px; margin-left: .45rem;
  border-radius: 999px;
  /* v21.6: the darkened button surface, not the raw accent - white on
     the brand green measured only 3.2:1 (AA needs 4.5:1 at this size) */
  background: var(--nm-accent-btn, var(--nm-accent)); color: var(--nm-accent-fg);
  font-size: .78rem; font-weight: 700; line-height: 1.5;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}
.nm-accent { color: var(--nm-accent); }
.nm-inline { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }

.nm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1rem;
  border: 1px solid var(--nm-line2); border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2;
  text-decoration: none !important; white-space: nowrap;
  background: var(--nm-card); color: var(--nm-body-text);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
}
.nm-btn:hover { background: var(--nm-hover); border-color: var(--nm-dim); color: var(--nm-text); }

.nm-btn-primary {
  background: var(--nm-accent-btn, var(--nm-accent));
  border-color: transparent; color: var(--nm-accent-fg);
  box-shadow: 0 4px 6px -1px var(--nm-accent-glow);
}
.nm-btn-primary:hover { background: var(--nm-accent-btn-h, var(--nm-accent-dark));
                        border-color: transparent; color: var(--nm-accent-fg);
                        box-shadow: 0 4px 6px -1px var(--nm-accent-glow); }

.nm-btn-ghost { background: var(--nm-card); border-color: var(--nm-line2); color: var(--nm-body-text); }
.nm-btn-ghost:hover { background: var(--nm-hover); border-color: var(--nm-dim); color: var(--nm-text); }

.nm-btn-danger-ghost { background: transparent; border-color: rgba(220, 38, 38, .45); color: var(--nm-err); }
.nm-btn-danger-ghost:hover { background: var(--nm-err-soft); border-color: rgba(220, 38, 38, .65); color: var(--nm-err-text); }

.nm-btn-block { width: 100%; }
.nm-btn-xs { padding: .25rem .7rem; font-size: .8rem; }

.nm-input {
  display: block; width: 100%;
  padding: .55rem .75rem; margin-top: .3rem;
  border: 1px solid var(--nm-line2); border-radius: 10px;
  font: inherit; color: var(--nm-text); background: var(--nm-card);
}
.nm-input::placeholder { color: var(--nm-dim); }
.nm-input:focus { outline: none; border-color: var(--nm-accent-border);
                  box-shadow: 0 0 0 3px var(--nm-accent-ring); }
.nm-input:disabled { background: var(--nm-hover); color: var(--nm-dim); border-color: var(--nm-line); }
.nm-textarea { resize: vertical; min-height: 10rem; }
.nm-file { padding: .45rem .6rem; }

/* v8: native <select> popups need a SOLID background - translucent rgba
   lets Chrome/Edge fall back to a white dropdown with washed-out text.
   Explicit option colours harden Firefox; color-scheme does the rest. */
select.nm-input { background: var(--nm-card-solid); }
select.nm-input option,
select.nm-input optgroup { background: var(--nm-card-solid); color: var(--nm-text); }
.nm-file::file-selector-button {
  border: 1px solid var(--nm-line2); border-radius: 10px;
  background: var(--nm-card); color: var(--nm-body-text);
  padding: .35rem .95rem; margin-right: .7rem;
  font: inherit; font-weight: 600; cursor: pointer;
}
.nm-file::file-selector-button:hover { background: var(--nm-hover); color: var(--nm-text); }

.nm-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .9rem; }

.nm-form .nm-btn { margin-top: .4rem; }

.nm-check { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; }
.nm-check-block { display: flex; align-items: flex-start; margin: .8rem 0; }
.nm-check-block input { margin-top: .3rem; }
.nm-check input, .nm-list input[type="checkbox"] { accent-color: var(--nm-accent); }

.nm-pill {
  display: inline-block; padding: .2rem .7rem;
  background: var(--nm-line); color: var(--nm-muted);
  border: 1px solid transparent;
  border-radius: 999px; font-size: .82rem; font-weight: 600;
}

.nm-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--nm-line); color: var(--nm-muted);
  vertical-align: middle;
}
.nm-tag-ok   { background: var(--nm-ok-soft);   color: var(--nm-ok-text); }
.nm-tag-warn { background: var(--nm-warn-soft); color: var(--nm-warn-text); }
.nm-tag-err  { background: var(--nm-err-soft);  color: var(--nm-err-text); }
/* v9: neutral "empty state" tag - e.g. "Noch nicht geöffnet" */
.nm-tag-dim  { background: var(--nm-line); color: var(--nm-dim); }
.nm-tag svg { opacity: .8; }

.nm-flash {
  padding: .7rem 1rem; border-radius: var(--nm-radius); margin-bottom: .8rem;
  border: 1px solid var(--nm-line2); background: var(--nm-card); font-weight: 500;
}
.nm-flash-success { background: var(--nm-ok-soft);  border-color: rgba(5, 150, 105, .35);  color: var(--nm-ok-text); }
.nm-flash-error   { background: var(--nm-err-soft); border-color: rgba(220, 38, 38, .35);  color: var(--nm-err-text); }

.nm-card {
  background: var(--nm-card); border: 1px solid var(--nm-line);
  border-radius: 16px; box-shadow: var(--nm-shadow);
  padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
}

.nm-empty { text-align: center; padding: 3rem 1rem; color: var(--nm-muted); }
.nm-empty-ico { font-size: 2.4rem; margin-bottom: .6rem; color: var(--nm-dim); }
.nm-empty-ico svg { width: 44px; height: 44px; }

/* ===================================================================== */
/* app shell                                                              */
/* ===================================================================== */

.nm-shell { display: flex; min-height: 100vh; }

.nm-side {
  width: 264px; flex: 0 0 auto;
  background: var(--nm-card); border-right: 1px solid var(--nm-line);
  display: flex; flex-direction: column;
  padding: 1rem .8rem;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;                                 /* ads may extend the sidebar */
}

/* v21.66 FIX (flex-squish): direct children of the fixed-height flex
   column must never shrink.  Without this, a short viewport squeezes
   the column and flex items are compressed below their content height;
   the address line (overflow:hidden for the horizontal ellipsis) lost
   its automatic min-height per spec (min-height:auto = 0 when overflow
   is not visible) and was clipped vertically under the Compose button
   on phones (e.g. iPhone 14 Pro, 393x852).  flex-shrink:0 on every
   child makes the geometry independent of the viewport height - the
   sidebar simply scrolls instead (overflow-y:auto above).  Applies to
   all present and future sidebar sections (brand, address, compose,
   navs, install, ad, legal). */
.nm-side > * { flex: 0 0 auto; }

.nm-brand {
  display: flex; align-items: center; gap: .65rem;
  font-weight: 800; font-size: 1.15rem; color: var(--nm-text);
  padding: .3rem .5rem; margin-bottom: 1rem;
}
.nm-brand:hover { text-decoration: none; }
.nm-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--nm-accent);
  box-shadow: 0 2px 6px var(--nm-accent-glow);
  color: var(--nm-accent-fg);
}
.nm-logo svg { width: 18px; height: 18px; }
.nm-brand-lg { justify-content: center; margin-bottom: 1.4rem; font-size: 1.3rem; }

.nm-compose-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--nm-accent-btn, var(--nm-accent)); color: var(--nm-accent-fg); font-weight: 700;
  height: 44px; padding: .6rem; border-radius: 12px; margin-bottom: 1.1rem;
  box-shadow: 0 4px 6px -1px var(--nm-accent-glow);
}
.nm-compose-btn:hover { background: var(--nm-accent-btn-h, var(--nm-accent-dark)); text-decoration: none; color: var(--nm-accent-fg);
                        box-shadow: 0 4px 6px -1px var(--nm-accent-glow); }

.nm-nav { display: flex; flex-direction: column; gap: .15rem; }
.nm-nav-bottom { margin-top: auto; border-top: 1px solid var(--nm-line); padding-top: .8rem; }

.nm-nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 10px;
  color: var(--nm-body-text); font-weight: 500;
}
.nm-nav-item:hover { background: var(--nm-hover); text-decoration: none; color: var(--nm-text); }
.nm-nav-item.is-active { background: var(--nm-accent-soft); color: var(--nm-accent); }
.nm-nav-ico { width: 1.3rem; display: inline-flex; align-items: center; justify-content: center; }
.nm-nav-ico svg { width: 17px; height: 17px; }

.nm-badge {
  /* the mock-up's rose pill with the unread count */
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 1px 8px;
  background: var(--nm-accent-btn, var(--nm-accent)); color: var(--nm-accent-fg); /* v21.6 */
  border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.5;
  box-shadow: 0 2px 8px var(--nm-accent-glow);
  font-variant-numeric: tabular-nums;
}
/* v6: badges are always in the DOM so the auto refresh can fill them */
.nm-badge:empty { display: none; }

.nm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.nm-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.4rem;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nm-line);
}
.nm-top-left { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.nm-top-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }

.nm-flashes { padding: 1rem 1.4rem 0; }
.nm-content { padding: 1.4rem; max-width: 1100px; width: 100%; margin: 0 auto; }

/* ---------------- page head ---------------- */

.nm-pagehead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: 1.1rem;
}
.nm-pagehead h1 { margin: 0; }
/* v21.52: relative anchor for the message actions dropdown - the menu
   inside the view's action row is positioned against this box, so it
   can never leave the viewport, no matter where the trigger wraps. */
.nm-pagehead-actions { display: flex; gap: .5rem; flex-wrap: wrap; position: relative; }

/* v21.52: compact back arrow in the message view (the old full-width
   ghost button "Zurück zu Posteingang" wasted a row on phones).  The
   accessible name is the same mail.back_to text, only smaller. */
.nm-backicon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--nm-line2); background: var(--nm-card); color: var(--nm-text);
}
.nm-backicon:hover { background: var(--nm-hover); text-decoration: none; color: var(--nm-text); }
.nm-backicon:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; }
.nm-backicon svg { width: 18px; height: 18px; }
/* the subject takes the remaining row so the actions stay right */
.nm-pagehead .nm-backicon + .nm-view-subj { flex: 1 1 auto; min-width: 0; margin-right: auto; }

/* v14: position:relative keeps the absolutely positioned .nm-sr-only
   submit INSIDE the form - without it the 1px label escapes to <body>
   and widens the document (phantom horizontal overflow on phones) */
.nm-search { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; position: relative; }
.nm-search .nm-input { width: 260px; margin-top: 0; }

/* ===================================================================== */
/* message list - classic column table (admin, contacts, unrouted)        */
/* ===================================================================== */

.nm-bulkbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .2rem; margin-bottom: .4rem;
}

.nm-list {
  width: 100%; border-collapse: collapse;
  background: var(--nm-card); border: 1px solid var(--nm-line); border-radius: 14px;
  overflow: hidden; box-shadow: var(--nm-shadow);
}
.nm-list thead th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nm-muted); padding: .55rem .7rem; border-bottom: 1px solid var(--nm-line);
  background: var(--nm-hover);
}
.nm-list tbody td { padding: .6rem .7rem; border-bottom: 1px solid var(--nm-line); vertical-align: top; }
.nm-list tbody tr:last-child td { border-bottom: 0; }
.nm-list tbody tr:hover { background: var(--nm-hover); }

.nm-row.is-unread td { background: var(--nm-accent-soft); }
.nm-row.is-unread:hover td { background: #E1F4EE; }
.nm-row.is-unread .nm-c-subj a { font-weight: 700; }

.nm-c-slim  { width: 34px; }
.nm-c-from  { width: 22%; max-width: 230px; }
.nm-c-flags { width: 90px; white-space: nowrap; }
.nm-c-date  { width: 110px; white-space: nowrap; color: var(--nm-muted); font-size: .86rem; }
.nm-c-size  { width: 80px; white-space: nowrap; color: var(--nm-muted); font-size: .86rem; }
.nm-c-actions { width: 150px; }
.nm-wrap { overflow-wrap: anywhere; max-width: 320px; }

.nm-c-subj a { color: var(--nm-text); display: block; }
.nm-c-subj a:hover { color: var(--nm-accent-dark); text-decoration: none; }
.nm-snippet { display: block; color: var(--nm-muted); font-size: .84rem; margin-top: .1rem;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.nm-att-tag { margin-left: .4rem; color: var(--nm-dim); vertical-align: middle; display: inline-flex; }
.nm-att-tag svg { width: 13px; height: 13px; }

/* v10: all-folder search result list - folder chip (inside the second
   row line since v18; the rules keep the chip an ellipsizing pill) */
.nm-folder-chip { text-decoration: none; }
.nm-folder-chip:hover { background: var(--nm-hover); color: var(--nm-text); }
.nm-folder-chip svg { flex: 0 0 auto; }
.nm-folder-chip span, .nm-folder-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-pagehead h1 svg { vertical-align: -2px; opacity: .75; }

.nm-pagination { display: flex; gap: .35rem; margin: 1rem 0; flex-wrap: wrap; }
.nm-page {
  display: inline-block; padding: .3rem .75rem; border: 1px solid var(--nm-line2);
  border-radius: 999px; background: var(--nm-card); color: var(--nm-text); font-size: .88rem;
  transition: background .15s, border-color .15s, color .15s;
}
.nm-page:hover { background: var(--nm-hover); text-decoration: none; color: var(--nm-text); border-color: var(--nm-dim); }
/* v21.6: accent-btn surface - same AA fix as the subtabs/buttons */
.nm-page.is-current { background: var(--nm-accent-btn, var(--nm-accent)); border-color: transparent; color: var(--nm-accent-fg); font-weight: 700; }
.nm-page.is-disabled { color: var(--nm-dim); pointer-events: none; }

/* ===================================================================== */
/* v18 - the redesigned subject-first list (folder + search views)        */
/* ===================================================================== */

.nm-list2 { display: block; border-radius: 16px; }
.nm-list2 thead { display: none; }        /* hidden by design; noscript block re-shows it */
.nm-list2 tbody { display: block; }
/* td reset: the classic table rules above (padding, hairline borders,
   unread tints) must not bleed into the flex rows - the row (tr) carries
   the border, the tint and the rounded corners instead. */
.nm-list2 tbody td { display: block; border-bottom: 0; background: transparent;
                     padding: 0; width: auto; max-width: none; }
.nm-list2 tbody tr {
  display: flex; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--nm-line);
}
.nm-list2 tbody tr:last-child { border-bottom: 0; }
.nm-list2 tbody tr:hover { background: var(--nm-hover); }

/* checkbox column */
.nm-list2 .nm-c-slim { flex: 0 0 auto; padding: 0 14px 0 0; }
.nm-list2 .nm-c-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; }
.nm-list2 .nm-row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
                        flex-wrap: wrap; justify-content: flex-end; padding-left: 8px; }

/* ---- the round initials avatar (coloured via --nm-av inline style) --- */
.nm-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--nm-av, var(--nm-accent)); color: var(--nm-accent-fg);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; user-select: none;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .12);
}

/* ---- v21.74: profile photos in the avatar circle + size variants ---- */
.nm-avatar-img {
  width: 100%; height: 100%; border-radius: inherit;
  object-fit: cover; display: block;
}
.nm-avatar-xs   { width: 24px; height: 24px; font-size: .6rem; vertical-align: middle; }
.nm-avatar-head { width: 28px; height: 28px; font-size: .68rem; vertical-align: middle; margin-right: 8px; }
.nm-avatar-lg   { width: 72px; height: 72px; font-size: 1.35rem; }
.nm-av-row      { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.nm-av-actions  { flex: 1 1 220px; min-width: 200px; }
.nm-av-actions .nm-form + .nm-form { margin-top: 8px; }
.nm-input-file  { padding: 6px 8px; font-size: .85rem; }

/* v21.75: profile pictures open the image viewer on click / tap /
   Enter (nm-av-zoom comes from nm_avatar when a photo is present).
   The hover ring picks up the circle's own colour; initials circles
   (no photo) stay plain and decorative. */
.nm-avatar.nm-av-zoom { cursor: zoom-in; }
.nm-avatar.nm-av-zoom:hover,
.nm-avatar.nm-av-zoom:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-av) 42%, transparent),
              0 1px 3px rgba(17, 24, 39, .12);
}
html[data-theme="dark"] .nm-avatar.nm-av-zoom:hover,
html[data-theme="dark"] .nm-avatar.nm-av-zoom:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-av) 42%, transparent),
              0 1px 3px rgba(0, 0, 0, .35);
}
.nm-avatar.nm-av-zoom:focus-visible { outline: 2px solid var(--nm-av); outline-offset: 2px; }
.nm-avatar.nm-av-zoom:hover .nm-avatar-img,
.nm-avatar.nm-av-zoom:focus-visible .nm-avatar-img { filter: brightness(1.06); }

/* ---- row text ------------------------------------------------------- */
.nm-main-txt { flex: 1 1 auto; min-width: 0; }
.nm-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nm-row-subj {
  color: var(--nm-text); font-weight: 600; font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 0 1 auto;
}
.nm-row-subj:hover { color: var(--nm-accent-dark); text-decoration: none; }
.nm-row.is-unread .nm-row-subj { font-weight: 700; }
.nm-line2 {
  margin: 2px 0 0; font-size: .82rem; color: var(--nm-muted);
  display: flex; align-items: center; gap: 6px; min-width: 0;
  white-space: nowrap; overflow: hidden;
}
.nm-row-from { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nm-sep { color: var(--nm-line2); flex: 0 0 auto; }
.nm-row-time { color: var(--nm-dim); flex: 0 0 auto; }
.nm-list2 .nm-snippet { max-width: 100%; margin-top: 2px; color: var(--nm-dim); }
.nm-list2 .nm-tagchip-sm, .nm-list2 .nm-tag { margin-top: 4px; }
.nm-list2 .nm-folder-chip { margin-left: 2px; }

/* ---- right column ---------------------------------------------------- */
.nm-unread-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--nm-accent); flex: 0 0 auto;
  box-shadow: 0 1px 3px var(--nm-accent-glow);
}
.nm-spam-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FEF3C7; color: #D97706;
  font-size: .72rem; font-weight: 700; line-height: 1.5;
  border-radius: 999px; padding: 2px 9px;
  flex: 0 0 auto; white-space: nowrap;
}
.nm-spam-badge svg { flex: 0 0 auto; }
/* desktop: badge in the right column / mobile (<880px): next to the subject */
.nm-spam-badge-m { display: none; }
.nm-spam-badge-d { display: inline-flex; }
.nm-list2 .nm-att-tag { margin-left: 0; color: var(--nm-dim); }
.nm-list2 .nm-att-tag svg { width: 16px; height: 16px; }

/* ---- row states ------------------------------------------------------ */
.nm-list2 .nm-row.is-unread { background: var(--nm-accent-soft); }
.nm-list2 .nm-row.is-unread:hover { background: #E1F4EE; }
.nm-list2 .nm-row.is-spam {
  background: var(--nm-warn-soft);
  border-bottom-color: #FEF3C7;
  box-shadow: inset 0 0 0 1px #FEF3C7;
}
.nm-list2 .nm-row.is-spam:hover { background: #FEF9C3; }

/* ===================================================================== */
/* message view                                                           */
/* ===================================================================== */

/* v21.13: wrap long subjects instead of overflowing the card row */
.nm-view-subj { font-size: 1.2rem; overflow-wrap: anywhere; }

.nm-msg-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
               border-bottom: 1px solid var(--nm-line); padding-bottom: .9rem; margin-bottom: 1rem; }
.nm-msg-meta { border-collapse: collapse; }
.nm-msg-meta th { text-align: right; padding: .18rem .8rem .18rem 0; color: var(--nm-muted);
                  font-weight: 600; font-size: .84rem; vertical-align: top; white-space: nowrap; }
/* v21.13: overflow-wrap keeps VERY long addresses (and RFC e-mail
   quirks) inside the meta table instead of pushing it out of the
   message card on narrow phones */
.nm-msg-meta td { padding: .18rem 0; overflow-wrap: anywhere; }
.nm-send-err { font-size: .84rem; margin-top: .3rem; max-width: 34rem; }

/* v21.52: the message action buttons (Als SPAM markieren / Absender
   blockieren / Löschen) moved INTO the page-head overflow menu
   (.nm-msg-more, same .nm-overflow parts as the header menu).  The old
   inline row (and its v21.23 wrap fix) is gone with it.
   v21.53 anchoring fix: the generic ".nm-overflow { position: relative }"
   further down in this file has the SAME specificity as the old
   ".nm-msg-more { position: static }" and was declared later, so it WON
   and the menu stayed anchored to the narrow trigger itself.  When the
   trigger wrapped to the left edge on phones the leftward-opening menu
   (right:0, min-width 248px) dropped out of the viewport: icons cut on
   393px devices, worst case an empty white box on 430px ones.  The
   higher-specificity selector below really detaches the menu, so it
   positions against the .nm-pagehead-actions row (position:relative
   above, width:100% on phones) and can never leave the screen - even
   without JavaScript.  app.js additionally clamps the open menu under
   the trigger for the nicest possible placement. */
.nm-overflow.nm-msg-more { position: static; }
.nm-msg-more .nm-overflow-menu { top: calc(100% + 6px); }
/* v21.54: the .eml button left the row, the dots are its LAST item now.
   On phones the actions row spans the full width (width:100% above), so
   margin-left:auto pins the dots to the RIGHT edge - one calm row on
   every width (Antworten, Weiterleiten, dots), menu opens from the
   right edge like on desktop.  On desktop the row is content-sized, so
   the rule is a no-op there. */
.nm-pagehead-actions .nm-msg-more { margin-left: auto; }

.nm-attachbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.nm-attach {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--nm-line2); border-radius: 999px; padding: .4rem .8rem;
  background: var(--nm-card); color: var(--nm-text); font-size: .86rem;
}
.nm-attach:hover { background: var(--nm-hover); text-decoration: none; color: var(--nm-text); }
.nm-attach-ico { display: inline-flex; color: var(--nm-accent); }
.nm-attach-ico svg { width: 14px; height: 14px; }
.nm-attach-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-attach-size { color: var(--nm-muted); }

/* ---- v6: image gallery in the message view ------------------------ */
.nm-gallery { margin-bottom: 1rem; }
.nm-gallery-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nm-muted); margin-bottom: .45rem;
}
.nm-gallery .nm-thumb {
  display: inline-block; vertical-align: top;
  width: 132px; height: 100px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--nm-line); background: var(--nm-hover);
  margin: 0 .6rem .6rem 0; position: relative;
}
.nm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s ease; }
.nm-thumb:hover img { transform: scale(1.05); }
.nm-thumb:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; }

/* ---- v6: live search / auto refresh loading state ------------------ */
[data-nm-listroot] { transition: opacity .15s ease; }
[data-nm-listroot].is-loading { opacity: .45; pointer-events: none; }

/* ---- v6: new-mail toast --------------------------------------------- */
.nm-newmail {
  position: fixed; top: 1rem; right: 1rem; z-index: 130;
  display: flex; align-items: center; gap: .8rem;
  max-width: min(92vw, 30rem); padding: .75rem .95rem;
  border-radius: 14px; border: 1px solid var(--nm-line2);
  background: var(--nm-card-solid);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
  animation: nm-toast-in .22s ease;
}
.nm-newmail-text { font-size: .9rem; line-height: 1.35; }
@keyframes nm-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-newmail { animation: none; }
  .nm-thumb img { transition: none; }
}

/* ---------------- v10: PWA install hint ---------------- */
/* v11: the v10 automatic install banner (#nm-install pop-up) is GONE -
   replaced by explicit "Auf Gerät installieren" buttons that ship with
   the pages (see .nm-install-wrap / .nm-install-btn below). */

.nm-msg-body { overflow-wrap: anywhere; }

/* v21.7 - HTML mails render in a sandboxed iframe[srcdoc].  The old
   ".nm-html table { display:block }" + "td { border:1px }" rules drew
   visible boxes around every invisible layout/spacer cell of real
   HTML mails (GitHub, newsletters ...) and broke their table layout.
   Inside the iframe the mail keeps its own design; the app stylesheet
   no longer reaches into it at all.  v21.69: the frame canvas is the
   classic WHITE paper in BOTH themes (like Gmail/Outlook).  The
   v21.23 dark-canvas experiment is reverted: mails that set explicit
   dark text colours but no background (common marketing/notification
   mails) rendered dark-on-dark on the dark canvas.  Mails that bring
   their own complete design still keep it (e.g. GitHub stays white on
   its own; dark-branded mails keep their dark body). */
.nm-mailframe {
  display: block;
  width: 100%;
  height: 70vh;                 /* no-JS fallback; app.js sizes precisely */
  min-height: 180px;
  border: 1px solid var(--nm-line);
  border-radius: 12px;
  background: #ffffff;
  color-scheme: light;          /* v21.69: paper canvas in both themes */
}
.nm-sig { color: var(--nm-muted); border-top: 1px dashed var(--nm-line2); margin-top: .9rem; padding-top: .5rem; }

/* v21.13: long unbreakable strings (URLs, keys) must wrap, too -
   otherwise a single long line widens the message card on phones */
.nm-plain { white-space: pre-wrap; font-family: inherit; margin: 0; overflow-wrap: anywhere; }

.nm-track-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.nm-track-list { margin: 0; padding-left: 1.1rem; }
.nm-track-list li { margin-bottom: .25rem; }
.nm-track-note { margin: .35rem 0 0; color: var(--nm-dim); font-size: .8rem; }
/* v9: status line above the columns (Geöffnet / Noch nicht geöffnet)
   and the address of an internal opener next to the timestamp */
.nm-track-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.nm-track-who {
  margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px;
  background: var(--nm-accent-soft); color: var(--nm-accent);
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}

/* ===================================================================== */
/* compose                                                                */
/* ===================================================================== */

.nm-addr-input { display: flex; align-items: stretch; }
.nm-addr-input .nm-input { margin-top: .3rem; flex: 1 1 auto; }
.nm-addr-domain {
  display: inline-flex; align-items: center; margin-top: .3rem;
  padding: 0 .8rem; border: 1px solid var(--nm-line2); border-left: 0;
  border-radius: 0 var(--nm-radius) var(--nm-radius) 0;
  background: var(--nm-hover); color: var(--nm-muted); font-weight: 600; white-space: nowrap;
}
.nm-compose-note { margin: .2rem 0 1rem; }
.nm-compose-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---- v21.17: Zeitversetzt senden (compose) --------------------------- */

.nm-sched {
  margin: .1rem 0 .9rem;
  border: 1px solid var(--nm-line2);
  border-radius: var(--nm-radius);
  background: var(--nm-hover);
}
.nm-sched summary {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .65rem .9rem;
  cursor: pointer; list-style: none; user-select: none;
}
.nm-sched summary::-webkit-details-marker { display: none; }
.nm-sched summary::before {
  content: ""; width: 0; height: 0; margin-right: .15rem;
  border-left: 5px solid var(--nm-muted); border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transform: rotate(90deg);
  transition: transform .15s ease; flex: 0 0 auto; align-self: center;
}
.nm-sched[open] summary::before { transform: rotate(-90deg); }
.nm-sched-sum { font-weight: 600; color: var(--nm-text); }
.nm-sched-fields {
  display: flex; gap: .8rem; flex-wrap: wrap;
  padding: .15rem .9rem .2rem;
}
.nm-sched-fields .nm-label { flex: 1 1 9.5rem; margin: 0; }
.nm-sched-hint { margin: .3rem .9rem .8rem; font-size: .8rem; }
/* message view: target time next to the badge + send-now row */
.nm-sched-when { margin-left: .35rem; }
.nm-sched-now { margin-top: .45rem; }

/* ---- v8: HTML compose editor ----------------------------------------- */

/* [hidden] must beat .nm-input/.nm-editor display rules */
[hidden] { display: none !important; }

/* Text / HTML segmented toggle */
.nm-format-toggle {
  display: inline-flex; margin-top: .3rem; margin-bottom: .55rem;
  padding: 3px; gap: 2px;
  background: var(--nm-hover);
  border: 1px solid var(--nm-line2); border-radius: 999px;
}
.nm-ft-btn {
  padding: .3rem 1.1rem; border: 0; border-radius: 999px;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--nm-muted);
  transition: background .15s, color .15s;
}
.nm-ft-btn:hover { color: var(--nm-text); }
.nm-ft-btn.is-active {
  background: var(--nm-card); color: var(--nm-accent);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .1);
}

/* toolbar */
.nm-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .45rem .5rem; margin-top: .3rem;
  background: var(--nm-hover);
  border: 1px solid var(--nm-line2); border-bottom: 0;
  border-radius: var(--nm-radius) var(--nm-radius) 0 0;
}
.nm-toolbar.is-inactive { opacity: .45; pointer-events: none; }
.nm-tb-btn {
  min-width: 30px; height: 30px; padding: 0 .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  font: inherit; font-size: .88rem; line-height: 1; cursor: pointer;
  background: transparent; color: var(--nm-text);
  transition: background .15s, border-color .15s;
}
.nm-tb-btn:hover { background: var(--nm-card); border-color: var(--nm-line2); }
.nm-tb-btn.is-on {
  background: var(--nm-accent-soft); border-color: var(--nm-accent-border); color: var(--nm-accent-dark);
}
.nm-tb-btn svg { display: block; }
.nm-tb-sep {
  width: 1px; height: 20px; margin: 0 .25rem;
  background: var(--nm-line2);
}
.nm-tb-block {
  width: auto; min-width: 118px; max-width: 160px;
  margin-top: 0; padding: .28rem .45rem; font-size: .82rem;
  border-radius: 8px;
}
.nm-tb-color { display: inline-flex; align-items: center; }
.nm-tb-color input[type="color"] {
  width: 30px; height: 30px; padding: 3px; cursor: pointer;
  border: 1px solid var(--nm-line2); border-radius: 8px;
  background: var(--nm-card);
}
.nm-tb-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.nm-tb-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.nm-tb-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.nm-tb-color-bg input[type="color"] { border-style: dashed; }

/* the editable surface */
.nm-editor {
  min-height: 12rem; max-height: 34rem; overflow-y: auto;
  padding: .75rem .85rem;
  background: var(--nm-card);
  border: 1px solid var(--nm-line2); border-radius: 0 0 var(--nm-radius) var(--nm-radius);
  font: inherit; color: var(--nm-text); line-height: 1.6;
  outline: none; overflow-wrap: break-word;
}
.nm-editor:focus { border-color: var(--nm-accent-border); box-shadow: 0 0 0 3px var(--nm-accent-ring); }
.nm-editor:empty::before {
  content: attr(data-ph); color: var(--nm-dim); pointer-events: none;
}
.nm-editor-srcwrap { margin-top: .3rem; }
.nm-editor-src { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: .85rem; }
.nm-editor-src-toggle { margin-top: .5rem; }
.nm-editor-hint { font-size: .82rem; margin: .45rem 0 0; }

/* editor content typography (mirrors the message view .nm-html) */
.nm-editor h2 { font-size: 1.25rem; margin: .6rem 0 .4rem; }
.nm-editor h3 { font-size: 1.08rem; margin: .5rem 0 .35rem; }
.nm-editor blockquote {
  border-left: 3px solid var(--nm-line2); margin: .6rem 0; padding: .2rem 0 .2rem .9rem;
  color: var(--nm-muted);
}
.nm-editor ul, .nm-editor ol { margin: .5rem 0; padding-left: 1.5rem; }
.nm-editor a { color: var(--nm-accent-dark); }
.nm-editor pre {
  background: var(--nm-hover); padding: .7rem; border-radius: 8px;
  overflow-x: auto; font-size: .88rem;
}
.nm-editor img { max-width: 100%; height: auto; border-radius: 6px; }

/* ===================================================================== */
/* account                                                                */
/* ===================================================================== */

.nm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }

.nm-meter { height: 10px; background: var(--nm-line); border-radius: 999px; overflow: hidden; margin: .6rem 0 .4rem; }
.nm-meter-fill { height: 100%; background: var(--nm-accent); border-radius: 999px; }
.nm-meter-hot .nm-meter-fill { background: linear-gradient(90deg, #DC2626, #F87171); }

.nm-alias-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.nm-alias-list li {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .5rem .2rem; border-bottom: 1px dashed var(--nm-line2);
}
.nm-alias-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nm-alias-form .nm-addr-input { flex: 1 1 260px; }

/* ===================================================================== */
/* admin                                                                  */
/* ===================================================================== */

.nm-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.nm-stat { background: var(--nm-card); border: 1px solid var(--nm-line); border-radius: 14px;
           box-shadow: var(--nm-shadow); padding: .9rem 1rem; }
.nm-stat-num { font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
.nm-stat-label { color: var(--nm-muted); font-size: .84rem; }
.nm-stat-warn .nm-stat-num { color: var(--nm-warn-text); }
.nm-stat-err  .nm-stat-num { color: var(--nm-err-text); }

.nm-cron-health.is-ok   { border-left: 4px solid var(--nm-ok); }
.nm-cron-health.is-warn { border-left: 4px solid var(--nm-warn); }
.nm-cron-health.is-err  { border-left: 4px solid var(--nm-err); }

.nm-checklist { margin: 0; padding-left: 1.2rem; }
.nm-checklist li { margin-bottom: .4rem; }

.nm-copybox { display: flex; gap: .5rem; align-items: stretch; margin: .4rem 0 .8rem; flex-wrap: wrap; }
.nm-copybox input {
  flex: 1 1 320px; padding: .5rem .7rem;
  border: 1px dashed var(--nm-accent-border); border-radius: var(--nm-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem;
  background: var(--nm-accent-soft); color: var(--nm-accent-deep);
}
.nm-key { font-size: .85rem; overflow-wrap: anywhere; }

.nm-log {
  background: var(--nm-hover); color: var(--nm-body-text); border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
  padding: .9rem 1rem; overflow: auto; max-height: 420px;
  font-size: .82rem; line-height: 1.5; margin: 0;
  white-space: pre-wrap;
}

/* ===================================================================== */
/* auth (login / register / 404)                                          */
/* ===================================================================== */

.nm-auth-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  /* v20: --nm-acc-rgb is emitted by nm_outer_style() when the admin set
     an exterior branding colour (fallback = the brand rose) */
  background:
    radial-gradient(900px 460px at 18% -12%, rgba(var(--nm-acc-rgb, 225, 29, 72), .07) 0%, transparent 60%),
    radial-gradient(760px 420px at 108% 112%, rgba(var(--nm-acc-rgb, 225, 29, 72), .05) 0%, transparent 55%),
    var(--nm-bg);
  padding: 2rem 1rem;
}
.nm-auth-wrap { width: 100%; max-width: 26rem; }
.nm-auth-card {
  background: var(--nm-card); border: 1px solid var(--nm-line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, .08);
  padding: 1.8rem 1.9rem;
}
.nm-auth-card h1 { text-align: center; }
.nm-lead { color: var(--nm-muted); text-align: center; margin: .2rem 0 1.3rem; }
.nm-auth-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.nm-auth-actions .nm-btn { flex: 1; }
.nm-auth-foot { text-align: center; color: var(--nm-dim); font-size: .85rem; margin-top: 1.1rem; }
.nm-swap { text-align: center; margin: 1.1rem 0 0; color: var(--nm-muted); }
.nm-auth-lang { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: -.4rem 0 .9rem; }
/* v21.65: registration captcha - the spelled-out question between label and input */
.nm-captcha-q { display: block; margin: .45rem 0 .4rem; font-size: 1.02rem; font-weight: 700; letter-spacing: .04em; }

/* ===================================================================== */
/* language switcher (dropdown, v5.1)                                      */
/* ===================================================================== */

.nm-lang-dd { position: relative; display: inline-block; }
.nm-lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .7rem; border: 1px solid var(--nm-line2); border-radius: 999px;
  background: var(--nm-card); color: var(--nm-body-text); font-size: .84rem; font-weight: 600;
  cursor: pointer; user-select: none; list-style: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.nm-lang-btn::-webkit-details-marker { display: none; }
.nm-lang-btn:hover { border-color: var(--nm-accent); background: var(--nm-hover); }
.nm-lang-dd details[open] > .nm-lang-btn {
  border-color: var(--nm-accent); box-shadow: 0 0 0 3px var(--nm-accent-ring);
}
.nm-lang-flag { font-size: 1rem; line-height: 1; }
.nm-lang-name { font-weight: 600; }
.nm-lang-caret { display: inline-block; font-size: .68rem; color: var(--nm-muted); transition: transform .15s; }
.nm-lang-dd details[open] .nm-lang-caret { transform: rotate(180deg); }
.nm-lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 90;
  min-width: 158px; padding: .3rem;
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2); border-radius: 10px;
  box-shadow: var(--nm-shadow-lg);
  display: flex; flex-direction: column;
}
.nm-lang-opt {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .55rem; border-radius: 7px;
  font-size: .87rem; color: var(--nm-body-text); text-decoration: none;
}
.nm-lang-opt:hover { background: var(--nm-hover); text-decoration: none; color: var(--nm-text); }
.nm-lang-opt.is-active { background: var(--nm-accent-soft); color: var(--nm-accent); font-weight: 700; }

/* ===================================================================== */
/* light / dark toggle button (v5.5)                                      */
/* ===================================================================== */

.nm-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--nm-line2); border-radius: 999px;
  background: var(--nm-card); color: var(--nm-body-text);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.nm-theme-btn:hover { border-color: var(--nm-accent); background: var(--nm-hover); }
.nm-theme-btn:focus-visible { outline: 2px solid var(--nm-accent-border); outline-offset: 2px; }
.nm-theme-btn svg { width: 15px; height: 15px; }

/* the icon always shows the scheme you would switch to */
html[data-theme="dark"]  .nm-theme-ico-moon { display: none; }
html[data-theme="light"] .nm-theme-ico-sun  { display: none; }

/* ===================================================================== */
/* advertising slots                                                      */
/* ===================================================================== */

.nm-ad {
  position: relative;
  border: 1px dashed var(--nm-line2); border-radius: var(--nm-radius);
  background: var(--nm-hover); margin: .6rem 0 1rem;
  text-align: center; overflow: hidden;
}
.nm-ad-label {
  position: absolute; top: 4px; left: 8px;
  font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nm-dim); font-weight: 700;
}
.nm-ad-ph p {
  margin: 0; padding: 1.6rem 1rem 1rem;
  color: var(--nm-dim); font-size: .82rem;
}
.nm-ad-live { border-style: solid; border-color: var(--nm-line); background: transparent; }
.nm-ad-live .nm-ad-label { position: static; display: block; text-align: left; padding: .25rem .5rem 0; }
.nm-ad-live > :last-child { margin-bottom: .4rem; }
.nm-ad img, .nm-ad ins, .nm-ad iframe { max-width: 100%; }

.nm-ad-mail_list       { min-height: 96px; margin: .2rem 0 .8rem; }
.nm-ad-mail_list p     { padding: 2rem 1rem 0.8rem; }
.nm-ad-mail_sidebar    { min-height: 150px; margin: 0; }
.nm-ad-mail_sidebar p  { padding: 2.4rem .6rem 1rem; font-size: .76rem; }
.nm-ad-landing_top     { min-height: 110px; }
.nm-ad-landing_bottom  { min-height: 110px; margin: 0; }

.nm-side-ad { margin-top: .8rem; }
.nm-adcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }

/* ===================================================================== */
/* responsive - v9 mobile design                                          */
/* ===================================================================== */

/* ---- v9: mobile drawer / burger / FAB (inactive on desktop) ---------- */
.nm-drawer-cb, .nm-burger, .nm-backdrop, .nm-fab { position: absolute; left: -9999px; opacity: 0; }

@media (max-width: 880px) {
  /* the sidebar turns into an off-canvas drawer with FULL labels */
  .nm-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
    width: min(82vw, 300px); height: 100dvh;
    background: var(--nm-card-solid);
    border-right: 1px solid var(--nm-line);
    box-shadow: 24px 0 60px rgba(17, 24, 39, .25);
    transform: translateX(-103%);
    transition: transform .22s ease;
    overscroll-behavior: contain;
  }
  .nm-drawer-cb:checked ~ .nm-side { transform: none; }

  /* dimmed page behind the open drawer; tapping it closes the drawer */
  .nm-backdrop {
    position: fixed; inset: 0; z-index: 110;
    display: none; opacity: 1; left: 0;
    background: rgba(17, 24, 39, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .nm-drawer-cb:checked ~ .nm-backdrop { display: block; }

  /* burger button in the topbar (visible on phones only) */
  .nm-burger {
    position: static; opacity: 1; left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 10px; cursor: pointer;
    background: var(--nm-card); border: 1px solid var(--nm-line2);
    color: var(--nm-text);
  }
  .nm-burger:hover { background: var(--nm-hover); color: var(--nm-text); }

  /* folders keep their names on phones - including the user's own */
  .nm-nav { flex-direction: column; }
  .nm-nav-item span:nth-child(2) { display: inline; }
  .nm-nav-item { padding: .55rem .7rem; }
  .nm-compose-btn { display: flex; }
  .nm-nav-bottom { margin-top: auto; }
  .nm-side-legal { padding: .7rem .9rem 0; }

  /* floating compose button, bottom right - the mock-up's big rose FAB */
  .nm-fab {
    position: fixed; right: 22px; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    z-index: 90; left: auto; opacity: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--nm-accent-btn, var(--nm-accent)); color: var(--nm-accent-fg);
    box-shadow: 0 6px 16px var(--nm-accent-glow);
  }
  .nm-fab:hover { background: var(--nm-accent-btn-h, var(--nm-accent-dark)); color: var(--nm-accent-fg); text-decoration: none;
                  box-shadow: 0 8px 20px var(--nm-accent-glow); }
  .nm-fab:active { transform: scale(.96); }

  .nm-grid-2 { grid-template-columns: 1fr; }
  .nm-track-cols { grid-template-columns: 1fr; }
  .nm-content { padding: 1rem .8rem; }
  .nm-top { padding: .55rem .8rem; }

  /* ---- v18: the redesigned list becomes single cards ---------------- */
  .nm-list2 {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
  }
  .nm-list2 tbody tr {
    background: var(--nm-card);
    border: 1px solid transparent;
    border-radius: 12px;
    margin: 0 10px 8px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
  }
  .nm-list2 tbody tr:hover { background: var(--nm-hover); }
  .nm-list2 .nm-row.is-unread { background: var(--nm-accent-soft); }
  .nm-list2 .nm-row.is-unread:hover { background: #E1F4EE; }
  .nm-list2 .nm-row.is-spam { background: var(--nm-warn-soft); border-color: #FEF3C7; box-shadow: none; }
  .nm-list2 .nm-row.is-spam:hover { background: #FEF9C3; }
  /* the spam badge moves next to the subject; the right column stacks */
  .nm-spam-badge-m { display: inline-flex; }
  .nm-spam-badge-d { display: none; }
  .nm-list2 .nm-row-side {
    flex-direction: column; align-items: flex-end; gap: 8px;
    align-self: flex-start; padding-left: 0;
  }

  /* ---- classic column tables (admin) stay compact cards -------------- */
  .nm-list:not(.nm-list2) { display: block; border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .nm-list:not(.nm-list2) thead { display: none; }
  .nm-list:not(.nm-list2) tbody { display: block; }
  .nm-list:not(.nm-list2) tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "chk from date"
      "subj subj subj";
    column-gap: 8px; row-gap: 2px;
    background: var(--nm-card);
    border: 1px solid var(--nm-line);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .nm-list:not(.nm-list2) tbody tr:hover { background: var(--nm-hover); }
  .nm-list:not(.nm-list2) .nm-row.is-unread { border-color: var(--nm-accent-border); }
  /* v10: reset the DESKTOP column widths - inside the card grid they
     would squeeze the cells.  The checkbox column keeps its
     touch-friendly fixed width via the .nm-c-slim rule below. */
  .nm-list:not(.nm-list2) tbody td { display: block; border: 0; padding: 0; width: auto; max-width: none; }
  .nm-list:not(.nm-list2) tbody td.nm-c-slim { width: 34px; }
  .nm-list:not(.nm-list2) tbody td.nm-c-from { width: auto; }
  .nm-list:not(.nm-list2) tbody td.nm-c-date { width: auto; }
  /* v10: properly hide the desktop-only columns - this MUST out-rank
     ".nm-list tbody td { display:block }" (0-1-2) now. */
  .nm-list:not(.nm-list2) tbody td.nm-c-size,
  .nm-list:not(.nm-list2) tbody td.nm-c-flags { display: none; }
  .nm-list:not(.nm-list2) td.nm-c-slim:first-child { grid-area: chk; align-self: start; padding-top: .2rem; }
  .nm-list:not(.nm-list2) td.nm-c-from { grid-area: from; min-width: 0; }
  .nm-list:not(.nm-list2) td.nm-c-from a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .nm-list:not(.nm-list2) td.nm-c-subj { grid-area: subj; min-width: 0; }
  .nm-list:not(.nm-list2) td.nm-c-date { grid-area: date; align-self: start; font-size: .78rem; white-space: nowrap; }
  .nm-list:not(.nm-list2) .nm-snippet { max-width: 100%; }

  /* bulk actions stay reachable as ONE calm, horizontally scrollable row */
  .nm-bulkbar {
    flex-wrap: nowrap; overflow-x: auto;
    padding: .45rem .1rem; margin-bottom: .6rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nm-bulkbar::-webkit-scrollbar { display: none; }
  .nm-bulk-move { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  .nm-search .nm-input { width: 100%; }
  .nm-pagehead-actions { width: 100%; }
  .nm-bulkbar .nm-btn { padding: .4rem .6rem; font-size: .85rem; }
  .nm-lang-btn .nm-lang-name { display: none; }
  .nm-ad-mail_list { min-height: 80px; }
  .nm-ad-mail_list p { padding: 1.4rem .8rem .6rem; }
  /* v5.5: the topbar now carries three controls (language, theme, logout);
     keep the own address compact and drop the storage line on phones. */
  .nm-top-left .nm-muted { display: none; }
  /* v10: the own address takes the space that is LEFT over - full text
     when it fits, clean ellipsis when it does not. */
  .nm-top-left { flex: 1 1 auto; min-width: 0; }
  .nm-top-right { flex: 0 0 auto; }
  .nm-top-left .nm-pill {
    max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* v9: room for burger + address + controls in one row */
  .nm-top-right { gap: .4rem; }
  .nm-top-right .nm-btn { padding: .4rem .7rem; font-size: .85rem; }

  /* v11: Tag-Erstellung (und Ordner-Anlegen) mobil - das Formular füllt
     die Zeile UNTER den Chips. */
  .nm-tag-add[open], .nm-inline-tool[open] { flex: 1 1 100%; }
  .nm-toolform {
    position: static; min-width: 0; width: 100%;
    flex-wrap: wrap; box-shadow: none; margin-top: .2rem;
  }
  .nm-toolform .nm-input { min-width: 0; flex: 1 1 8.5rem; }
  .nm-toolform .nm-btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-side { transition: none; }
}

/* ===================================================================== */
/* start page (.nm2) - v21: the approved mock-up (beispiel.png)           */
/* white header with pill CTAs + hamburger, hero with eyebrow/headline/   */
/* check list, smartphone mock-up on a blurred photo card, 4 icon cards   */
/* ===================================================================== */

.nm2 {
  --n2-bg:     #FFFFFF;
  --n2-card:   #FFFFFF;
  --n2-line:   #F3F4F6;
  --n2-line2:  #E5E7EB;
  --n2-txt:    #111827;
  --n2-mut:    #6B7280;
  --n2-dim:    #9CA3AF;
  --n2-acc:    #03A375;
  --n2-acc2:   #028C64;
  --n2-acc-soft: #EBF8F4;
  /* v21: fixed brand green - derived shades + the RGB triplet the
     gradients/shadows use (mirrors nm_brand_hex() in helpers.php) */
  --n2-acc-soft2: #D7F0E9;
  --n2-acc-line:  #74CCB3;
  --n2-acc-rose2: #CDEDE3;
  --n2-acc-rose4: #5BC3A5;
  --n2-acc-rgb:   3, 163, 117;
  /* v21.2: adaptive button surface - static fallback; the live values
     come from nm_outer_style() (darkened until a WHITE label reaches
     WCAG AA 4.5:1).  #028660 measures 4.6:1 with white. */
  --n2-btn-bg:   #028660;
  --n2-btn-bg-h: #027956;
  --n2-btn-fg:   #FFFFFF;

  margin: 0;
  color: var(--n2-txt);
  background:
    radial-gradient(900px 460px at 14% -8%, rgba(var(--n2-acc-rgb), .05) 0%, transparent 58%),
    radial-gradient(760px 420px at 108% 112%, rgba(var(--n2-acc-rgb), .04) 0%, transparent 55%),
    var(--nm-bg);
  -webkit-font-smoothing: antialiased;
}
.nm2 a { color: var(--n2-acc2); }
.nm2 a:hover { color: var(--n2-acc); text-decoration: none; }

.nm2-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- sticky header (mock-up: brand - Anmelden - pill CTA - burger) ---- */
.nm2-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--n2-line);
}
.nm2-head-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 68px;
}
.nm2-brand { display: inline-flex; align-items: center; gap: .6rem; }
.nm2-brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--n2-acc);
  box-shadow: 0 3px 8px rgba(var(--n2-acc-rgb), .32);
  display: inline-flex; align-items: center; justify-content: center;
  /* v21.2: white icon (light) / black icon (dark) - follows the button
     label so the mark stays >= 3:1 non-text contrast in both themes */
  color: var(--n2-btn-fg, #fff);
}
.nm2-brand-mark svg { width: 19px; height: 19px; }
.nm2-brand-name { font-size: 1.08rem; font-weight: 800; color: var(--n2-txt); letter-spacing: -.01em; }
.nm2-brand-tld  { color: var(--n2-acc); }
.nm2-head-right { display: flex; align-items: center; gap: .75rem; }

/* the plain "Anmelden" text link of the mock-up */
.nm2-head-login {
  font-size: .92rem; font-weight: 600; color: var(--n2-mut);
  padding: .4rem .15rem;
}
.nm2-head-login:hover { color: var(--n2-txt); text-decoration: none; }

/* ---- buttons: fully rounded pills (mock-up) ---- */
.nm2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1.3rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2;
  text-decoration: none !important; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, filter .15s;
}
.nm2-btn-ghost {
  background: var(--n2-card);
  border-color: var(--n2-line2);
  color: #374151;
}
.nm2-btn-ghost:hover { background: var(--nm-hover); border-color: var(--n2-dim); color: var(--n2-txt); }
.nm2-btn-primary {
  /* v21.2 FIX: the label sat hardcoded white on the raw brand green
     (3.2:1 light / 2.3:1 dark - unreadable).  The surface now comes from
     the adaptive button tokens (--n2-btn-bg, >= 4.5:1 with the label in
     BOTH themes); the dark theme flips the label to black. */
  background: var(--n2-btn-bg, var(--n2-acc));
  color: var(--n2-btn-fg, #fff);
  box-shadow: 0 4px 10px -2px rgba(var(--n2-acc-rgb), .45);
}
.nm2-btn-primary:hover { background: var(--n2-btn-bg-h, var(--n2-acc2)); box-shadow: 0 6px 14px -2px rgba(var(--n2-acc-rgb), .5); }

/* v21.2 FIX (Teil 2 - die eigentliche Wurzel des Bugs): ".nm2 a"
   (Spezifität 0-1-1) schlug die Button-Farben (0-1-0).  ALLE CTAs sind
   <a>-Elemente, ihre Beschriftung war also ACCENT-AUF-ACCENT - hell
   #028C64 auf #03A375 = 1.3:1, dunkel #4ABD9C auf #4ABD9C = 1.0:1
   (unsichtbar!).  Die Anker-Buttons bekommen ihre Label-Farbe aus den
   neuen Token hiermit explizit zurueck. */
.nm2 a.nm2-btn-primary,
.nm2 a.nm2-btn-primary:hover { color: var(--n2-btn-fg, #fff); }
.nm2 a.nm2-btn-ghost { color: #374151; }
.nm2 a.nm2-btn-ghost:hover { color: var(--n2-txt); }
html[data-theme="dark"] .nm2 a.nm2-btn-primary,
html[data-theme="dark"] .nm2 a.nm2-btn-primary:hover { color: var(--n2-btn-fg, #000); }
html[data-theme="dark"] .nm2 a.nm2-btn-ghost { color: #D1D5DB; }
html[data-theme="dark"] .nm2 a.nm2-btn-ghost:hover { color: #F4F4F6; }
.nm2-btn-head { padding: .55rem 1.2rem; font-size: .9rem; }
.nm2-btn-xl   { padding: .95rem 1.9rem; font-size: 1.04rem; }

/* ---- hamburger menu (mock-up: three lines at the right edge) ---- */
.nm2-menu { position: relative; }
.nm2-menu > summary {
  list-style: none; cursor: pointer;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--n2-line2);
  background: var(--n2-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--n2-txt);
  transition: border-color .15s, background .15s;
}
.nm2-menu > summary::-webkit-details-marker { display: none; }
.nm2-menu > summary:hover { border-color: var(--n2-dim); background: var(--nm-hover); }
.nm2-menu > summary svg { width: 20px; height: 20px; }
.nm2-menu[open] > summary { border-color: var(--n2-acc); }
.nm2-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 236px; max-width: min(320px, 86vw); padding: .6rem;
  background: var(--nm-card-solid);
  border: 1px solid var(--n2-line2);
  border-radius: 16px;
  box-shadow: var(--nm-shadow-lg);
}
.nm2-menu-panel .nm2-menu-cta {
  display: flex; width: 100%;
}
.nm2-menu-head {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--n2-dim); padding: .45rem .6rem .25rem;
}
.nm2-menu-sep { border: 0; border-top: 1px solid var(--n2-line); margin: .45rem .3rem; }
.nm2-menu-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; border-radius: 10px;
  font-size: .9rem; font-weight: 600; color: var(--n2-mut);
}
.nm2-menu-link:hover { background: var(--nm-hover); color: var(--n2-txt); text-decoration: none; }
.nm2-menu-link.is-active { background: var(--n2-acc-soft); color: var(--n2-acc); }
.nm2-menu-langs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .3rem;
}
.nm2-menu-lang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm2-menu-theme {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; padding: .5rem .6rem; border-radius: 10px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--n2-mut);
  background: transparent; border: 0; cursor: pointer;
}
.nm2-menu-theme:hover { background: var(--nm-hover); color: var(--n2-txt); }
.nm2-menu-theme .nm-theme-btn { border-color: var(--n2-line2); }
.nm2-menu-install { padding: .35rem .6rem .5rem; }
.nm2-menu-install .nm-install-wrap { margin: 0; }
.nm2-menu-install .nm-install-btn { width: 100%; justify-content: flex-start; }
.nm2-menu-install .nm-install-help { margin-top: .4rem; }

/* ---- hero (mock-up: eyebrow, two-line headline, CTA, check list) ---- */
.nm2-hero {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 3.2rem; align-items: center;
  padding: 68px 0 56px;
}
.nm2-eyebrow {
  display: block;
  margin: 0 0 1.15rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--n2-dim);
}
.nm2-hero h1 {
  font-size: clamp(2.15rem, 4vw, 3.2rem);
  line-height: 1.12; letter-spacing: -.025em;
  color: var(--n2-txt);
  margin: 0 0 1.15rem; max-width: 16ch;
}
.nm2-h1-light  { display: block; font-weight: 500; }
.nm2-h1-strong { display: block; font-weight: 800; }
.nm2-hero-lead {
  color: #4B5563; font-size: 1.06rem; line-height: 1.65;
  max-width: 32rem; margin: 0 0 1.9rem;
}
.nm2-hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.nm2-hero .nm2-btn-xl svg { width: 18px; height: 18px; }

/* the three check marks under the CTA (mock-up) */
.nm2-checks {
  display: flex; flex-wrap: wrap; gap: .55rem 1.6rem;
  margin: 1.6rem 0 0; padding: 0; list-style: none;
}
.nm2-checks li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 500; color: #374151;
}
.nm2-checks svg { width: 19px; height: 19px; color: var(--n2-acc); flex: 0 0 auto; }

/* ---- hero stage: blurred photo card + smartphone mock-up ---- */
.nm2-hero-visual { display: flex; justify-content: center; }
.nm3-stage {
  position: relative;
  width: 100%; max-width: 428px;
  border-radius: 28px;
  background: #E9EFEA url('../img/hero-side.jpg') center / cover no-repeat;
  box-shadow: 0 24px 48px -12px rgba(17, 24, 39, .2);
}
.nm3-stage::after {              /* soft green wash so the phone pops */
  content: ""; position: absolute; inset: 0; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(3, 163, 117, .1));
  pointer-events: none;
}
.nm3-stage-inner {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  padding: 54px 44px 60px;
}

/* the smartphone: dark frame, white screen, three inbox rows (mock-up) */
.nm3-phone {
  position: relative;
  width: 252px; border-radius: 38px;
  background: #101014;
  padding: 9px;
  box-shadow: 0 30px 60px -18px rgba(5, 8, 14, .55);
}
.nm3-screen { background: #fff; border-radius: 30px; overflow: hidden; }
.nm3-island {
  width: 86px; height: 20px; border-radius: 999px;
  background: #101014; margin: 8px auto 4px;
}
.nm3-phone-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 6px;
}
.nm3-phone-head h3 { margin: 0; font-size: .98rem; font-weight: 800; color: #111827; }
.nm3-phone-head svg { width: 16px; height: 16px; color: #9CA3AF; }
.nm3-phone-chips { display: flex; gap: 6px; padding: 2px 16px 10px; }
.nm3-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 26px; min-width: 26px; padding: 0 9px;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: #F3F4F6; color: #6B7280;
}
.nm3-chip.is-active { background: var(--n2-btn-bg, var(--n2-acc)); color: var(--n2-btn-fg, #fff); }
.nm3-mail {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px 11px;
  border-top: 1px solid #F3F4F6;
}
.nm3-ava {
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; color: #fff;
  flex: 0 0 auto; margin-top: 1px;
}
.nm3-ava svg { width: 16px; height: 16px; }
.nm3-mail-main { flex: 1 1 auto; min-width: 0; }
.nm3-mail-top { display: flex; align-items: baseline; gap: 8px; }
.nm3-mail-from {
  font-size: .8rem; font-weight: 700; color: #111827;
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm3-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--n2-acc); flex: 0 0 auto; }
.nm3-mail-time { margin-left: auto; font-size: .68rem; color: #9CA3AF; white-space: nowrap; }
.nm3-mail-sub {
  font-size: .74rem; color: #6B7280; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the floating envelope badge (mock-up: rotated, bottom right of the phone) */
.nm3-badge {
  position: absolute; right: 16px; bottom: 32px; z-index: 2;
  width: 76px; height: 76px; border-radius: 22px;
  background: var(--n2-btn-bg, var(--n2-acc));
  box-shadow: 0 18px 36px -6px rgba(var(--n2-acc-rgb), .55);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-9deg);
}
.nm3-badge svg { width: 40px; height: 40px; color: var(--n2-btn-fg, #fff); }
@keyframes nm3bob {
  from { transform: rotate(-9deg) translateY(0); }
  to   { transform: rotate(-9deg) translateY(-8px); }
}
.nm3-badge { animation: nm3bob 5s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .nm3-badge { animation: none; }
}

/* ---- feature cards (mock-up: icon chip, bold title, grey text) ---- */
.nm2-sec { padding: 40px 0; }
.nm2-h2 { font-size: 1.3rem; font-weight: 700; color: var(--n2-txt); margin: 0 0 1.1rem; letter-spacing: -.01em; }
.nm2-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* mock-up (beispiel.png): the feature items are FLAT - icon chip, bold
   title and grey text straight on the white page, no card chrome */
.nm2-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 18px 10px 0;
  box-shadow: none;
}
.nm2-card:hover { transform: none; box-shadow: none; }
.nm2-card-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--n2-acc-soft); color: var(--n2-acc);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 15px;
}
.nm2-card-ico svg { width: 22px; height: 22px; }
.nm2-card h3 { font-size: 1.04rem; font-weight: 700; color: var(--n2-txt); margin: 0 0 .45rem; letter-spacing: -.005em; }
.nm2-card p { margin: 0; color: var(--n2-mut); font-size: .9rem; line-height: 1.62; }

/* ---- 100 % free band ---- */
.nm2-free {
  background: linear-gradient(135deg, #EBF8F4, #F4FCF9);
  border: 1px solid rgba(var(--n2-acc-rgb), .25);
  border-radius: 16px;
  padding: 24px 26px; margin: 40px 0;
}
.nm2-free-copy { display: flex; gap: 16px; align-items: flex-start; }
.nm2-free-ico {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px;
  background: var(--n2-acc-soft); color: var(--n2-acc);
  display: inline-flex; align-items: center; justify-content: center;
}
.nm2-free h2 { margin: 0 0 .3rem; color: var(--n2-txt); font-size: 1.08rem; letter-spacing: -.005em; }
.nm2-free p { margin: 0; color: var(--n2-mut); font-size: .92rem; line-height: 1.6; max-width: 62ch; }
.nm2-free .nm-ad { margin: 18px 0 0; }

/* ---- FAQ ---- */
.nm2-sec-faq { padding-top: 8px; }
.nm2-faq { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.nm2-faq-item {
  background: var(--n2-card);
  border: 1px solid var(--n2-line);
  border-radius: 12px;
  padding: 14px 18px;
}
.nm2-faq-item summary { cursor: pointer; font-weight: 700; color: var(--n2-txt); font-size: .95rem; }
.nm2-faq-item summary::marker { color: var(--n2-acc); }
.nm2-faq-item summary:hover { color: var(--n2-acc2); }
.nm2-faq-item p { margin: .55rem 0 0; color: var(--n2-mut); font-size: .9rem; line-height: 1.6; }
/* v21.35: FAQ-Seite (/faq) - nutzt die nm2-faq-* Accordion-Klassen oben */
.nm2-faq-intro { color: var(--n2-mut); font-size: .92rem; line-height: 1.72; margin: 0 0 1.2rem; }
.nm2-faq-more-h { color: var(--n2-txt); font-size: .98rem; font-weight: 700; margin: 1.7rem 0 .7rem; }

/* v21.36: Ratgeber (/ratgeber + /ratgeber/{slug}) - Kartenliste +
   Artikel-Typografie; gleiche Tokens wie FAQ/Free-Band, dunkel-safe */
.nm2-guide-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.nm2-guide-card {
  background: var(--n2-card);
  border: 1px solid var(--n2-line);
  border-radius: 12px;
  padding: 16px 20px;
}
.nm2-guide-card .nm2-guide-card-h { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em; }
.nm2-guide-card .nm2-guide-card-h a { color: var(--n2-txt); text-decoration: none; }
.nm2-guide-card .nm2-guide-card-h a:hover { color: var(--n2-acc2); }
.nm2-guide-card p { margin: 0; color: var(--n2-mut); font-size: .9rem; line-height: 1.62; }
.nm2-guide-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem .9rem; margin-top: .75rem; }
.nm2-guide-meta span { color: var(--n2-mut); font-size: .8rem; }
.nm2-guide-more { color: var(--n2-acc2); font-size: .86rem; font-weight: 600; text-decoration: none; }
.nm2-guide-more:hover { color: var(--n2-acc); text-decoration: underline; }
.nm2-crumb {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline;
  color: var(--n2-mut); font-size: .82rem; margin: 0 0 1.1rem; max-width: 780px;
}
.nm2-crumb a { color: var(--n2-acc2); text-decoration: none; }
.nm2-crumb a:hover { color: var(--n2-acc); text-decoration: underline; }
.nm2-crumb [aria-current="page"] { overflow-wrap: anywhere; }
.nm2-guide-meta-line { color: var(--n2-mut); font-size: .84rem; margin: -.55rem 0 1.35rem; }
.nm2-guide-body { max-width: 780px; }
.nm2-guide-body h2 { color: var(--n2-txt); font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em; margin: 1.5rem 0 .45rem; }
.nm2-guide-body p { color: var(--n2-mut); font-size: .92rem; line-height: 1.72; margin: 0 0 .8rem; }
.nm2-guide-tip {
  background: var(--n2-acc-soft);
  border: 1px solid rgba(var(--n2-acc-rgb), .3);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 1.35rem 0;
}
.nm2-guide-tip strong { color: var(--n2-acc); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.nm2-guide-tip p { margin: .3rem 0 0; color: var(--n2-txt); font-size: .9rem; line-height: 1.62; }

/* ---- v21.37: Vergleichsseite (/vergleich) ---- */
.nm2-cmp-wrap { max-width: 780px; border: 1px solid var(--n2-line); border-radius: 12px; overflow: hidden; background: var(--n2-card); margin: 0 0 1.5rem; }
.nm2-cmp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nm2-cmp-table th, .nm2-cmp-table td { text-align: left; vertical-align: top; padding: .68rem .8rem; border-top: 1px solid var(--n2-line); line-height: 1.55; }
.nm2-cmp-table thead th { border-top: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--n2-mut); }
.nm2-cmp-table thead th.nm2-cmp-nm { color: var(--n2-acc); }
.nm2-cmp-table tbody th.nm2-cmp-k, .nm2-cmp-table tbody td.nm2-cmp-k { font-weight: 700; color: var(--n2-txt); width: 24%; }
.nm2-cmp-table tbody td { color: var(--n2-mut); }
.nm2-cmp-table tbody td.nm2-cmp-nm { color: var(--n2-txt); background: var(--n2-acc-soft); width: 38%; }
.nm2-cmp-list { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-direction: column; gap: .45rem; }
.nm2-cmp-list li { position: relative; padding-left: 1.4rem; color: var(--n2-mut); font-size: .92rem; line-height: 1.6; }
.nm2-cmp-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--n2-acc); font-weight: 700; }
@media (max-width: 640px) {
  .nm2-cmp-wrap { border-radius: 10px; }
  .nm2-cmp-table thead { display: none; }
  .nm2-cmp-table, .nm2-cmp-table tbody, .nm2-cmp-table tr, .nm2-cmp-table th, .nm2-cmp-table td { display: block; width: 100%; }
  .nm2-cmp-table tbody th, .nm2-cmp-table tbody td { border-top: 1px solid var(--n2-line); }
  .nm2-cmp-table tbody td::before { content: attr(data-l); display: block; margin: 0 0 .15rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n2-mut); }
}

/* ---- footer ---- */
.nm2-foot {
  border-top: 1px solid var(--n2-line);
  margin-top: 48px; padding: 26px 0 34px; text-align: center;
}
.nm2-foot-links { display: flex; justify-content: center; gap: 8px 22px; flex-wrap: wrap; font-size: .88rem; }
.nm2-foot-links a { color: var(--n2-mut); }
.nm2-foot-links a:hover { color: var(--n2-txt); }
.nm2-foot-copy { color: var(--n2-dim); font-size: .8rem; margin: .85rem 0 0; }

/* ---- shared components scoped to .nm2 ---- */
.nm2 .nm-lang-btn {
  background: var(--n2-card);
  border-color: var(--n2-line2);
  color: #374151;
}
.nm2 .nm-lang-btn:hover { border-color: var(--n2-acc); }
.nm2 .nm-lang-dd details[open] > .nm-lang-btn {
  border-color: var(--n2-acc);
  box-shadow: 0 0 0 3px var(--nm-accent-ring);
}
.nm2 .nm-lang-caret { color: var(--n2-mut); }
.nm2 .nm-lang-menu {
  background: var(--nm-card-solid);
  border-color: var(--n2-line2);
  box-shadow: var(--nm-shadow-lg);
}
.nm2 .nm-lang-opt { color: #374151; }
.nm2 .nm-lang-opt:hover { background: var(--nm-hover); }
.nm2 .nm-lang-opt.is-active { background: var(--n2-acc-soft); color: var(--n2-acc); }

.nm2 .nm-ad {
  background: var(--nm-hover);
  border-color: var(--n2-line2);
}
.nm2 .nm-ad-label { color: var(--n2-dim); }
.nm2 .nm-ad-ph p { color: var(--n2-dim); }
.nm2 .nm-ad-live { border-color: var(--n2-line); }
.nm2 .nm-ad-landing_top, .nm2 .nm-ad-landing_bottom { min-height: 72px; }
.nm2 .nm-ad-landing_top { margin: 26px 0; }
.nm2 .nm-ad-landing_top p, .nm2 .nm-ad-landing_bottom p { padding: 1.1rem 1rem .8rem; font-size: .78rem; }

/* ---- responsive (mock-up: stacked hero, 2/1 card columns) ---- */
@media (max-width: 880px) {
  .nm2-hero { grid-template-columns: 1fr; gap: 2.4rem; padding: 48px 0 40px; }
  .nm2-hero h1 { font-size: clamp(1.9rem, 6.5vw, 2.4rem); }
  .nm2-hero-visual { order: 2; }
  .nm3-stage { max-width: 420px; margin: 0 auto; }
  .nm2-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .nm2-sec { padding: 30px 0; }
  .nm2-head-in { min-height: 60px; }
}
@media (max-width: 560px) {
  .nm2-wrap { padding: 0 16px; }
  .nm2-cards { grid-template-columns: 1fr; }
  .nm2-hero { padding: 34px 0 30px; }
  .nm2-hero-lead { font-size: .97rem; }
  .nm2-checks { gap: .5rem 1.1rem; }
  .nm2-btn-xl { padding: .85rem 1.5rem; font-size: .98rem; }
  .nm2-hero .nm2-btn-xl { width: 100%; }
  /* header: the two header actions move into the hamburger menu */
  .nm2-head-login, .nm2-head-right .nm2-btn-head { display: none; }
  .nm3-stage { border-radius: 22px; }
  .nm3-stage-inner { padding: 40px 26px 46px; }
  .nm3-phone { width: 232px; }
  .nm3-badge { width: 64px; height: 64px; right: 10px; bottom: 24px; }
  .nm3-badge svg { width: 32px; height: 32px; }
  .nm2-free { padding: 18px 16px; }
  .nm2-free-copy { flex-direction: column; gap: 12px; }
  .nm2-foot-links { gap: 6px 16px; }
  .nm2-menu-panel { position: fixed; right: 12px; top: 66px; }
}

/* ===================================================================== */
/* v7 - user folders, tags, Papierkorb leeren, contact form, legal       */
/* pages, image viewer.  Kept in one block so the release diff stays     */
/* readable.                                                             */
/* ===================================================================== */

/* ---- shared helpers -------------------------------------------------- */
.nm-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- sidebar: user-defined folders ----------------------------------- */
.nm-nav-folders { margin-top: .25rem; }
.nm-nav-h {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nm-dim); padding: .35rem .85rem .25rem;
}
.nm-nav-folder .nm-nav-folder-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nm-folder-add { padding: 0 .25rem .35rem; }
.nm-folder-add > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
  color: var(--nm-muted); font-size: .88rem; padding: .42rem .6rem; border-radius: 9px;
  transition: background .15s, color .15s;
}
.nm-folder-add > summary::-webkit-details-marker { display: none; }
.nm-folder-add > summary:hover { background: var(--nm-hover); color: var(--nm-text); }
.nm-folder-add > summary .nm-nav-ico svg { width: 14px; height: 14px; }
.nm-folder-add[open] > summary { color: var(--nm-text); }
.nm-folder-add-form { display: flex; gap: .4rem; padding: .3rem .35rem .5rem .6rem; }
.nm-folder-add-form .nm-input { min-width: 0; flex: 1 1 auto; font-size: .85rem; padding: .38rem .55rem; }
.nm-folder-add-form .nm-btn { padding: .38rem .7rem; font-size: .8rem; }

/* ---- sidebar legal links ---------------------------------------------- */
.nm-side-legal {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding: .7rem .9rem 0; margin-top: .8rem; border-top: 1px solid var(--nm-line);
  font-size: .76rem;
}
.nm-side-legal a { color: var(--nm-dim); }
.nm-side-legal a:hover { color: var(--nm-muted); text-decoration: none; }

/* ---- folder page: pagehead tools (rename / delete / empty trash) ------ */
.nm-pagehead-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.nm-inline-tool { position: relative; }
.nm-inline-tool > summary { list-style: none; }
.nm-inline-tool > summary::-webkit-details-marker { display: none; }
.nm-inline-tool[open] > summary { border-color: var(--nm-accent); }
.nm-toolform {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  display: flex; gap: .45rem; align-items: center;
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2);
  border-radius: 12px; padding: .55rem .6rem; box-shadow: var(--nm-shadow-lg);
  min-width: min(320px, 86vw);
}
.nm-toolform .nm-input { min-width: 160px; }

/* ---- bulk bar: move-to select ----------------------------------------- */
.nm-bulk-move { display: inline-flex; gap: .4rem; align-items: center; position: relative; }
.nm-move-select { max-width: 190px; font-size: .85rem; padding: .32rem .5rem; }

/* ---- tag chips (list, filter bar, message view) ----------------------- */
.nm-tagbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .45rem;
  margin: .55rem 0 0; max-width: 100%;
}
.nm-tagbar-h {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nm-dim); margin-right: .1rem;
}
.nm-tagchip {
  --nm-tag-c: #03A375;
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--nm-tag-c);
  background: color-mix(in srgb, var(--nm-tag-c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--nm-tag-c) 35%, transparent);
  border-radius: 999px; padding: .12rem .6rem;
  font-size: .78rem; font-weight: 600; line-height: 1.5;
  text-decoration: none; max-width: 100%;
}
a.nm-tagchip:hover {
  background: color-mix(in srgb, var(--nm-tag-c) 22%, transparent);
  color: var(--nm-tag-c); text-decoration: none;
}
.nm-tagchip.is-on { background: color-mix(in srgb, var(--nm-tag-c) 26%, transparent); }
.nm-tagchip-sm { padding: .06rem .5rem; font-size: .72rem; vertical-align: middle; margin-left: .15rem; }
.nm-tagchip-more { color: var(--nm-muted); background: var(--nm-line); border-color: transparent; }
.nm-tagchip-x { font-size: .9rem; line-height: 1; opacity: .8; padding: 0; margin: 0 -.15rem 0 0; }
.nm-tagchip.is-fixed { padding-right: .25rem; }

/* v17.1: long tag names ELLIPSIZE inside their chip instead of bleeding
   past the right edge of the row / screen. */
.nm-ellip {
  display: block;               /* block-level: ellipsis works in block AND flex chips */
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nm-tagchip .nm-tagrm, .nm-tagchip .nm-tagchip-x, .nm-chip .nm-tagchip-x { flex: 0 0 auto; }
/* row chips stay real inline chips */
.nm-list .nm-tagchip { display: inline-flex; }
/* row chips: a long tag may not eat the whole line - cap + ellipsis */
.nm-tagchip-sm { max-width: 170px; }
/* message view chips: same idea, a bit more room */
.nm-msg-tags .nm-tagchip { max-width: min(240px, 100%); }

/* message view tag bar */
.nm-msg-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  padding: .65rem 1.1rem; border-bottom: 1px solid var(--nm-line);
}
.nm-msg-tags-h {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--nm-dim);
}
.nm-msg-tags-h svg { width: 13px; height: 13px; }
.nm-tagrm { display: inline-flex; }
.nm-tagrm .nm-tagchip-x {
  background: none; border: none; cursor: pointer; color: inherit;
  font: inherit; border-radius: 50%;
}
.nm-tagrm .nm-tagchip-x:hover { opacity: 1; transform: scale(1.15); }
.nm-tag-add { position: relative; }
.nm-tag-add > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: .9rem; padding: .1rem .6rem;
  background: var(--nm-hover); border: 1px dashed var(--nm-line2);
  color: var(--nm-muted);
}
.nm-tag-add > summary::-webkit-details-marker { display: none; }
.nm-tag-add > summary:hover { color: var(--nm-text); border-color: var(--nm-accent); }
.nm-tag-add[open] > summary { display: none; }
.nm-tag-add .nm-toolform { left: auto; right: 0; }

/* ---- contact form (home layout) ---------------------------------------- */
.nm2-contact { display: flex; justify-content: center; }
.nm2-contact-card {
  background: var(--n2-card);
  border: 1px solid var(--n2-line);
  border-radius: 16px;
  box-shadow: var(--nm-shadow);
  padding: 30px 30px 26px;
  width: 100%; max-width: 640px;
}
.nm2-contact-lead { color: var(--n2-mut); font-size: .93rem; line-height: 1.6; margin: -.35rem 0 1.2rem; }
.nm2-form { display: flex; flex-direction: column; gap: 1rem; }
.nm2-form-row { display: flex; flex-direction: column; gap: .35rem; }
.nm2-label { font-size: .8rem; font-weight: 700; color: var(--n2-txt); }
.nm2-form .nm-input { background: var(--n2-card); border-color: var(--n2-line2); color: var(--n2-txt); }
.nm2-form .nm-input::placeholder { color: var(--n2-dim); }
.nm2-textarea { resize: vertical; min-height: 9rem; font-family: inherit; line-height: 1.55; }
.nm2-form-actions { display: flex; justify-content: flex-end; }
.nm2-contact-note { color: var(--n2-dim); font-size: .78rem; margin: .2rem 0 0; line-height: 1.5; }
.nm-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* ---- legal pages (Impressum / Datenschutz) ----------------------------- */
.nm2-legal { max-width: 780px; margin: 0 auto; }
.nm2-legal-note {
  background: var(--n2-acc-soft);
  border: 1px solid rgba(var(--n2-acc-rgb), .3);
  color: var(--n2-acc2);
  border-radius: 12px; padding: .7rem 1rem; font-size: .85rem; line-height: 1.55;
  margin: 0 0 1.4rem;
}
.nm2-legal h2 {
  color: var(--n2-txt); font-size: 1.02rem; font-weight: 700;
  margin: 1.8rem 0 .55rem; letter-spacing: -.005em;
}
.nm2-legal h3 { color: var(--n2-txt); font-size: .93rem; font-weight: 700; margin: 1.25rem 0 .4rem; }
.nm2-legal p { color: var(--n2-mut); font-size: .92rem; line-height: 1.72; margin: 0 0 .8rem; }
.nm2-legal a { color: var(--n2-acc2); text-decoration: underline; text-decoration-color: rgba(var(--n2-acc-rgb), .35); text-underline-offset: 2px; }
.nm2-legal a:hover { color: var(--n2-acc); }
.nm2-legal-addr {
  font-style: normal; color: var(--n2-txt); font-size: .95rem; line-height: 1.75;
  background: var(--nm-hover); border: 1px solid var(--n2-line);
  border-radius: 12px; padding: .85rem 1.1rem; margin: 0 0 1rem;
  display: inline-block;
}
.nm2-legal-back { display: flex; gap: .6rem; margin-top: 2.2rem; }

/* ---- home layout: flash messages ---------------------------------------- */
.nm2-flashes { max-width: 720px; margin: 18px auto 0; padding: 0 18px; }

/* ---- auth footer links --------------------------------------------------- */
.nm-auth-foot a { color: var(--nm-muted); }
.nm-auth-foot a:hover { color: var(--nm-text); }
.nm-auth-foot span { color: var(--nm-dim); margin: 0 .15rem; }

/* ---- admin: contact requests table -------------------------------------- */
.nm-list tr.is-done td { opacity: .55; }
.nm-contact-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 340px; white-space: pre-wrap;
}
.nm-c-msg { max-width: 360px; }

/* ===================================================================== */
/* v7 - IMAGE VIEWER (lightbox)                                          */
/* ===================================================================== */
body.nm-lb-open { overflow: hidden; }
.nm-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.nm-lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 14, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nm-lb-stage {
  position: relative; margin: 0; max-width: calc(100vw - 96px);
  max-height: calc(100vh - 140px); z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.nm-lb-img {
  max-width: 100%; max-height: calc(100vh - 140px);
  object-fit: contain; border-radius: 6px;
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
  transform-origin: center center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transition: transform .18s ease;
  touch-action: none;
}
.nm-lb-img[data-pan] { cursor: grab; transition: none; }
.nm-lb-img[data-pan]:active { cursor: grabbing; }
.nm-lb-bar {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  bottom: 22px; display: flex; align-items: center; gap: .9rem;
  background: rgba(24, 24, 28, .95); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: .45rem 1rem;
  max-width: calc(100vw - 40px);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}
.nm-lb-cap {
  color: #f4f5f7; font-size: .86rem; max-width: 44vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nm-lb-tools { display: inline-flex; align-items: center; gap: .3rem; }
.nm-lb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 .5rem;
  border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: #e7e9ee;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.nm-lb-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.nm-lb-btn svg { pointer-events: none; }
.nm-lb-zoom { color: #9ca3af; font-size: .78rem; min-width: 3.2em; text-align: center; }
.nm-lb-prev, .nm-lb-next {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(24, 24, 28, .82); border: 1px solid rgba(255, 255, 255, .16);
  color: #f4f5f7; font-size: 1.9rem; font-weight: 400;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nm-lb-prev { left: 18px; }
.nm-lb-next { right: 18px; }
.nm-lb-prev:hover, .nm-lb-next:hover { background: var(--nm-accent-border); color: #fff; }
@media (max-width: 640px) {
  .nm-lb-stage { max-width: calc(100vw - 24px); }
  .nm-lb-img { max-height: calc(100vh - 170px); border-radius: 4px; }
  .nm-lb-prev { left: 8px; width: 42px; height: 42px; }
  .nm-lb-next { right: 8px; width: 42px; height: 42px; }
  .nm-lb-cap { max-width: 34vw; font-size: .78rem; }
  .nm-lb-bar { bottom: 12px; padding: .35rem .7rem; gap: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-lb-img { transition: none; }
}

/* v21.75: avatar zoom - profile photos are small squares (256 px),
   so their viewer starts at a comfortable portrait size instead of
   the natural dimensions; the + / - buttons still scale further. */
.nm-lightbox.nm-lb-av .nm-lb-img {
  width: min(64vmin, 420px); height: min(64vmin, 420px);
  object-fit: cover; border-radius: 14px;
}

/* ===================================================================== */
/* v11 - install button, devices card, push status                        */
/* ===================================================================== */

/* ---- "Auf Gerät installieren" button + manual help -------------------- */
.nm-install-wrap { max-width: 100%; }
.nm-install-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.05rem;
  border-radius: 10px; border: 1px solid var(--nm-line2);
  background: var(--nm-card); color: var(--nm-text);
  font: inherit; font-weight: 600; font-size: .9rem;
  cursor: pointer; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s;
}
.nm-install-btn:hover { background: var(--nm-hover); border-color: var(--nm-accent); color: var(--nm-text); }
.nm-install-btn .nm-install-ico { display: inline-flex; }
.nm-install-btn.is-installed {
  border-color: rgba(5, 150, 105, .5); color: var(--nm-ok);
  background: var(--nm-ok-soft); cursor: default;
}
.nm-install-btn.is-installed:hover { background: var(--nm-ok-soft); border-color: rgba(5, 150, 105, .5); }

.nm-install-wrap.is-compact .nm-install-btn {
  width: 100%; justify-content: flex-start;
  padding: .42rem .7rem; font-size: .84rem;
}

/* manual steps (works WITHOUT JavaScript as a plain <details>) */
.nm-install-help { margin-top: .5rem; font-size: .82rem; }
.nm-install-help > summary {
  cursor: pointer; color: var(--nm-muted); user-select: none;
  list-style: none;
}
.nm-install-help > summary::-webkit-details-marker { display: none; }
.nm-install-help > summary::before { content: "Info: "; color: var(--nm-dim); }
.nm-install-help > summary:hover { color: var(--nm-text); }
.nm-install-steps { margin: .45rem 0 0; padding: .55rem .7rem; }
.nm-install-step { margin: .3rem 0; color: var(--nm-muted); line-height: 1.45; }
.nm-install-step strong { color: var(--nm-text); font-weight: 600; }

/* placement: start page hero (under the CTA pills) */
.nm2-hero-install { margin-top: .9rem; }
/* placement: login page (under the card) */
.nm-auth-install { margin: 1rem auto 0; max-width: 420px; }
/* placement: app sidebar */
.nm-side-install { padding: .6rem .95rem .1rem; }

/* ---- devices card (account settings) ----------------------------------- */
.nm-device {
  border: 1px solid var(--nm-line); border-radius: 12px;
  padding: .65rem .8rem .75rem; margin: .65rem 0;
  background: var(--nm-card);
}
.nm-device.is-this { border-color: var(--nm-accent-border); }
.nm-device-head {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-bottom: .45rem;
}
.nm-device-label { font-weight: 600; font-size: .92rem; }
.nm-device-form { margin: 0; }
.nm-device-form .nm-textarea { min-height: 64px; }

/* ---- push status line in the notify card ------------------------------- */
/* v20.2: the push/notification card can show several action buttons
   ("Auf diesem Gerät aktivieren", "Tab-Benachrichtigung deaktivieren",
   the push-off form).  They used to stick together with no gap at all -
   every action element in the card now gets clear vertical room. */
.nm-push-off-form { margin: .75rem 0 .2rem; }
[data-nm-notify-card] > .nm-btn { margin-top: .6rem; }
[data-nm-notify-card] > .nm-btn + .nm-btn { margin-top: .6rem; }

/* ---- compose: signature hint ------------------------------------------- */
.nm-sig-hint {
  margin: .1rem 0 .45rem; font-size: .8rem;
  padding-left: .55rem; border-left: 2px solid var(--nm-line2);
}

/* ===================================================================== */
/* v13 - link dialog (compose editor) + vacation test/log (account)      */
/* ===================================================================== */

/* ---- link dialog ------------------------------------------------------ */
.nm-linkdlg {
  position: fixed; inset: 0; z-index: 280;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 24, 39, .5);
  padding: 1rem;
}
.nm-linkdlg[hidden] { display: none; }
.nm-linkdlg-card {
  width: 100%; max-width: 430px;
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2);
  border-radius: var(--nm-radius); box-shadow: var(--nm-shadow-lg);
  padding: 1.1rem 1.2rem 1.2rem;
}
.nm-linkdlg-card h3 { margin: 0 0 .8rem; font-size: 1.02rem; }
.nm-linkdlg .nm-label { display: block; margin: .7rem 0 0; }
.nm-linkdlg .nm-input {
  font-size: 16px;              /* keeps iOS Safari from zooming on focus */
  margin-top: .3rem;
}
.nm-linkdlg-preview {
  margin: .8rem 0 0; font-size: .85rem; color: var(--nm-muted);
  overflow-wrap: anywhere;
}
.nm-linkdlg-err {
  margin: .6rem 0 0; font-size: .85rem; color: var(--nm-err-text);
  background: var(--nm-err-soft); border: 1px solid rgba(220, 38, 38, .35);
  border-radius: var(--nm-radius); padding: .5rem .7rem;
  overflow-wrap: anywhere;
}
.nm-linkdlg-err[hidden] { display: none; }
.nm-linkdlg-actions {
  display: flex; align-items: center; gap: .5rem; margin-top: 1rem;
  flex-wrap: wrap;
}
.nm-linkdlg-spacer { flex: 1 1 auto; }

/* ---- vacation note: test answer + reply log --------------------------- */
.nm-vac-test { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--nm-line2); }
.nm-vac-log { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--nm-line2); }
.nm-vac-log h3 { margin: 0 0 .5rem; font-size: .95rem; }
.nm-vac-log ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.nm-vac-log li {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .32rem 0; border-bottom: 1px solid var(--nm-line);
  font-size: .9rem;
}
.nm-vac-log li:last-child { border-bottom: none; }
.nm-vac-log-addr { overflow-wrap: anywhere; }
.nm-vac-log-date { color: var(--nm-muted); white-space: nowrap; font-size: .85rem; }
.nm-vac-log .nm-muted { margin: .2rem 0 0; font-size: .82rem; }

@media (max-width: 560px) {
  .nm-linkdlg { padding: .6rem; }
  .nm-linkdlg-card { padding: .95rem .95rem 1.05rem; }
}

/* ---- v14: Spam-Schutz (blocked senders) on the account page --------- */
.nm-spam-list { margin-top: 1rem; }
.nm-spam-list h3 { margin: 0 0 .5rem; font-size: .95rem; }
.nm-spam-list ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.nm-spam-list li {
  display: flex; align-items: center; gap: .8rem;
  padding: .42rem 0; border-bottom: 1px solid var(--nm-line);
  font-size: .92rem;
}
.nm-spam-list li:last-child { border-bottom: none; }
.nm-spam-addr {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600;
}
.nm-spam-date { color: var(--nm-muted); white-space: nowrap; font-size: .85rem; }
.nm-spam-list .nm-btn { padding: .35rem .8rem; font-size: .85rem; }
.nm-spam-add {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px dashed var(--nm-line2);
}
.nm-spam-add .nm-label { margin-bottom: .6rem; }

@media (max-width: 560px) {
  /* long addresses wrap, date + button stay side by side */
  .nm-spam-list li { flex-wrap: wrap; row-gap: .3rem; }
  .nm-spam-addr { flex-basis: 100%; }
  .nm-spam-date { margin-left: auto; }
}

/* ---- v15: Hetzner Object Storage (admin settings) ------------------- */
.nm-s3-intro { line-height: 1.55; }
.nm-s3-status {
  margin: 1rem 0 .4rem; padding: .8rem 1rem;
  border: 1px solid var(--nm-line2); border-radius: 12px;
  background: var(--nm-hover);
  font-size: .92rem; line-height: 1.6;
}
.nm-s3-status code { font-size: .86rem; overflow-wrap: anywhere; }
.nm-s3-ok { color: var(--nm-ok); }
.nm-s3-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; }

/* ===================================================================== */
/* v16 - MOBILE-FIRST UI OVERHAUL                                        */
/* ===================================================================== */

:root {
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --nm-touch: 44px;      /* primary touch target height */
  --nm-topbar-h: 56px;   /* mobile topbar height */
}

/* ---- topbar: page-context title (phones) + overflow button ----------- */

.nm-top-title {
  display: none;                          /* desktop: address pill instead */
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1.05rem; font-weight: 600; color: var(--nm-text);
}
.nm-top-count {
  /* the mock-up's rose pill right next to the folder name */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; margin-left: 8px; padding: 1px 8px;
  /* v21.6: accent-btn surface + token label - the old hard-coded white
     measured 3.2:1 (light) and 2.3:1 (dark, white on mint) */
  border-radius: 999px; background: var(--nm-accent-btn, var(--nm-accent)); color: var(--nm-accent-fg);
  font-size: .78rem; font-weight: 700; line-height: 1.5; text-align: center;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.nm-top-count.is-zero { background: var(--nm-line); color: var(--nm-muted); }

/* the ⋮ overflow menu (all screen sizes, right-aligned dropdown) */
.nm-overflow { position: relative; }
.nm-overflow-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--nm-touch); height: var(--nm-touch);
  border-radius: 12px; cursor: pointer;
  background: var(--nm-card); border: 1px solid var(--nm-line2);
  color: var(--nm-text); list-style: none;
}
.nm-overflow-btn::-webkit-details-marker { display: none; }
.nm-overflow-btn:hover { background: var(--nm-hover); }
.nm-overflow[open] .nm-overflow-btn { background: var(--nm-accent-soft); border-color: var(--nm-accent-border); color: var(--nm-accent); }
.nm-overflow-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 248px; max-width: calc(100vw - 24px);
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2);
  border-radius: 14px; box-shadow: var(--nm-shadow-lg);
  padding: 6px; margin: 0;
}
.nm-overflow-head {
  padding: 10px 14px 8px; color: var(--nm-muted); font-size: .84rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nm-overflow-sep { height: 1px; margin: 6px 8px; background: var(--nm-line); }
.nm-overflow-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 46px; padding: 8px 14px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--nm-text); font: inherit; font-size: .93rem; text-align: left;
  text-decoration: none; cursor: pointer;
}
.nm-overflow-item:hover { background: var(--nm-hover); text-decoration: none; color: var(--nm-text); }
.nm-overflow-danger { color: var(--nm-err); }
.nm-overflow-danger:hover { background: var(--nm-err-soft); color: var(--nm-err-text); }
.nm-overflow-form { margin: 0; padding: 0; }
.nm-ov-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--nm-muted); }
.nm-overflow-item:hover .nm-ov-ico { color: inherit; }
.nm-overflow-sub > summary { list-style: none; }
.nm-overflow-sub > summary::-webkit-details-marker { display: none; }
.nm-overflow-inlineform { display: flex; gap: 8px; padding: 8px 10px 10px; flex-wrap: wrap; }
.nm-overflow-inlineform .nm-input { flex: 1 1 130px; min-width: 0; }
.nm-overflow-lang { padding: 8px 14px 10px; }
.nm-overflow-lang-h { display: block; color: var(--nm-muted); font-size: .8rem; margin-bottom: 8px; }
.nm-overflow-lang-row { display: flex; gap: 6px; flex-wrap: wrap; }
.nm-overflow-lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 34px; padding: 0 10px;
  border-radius: 9px; border: 1px solid var(--nm-line2);
  background: transparent; color: var(--nm-muted);
  font-size: .82rem; font-weight: 600; text-decoration: none; letter-spacing: .03em;
}
.nm-overflow-lang-opt:hover { background: var(--nm-hover); color: var(--nm-text); text-decoration: none; }
.nm-overflow-lang-opt.is-active { background: var(--nm-accent-soft); border-color: var(--nm-accent-border); color: var(--nm-accent); }

/* the overflow theme button shows the label of the scheme it switches to */
html[data-theme="dark"] .nm-theme-lb-dark { display: none; }
html[data-theme="light"] .nm-theme-lb-light { display: none; }

/* ---- drawer: the own address line ------------------------------------- */

.nm-side-address {
  padding: 0 .95rem .7rem;
  color: var(--nm-muted); font-size: .84rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- search: one calm input with icon + gear ------------------------- */

.nm-search2 { gap: 0; margin-bottom: var(--sp-2); }
.nm-search2 .nm-input {
  width: 100%; height: 48px; margin-top: 0;
  padding-left: 46px; padding-right: 52px;
  border-radius: 12px;
  background: var(--nm-hover); border-color: transparent;
}
.nm-search2 .nm-input:focus { background: var(--nm-card); border-color: var(--nm-accent-border);
                              box-shadow: 0 0 0 4px var(--nm-accent-ring); }
.nm-search-ico {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--nm-dim); pointer-events: none;
}
.nm-search-adv { position: static; }
.nm-search-adv-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  color: var(--nm-muted); list-style: none;
}
.nm-search-adv-btn::-webkit-details-marker { display: none; }
.nm-search-adv-btn:hover { color: var(--nm-text); background: var(--nm-hover); }
.nm-search-adv[open] .nm-search-adv-btn { color: var(--nm-accent); background: var(--nm-accent-soft); }
.nm-search-adv-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 55;
  min-width: 264px; max-width: calc(100vw - 24px);
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2);
  border-radius: 12px; box-shadow: var(--nm-shadow-lg);
  padding: var(--sp-2);
}
.nm-search-adv-panel .nm-btn { width: 100%; justify-content: flex-start; }
.nm-search-adv-hint { margin: 10px 2px 2px; color: var(--nm-muted); font-size: .82rem; line-height: 1.5; }

/* ---- v16 filter chips -------------------------------------------------- */

/* v17: the TAGS live in a dropdown now, only a handful of short chips
   remain - the row WRAPS instead of scrolling. */
.nm-chipbar {
  position: relative;              /* v17.1: positioning context of the tag dropdown menu */
  width: 100%; max-width: 100%;
  overflow: visible;
  margin-bottom: 2px;
}
.nm-chipbar::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 28px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--nm-bg));
  opacity: 0; transition: opacity .18s ease;
}
.nm-chipbar.nm-chips-more:not(.nm-chips-end)::after { opacity: 1; }
.nm-chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px var(--sp-1);
  width: 100%;
  overflow: visible;
  padding: 2px 0 var(--sp-2);
}
.nm-chips::-webkit-scrollbar { display: none; }
.nm-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px;    /* v16.1: 44 px touch target */
  max-width: min(230px, 100%);      /* v17: long tag names ellipsize */
  overflow: hidden;
  border-radius: 999px; border: 1px solid var(--nm-line2);
  background: var(--nm-card); color: var(--nm-muted);
  font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.nm-chip:hover { color: var(--nm-text); text-decoration: none; border-color: var(--nm-dim); background: var(--nm-hover); }
/* the mock-up's active pill: solid rose with the soft red shadow */
.nm-chip.is-active {
  background: var(--nm-accent-btn, var(--nm-accent)); border-color: var(--nm-accent-btn, var(--nm-accent)); /* v21.6 */
  color: var(--nm-accent-fg); font-weight: 600;
  box-shadow: 0 2px 8px var(--nm-accent-glow);
}
.nm-chip-tag::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--nm-tag-c, var(--nm-accent)); flex: 0 0 auto;
}
.nm-chip-tag.is-active {
  background: var(--nm-card-solid);
  border-color: var(--nm-tag-c, var(--nm-accent));
  box-shadow: inset 0 0 0 1px var(--nm-tag-c, var(--nm-accent));
  color: var(--nm-text);
}
.nm-chip.is-active.nm-chip-tag::before { background: var(--nm-accent-fg); }
.nm-tagchip-x { margin-left: 2px; font-weight: 700; }

/* ---- v17: the tags dropdown -------------------------------------------- */

.nm-tagdd { display: inline-flex; max-width: 100%; }
.nm-tagdd > summary { cursor: pointer; list-style: none; user-select: none; }
.nm-tagdd > summary::-webkit-details-marker { display: none; }
.nm-chip-tagdd svg { flex: 0 0 auto; }
.nm-chip-tagdd > span { overflow: hidden; text-overflow: ellipsis; }
.nm-chip-tagdd .nm-chip-chev { transition: transform .16s ease; }
.nm-tagdd[open] > summary { color: var(--nm-text); border-color: var(--nm-dim); }
.nm-tagdd[open] .nm-chip-chev { transform: rotate(180deg); }
.nm-tagdd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: min(300px, 100%);
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2);
  border-radius: 12px; box-shadow: var(--nm-shadow-lg);
  padding: 6px;
  max-height: min(56vh, 388px); overflow-y: auto; overscroll-behavior: contain;
}
.nm-tagdd-row { display: flex; align-items: stretch; gap: 2px; }
.nm-tagdd-row + .nm-tagdd-row { margin-top: 2px; }
.nm-tagdd-item {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px 0 12px; border-radius: 10px;
  color: var(--nm-text); text-decoration: none;
}
a.nm-tagdd-item:hover { background: var(--nm-hover); text-decoration: none; }
.nm-tagdd-row.is-active .nm-tagdd-item {
  background: var(--nm-accent-soft); color: var(--nm-accent); font-weight: 600;
}
.nm-tagdd-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--nm-tag-c, var(--nm-accent));
}
.nm-tagdd-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .93rem;
}
.nm-tagdd-del { flex: 0 0 auto; display: inline-flex; }
.nm-tagdd-del-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; align-self: stretch; min-height: 44px;
  border-radius: 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--nm-muted);
}
.nm-tagdd-del-btn:hover { background: var(--nm-err-soft); color: var(--nm-err); }

/* ---- v17: "Alle markieren" row above the list --------------------------- */

.nm-listtools {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
}
.nm-selectall {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--nm-line2);
  background: var(--nm-card); color: var(--nm-text);
  font-size: .93rem; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.nm-selectall:hover { background: var(--nm-hover); }
.nm-selectall[aria-pressed="true"] {
  background: var(--nm-accent-soft); border-color: var(--nm-accent-border);
  color: var(--nm-accent); font-weight: 600;
}
.nm-listtools-count { margin-left: auto; }

/* ---- v17: swipe left -> trash (touch devices) ---------------------------- */

/* Horizontal gestures on list rows belong to the swipe handler, the
   browser keeps the vertical scrolling. */
.nm-list tbody tr { touch-action: pan-y; }
.nm-list2 tbody tr { touch-action: pan-y; }
/* The row only animates on coarse pointers, and never while the finger
   drags it (.nm-swiping switches the transition OFF so the row follows
   the finger 1:1 - removing the class snaps it back smoothly). */
@media (pointer: coarse) {
  .nm-list tbody tr:not(.nm-swiping) { transition: transform .18s ease, opacity .18s ease; }
  .nm-list2 tbody tr:not(.nm-swiping) { transition: transform .18s ease, opacity .18s ease; }
  /* v21.13: iOS Safari auto-zooms (page zoom) whenever a field with
     font-size < 16px receives focus - every input stays at 16px on
     touch devices, so typing on the phone never zooms the page */
  .nm-input, select.nm-input, textarea.nm-input,
  .nm-editor, .nm-editor-src { font-size: 16px; }
}
.nm-swipe-out { opacity: 0 !important; transform: translateX(-110%) !important; }
.nm-swipe-reveal {
  position: absolute; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding-right: 20px; border-radius: 12px;
  background: var(--nm-err-soft);
  border: 1px solid rgba(220, 38, 38, .35);
  color: var(--nm-err);
}
.nm-swipe-lb { font-size: .85rem; font-weight: 600; white-space: nowrap; }

/* ---- v17: admin impersonation banner ------------------------------------ */

.nm-impersonate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 var(--sp-2); padding: 10px 14px;
  background: var(--nm-accent-soft);
  border: 1px solid var(--nm-accent-border);
  border-radius: 12px;
  color: var(--nm-text); font-size: .88rem;
}
.nm-impersonate-ico { display: inline-flex; color: var(--nm-accent); }
.nm-impersonate form { margin-left: auto; }
.nm-impersonate .nm-btn { height: 38px; padding: 0 14px; }

/* ---- v17: admin users - "Anmelden" button next to the address ----------- */

.nm-loginas-f { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.nm-loginas {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border-radius: 999px; border: 1px solid var(--nm-line2);
  background: var(--nm-card); color: var(--nm-muted);
  font-size: .8rem; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.nm-loginas:hover { color: var(--nm-accent); border-color: var(--nm-accent); background: var(--nm-accent-soft); }


/* ---- v16 contextual selection toolbar ---------------------------------- */

.nm-selbar {
  display: none;                          /* v16: only while mails are checked */
  align-items: center; gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.nm-listform.has-selection .nm-selbar,
.nm-listform:has(input[name="ids[]"]:checked) .nm-selbar { display: flex; }

.nm-selbar-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 0; color: var(--nm-muted);
}
.nm-selbar-clear:hover { background: var(--nm-hover); color: var(--nm-text); }
.nm-selbar-count { font-weight: 600; font-size: .93rem; color: var(--nm-text); white-space: nowrap; }
.nm-selbar-count:empty { display: none; }
.nm-selbar-spacer { flex: 1 1 auto; }
.nm-selbar-actions { display: none; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.nm-selbar-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--nm-touch); height: var(--nm-touch); flex: 0 0 auto;
  border-radius: 12px; cursor: pointer;
  background: var(--nm-err-soft); border: 1px solid rgba(220, 38, 38, .35);
  color: var(--nm-err);
}
.nm-selbar-del:hover { background: rgba(220, 38, 38, .16); }
.nm-selbar-more { position: relative; }
.nm-selbar-more-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--nm-touch); height: var(--nm-touch); flex: 0 0 auto;
  border-radius: 12px; cursor: pointer;
  background: var(--nm-card); border: 1px solid var(--nm-line2);
  color: var(--nm-text); list-style: none;
}
.nm-selbar-more-btn::-webkit-details-marker { display: none; }
.nm-selbar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 230px; max-width: calc(100vw - 24px);
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2);
  border-radius: 12px; box-shadow: var(--nm-shadow-lg);
  padding: 6px;
}
.nm-selbar-move { position: relative; }
.nm-selbar-move-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--nm-touch); padding: 0 14px; flex: 0 0 auto;
  border-radius: 12px; cursor: pointer;
  background: var(--nm-card); border: 1px solid var(--nm-line2);
  color: var(--nm-text); font-size: .93rem; list-style: none;
}
.nm-selbar-move-btn::-webkit-details-marker { display: none; }
.nm-selbar-move-btn:hover { background: var(--nm-hover); }
.nm-selbar-move-lb { display: none; }       /* icon-only on phones */
.nm-selbar-move-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 248px; max-width: calc(100vw - 24px);
  background: var(--nm-card-solid); border: 1px solid var(--nm-line2);
  border-radius: 12px; box-shadow: var(--nm-shadow-lg);
  padding: var(--sp-2); display: flex; gap: var(--sp-1); flex-wrap: wrap;
}
.nm-selbar-move-menu .nm-input { min-width: 0; flex: 1 1 140px; margin-top: 0; }

/* ---- v16 empty state ---------------------------------------------------- */

.nm-empty2 { text-align: center; padding: var(--sp-5) var(--sp-3) var(--sp-4); }
/* v18: the mock-up's empty state - a soft grey circle behind the icon */
.nm-empty2 .nm-empty-ico {
  margin-bottom: var(--sp-3);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--nm-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.nm-empty2 .nm-empty-ico svg { width: 28px; height: 28px; color: var(--nm-dim); opacity: .9; }
.nm-empty2 .nm-empty-title { margin: 0 0 6px; font-size: 1.12rem; font-weight: 600; color: var(--nm-text); }
.nm-empty2 .nm-empty-sub { margin: 0 0 var(--sp-4); color: var(--nm-muted); font-size: .95rem; }
.nm-empty2 .nm-empty-cta { display: inline-flex; margin: 0 auto; }
.nm-count-quiet {
  display: inline-block; min-width: 22px; padding: 1px 9px; margin-left: 6px;
  border-radius: 999px; background: var(--nm-line);
  color: var(--nm-muted); font-size: .85rem; font-weight: 600;
  text-align: center; vertical-align: 2px;
}

/* ===================================================================== */
/* v16 - MOBILE layout (<= 880px)                                         */
/* ===================================================================== */

@media (max-width: 880px) {
  /* topbar: [burger] [folder title] [⋮] - everything else steps back */
  .nm-top {
    min-height: var(--nm-topbar-h);
    padding: var(--sp-1);
    background: var(--nm-card-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nm-top-title { display: block; }
  .nm-top-left > .nm-pill,
  .nm-top-left > .nm-muted,
  .nm-top-right .nm-lang-dd,
  .nm-top-right .nm-theme-btn,
  .nm-top-logout { display: none; }
  .nm-burger { width: var(--nm-touch); height: var(--nm-touch); border-radius: 12px; }
  .nm-top-left { gap: var(--sp-1); flex: 1 1 auto; }
  .nm-top-right { gap: var(--sp-1); flex: 0 0 auto; }

  /* the folder heading lives in the topbar now */
  .nm-pagehead { display: none; }

  /* v21.1 fix: admin pages KEEP their pagehead on phones - it carries
     the only cross-navigation the admin has (Users / Cron / Settings /
     back links; the topbar title stays the app name there).  Rendered
     as a compact stacked block instead of the desktop row. */
  .nm-is-admin .nm-pagehead {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .4rem; margin-bottom: .9rem;
  }
  .nm-is-admin .nm-pagehead h1 { font-size: 1.22rem; line-height: 1.25; }

  /* v21.13 fix: the mail DETAIL view, compose, search and the watchdog
     KEEP their pagehead on phones - same mechanics as the admin
     exception above (body class nm-keep-head set by the layout).  The
     mail view's header carries the subject and the ONLY Antworten /
     Weiterleiten / .eml / zurück actions - since v16 hiding it made
     incoming mail unanswerable from a phone ("Keine Option"). */
  .nm-keep-head .nm-pagehead {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .4rem; margin-bottom: .9rem;
  }
  .nm-keep-head .nm-pagehead h1 { font-size: 1.22rem; line-height: 1.25; }
  .nm-keep-head .nm-pagehead-actions { width: 100%; }

  /* v21.52: the MESSAGE view's pagehead keeps its row shape on phones -
     compact back arrow left of the subject, action buttons wrap below.
     (The generic keep-head stacking would put the arrow on its own line
     and waste a row again - exactly what 21.52 removed.) */
  .nm-keep-head .nm-view-head {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem;
  }
  .nm-keep-head .nm-view-head .nm-pagehead-actions { width: 100%; }
  /* the arrow hits the same 44px touch target as the other icon buttons */
  .nm-keep-head .nm-view-head .nm-backicon { width: 44px; height: 44px; }

  /* v21.13: primary buttons reach the 44px touch target on phones -
     padding-only sizing left them ~36px tall and hard to hit */
  .nm-btn { min-height: 44px; }

  .nm-content { padding: var(--sp-2) var(--sp-2) 110px; }

  /* selection toolbar sticks below the topbar while scrolling */
  .nm-selbar {
    position: sticky; top: calc(var(--nm-topbar-h) + var(--sp-1)); z-index: 30;
    background: var(--nm-card-solid);
    border: 1px solid var(--nm-line2); border-radius: 14px;
    padding: 6px 8px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .12);
  }

  /* classic admin tables: one calm grouped container with hairline rows */
  .nm-list:not(.nm-list2) {
    background: var(--nm-card); border: 1px solid var(--nm-line);
    box-shadow: none;
  }
  .nm-list:not(.nm-list2) tbody tr {
    background: transparent; border: 0;
    border-bottom: 1px solid var(--nm-line);
    border-radius: 0; margin-bottom: 0;
    padding: var(--sp-2) var(--sp-2);
  }
  .nm-list:not(.nm-list2) tbody tr:last-child { border-bottom: 0; }
  .nm-list:not(.nm-list2) tbody tr:hover { background: var(--nm-hover); }
  .nm-list:not(.nm-list2) tbody td.nm-c-slim { width: 40px; }
  .nm-list input[type="checkbox"] { width: 19px; height: 19px; }

  /* unread (classic tables): a quiet accent dot + bold names */
  .nm-list:not(.nm-list2) .nm-row.is-unread td { background: transparent; }
  .nm-list:not(.nm-list2) .nm-row.is-unread:hover td { background: var(--nm-hover); }
  .nm-list:not(.nm-list2) .nm-row.is-unread .nm-c-from a::before {
    content: ''; display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--nm-accent);
    margin-right: 7px; vertical-align: 1px;
  }

  /* FAB keeps the mock-up's big rose circle (64 px) */
  .nm-fab {
    width: 64px; height: 64px;
    right: var(--sp-3); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    background: var(--nm-accent);
    box-shadow: 0 6px 16px var(--nm-accent-glow);
  }
  .nm-fab:hover { background: var(--nm-accent-dark); box-shadow: 0 8px 20px var(--nm-accent-glow); }

  /* the all-folder search page keeps its own heading visible */
  .nm-search-adv-panel { right: 0; }
}

/* ===================================================================== */
/* v16 - DESKTOP layout (>= 881px)                                        */
/* ===================================================================== */

@media (min-width: 881px) {
  .nm-selbar {
    background: var(--nm-card-solid);
    border: 1px solid var(--nm-line2); border-radius: 14px;
    padding: 6px 10px; margin-top: 2px;
  }
  .nm-selbar-actions { display: inline-flex; }
  .nm-selbar-more { display: none; }
  .nm-selbar-move-lb { display: inline; }
  .nm-selbar-del { width: auto; padding: 0 16px; gap: 8px; }
  .nm-selbar-move-menu { right: auto; left: 0; }
  .nm-search2 { max-width: 560px; }
  .nm-search2 .nm-input { height: 44px; }
  .nm-chip { height: 38px; }
  .nm-empty2 { padding: var(--sp-5) var(--sp-4); }
}

/* ===================================================================== */
/* v19 - Design & Farben (account card) + Spam-Empfindlichkeit            */
/* ===================================================================== */

/* the login page's "stay signed in" hint under the submit button */
.nm-stay-note {
  margin: .6rem 0 0; font-size: .8rem; color: var(--nm-muted);
  text-align: center;
}

/* colour swatch grid - radio buttons that look like round paint drops.
   Checked = accent ring; the two inner dots show the auto-computed
   "text on accent" so the user SEES that contrast is guaranteed. */
.nm-swatches {
  display: flex; flex-wrap: wrap; gap: 10px; margin: .5rem 0 .9rem;
}
.nm-swatch { position: relative; display: inline-flex; }
.nm-swatch input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  margin: 0; width: 100%; height: 100%;
}
.nm-swatch span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--nm-line2);
  font-size: .82rem; font-weight: 700;
  background: var(--sw, var(--nm-accent)); color: var(--sw-fg, #fff);
  box-shadow: inset 0 0 0 2px var(--nm-card);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.nm-swatch:hover span { transform: scale(1.08); }
.nm-swatch input:checked + span {
  border-color: var(--sw, var(--nm-accent));
  box-shadow: inset 0 0 0 2px var(--nm-card), 0 0 0 3px var(--nm-accent-ring);
}
.nm-swatch input:focus-visible + span { outline: 2px solid var(--nm-accent-border); outline-offset: 2px; }
/* the custom picker: a real <input type=color> inside a swatch frame */
.nm-swatch-custom span { border-style: dashed; color: var(--nm-muted); }
.nm-swatch-custom input[type="color"] {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  border: 0; padding: 0; cursor: pointer; opacity: 0;
}

.nm-design-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nm-design-note { font-size: .8rem; color: var(--nm-muted); margin: .2rem 0 0; }
/* v20.2: a small visible label above the live preview strip - makes it
   obvious that the "Verfassen" button / chip / dot / badge below are a
   PREVIEW of the picked colour, not functional controls. */
.nm-design-prev-label {
  margin: .9rem 0 0; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--nm-muted);
}
/* live preview strip: button + chip + unread dot, all driven by the
   accent variables - updates instantly while picking a colour */
.nm-design-preview {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .65rem .8rem; margin: .3rem 0 .8rem;
  background: var(--nm-hover); border-radius: 10px;
}
.nm-design-preview .nm-unread-dot { width: 11px; height: 11px; }
.nm-design-preview .nm-chip { pointer-events: none; }

/* spam sensitivity - the same pill language as the folder filters */
.nm-lvl { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .6rem; }
.nm-lvl label {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .8rem; border-radius: 999px;
  border: 1px solid var(--nm-line2); background: var(--nm-card);
  font-size: .85rem; font-weight: 600; color: var(--nm-muted);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.nm-lvl label:hover { border-color: var(--nm-dim); color: var(--nm-text); }
.nm-lvl input { position: absolute; opacity: 0; pointer-events: none; }
.nm-lvl input:checked + label {
  background: var(--nm-accent-soft); border-color: var(--nm-accent-border);
  color: var(--nm-accent-dark); font-weight: 700;
}
.nm-lvl input:focus-visible + label { outline: 2px solid var(--nm-accent-border); outline-offset: 2px; }
.nm-lvl-note { font-size: .82rem; color: var(--nm-muted); margin: .3rem 0 0; }
.nm-lvl-note strong { color: var(--nm-body-text); }

/* ===================================================================== */
/* v20 ADDITIONS                                                          */
/* ===================================================================== */

/* account page sub-tabs - one clear page instead of nine stacked cards.
   Same pill language as the folder filter chips; horizontally
   scrollable on phones (no wrap-jumping). */
.nm-subtabs {
  display: flex; gap: .4rem; margin: 0 0 1.1rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: .15rem;
}
.nm-subtabs::-webkit-scrollbar { display: none; }
.nm-subtab {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .95rem; border-radius: 999px;
  border: 1px solid var(--nm-line2); background: var(--nm-card);
  font-size: .88rem; font-weight: 600; color: var(--nm-muted);
  white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.nm-subtab:hover { color: var(--nm-text); border-color: var(--nm-dim); text-decoration: none; background: var(--nm-hover); }
/* v21.6: the active tab sat on the RAW accent - white on #03A375 was
   3.2:1 (AA needs 4.5:1).  The darkened button surface (the same token
   the primary buttons use since v21.2) keeps the look and passes AA;
   the dark theme is unchanged (mint surface + black label). */
.nm-subtab.is-active {
  background: var(--nm-accent-btn, var(--nm-accent)); border-color: transparent;
  color: var(--nm-accent-fg); font-weight: 700;
  box-shadow: 0 2px 8px var(--nm-accent-glow);
}
.nm-subtab.is-active:hover { background: var(--nm-accent-btn-h, var(--nm-accent-dark)); color: var(--nm-accent-fg); }
.nm-subtab:focus-visible { outline: 2px solid var(--nm-accent-border); outline-offset: 2px; }

/* the spam reason - calm amber line under the snippet (folder list,
   search hits).  Uses the warn tokens so light + dark stay legible. */
.nm-spam-why {
  display: flex; align-items: center; gap: .3rem;
  margin: .18rem 0 0; font-size: .78rem; line-height: 1.45;
  color: var(--nm-warn-text);
}
.nm-spam-why strong { font-weight: 700; }

/* the spam banner in the message view - reason + what "Kein Spam" does */
.nm-spam-banner {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0 0 1rem; padding: .8rem 1rem;
  background: var(--nm-warn-soft); border: 1px solid #FDE68A; border-radius: var(--nm-radius);
  color: var(--nm-warn-text);
}
.nm-spam-banner-ico { flex: 0 0 auto; display: inline-flex; margin-top: .1rem; }
.nm-spam-banner p { margin: 0; font-size: .9rem; line-height: 1.55; }
.nm-spam-banner p + p { margin-top: .15rem; font-size: .8rem; }

/* v20: the whole mail row opens the message (data-nm-row in app.js);
   the subject link stays the keyboard / no-JS path */
.nm-list2 tr[data-nm-row] { cursor: pointer; }
.nm-list2 tr[data-nm-row]:hover .nm-row-subj { color: var(--nm-accent-dark); }
@media (hover: none) {
  .nm-list2 tr[data-nm-row] { -webkit-tap-highlight-color: transparent; }
}

/* v20: admin branding card - two swatch fieldsets (interior / exterior) */
.nm-brand-row {
  border: 0; border-left: 3px solid var(--nm-accent-border);
  padding: .2rem 0 .2rem .9rem; margin: .9rem 0 1.2rem;
}
.nm-brand-row legend {
  padding: 0 .35rem 0 0; font-size: .92rem; font-weight: 700;
  color: var(--nm-text);
}
.nm-brand-row .nm-muted { margin: .1rem 0 .5rem; font-size: .84rem; }

/* ===================================================================== */
/* DARK THEME (v18) - the dark twin of the redesign                       */
/* Activated by <html data-theme="dark"> (cookie "nmtheme=dark", set     */
/* by the theme toggle).  Most components follow the --nm-* tokens;      */
/* only genuinely hardcoded light values need explicit twins below.      */
/* ===================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;
  --nm-accent:      #4ABD9C;                     /* brighter brand green for dark */
  --nm-accent-dark: #6CCDB0;                     /* hover = brighter on dark */
  --nm-accent-soft: rgba(3, 163, 117, .14);
  --nm-accent-ring: rgba(74, 189, 156, .22);
  /* v21: fixed brand green twin tokens (mirrors nm_accent_tokens()) */
  --nm-accent-fg:   #FFFFFF;
  --nm-accent-deep: #7ED4BA;
  --nm-accent-border: rgba(74, 189, 156, .5);
  --nm-accent-sel:  rgba(74, 189, 156, .4);
  --nm-accent-glow: rgba(74, 189, 156, .3);
  --nm-accent-link: #6CCDB0;
  --nm-accent-link-hover: #8FDCC6;
  --nm-accent-softcard: rgba(3, 163, 117, .09);   /* tint on dark surfaces */
  --nm-acc-rgb:      74, 189, 156;                /* rgb twin of the dark accent */
  --nm-bg:          #101013;
  --nm-bg2:         #0C0C0F;
  --nm-card:        #17171B;
  --nm-card-solid:  #1D1D22;                     /* menus, popovers        */
  --nm-hover:       rgba(255, 255, 255, .06);    /* hover surface          */
  --nm-text:        #F4F4F6;
  --nm-body-text:   #D1D5DB;
  --nm-muted:       #9CA3AF;
  --nm-dim:         #6B7280;
  --nm-line:        #26262C;
  --nm-line2:       #2E2E36;
  --nm-ok:          #34D399;  --nm-ok-soft:   rgba(52, 211, 153, .12);  --nm-ok-text:   #6EE7B7;
  --nm-warn:        #FBBF24;  --nm-warn-soft: rgba(251, 191, 36, .12);  --nm-warn-text: #FCD34D;
  --nm-err:         #F87171;  --nm-err-soft:  rgba(248, 113, 113, .12); --nm-err-text:  #FCA5A5;
  --nm-radius:      12px;
  --nm-shadow:      0 10px 30px rgba(0, 0, 0, .35);
  --nm-shadow-lg:   0 14px 34px rgba(0, 0, 0, .5);
}

/* ---- base elements ---- */
html[data-theme="dark"] ::selection { background: var(--nm-accent-sel); }
/* v20.3 FIX: the old dark-mode anchor rules
     html[data-theme="dark"] a       { color: var(--nm-accent-link); }
     html[data-theme="dark"] a:hover { color: var(--nm-accent-link-hover); }
   were REDUNDANT (the base rules at the top resolve the very same
   variables, which are re-scoped per theme) - but their specificity
   (0,1,2 / 0,2,2) beat every class-based colour on <a> elements:
   .nm-compose-btn, .nm-fab, .nm-btn-primary links, .nm-nav-item ...
   In the dark theme --nm-accent-link equals the button background
   (both are the bright twin), so the compose label turned INVISIBLE
   and the hover fell back to the hard-coded rose --nm-accent-link-hover.
   The base rules (a / a:hover) use the same tokens, so deleting these
   two lines restores the intended colours without any other change. */
html[data-theme="dark"] code { background: rgba(var(--nm-acc-rgb, 74, 189, 156), .16); color: var(--nm-accent-deep); }
html[data-theme="dark"] :focus-visible { outline-color: var(--nm-accent-border); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2E2E36; border-color: #101013; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A3A44; }

/* ---- topbar: solid dark glass ---- */
html[data-theme="dark"] .nm-top {
  background: rgba(16, 16, 19, .88);
}

/* ---- v18 row states: darker tints ---- */
html[data-theme="dark"] .nm-row.is-unread td { background: var(--nm-accent-softcard); }
html[data-theme="dark"] .nm-row.is-unread:hover td { background: var(--nm-accent-soft); }
html[data-theme="dark"] .nm-list2 .nm-row.is-unread { background: var(--nm-accent-softcard); }
html[data-theme="dark"] .nm-list2 .nm-row.is-unread:hover { background: var(--nm-accent-soft); }
html[data-theme="dark"] .nm-list2 .nm-row.is-spam {
  background: rgba(251, 191, 36, .09);
  border-bottom-color: rgba(251, 191, 36, .25);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .25);
}
html[data-theme="dark"] .nm-list2 .nm-row.is-spam:hover { background: rgba(251, 191, 36, .14); }
html[data-theme="dark"] .nm-spam-badge { background: rgba(251, 191, 36, .18); color: #FCD34D; }
html[data-theme="dark"] .nm-unread-dot { box-shadow: 0 1px 3px var(--nm-accent-glow); }
html[data-theme="dark"] .nm-avatar { box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* ---- buttons / inputs: dark surfaces ---- */
/* v20.2 FIX: this shadow was HARDCODED rose - every primary button kept
   a red glow in the dark theme no matter which accent colour was picked.
   Now it derives from the accent tokens like everything else. */
html[data-theme="dark"] .nm-btn-primary,
html[data-theme="dark"] .nm-compose-btn { box-shadow: 0 4px 10px var(--nm-accent-glow); }
html[data-theme="dark"] .nm2-btn-primary { box-shadow: 0 4px 10px rgba(var(--n2-acc-rgb), .3); }

/* ---- the mobile card list: darker cards on an even darker canvas ---- */
@media (max-width: 880px) {
  html[data-theme="dark"] .nm-list2 tbody tr { box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
  html[data-theme="dark"] .nm-backdrop { background: rgba(0, 0, 0, .62); }
  html[data-theme="dark"] .nm-side { box-shadow: 24px 0 60px rgba(0, 0, 0, .5); }
  html[data-theme="dark"] .nm-selbar { box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
}

/* ---- auth card ---- */
html[data-theme="dark"] .nm-auth-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

/* ---- link dialog backdrop ---- */
html[data-theme="dark"] .nm-linkdlg { background: rgba(0, 0, 0, .62); }

/* ---- admin log: dark terminal look fits both themes ---- */
html[data-theme="dark"] .nm-log { background: #0D0D11; color: #DBE2EA; }

/* ---- copybox ---- */
html[data-theme="dark"] .nm-copybox input { border-color: var(--nm-accent-border); color: var(--nm-accent-deep); }

/* ---- start page (.nm2) dark twins ---- */
html[data-theme="dark"] .nm2 {
  --n2-bg:     #101013;
  --n2-card:   #17171B;
  --n2-line:   #26262C;
  --n2-line2:  #2E2E36;
  --n2-txt:    #F4F4F6;
  --n2-mut:    #9CA3AF;
  --n2-dim:    #6B7280;
  --n2-acc:    #4ABD9C;
  --n2-acc2:   #6CCDB0;
  --n2-acc-soft: rgba(3, 163, 117, .14);
  /* v21.2: dark button surface = the brightened accent, label flips to
     BLACK (9:1) - the hardcoded white label measured only 2.3:1 here */
  --n2-btn-bg:   #4ABD9C;
  --n2-btn-bg-h: #6CCDB0;
  --n2-btn-fg:   #000000;

  color: var(--n2-txt);
  /* v21: gradients follow --n2-acc-rgb (the fixed brand green) */
  background:
    radial-gradient(900px 460px at 14% -8%, rgba(var(--n2-acc-rgb), .09) 0%, transparent 58%),
    radial-gradient(760px 420px at 108% 112%, rgba(var(--n2-acc-rgb), .06) 0%, transparent 55%),
    var(--n2-bg);
}
html[data-theme="dark"] .nm2 a { color: var(--n2-acc2); }
html[data-theme="dark"] .nm2 a:hover { color: var(--n2-acc-rose2); }
html[data-theme="dark"] .nm2-head { background: rgba(16, 16, 19, .88); }
html[data-theme="dark"] .nm2-head-login { color: #9CA3AF; }
html[data-theme="dark"] .nm2-head-login:hover { color: #F4F4F6; }
html[data-theme="dark"] .nm2-btn-ghost { color: #D1D5DB; }
html[data-theme="dark"] .nm2-btn-ghost:hover { color: #F4F4F6; }
html[data-theme="dark"] .nm2-menu > summary { background: var(--n2-card); }
html[data-theme="dark"] .nm2-menu-link { color: #9CA3AF; }
html[data-theme="dark"] .nm2-menu-link:hover { background: var(--nm-hover); color: #F4F4F6; }
html[data-theme="dark"] .nm2-menu-theme { color: #9CA3AF; }
html[data-theme="dark"] .nm2-menu-theme:hover { background: var(--nm-hover); color: #F4F4F6; }
html[data-theme="dark"] .nm2-hero-lead { color: #B7BDC7; }
html[data-theme="dark"] .nm2-checks li { color: #D1D5DB; }
html[data-theme="dark"] .nm3-stage { filter: brightness(.82) saturate(.9); }
html[data-theme="dark"] .nm3-phone { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .nm2-free {
  background: linear-gradient(135deg, rgba(var(--n2-acc-rgb), .12), rgba(var(--n2-acc-rgb), .04));
  border-color: rgba(var(--n2-acc-rgb), .3);
}
html[data-theme="dark"] .nm2-faq-item summary:hover { color: var(--n2-acc2); }
html[data-theme="dark"] .nm2-form .nm-input { background: var(--nm-card); }
html[data-theme="dark"] .nm2-legal a { text-decoration-color: rgba(var(--n2-acc-rgb), .4); }
html[data-theme="dark"] .nm2-legal-note { border-color: rgba(var(--n2-acc-rgb), .35); }
html[data-theme="dark"] .nm2 .nm-lang-btn { color: #D1D5DB; }
html[data-theme="dark"] .nm2 .nm-lang-opt { color: #D1D5DB; }

/* ---- search input: the borderless grey field turns dark ---- */
html[data-theme="dark"] .nm-search2 .nm-input { background: var(--nm-card); border-color: transparent; }
html[data-theme="dark"] .nm-search2 .nm-input:focus {
  background: var(--nm-card-solid); border-color: var(--nm-accent-border);
  box-shadow: 0 0 0 4px var(--nm-accent-ring);
}

/* ---- install button ---- */
html[data-theme="dark"] .nm-install-btn.is-installed {
  border-color: rgba(52, 211, 153, .5); color: #34D399;
  background: rgba(52, 211, 153, .1);
}

/* ---- format toggle: white pill -> dark pill ---- */
html[data-theme="dark"] .nm-ft-btn.is-active { background: var(--nm-card-solid); color: var(--nm-accent-link); box-shadow: none; }

/* ---- v20: spam reason + banner, dark twins ---- */
html[data-theme="dark"] .nm-spam-why { color: var(--nm-warn-text); }
html[data-theme="dark"] .nm-spam-banner { background: rgba(251, 191, 36, .09); border-color: rgba(251, 191, 36, .3); }
html[data-theme="dark"] .nm-subtab { background: var(--nm-card); }
/* v21.6 FIX: the rule above (0-2-1) outranked .nm-subtab.is-active
   (0-2-0) and painted the ACTIVE tab dark too - black label on the dark
   card measured 1.17:1 (invisible).  The active twin restores the mint
   button surface + black label (9.05:1). */
html[data-theme="dark"] .nm-subtab.is-active {
  background: var(--nm-accent-btn, var(--nm-accent)); color: var(--nm-accent-fg);
}
html[data-theme="dark"] .nm-subtab.is-active:hover { background: var(--nm-accent-btn-h, var(--nm-accent-dark)); }
html[data-theme="dark"] .nm2 { --n2-acc-soft2: rgba(3, 163, 117, .18); --n2-acc-line: #6CCDB0; --n2-acc-rose2: #8FDCC6; --n2-acc-rose4: #6CCDB0; --n2-acc-rgb: 74, 189, 156; }
html[data-theme="dark"] .nm-auth-body {
  background:
    radial-gradient(900px 460px at 18% -12%, rgba(var(--nm-acc-rgb, 74, 189, 156), .1) 0%, transparent 60%),
    radial-gradient(760px 420px at 108% 112%, rgba(var(--nm-acc-rgb, 74, 189, 156), .07) 0%, transparent 55%),
    var(--nm-bg);
}

/* ---- PWA meta companion colour (kept in sync by app.js) ---- */

/* ===================================================================== */
/* v21.3 - WACHHUND: Antwort-Wachhund + Bankverbindungs-Wächter           */
/* + Klartext-Echtheitsprüfung in the message view                        */
/* All components ride the --nm-* tokens, so light AND dark themes work   */
/* out of the box; only genuinely hardcoded values get dark twins below.  */
/* ===================================================================== */

/* ---- intro + answered notice ---------------------------------------- */
.nm-wd-intro { margin: 0 0 1rem; color: var(--nm-body-text); font-size: .92rem; line-height: 1.6; }
.nm-wd-intro .nm-muted { font-size: .84rem; }
.nm-wd-answered { margin: 0 0 1rem; font-size: .88rem; }

/* ---- section grid: one column on phones, two from 1000px ------------ */
.nm-wd-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 1000px) {
  .nm-wd-grid { grid-template-columns: 1fr 1fr; }
}

.nm-wd-card { min-width: 0; }   /* long nowrap spans (IBANs) must not blow up the tracks */
.nm-wd-card h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .15rem; }
.nm-wd-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--nm-accent-btn, var(--nm-accent)); color: var(--nm-accent-fg); /* v21.6 */
  font-size: .76rem; font-weight: 700; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.nm-wd-desc { margin: 0 0 .7rem; color: var(--nm-muted); font-size: .82rem; line-height: 1.5; }
.nm-wd-shield { display: inline-flex; color: var(--nm-err); }

/* ---- loop rows ------------------------------------------------------- */
.nm-wd-list { list-style: none; margin: 0; padding: 0; }
.nm-wd-row { border-top: 1px solid var(--nm-line); padding: .75rem 0 .8rem; }
.nm-wd-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.nm-wd-subj {
  font-weight: 600; color: var(--nm-text); font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto;
}
.nm-wd-subj:hover { color: var(--nm-accent-link); text-decoration: underline; }
.nm-wd-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .12rem; }
.nm-wd-who { color: var(--nm-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nm-wd-age { color: var(--nm-dim); font-size: .76rem; white-space: nowrap; }
.nm-wd-excerpt {
  display: flex; gap: .4rem; align-items: flex-start;
  margin: .45rem 0 .55rem; padding: .5rem .7rem;
  background: var(--nm-bg2); border-left: 3px solid var(--nm-accent-border);
  border-radius: 0 8px 8px 0;
  color: var(--nm-body-text); font-size: .84rem; line-height: 1.55;
}
.nm-wd-excerpt svg { flex: 0 0 auto; margin-top: .18rem; color: var(--nm-dim); }
.nm-wd-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.nm-wd-actions .nm-btn { padding: .42rem .85rem; font-size: .8rem; }

/* due chips - calm by default, loud when it matters */
.nm-wd-due {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: .1rem .55rem; border-radius: 999px;
  background: var(--nm-line); color: var(--nm-muted);
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.nm-wd-due.is-none { background: transparent; color: var(--nm-dim); font-weight: 500; }
.nm-wd-due.is-today { background: var(--nm-warn-soft); color: var(--nm-warn-text); }
.nm-wd-due.is-over { background: var(--nm-err-soft); color: var(--nm-err-text); }

/* ---- bank alert rows -------------------------------------------------- */
.nm-wd-bank { border-left: 3px solid var(--nm-warn); border-radius: 0 8px 8px 0; padding-left: .75rem; }
.nm-wd-bank.is-hot { border-left-color: var(--nm-err); }
.nm-wd-bank.is-ack { opacity: .55; border-left-color: var(--nm-line2); }
.nm-wd-bank-kind { font-weight: 700; font-size: .84rem; color: var(--nm-warn-text); }
.nm-wd-bank.is-hot .nm-wd-bank-kind { color: var(--nm-err-text); }
.nm-wd-bank-iban { display: flex; flex-direction: column; gap: .25rem; margin: .45rem 0 .55rem; }
.nm-wd-iban {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; padding: .22rem .55rem; border-radius: 8px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nm-wd-iban.old { background: var(--nm-line); color: var(--nm-muted); }
.nm-wd-iban.new { background: var(--nm-err-soft); color: var(--nm-err-text); font-weight: 700; }

/* ---- "how it works" card ---------------------------------------------- */
.nm-wd-how { margin-top: 1rem; }
.nm-wd-how h2 { display: flex; align-items: center; gap: .45rem; }
.nm-wd-how p { color: var(--nm-body-text); font-size: .88rem; line-height: 1.6; }
.nm-wd-how ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--nm-muted); font-size: .84rem; line-height: 1.65; }
.nm-wd-paw { display: inline-flex; color: var(--nm-accent-link); }

/* ---- v21.3: bank banner in the MESSAGE VIEW ---------------------------- */
/* amber twin of the spam banner; the hot variant (changed IBAN) is red   */
.nm-bank-banner {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0 0 1rem; padding: .8rem 1rem;
  background: var(--nm-warn-soft); border: 1px solid #FDE68A; border-radius: var(--nm-radius);
  color: var(--nm-warn-text);
}
.nm-bank-banner.is-hot { background: var(--nm-err-soft); border-color: #FECACA; color: var(--nm-err-text); }
.nm-bank-banner-ico { flex: 0 0 auto; display: inline-flex; margin-top: .1rem; }
.nm-bank-banner p { margin: 0; font-size: .9rem; line-height: 1.55; }
.nm-bank-banner p + p { margin-top: .15rem; font-size: .8rem; }
.nm-bank-banner-h { font-weight: 700; }
.nm-bank-banner .nm-muted { color: inherit; opacity: .75; }

/* ---- v21.27: admin access consent panel (message view) ----------------- */
/* brand-green twin of the bank banner; ok = live approval (green),       */
/* dim = denied/revoked/expired (neutral).  Buttons live in app DOM so    */
/* the sandboxed mail frame stays scriptless.                             */
.nm-access-panel {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0 0 1rem; padding: .8rem 1rem;
  background: var(--nm-accent-soft); border: 1px solid var(--nm-accent-border); border-radius: var(--nm-radius);
  color: var(--nm-body-text);
}
.nm-access-panel.is-ok  { background: var(--nm-ok-soft);  border-color: rgba(5, 150, 105, .45); color: var(--nm-ok-text); }
.nm-access-panel.is-dim { background: var(--nm-card);     border-color: var(--nm-line2);        color: var(--nm-muted); }
.nm-access-panel-ico { flex: 0 0 auto; display: inline-flex; margin-top: .1rem; color: var(--nm-accent); }
.nm-access-panel.is-ok  .nm-access-panel-ico { color: var(--nm-ok); }
.nm-access-panel.is-dim .nm-access-panel-ico { color: var(--nm-dim); }
.nm-access-panel-body { flex: 1 1 auto; min-width: 0; }
.nm-access-panel p { margin: 0; font-size: .9rem; line-height: 1.55; }
.nm-access-panel p + p { margin-top: .15rem; font-size: .8rem; }
.nm-access-panel .nm-muted { color: inherit; opacity: .75; }
.nm-access-actions { margin-top: .55rem; }
.nm-access-actions form { gap: .5rem; flex-wrap: wrap; }
/* state pills next to the address in the admin users list */
.nm-loginas-f .nm-tag { margin-right: 6px; vertical-align: middle; }

/* ---- v21.3: Klartext-Echtheitsprüfung (message view meta row) ---------- */
.nm-ai-details { margin-top: .35rem; }
.nm-ai-details > summary {
  display: inline-flex; align-items: center; gap: .3rem;
  cursor: pointer; list-style: none; user-select: none;
  color: var(--nm-muted); font-size: .8rem;
  padding: .1rem .4rem; border-radius: 6px;
}
.nm-ai-details > summary::-webkit-details-marker { display: none; }
.nm-ai-details > summary:hover { color: var(--nm-text); background: var(--nm-hover); }
.nm-ai-details > summary::before { content: "▸"; font-size: .72rem; transition: transform .15s ease; }
.nm-ai-details[open] > summary::before { transform: rotate(90deg); }
.nm-ai-main { margin: .45rem 0 .3rem; font-size: .84rem; line-height: 1.55; color: var(--nm-body-text); }
.nm-ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .18rem; }
.nm-ai-list li {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .8rem; color: var(--nm-muted);
}
.nm-ai-list li span {
  flex: 0 0 auto; min-width: 3.2rem;
  font-weight: 700; font-size: .72rem; letter-spacing: .03em;
  color: var(--nm-dim); text-transform: uppercase;
}
.nm-ai-warn {
  margin-top: .35rem; padding: .4rem .6rem;
  background: var(--nm-err-soft); color: var(--nm-err-text);
  border-radius: 8px; font-size: .8rem; line-height: 1.5;
}
.nm-ai-oldnote { margin-top: .3rem; font-size: .8rem; }

/* ===================================================================== */
/* DARK THEME twins for v21.3                                             */
/* ===================================================================== */

html[data-theme="dark"] .nm-wd-excerpt { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .nm-wd-iban.old { background: rgba(255, 255, 255, .07); color: var(--nm-dim); }
html[data-theme="dark"] .nm-wd-iban.new { background: rgba(220, 38, 38, .18); }
html[data-theme="dark"] .nm-bank-banner { background: rgba(251, 191, 36, .09); border-color: rgba(251, 191, 36, .3); }
html[data-theme="dark"] .nm-bank-banner.is-hot { background: rgba(220, 38, 38, .12); border-color: rgba(248, 113, 113, .35); }
html[data-theme="dark"] .nm-ai-warn { background: rgba(220, 38, 38, .14); }

/* ===================================================================== */
/* v21.4 - STARTSEITE: der Wachhund als nummerierte Punkte 1-4            */
/* (design language: the same green chips as the feature cards, but       */
/* with the POINT NUMBER inside; flat cards like the FAQ items)           */
/* ===================================================================== */

.nm2-sec-wd { padding: 46px 0 10px; scroll-margin-top: 84px; }
.nm2-wd-h2 { font-size: 1.5rem; margin: 0 0 10px; max-width: 34ch; }
.nm2-wd-lead {
  margin: 0 0 26px; color: var(--n2-mut);
  font-size: .96rem; line-height: 1.65; max-width: 68ch;
}

/* the numbered points: 2×2 grid on desktop, stacked on mobile */
.nm2-wd-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.nm2-wd-point {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 15px;
  background: var(--n2-card);
  border: 1px solid var(--n2-line2);
  border-radius: 16px;
  padding: 19px 19px 20px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.nm2-wd-point:hover {
  border-color: var(--n2-acc-line);
  box-shadow: 0 12px 28px -16px rgba(var(--n2-acc-rgb), .4);
}
/* the number chip - same geometry as .nm2-card-ico (48px, radius 14px),
   light theme uses the darker --n2-acc2 so the DIGIT reaches ≥3:1 on the
   soft green surface (large bold text, WCAG) */
.nm2-wd-num {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  background: var(--n2-acc-soft); color: var(--n2-acc2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.nm2-wd-body { min-width: 0; position: relative; z-index: 1; padding-right: 46px; }
.nm2-wd-body h3 {
  margin: 1px 0 .42rem; font-size: 1.04rem; font-weight: 700;
  color: var(--n2-txt); letter-spacing: -.005em;
}
.nm2-wd-body p { margin: 0; color: var(--n2-mut); font-size: .9rem; line-height: 1.62; }
/* the watermark icon: quiet brand accent in the top-right corner */
.nm2-wd-ico {
  position: absolute; right: 15px; top: 15px; z-index: 0;
  width: 44px; height: 44px;
  color: var(--n2-acc); opacity: .11;
  pointer-events: none;
}
/* the reassurance note under the grid */
.nm2-wd-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 18px 2px 0; color: var(--n2-dim);
  font-size: .86rem; line-height: 1.55;
}
.nm2-wd-note svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--n2-acc); }
.nm2-wd-note span { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .nm2-wd-point { transition: none; }
}

/* dark twins: tokens flip automatically; these refine contrast/details */
html[data-theme="dark"] .nm2-wd-num { color: var(--n2-acc); }
html[data-theme="dark"] .nm2-wd-point:hover { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .75); }
html[data-theme="dark"] .nm2-wd-ico { opacity: .16; }

/* responsive */
@media (max-width: 880px) {
  .nm2-sec-wd { padding: 34px 0 6px; }
  .nm2-wd-points { grid-template-columns: 1fr; gap: 12px; }
  .nm2-wd-h2 { font-size: 1.34rem; }
  .nm2-wd-lead { margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .nm2-wd-point { padding: 15px 14px 16px; gap: 12px; border-radius: 14px; }
  .nm2-wd-num { width: 42px; height: 42px; border-radius: 12px; font-size: 1.06rem; }
  .nm2-wd-body { padding-right: 38px; }
  .nm2-wd-ico { width: 36px; height: 36px; right: 12px; top: 13px; }
  .nm2-wd-note { margin-top: 14px; font-size: .84rem; }
}


/* ===================================================================== */
/* v21.5 - SIDEBAR: Ordner-Aktionen (umbenennen/löschen pro Ordner)       */
/* + WACHHUND: Schnelltest-Karte (Demo-Daten)                             */
/* ===================================================================== */

/* ---- per-folder actions in the sidebar (v21.5) ------------------------ */
/* previously rename/delete lived ONLY in the topbar overflow menu and
   only while INSIDE the folder - users could not find them at all        */
.nm-folder-row { position: relative; display: flex; align-items: center; }
.nm-folder-row .nm-nav-item { flex: 1 1 auto; min-width: 0; }
.nm-folder-menu { position: relative; flex: 0 0 auto; margin-right: .35rem; }
.nm-folder-menu > summary {
  list-style: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--nm-dim);
  transition: background .15s, color .15s, opacity .15s;
}
.nm-folder-menu > summary::-webkit-details-marker { display: none; }
.nm-folder-menu > summary svg { width: 15px; height: 15px; }
.nm-folder-menu > summary:hover { background: var(--nm-hover); color: var(--nm-body-text); }
.nm-folder-menu > summary:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 1px; }
/* desktop with a real pointer: the dots appear on hover/focus or when
   open - touch devices keep them always visible (no hover there) */
@media (hover: hover) {
  .nm-folder-row .nm-folder-menu > summary { opacity: 0; }
  .nm-folder-row:hover .nm-folder-menu > summary,
  .nm-folder-row:focus-within .nm-folder-menu > summary,
  .nm-folder-menu[open] > summary { opacity: 1; }
}
.nm-folder-menu-panel {
  position: absolute; right: 0; top: 32px; z-index: 70;
  min-width: 232px; padding: .5rem;
  background: var(--nm-card-solid);
  border: 1px solid var(--nm-line);
  border-radius: 12px;
  box-shadow: var(--nm-shadow-lg);
}
.nm-folder-menu-sub > summary {
  list-style: none; cursor: pointer;
  font-size: .86rem; font-weight: 600; color: var(--nm-body-text);
  padding: .45rem .55rem; border-radius: 8px;
}
.nm-folder-menu-sub > summary::-webkit-details-marker { display: none; }
.nm-folder-menu-sub > summary:hover { background: var(--nm-hover); }
.nm-folder-menu-form { display: flex; flex-direction: column; gap: .5rem; padding: .3rem .55rem .45rem; }
.nm-folder-menu-form .nm-input { font-size: .86rem; padding: .45rem .6rem; }
.nm-folder-menu-form .nm-btn { padding: .45rem .7rem; font-size: .85rem; }
.nm-folder-menu-del { padding-top: 0; }
.nm-folder-menu-danger {
  width: 100%; text-align: left; cursor: pointer;
  font-size: .86rem; font-weight: 600; font-family: inherit;
  color: var(--nm-err-text);
  background: transparent; border: 0; border-radius: 8px;
  padding: .45rem .55rem;
}
.nm-folder-menu-danger:hover { background: var(--nm-err-soft); }
.nm-folder-menu-danger:focus-visible { outline: 2px solid var(--nm-err); outline-offset: 1px; }

/* ---- watchdog: quick-test (demo) card (v21.5) ------------------------- */
.nm-wd-demo-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.nm-wd-demo-actions form { margin: 0; }
.nm-wd-demo-note { margin: .7rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--nm-muted); }

/* ---- admin dashboard: Speicher-Ampel (v21.9) -------------------------- */
/* Drei Zeilen (Webspace+DB / Inodes / Systempartition) mit Meter-Balken
   und Ampel-Tag; Werte rechtsbündig, auf Mobil sauber umbrechend.        */
.nm-storage-rows { display: flex; flex-direction: column; gap: 1.05rem; }
.nm-storage-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .4rem .9rem; flex-wrap: wrap;
}
.nm-storage-name { font-weight: 700; font-size: .92rem; }
.nm-storage-val {
  color: var(--nm-muted); font-size: .85rem;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: .45rem;
  flex-wrap: wrap; justify-content: flex-end;
}
.nm-storage-sub  { margin: .25rem 0 0; font-size: .8rem; color: var(--nm-muted); line-height: 1.5; }
.nm-meter-ok .nm-meter-fill   { background: var(--nm-ok); }
.nm-meter-warn .nm-meter-fill { background: var(--nm-warn); }
.nm-storage-meta {
  display: flex; align-items: center; gap: .55rem .8rem;
  flex-wrap: wrap; margin-top: 1.05rem;
}
.nm-storage-meta form { margin: 0; }
.nm-storage-meta .nm-btn { padding: .4rem .75rem; font-size: .84rem; }

/* ================= v21.24: address book autocomplete ================= */
/* the To/CC labels are the positioning context for the dropdown */
.nm-label { position: relative; }

.nm-ac {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  margin-top: .3rem;
  padding: .3rem;
  background: var(--nm-card-solid);
  border: 1px solid var(--nm-line2);
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-shadow-lg);
  max-height: 16rem;
  overflow-y: auto;
}

.nm-ac-item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--nm-text);
  font: inherit;
  font-size: .9rem;
  padding: .45rem .55rem;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;             /* touch target (mobile) */
}
.nm-ac-item:hover, .nm-ac-item.is-active { background: var(--nm-hover); }
.nm-ac-name { font-weight: 600; overflow-wrap: anywhere; }
.nm-ac-addr { color: var(--nm-muted); font-size: .82rem; overflow-wrap: anywhere; }

/* v21.30 - „Verlinke uns" (/verlinken): banners + embed codes.
   Uses the nm2 token family so it follows both themes. */
.nm2-lus { max-width: 780px; margin: 0 auto; }
.nm2-lus-intro { color: var(--n2-mut); font-size: .92rem; line-height: 1.72; margin: 0 0 1.2rem; }
.nm2-lus-hint {
  border: 1px solid rgba(var(--n2-acc-rgb), .35);
  background: rgba(var(--n2-acc-rgb), .08);
  border-radius: 12px;
  padding: .9rem 1rem;
  font-size: .9rem; line-height: 1.65;
  color: var(--n2-txt);
  margin: 0 0 1.6rem;
}
.nm2-lus-hint a { color: var(--n2-acc2); text-decoration: underline; text-underline-offset: 2px; }
.nm2-lus-h2 { color: var(--n2-txt); font-size: .98rem; font-weight: 700; margin: 1.7rem 0 .7rem; }
.nm2-lus-card {
  border: 1px solid rgba(128, 128, 128, .25);
  border-radius: 12px;
  padding: 1rem;
  margin: 0 0 1rem;
}
.nm2-lus-prev {
  background: #17171B;
  border: 1px solid rgba(128, 128, 128, .2);
  border-radius: 8px;
  padding: 12px;
  display: flex; align-items: center;
  overflow-x: auto;
  margin: 0 0 .75rem;
}
.nm2-lus-prev img { max-width: 100%; height: auto; display: block; }
.nm2-lus-label { display: block; color: var(--n2-mut); font-size: .84rem; margin: 0 0 .35rem; }
.nm2-lus-code {
  width: 100%; box-sizing: border-box;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.5;
  color: var(--n2-txt);
  background: rgba(128, 128, 128, .10);
  border: 1px solid rgba(128, 128, 128, .3);
  border-radius: 8px;
  padding: .55rem .65rem;
  min-height: 2.8rem;
}
.nm2-lus-code:focus { outline: 2px solid rgba(var(--n2-acc-rgb), .5); outline-offset: 1px; }
.nm2-lus-actions { display: flex; align-items: center; gap: .75rem; margin-top: .55rem; flex-wrap: wrap; }
.nm2-lus-size { color: var(--n2-mut); font-size: .78rem; }


/* ---- v21.39: Nutzer-Statistik (/account/stats) ---------------------- */
.nm-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.nm-stat-card { padding: 1rem 1.1rem; min-width: 0; }
.nm-stat-lb { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nm-muted); }
.nm-stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1.15; color: var(--nm-text); margin-top: .15rem; }
.nm-stat-sub { font-size: .82rem; color: var(--nm-muted); margin-top: .25rem; }
.nm-stat-h2 { font-size: 1rem; font-weight: 700; color: var(--nm-text); margin: 0 0 .2rem; }
.nm-stat-hint { font-size: .82rem; color: var(--nm-muted); margin: 0 0 .8rem; }
.nm-stats-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.nm-stat-bar { height: 8px; border-radius: 99px; background: var(--nm-line); overflow: hidden; margin-top: .6rem; }
.nm-stat-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--nm-accent); }
.nm-stat-bar-fill.is-warn { background: var(--nm-warn); }
.nm-stat-bar-fill.is-err { background: var(--nm-err); }
.nm-auth-row { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
.nm-auth-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.nm-auth-dot.is-pass { background: var(--nm-ok); }
.nm-auth-dot.is-warn { background: var(--nm-warn); }
.nm-auth-dot.is-fail { background: var(--nm-err); }
.nm-auth-lb { font-size: .86rem; color: var(--nm-text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-auth-n { font-size: .86rem; font-weight: 700; color: var(--nm-text); flex: 0 0 auto; }
.nm-auth-bar { flex: 0 0 80px; height: 6px; border-radius: 99px; background: var(--nm-line); overflow: hidden; }
.nm-auth-bar-fill { display: block; height: 100%; }
.nm-auth-bar-fill.is-pass { background: var(--nm-ok); }
.nm-auth-bar-fill.is-warn { background: var(--nm-warn); }
.nm-auth-bar-fill.is-fail { background: var(--nm-err); }
.nm-chart { display: flex; align-items: stretch; gap: 3px; height: 110px; margin-top: .4rem; }
.nm-chart-col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.nm-chart-stack { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 1px; }
.nm-chart-in, .nm-chart-out { display: block; border-radius: 3px 3px 0 0; }
.nm-chart-in { background: var(--nm-accent); }
.nm-chart-out { background: var(--nm-line2); }
.nm-chart-lb { font-size: .58rem; color: var(--nm-muted); text-align: center; margin-top: .25rem; }
.nm-chart-col.is-today .nm-chart-lb { color: var(--nm-text); font-weight: 700; }
.nm-chart-legend { display: flex; gap: 1rem; font-size: .78rem; color: var(--nm-muted); margin-top: .5rem; }
.nm-chart-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .3rem; vertical-align: baseline; }
.nm-dot-in { background: var(--nm-accent); }
.nm-dot-out { background: var(--nm-line2); }
.nm-top-list { list-style: none; margin: 0; padding: 0; }
.nm-top-row { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--nm-line); }
.nm-top-row:last-child { border-bottom: 0; }
.nm-top-name { font-weight: 600; color: var(--nm-text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; min-width: 0; }
.nm-top-addr { color: var(--nm-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.nm-top-c { flex: 0 0 auto; }
.nm-more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.4rem; }
.nm-more-row { display: flex; flex-wrap: wrap; gap: .1rem .8rem; padding: .4rem 0; border-bottom: 1px solid var(--nm-line); font-size: .86rem; }
.nm-more-row:last-child { border-bottom: 0; }
.nm-more-lb { color: var(--nm-muted); min-width: 0; overflow-wrap: break-word; }
.nm-more-v { color: var(--nm-text); font-weight: 600; text-align: right; margin-left: auto; overflow-wrap: break-word; }
@media (max-width: 720px) {
  .nm-stats-grid { grid-template-columns: 1fr 1fr; }
  .nm-stats-cols { grid-template-columns: 1fr; }
  .nm-more-list { grid-template-columns: 1fr; }
  .nm-auth-bar { flex-basis: 52px; }
}

/* =====================================================================
   v21.47: Anhang-Vorladung - chips for files pre-uploaded in the
   background while the compose form is open.  States: is-busy shows
   the progress bar, is-done is staged (green ring), is-failed shows
   the server error instead of the size.  Colors come from the theme
   variables, so light and dark variants stay in sync.
   ===================================================================== */
.nm-pending {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: -.25rem 0 .5rem;
}
.nm-pending:empty { display: none; }
.nm-att-chip {
  display: inline-flex;
  flex-wrap: wrap;         /* v21.51: verdict text gets its own full row */
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  padding: .3rem .45rem .3rem .7rem;
  border: 1px solid var(--nm-line);
  border-radius: 999px;
  background: var(--nm-card);
  font-size: .875rem;
  line-height: 1.4;
}
.nm-att-chip.is-done { border-color: var(--nm-accent-border); }
.nm-att-chip.is-failed { border-color: var(--nm-err); }
/* v21.49: file types Gmail refuses - amber chip + short warning text.
   v21.51: the warning moves to its OWN full-width row below name and
   size.  The old inline sliver (11rem, mobile 7rem) truncated the text
   into unreadability, and touch devices have no title tooltip to fall
   back on.  Two lines max keep the card compact. */
.nm-att-chip.is-warn { border-color: var(--nm-warn-text); background: var(--nm-warn-soft); }
.nm-att-warn {
  color: var(--nm-warn-text);
  font-size: .8125rem;
  order: 10;
  flex-basis: 100%;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}
/* v21.50: zip content scan verdicts - calm green confirmation for a
   clean archive, same amber warning for findings.  v21.51: same
   full-width row behaviour as the warning text. */
.nm-att-chip.is-ok { border-color: var(--nm-ok-text); background: var(--nm-ok-soft); }
.nm-att-ok {
  color: var(--nm-ok-text);
  font-size: .8125rem;
  order: 10;
  flex-basis: 100%;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}
.nm-att-name {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.nm-att-size { color: var(--nm-muted); font-size: .8125rem; white-space: nowrap; }
/* v21.51: a failed upload shows its error message instead of the size -
   give that message the same full-width row so it stays readable. */
.nm-att-chip.is-failed .nm-att-size {
  color: var(--nm-err-text);
  order: 10;
  flex-basis: 100%;
  white-space: normal;
}
.nm-att-bar {
  position: relative;
  width: 4.5rem;
  height: .3rem;
  border-radius: 999px;
  background: var(--nm-accent-soft);
  overflow: hidden;
}
.nm-att-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2%;
  border-radius: 999px;
  background: var(--nm-accent);
  transition: width .18s ease-out;
}
.nm-att-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nm-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.nm-att-x:hover, .nm-att-x:focus-visible {
  background: var(--nm-err-soft);
  color: var(--nm-err-text);
  outline: none;
}
@media (max-width: 720px) {
  .nm-att-name { max-width: 9rem; }
  .nm-att-bar { width: 3.5rem; }
  /* v21.51: the old .nm-att-warn max-width 7rem cap is GONE - it
     truncated the warning into nothing on phones.  The verdict row
     now wraps and reads fully at every width. */
}

/* =====================================================================
   v21.56 - THE MAIL SPANS THE FULL DEVICE WIDTH ON SMALL PHONES
   The user request after 21.55: the mail frame "takes too much room".
   Correct: the frame is width:100%, but a whole padding chain stole
   the edges on phones - .nm-content 12px + .nm-msg card padding
   22.4px + 1px border per side, and only THEN the frame began (393px
   device: the mail text got just ~298px).  This block breaks the
   chain for the message card ONLY (no other page changes):
     - the card bleeds over the content padding to the device edge
       (negative margins), loses its side borders and round corners
     - head / tags / attachbar / gallery / text mails carry their own
       12px side padding, exactly the content rhythm
     - the mail frame runs edge to edge (no side border, no radius);
       the small 12px padding INSIDE the frame doc (helpers.php, same
       520px breakpoint) stays as the readable text margin
   Result on a 393px phone: the mail body grows from ~298px to ~369px
   visible width (+24%).  Desktop and tablets keep the classic card.
   ===================================================================== */
@media (max-width: 520px) {
  .nm-msg {
    margin-left: calc(-1 * var(--sp-2));
    margin-right: calc(-1 * var(--sp-2));
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .nm-msg-head { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .nm-msg-tags { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .nm-attachbar { margin-left: var(--sp-2); margin-right: var(--sp-2); }
  .nm-gallery { margin-left: var(--sp-2); margin-right: var(--sp-2); }
  .nm-plain { margin-left: var(--sp-2); margin-right: var(--sp-2); }
  .nm-mailframe { border-left: 0; border-right: 0; border-radius: 0; }
}

/* =====================================================================
   v21.57 + v21.58 - THE MESSAGE HEADER CARD STARTS FOLDED
   The user request after 21.56: the meta card (Von/An/Datum/Groesse/
   Echtheit + the tag bar) ate the top of every mail view - hide it
   behind a small toggle.  v21.57 shipped a 38px chevron button; the
   user asked for TEXT instead ("Mail-Kopf anzeigen" / "Mail-Kopf
   ausblenden"), centred above the card rather than left-aligned.
   Mechanics:
     - .nm-msg-foldbar: a slim row at the top of the message card,
       justify-content:center puts the text button in the middle
     - .nm-foldbtn: quiet text toggle (muted, no border) - the label
       itself IS the state, app.js swaps the text on every tap
     - .nm-msg-fold: ONE grid row animated between 0fr (folded) and
       1fr (open); the clip hides the overflow, visibility takes the
       hidden content out of the tab order while folded
     - the mail body (frame, attachbar, gallery, plain text) stays
       visible - ONLY the meta table and the tag bar fold away
     - without JavaScript the details are simply open (inline noscript
       style in view.php) and the button is hidden
   The state is not stored: every message view starts folded.
   ===================================================================== */
.nm-msg-foldbar { display: flex; align-items: flex-start; justify-content: center; padding-bottom: .6rem; }
.nm-foldbtn {
  position: relative; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  padding: .35rem .7rem; border-radius: 8px;
  font: inherit; font-size: .8rem; font-weight: 500;
  color: var(--nm-muted);
}
.nm-foldbtn:hover { background: var(--nm-hover); color: var(--nm-text); }
.nm-foldbtn:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; }
/* invisible halo: the visible text stays small, the tap target does not */
.nm-foldbtn::after { content: ""; position: absolute; inset: -4px; }
.nm-msg-fold {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .24s ease;
}
.nm-msg.is-fold-open .nm-msg-fold { grid-template-rows: 1fr; }
.nm-msg-fold-clip {
  overflow: hidden; min-height: 0; visibility: hidden;
  transition: visibility .24s ease;
}
.nm-msg.is-fold-open .nm-msg-fold-clip { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .nm-msg-fold, .nm-msg-fold-clip { transition: none; }
}
@media (max-width: 520px) {
  /* v21.56 rhythm: on phones the card runs edge to edge, the fold bar
     follows the same 12px inset as head / tags / attachbar */
  .nm-msg-foldbar { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}

/* =====================================================================
   v21.59 - CLEAN SELECTION TOOLBAR (desktop)
   The user request after 21.58: the selection bar looked untidy - the
   four ghost actions wrapped onto a second line mid-bar (ragged,
   centred floaters) and the "Alle markieren" row stacked BELOW the bar
   as a second card.  The cleanup, desktop only (>= 881px):
     - EVERY control sits on one 34px line (clear, count, select-all,
       move, delete) - one calm row instead of two ragged ones
     - the compact "Alle markieren" toggle lives INSIDE the bar (same
       delegated data-nm-selectall handler as its tools-row twin) and
       the separate tools row hides while a selection is up - the same
       has-selection / :has() selectors that reveal the bar itself
     - the four actions need ~970px of content width (short labels,
       mail.sel_*); BELOW 1300px viewport they stay in the existing
       menu (the same calm pattern as on phones), FROM 1300px they sit
       inline at the right edge - right-aligned, never ragged, and the
       group may still wrap as a whole for unusually long languages
     - mobile (< 881px) is UNCHANGED: sticky 44px bar with the menu,
       tools row above the list
   ===================================================================== */
.nm-selbar-selectall { display: none; }   /* bar twin is a desktop refinement */
@media (min-width: 881px) {
  .nm-selbar { gap: 8px; padding: 7px 10px; border-radius: 12px; }
  .nm-selbar-selectall { display: inline-flex; }
  .nm-selbar-clear { width: 34px; height: 34px; border-radius: 9px; }
  .nm-selbar-count { font-size: .88rem; }
  .nm-selbar .nm-selectall { height: 34px; padding: 0 11px; border-radius: 9px; font-size: .8rem; gap: 5px; }
  .nm-selbar .nm-btn { height: 34px; padding: 0 11px; border-radius: 9px; font-size: .8rem; font-weight: 500; }
  .nm-selbar-move-btn { height: 34px; padding: 0 11px; border-radius: 9px; font-size: .8rem; gap: 5px; }
  .nm-selbar-del { width: 34px; height: 34px; border-radius: 9px; padding: 0; }
  .nm-selbar-more-btn { width: 34px; height: 34px; border-radius: 9px; }
  /* 881 - 1299px: the four actions stay in the menu, the bar stays one slim line */
  .nm-selbar-actions { display: none; }
  .nm-selbar-more { display: block; }
  /* the standalone "Alle markieren" row only exists while nothing is selected */
  .nm-listform.has-selection .nm-listtools,
  .nm-listform:has(input[name="ids[]"]:checked) .nm-listtools { display: none; }
}
@media (min-width: 1300px) {
  /* wide desktop: every action inline at the right edge, one line */
  .nm-selbar-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .nm-selbar-more { display: none; }
}

/* =====================================================================
   v21.60 - THE "+ TAG" FORM WORKS INSIDE THE FOLDED HEADER CARD AGAIN
   The user report after 21.59: "the tags are gone" and the "+" chip in
   the message header's tag bar "has no function".  Root cause (proven
   in the browser with the real assets): since v21.57 the tag bar lives
   INSIDE the folded header card (.nm-msg-fold-clip, overflow:hidden) -
   but the add-tag form (.nm-toolform) is a floating popup
   (position:absolute, top:calc(100% + 8px)) anchored BELOW the tag
   bar, i.e. outside the clip's box.  overflow:hidden cut it away:
   tapping "+" only made the chip itself disappear (summary is
   display:none when open) while the form shrank to a sliver - 16 of
   67px visible on desktop, 0 of 67px on phones (the old <=560px
   "position:static" media rule sits EARLIER in this file than the
   v-later base rule, so it never won the cascade).  To the user:
   "keine Funktion" - and with an empty tag palette the folder filter
   row loses its "Tags" chip as well (it only rendered when at least
   one tag existed), which reads as "the tags are gone".
   Fix, three parts:
     a) the form opens IN PLACE as a calm full-width row under the
        chips (the same pattern the <=560px rule always intended) -
        the card grows by one row, nothing can clip, JS or not
     b) tag actions return to an OPEN header card (?fold=1 in
        MailController::tags + view.php rendering the fold pre-opened)
     c) the folder filter row ALWAYS shows its Tags chip; with an
        empty palette a muted hint row (tags.empty_hint) explains
        where tags come from
   ===================================================================== */
.nm-msg-tags .nm-tag-add[open] { flex: 1 1 100%; }
.nm-msg-tags .nm-tag-add .nm-toolform {
  position: static; left: auto; right: auto; top: auto;
  width: 100%; min-width: 0; max-width: none;
  flex-wrap: wrap; box-shadow: none; margin-top: .2rem;
}
/* folder filter row: an empty tag palette is no longer an invisible
   dropdown - the hint row explains the one entry point that exists */
.nm-tagdd-empty { padding: 12px 12px 10px; color: var(--nm-dim); font-size: .8rem; line-height: 1.5; }
.nm-tagdd-empty .nm-tagdd-name {
  color: inherit; font-size: inherit;      /* not the .93rem tag-name size */
  white-space: normal; overflow: visible; text-overflow: clip;  /* hint may WRAP */
}

/* ==== v21.71: admin lists - row actions in a compact "⋮" menu ==========
   users / contacts / referrals keep every per-row action (suspend,
   delete, pay out, Zugang erfragen, ...) inside the existing
   .nm-overflow dropdown - no more stray buttons next to each row, no
   more mis-clicks.  Outside click + Escape closing comes for free
   from app.js (the header uses the same pattern).                     */
/* the admin tables clip overflow for their rounded corners - that would
   cut off the row menus, so the admin lists paint outside again; the
   last row re-does the corner rounding for its hover background. */
.nm-is-admin .nm-list:not(.nm-list2) { overflow: visible; }
.nm-is-admin .nm-list:not(.nm-list2) tbody tr:last-child td:first-child { border-bottom-left-radius: 13px; }
.nm-is-admin .nm-list:not(.nm-list2) tbody tr:last-child td:last-child { border-bottom-right-radius: 13px; }
.nm-is-admin .nm-c-actions { width: 56px; text-align: right; }
.nm-is-admin .nm-c-actions .nm-overflow { display: inline-block; text-align: left; }
.nm-is-admin .nm-c-actions .nm-overflow-btn { width: 38px; height: 38px; border-radius: 10px; }
.nm-is-admin .nm-c-actions .nm-overflow-btn svg { width: 18px; height: 18px; }
.nm-is-admin .nm-c-actions .nm-overflow-menu { min-width: 230px; }
.nm-is-admin .nm-c-actions .nm-overflow-form { padding: 0; }
.nm-is-admin .nm-loginas-f { margin-left: 8px; }

/* ---- v21.78: admin gate auto-lock countdown bar ------------------------- */

.nm-gate-timer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 var(--sp-2); padding: 10px 14px;
  background: var(--nm-accent-soft);
  border: 1px solid var(--nm-accent-border);
  border-radius: 12px;
  color: var(--nm-text); font-size: .88rem;
}
.nm-gate-timer-ico { display: inline-flex; color: var(--nm-accent); }
.nm-gate-timer-label { font-weight: 600; }
.nm-gate-timer-left {
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: .95rem; letter-spacing: .02em;
}
.nm-gate-timer.is-warn {
  background: var(--nm-warn-soft);
  border-color: rgba(217, 119, 6, .35);
}
.nm-gate-timer.is-warn .nm-gate-timer-ico { color: var(--nm-warn); }
.nm-gate-timer.is-warn .nm-gate-timer-left { color: var(--nm-warn-text); }
.nm-gate-timer.is-expired {
  background: var(--nm-err-soft);
  border-color: rgba(220, 38, 38, .35);
}
.nm-gate-timer.is-expired .nm-gate-timer-ico { color: var(--nm-err); }
.nm-gate-timer.is-expired .nm-gate-timer-left { color: var(--nm-err-text); }