/* css/tokens.css */
/*
 * Design tokens, taken 1:1 from the design handover (design/tokens.css and
 * the mockups, "Minimal" style, 2026-10-05). When a value here and a mockup
 * disagree, the mockup wins. Names are English; the comments name the
 * German UI term where it helps to find the element in the mockups.
 *
 * Light and dark theme: :root is the light theme of the mockups. The dark
 * theme overrides colour tokens only; it applies when the user chose
 * "Dunkel" (<html data-theme="dark">, rendered by the server) or chose
 * "System" (the default, also on the sign-in pages) on a device in dark
 * mode. Both dark blocks at the end must stay identical; colours are only
 * ever set here, never in the component files, and theme_test.go checks
 * the contrast of the pairs used together in both themes.
 */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist-Variable.woff2?v=a369fcf5628e") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMono-Variable.woff2?v=fba8f577f38a") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "Geist", -apple-system, "Segoe UI", sans-serif;
  /* Times, dates, domains, phone numbers, numbers in tables. */
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-sidebar-bg: #f7fafc;
  --color-page-muted: #f4f7fa;      /* monthly report background */
  --color-border: #e3ebf1;          /* cards, sidebar edge, buttons */
  --color-border-hover: #cfdbe5;    /* buttons, cards, search on hover */
  /* Text fields and selects: the outline is what identifies them, so it
     needs 3:1 against white (WCAG 1.4.11); darker than the mockups. */
  --color-input-border: #8496a8;
  --color-divider: #eef2f5;         /* table rows, hairlines */
  --color-row-selected: #f7fafc;
  --color-nav-active: #e8eff5;
  --color-separator: #cbd5e1;       /* "·" and "/" separators */

  /* Text */
  --color-text: #171717;
  --color-text-strong: #262626;
  --color-text-body: #404040;
  --color-text-secondary: #525252;
  --color-text-muted: #737373;      /* labels, meta, column headers */

  /* Accent (WP Profis brand colours) */
  --color-accent: #2c3e50;          /* current tab and nav item, key figures, selection marks */
  --color-accent-alt: #1e5a8a;      /* links, "Neu" badge */
  /* Filled accent: primary button, organization tile, counters, the
     message card's icon; text and icons on it use --color-on-accent. */
  --color-accent-bg: #2c3e50;
  --color-accent-bg-hover: #22303f;
  --color-on-accent: #ffffff;
  --color-navy: #032c42;            /* icon tile */
  --color-icon-paper: #9fc2dc;

  /* Website identification colours (small square before the domain) */
  --site-1: #3498db;
  --site-2: #14b8a6;
  --site-3: #f59e0b;
  --site-4: #8b5cf6;
  --site-5: #ef4444;
  --site-6: #22c55e;
  --site-7: #64748b;
  --site-8: #ec4899;

  /* Status badges: background / text / dot */
  --status-new-bg: #eaf2f9;         --status-new-fg: #1e5a8a;         --status-new-dot: #1e5a8a;
  --status-in-progress-bg: #f1f5f9; --status-in-progress-fg: #475569; --status-in-progress-dot: #64748b; /* ring, not dot */
  --status-answered-bg: #e6f4f1;    --status-answered-fg: #0f766e;    --status-answered-dot: #14b8a6;
  --status-follow-up-bg: #fef3e2;   --status-follow-up-fg: #b45309;   --status-follow-up-dot: #f59e0b;
  --status-won-bg: #eaf6ee;         --status-won-fg: #15803d;         --status-won-dot: #22c55e;
  --status-lost-bg: #f4f4f5;        --status-lost-fg: #52525b;        --status-lost-dot: #a1a1aa;

  /* Screened ("Aussortiert"); the dots of their badges (mockup 05) */
  --tag-promotion-bg: #f3eeff; --tag-promotion-fg: #6d28d9;
  --tag-spam-bg: #fdecec;      --tag-spam-fg: #b91c1c;
  --tag-promotion-dot: #8b5cf6; --tag-spam-dot: #ef4444;

  /* Signals */
  --color-warning-text: #b45309;    /* "07:52 · 4 Std.", quote counter */
  --color-warning-text-strong: #9a4508; /* on tinted backgrounds (4.5:1, not in the mockups) */
  --color-success-text: #15803d;    /* "Formulare 06:00 geprüft" */
  --color-danger-text: #b91c1c;
  --color-danger-bg: #b91c1c;       /* destructive button (text: --color-on-accent) */
  --color-danger-bg-hover: #991b1b;
  --color-on-success: #ffffff;      /* check mark on a done step (--color-success-text) */
  --color-note-bg: #fff8eb;         /* internal note; a due reminder's chip */
  --color-note-border: #fde7c7;
  /* Reminders (stage 7d): the background of a due reminder's row and
     group, and the sidebar's number of due reminders (white on amber). */
  --color-due-bg: #fffcf5;
  --color-due-count-bg: #b45309;
  --color-on-due-count: #ffffff;
  /* Daily bars of the form test (mockup 06): passed, passed today,
     slow, failed, skipped (not testable) and no check. */
  --color-check-ok: #86efac;
  --color-check-today: #22c55e;
  --color-check-slow: #fcd34d;
  --color-check-failed: #f87171;
  --color-check-skipped: #a1a1aa;
  --color-check-none: #e3ebf1;
  --color-focus: #1e5a8a;

  /* Message card of the inquiry (mockup 03) and attachments */
  --color-card-border: #d3e2ec;
  --color-card-header-bg: #f4f9fc;

  /* Info boxes (stage 7d): a status on a tinted background with a border,
     its text, a stronger title and the icon in the tone; tints for the
     test chip and the attention card, the tile behind a box's icon.
     Quiet cards (a form that is not captured, "Auf einen Blick", the
     plugin card) and the dashed border of a form that is not captured. */
  --color-info-bg: #eaf2f9;
  --color-info-border: #cfe0ef;
  --color-info-text: #1f3b57;
  --color-info-strong: #163f61;
  --color-info-icon: #1e5a8a;
  --color-info-tile: #d9e8f5;
  --color-success-bg: #eaf6ee;
  --color-success-border: #cdebd6;
  --color-success-strong: #14532d;
  --color-success-tint: #f4fbf6;
  --color-warning-bg: #fff8eb;
  --color-warning-border: #fde7c7;
  --color-warning-strong: #7a3e06;
  --color-warning-tint: #fffcf5;
  --color-warning-tile: #fef3e2;
  --color-error-bg: #fdecec;
  --color-error-border: #f5c2c2;
  --color-error-strong: #7f1d1d;
  --color-card-muted-bg: #fbfcfd;
  --color-border-dashed: #d5dfe7;

  /* QR codes stay black on white in both themes, so phones can scan them. */
  --color-qr-bg: #ffffff;

  /* Backdrops behind dialogs, the palette and the mobile menu */
  --backdrop-dialog: rgb(15 23 42 / 0.35);
  --backdrop-palette: rgb(15 23 42 / 0.25);
  --backdrop-nav: rgb(15 23 42 / 0.3);

  /* Avatars (initials): background / text */
  --avatar-blue-bg: #dbeafe;   --avatar-blue-fg: #1e3a8a;
  --avatar-teal-bg: #ccfbf1;   --avatar-teal-fg: #115e59;
  --avatar-orange-bg: #fde7c7; --avatar-orange-fg: #92400e;
  --avatar-violet-bg: #ede9fe; --avatar-violet-fg: #5b21b6;
  --avatar-rose-bg: #ffe4e6;   --avatar-rose-fg: #9f1239;
  --avatar-green-bg: #dcfce7;  --avatar-green-fg: #166534;
  --avatar-slate-bg: #e2e8f0;  --avatar-slate-fg: #334155;

  /* Radii */
  --radius-xs: 2px;   /* website square, check bars */
  --radius-sm: 4px;   /* kbd */
  --radius: 6px;      /* buttons, badges, inputs, nav items */
  --radius-md: 8px;
  --radius-lg: 10px;  /* cards */
  --radius-xl: 12px;  /* dialogs */
  --radius-pill: 999px;

  /* Font sizes (px as in the mockups) */
  --fs-10: 10px; --fs-11: 11px; --fs-11-5: 11.5px; --fs-12: 12px; --fs-12-5: 12.5px;
  --fs-13: 13px; --fs-13-5: 13.5px; --fs-14: 14px; --fs-14-5: 14.5px; --fs-16: 16px;
  --fs-22: 22px;      /* page title */
  --fs-28: 28px;      /* report key figures */

  /* Dimensions */
  --sidebar-width: 240px;
  --topbar-height: 52px;
  --row-height: 50px;     /* inbox table row */
  --btn-height: 32px;
  --nav-item-height: 34px;
  --page-gutter: 32px;

  --shadow-dialog: 0 24px 48px -12px rgb(15 23 42 / 0.25), 0 0 0 1px rgb(15 23 42 / 0.04);
  --shadow-card: 0 1px 3px rgb(44 62 80 / 0.08);
}

@media (max-width: 860px) {
  :root { --page-gutter: 16px; }
}

/* ---------- Dark theme ----------
   The same overrides twice: for "System" on a device in dark mode, and
   for "Dunkel". Keep the two blocks identical (theme_test.go). Site
   colours, radii and sizes are the same in both themes. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #111519;
    --color-sidebar-bg: #171c22;
    --color-page-muted: #0b0e11;
    --color-border: #2b333c;
    --color-border-hover: #3d4855;
    --color-input-border: #6c7a89;
    --color-divider: #20262d;
    --color-row-selected: #1a2028;
    --color-nav-active: #232b35;
    --color-separator: #4a5562;

    --color-text: #e9edf1;
    --color-text-strong: #dfe4e9;
    --color-text-body: #c8d0d8;
    --color-text-secondary: #b0bac4;
    --color-text-muted: #909ba7;

    --color-accent: #9cc5ea;
    --color-accent-alt: #7fb7e8;
    --color-accent-bg: #2f5f8a;
    --color-accent-bg-hover: #3a6d9b;
    --color-on-accent: #ffffff;

    --status-new-bg: #16283a;         --status-new-fg: #93c3ee;         --status-new-dot: #5aa2e0;
    --status-in-progress-bg: #20272f; --status-in-progress-fg: #b7c1cc; --status-in-progress-dot: #8593a3;
    --status-answered-bg: #0f2f2b;    --status-answered-fg: #6fd8c4;    --status-answered-dot: #2dd4bf;
    --status-follow-up-bg: #352611;   --status-follow-up-fg: #f5b765;   --status-follow-up-dot: #f59e0b;
    --status-won-bg: #122d1d;         --status-won-fg: #72d699;         --status-won-dot: #22c55e;
    --status-lost-bg: #24262a;        --status-lost-fg: #b4b7bd;        --status-lost-dot: #8a8f98;

    --tag-promotion-bg: #271d42; --tag-promotion-fg: #c7adff;
    --tag-spam-bg: #381a1c;      --tag-spam-fg: #ff9e9e;

    --color-warning-text: #f0a24a;
    --color-warning-text-strong: #f5b765;
    --color-success-text: #5fcf88;
    --color-danger-text: #ff8f8f;
    --color-danger-bg: #b91c1c;
    --color-danger-bg-hover: #c92a2a;
    --color-on-success: #0b0e11;
    --color-note-bg: #2a2416;
    --color-note-border: #4a3c20;
    --color-due-bg: #1d1810;
    --color-due-count-bg: #b45309;
    --color-on-due-count: #ffffff;
    --color-check-ok: #2f9e5f;
    --color-check-today: #5fcf88;
    --color-check-slow: #d9a521;
    --color-check-failed: #e05252;
    --color-check-skipped: #6b7280;
    --color-check-none: #2b333c;
    --color-focus: #6fb0ea;

    --color-card-border: #33404d;
    --color-card-header-bg: #18212a;

    --color-info-bg: #16283a;
    --color-info-border: #24425f;
    --color-info-text: #c3dcf3;
    --color-info-strong: #dcebf9;
    --color-info-icon: #7fb7e8;
    --color-info-tile: #1d3a55;
    --color-success-bg: #122d1d;
    --color-success-border: #1f4a2f;
    --color-success-strong: #b9f0cd;
    --color-success-tint: #10261a;
    --color-warning-bg: #2a2416;
    --color-warning-border: #4a3c20;
    --color-warning-strong: #f7d6a8;
    --color-warning-tint: #221d12;
    --color-warning-tile: #352611;
    --color-error-bg: #381a1c;
    --color-error-border: #5c2a2d;
    --color-error-strong: #ffc9c9;
    --color-card-muted-bg: #151a20;
    --color-border-dashed: #3a4450;

    --avatar-blue-bg: #1d3253;   --avatar-blue-fg: #bcd6ff;
    --avatar-teal-bg: #113d39;   --avatar-teal-fg: #94efdd;
    --avatar-orange-bg: #432e10; --avatar-orange-fg: #fcd49e;
    --avatar-violet-bg: #2c2450; --avatar-violet-fg: #d8ceff;
    --avatar-rose-bg: #471b26;   --avatar-rose-fg: #ffc5cf;
    --avatar-green-bg: #133a23;  --avatar-green-fg: #a6efc1;
    --avatar-slate-bg: #29323e;  --avatar-slate-fg: #cfd8e3;

    --backdrop-dialog: rgb(0 0 0 / 0.6);
    --backdrop-palette: rgb(0 0 0 / 0.5);
    --backdrop-nav: rgb(0 0 0 / 0.55);

    --shadow-dialog: 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.08);
    --shadow-card: 0 1px 3px rgb(0 0 0 / 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #111519;
  --color-sidebar-bg: #171c22;
  --color-page-muted: #0b0e11;
  --color-border: #2b333c;
  --color-border-hover: #3d4855;
  --color-input-border: #6c7a89;
  --color-divider: #20262d;
  --color-row-selected: #1a2028;
  --color-nav-active: #232b35;
  --color-separator: #4a5562;

  --color-text: #e9edf1;
  --color-text-strong: #dfe4e9;
  --color-text-body: #c8d0d8;
  --color-text-secondary: #b0bac4;
  --color-text-muted: #909ba7;

  --color-accent: #9cc5ea;
  --color-accent-alt: #7fb7e8;
  --color-accent-bg: #2f5f8a;
  --color-accent-bg-hover: #3a6d9b;
  --color-on-accent: #ffffff;

  --status-new-bg: #16283a;         --status-new-fg: #93c3ee;         --status-new-dot: #5aa2e0;
  --status-in-progress-bg: #20272f; --status-in-progress-fg: #b7c1cc; --status-in-progress-dot: #8593a3;
  --status-answered-bg: #0f2f2b;    --status-answered-fg: #6fd8c4;    --status-answered-dot: #2dd4bf;
  --status-follow-up-bg: #352611;   --status-follow-up-fg: #f5b765;   --status-follow-up-dot: #f59e0b;
  --status-won-bg: #122d1d;         --status-won-fg: #72d699;         --status-won-dot: #22c55e;
  --status-lost-bg: #24262a;        --status-lost-fg: #b4b7bd;        --status-lost-dot: #8a8f98;

  --tag-promotion-bg: #271d42; --tag-promotion-fg: #c7adff;
  --tag-spam-bg: #381a1c;      --tag-spam-fg: #ff9e9e;

  --color-warning-text: #f0a24a;
  --color-warning-text-strong: #f5b765;
  --color-success-text: #5fcf88;
  --color-danger-text: #ff8f8f;
  --color-danger-bg: #b91c1c;
  --color-danger-bg-hover: #c92a2a;
  --color-on-success: #0b0e11;
  --color-note-bg: #2a2416;
  --color-note-border: #4a3c20;
  --color-due-bg: #1d1810;
  --color-due-count-bg: #b45309;
  --color-on-due-count: #ffffff;
  --color-check-ok: #2f9e5f;
  --color-check-today: #5fcf88;
  --color-check-slow: #d9a521;
  --color-check-failed: #e05252;
  --color-check-skipped: #6b7280;
  --color-check-none: #2b333c;
  --color-focus: #6fb0ea;

  --color-card-border: #33404d;
  --color-card-header-bg: #18212a;

  --color-info-bg: #16283a;
  --color-info-border: #24425f;
  --color-info-text: #c3dcf3;
  --color-info-strong: #dcebf9;
  --color-info-icon: #7fb7e8;
  --color-info-tile: #1d3a55;
  --color-success-bg: #122d1d;
  --color-success-border: #1f4a2f;
  --color-success-strong: #b9f0cd;
  --color-success-tint: #10261a;
  --color-warning-bg: #2a2416;
  --color-warning-border: #4a3c20;
  --color-warning-strong: #f7d6a8;
  --color-warning-tint: #221d12;
  --color-warning-tile: #352611;
  --color-error-bg: #381a1c;
  --color-error-border: #5c2a2d;
  --color-error-strong: #ffc9c9;
  --color-card-muted-bg: #151a20;
  --color-border-dashed: #3a4450;

  --avatar-blue-bg: #1d3253;   --avatar-blue-fg: #bcd6ff;
  --avatar-teal-bg: #113d39;   --avatar-teal-fg: #94efdd;
  --avatar-orange-bg: #432e10; --avatar-orange-fg: #fcd49e;
  --avatar-violet-bg: #2c2450; --avatar-violet-fg: #d8ceff;
  --avatar-rose-bg: #471b26;   --avatar-rose-fg: #ffc5cf;
  --avatar-green-bg: #133a23;  --avatar-green-fg: #a6efc1;
  --avatar-slate-bg: #29323e;  --avatar-slate-fg: #cfd8e3;

  --backdrop-dialog: rgb(0 0 0 / 0.6);
  --backdrop-palette: rgb(0 0 0 / 0.5);
  --backdrop-nav: rgb(0 0 0 / 0.55);

  --shadow-dialog: 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.08);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.4);
}

/* ---------- Print ----------
   Paper is white: printing (the monthly report, stage 7) uses the light
   theme in every theme: the dark blocks' tokens with the values of the
   light :root block; theme_test.go compares them. */

@media print {
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    color-scheme: light;
    --color-bg: #ffffff;
    --color-sidebar-bg: #f7fafc;
    --color-page-muted: #f4f7fa;
    --color-border: #e3ebf1;
    --color-border-hover: #cfdbe5;
    --color-input-border: #8496a8;
    --color-divider: #eef2f5;
    --color-row-selected: #f7fafc;
    --color-nav-active: #e8eff5;
    --color-separator: #cbd5e1;
    --color-text: #171717;
    --color-text-strong: #262626;
    --color-text-body: #404040;
    --color-text-secondary: #525252;
    --color-text-muted: #737373;
    --color-accent: #2c3e50;
    --color-accent-alt: #1e5a8a;
    --color-accent-bg: #2c3e50;
    --color-accent-bg-hover: #22303f;
    --color-on-accent: #ffffff;
    --status-new-bg: #eaf2f9;
    --status-new-fg: #1e5a8a;
    --status-new-dot: #1e5a8a;
    --status-in-progress-bg: #f1f5f9;
    --status-in-progress-fg: #475569;
    --status-in-progress-dot: #64748b;
    --status-answered-bg: #e6f4f1;
    --status-answered-fg: #0f766e;
    --status-answered-dot: #14b8a6;
    --status-follow-up-bg: #fef3e2;
    --status-follow-up-fg: #b45309;
    --status-follow-up-dot: #f59e0b;
    --status-won-bg: #eaf6ee;
    --status-won-fg: #15803d;
    --status-won-dot: #22c55e;
    --status-lost-bg: #f4f4f5;
    --status-lost-fg: #52525b;
    --status-lost-dot: #a1a1aa;
    --tag-promotion-bg: #f3eeff;
    --tag-promotion-fg: #6d28d9;
    --tag-spam-bg: #fdecec;
    --tag-spam-fg: #b91c1c;
    --color-warning-text: #b45309;
    --color-warning-text-strong: #9a4508;
    --color-success-text: #15803d;
    --color-danger-text: #b91c1c;
    --color-danger-bg: #b91c1c;
    --color-danger-bg-hover: #991b1b;
    --color-on-success: #ffffff;
    --color-note-bg: #fff8eb;
    --color-note-border: #fde7c7;
    --color-due-bg: #fffcf5;
    --color-due-count-bg: #b45309;
    --color-on-due-count: #ffffff;
    --color-check-ok: #86efac;
    --color-check-today: #22c55e;
    --color-check-slow: #fcd34d;
    --color-check-failed: #f87171;
    --color-check-skipped: #a1a1aa;
    --color-check-none: #e3ebf1;
    --color-focus: #1e5a8a;
    --color-card-border: #d3e2ec;
    --color-card-header-bg: #f4f9fc;
    --color-info-bg: #eaf2f9;
    --color-info-border: #cfe0ef;
    --color-info-text: #1f3b57;
    --color-info-strong: #163f61;
    --color-info-icon: #1e5a8a;
    --color-info-tile: #d9e8f5;
    --color-success-bg: #eaf6ee;
    --color-success-border: #cdebd6;
    --color-success-strong: #14532d;
    --color-success-tint: #f4fbf6;
    --color-warning-bg: #fff8eb;
    --color-warning-border: #fde7c7;
    --color-warning-strong: #7a3e06;
    --color-warning-tint: #fffcf5;
    --color-warning-tile: #fef3e2;
    --color-error-bg: #fdecec;
    --color-error-border: #f5c2c2;
    --color-error-strong: #7f1d1d;
    --color-card-muted-bg: #fbfcfd;
    --color-border-dashed: #d5dfe7;
    --avatar-blue-bg: #dbeafe;
    --avatar-blue-fg: #1e3a8a;
    --avatar-teal-bg: #ccfbf1;
    --avatar-teal-fg: #115e59;
    --avatar-orange-bg: #fde7c7;
    --avatar-orange-fg: #92400e;
    --avatar-violet-bg: #ede9fe;
    --avatar-violet-fg: #5b21b6;
    --avatar-rose-bg: #ffe4e6;
    --avatar-rose-fg: #9f1239;
    --avatar-green-bg: #dcfce7;
    --avatar-green-fg: #166534;
    --avatar-slate-bg: #e2e8f0;
    --avatar-slate-fg: #334155;
    --backdrop-dialog: rgb(15 23 42 / 0.35);
    --backdrop-palette: rgb(15 23 42 / 0.25);
    --backdrop-nav: rgb(15 23 42 / 0.3);
    --shadow-dialog: 0 24px 48px -12px rgb(15 23 42 / 0.25), 0 0 0 1px rgb(15 23 42 / 0.04);
    --shadow-card: 0 1px 3px rgb(44 62 80 / 0.08);
  }
}

/* css/base.css */
/* Base: reset, typography, focus. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Elements scrolled into view (J/K in lists, Tab, anchors) stop below the
   sticky top bar instead of disappearing under it (WCAG 2.4.11). */
html { scroll-padding-top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 8px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "ss01" off;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: var(--color-accent-alt); }
a:hover { color: var(--color-accent); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

img, svg { display: block; }

/* The hidden attribute must win over component display rules (.btn etc.). */
[hidden] { display: none !important; }
.icon { flex-shrink: 0; }

/* Visible focus for keyboard users (WCAG 2.4.7), never for mouse clicks. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mono { font-family: var(--font-mono); }
.muted { color: var(--color-text-muted); }
.sep { color: var(--color-separator); }
/* A domain stays on one line, never broken at its hyphen ("seeblick-
   kuechen.ch"), and ends in an ellipsis where it is wider than its line
   (the template function domain gives it its whole text as title);
   .nowrap keeps a figure with its unit ("1 Tag"). */
.domain {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--color-accent-bg); color: var(--color-on-accent); text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--color-on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* css/layout.css */
/* App shell: sidebar, top bar, page header, footer hints (mockup 01). */

.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px;
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
}

.org-switch { position: relative; }

.org-switch__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-14);
  font-weight: 500;
  text-align: left;
  list-style: none;
}
.org-switch__button::-webkit-details-marker { display: none; }
.org-switch__button:hover { background: var(--color-nav-active); }
.org-switch__button .icon { color: var(--color-text-muted); }

.org-switch__tile {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--color-accent-bg);
  color: var(--color-on-accent);
  font-size: var(--fs-12);
  font-weight: 600;
}

.org-switch__name { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.org-switch__menu {
  position: absolute;
  top: 44px; left: 0; right: 0;
  z-index: 20;
  margin: 0; padding: 4px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dialog);
}
.org-switch__menu a {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 8px;
  border-radius: var(--radius);
  color: var(--color-text-body);
  text-decoration: none;
  font-size: var(--fs-13-5);
}
.org-switch__menu a:hover, .org-switch__menu a[aria-current="true"] { background: var(--color-nav-active); color: var(--color-accent); }

.search-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--fs-13-5);
  text-align: left;
}
.search-button span { flex-grow: 1; }
.search-button:hover { border-color: var(--color-border-hover); }

.nav { display: flex; flex-direction: column; gap: 1px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--nav-item-height);
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--color-text-body);
  text-decoration: none;
  font-size: var(--fs-13-5);
}
.nav__item:hover { background: var(--color-nav-active); color: var(--color-text); }
.nav__item[aria-current="page"] {
  background: var(--color-nav-active);
  color: var(--color-accent);
  font-weight: 500;
}
.nav__label { flex-grow: 1; }
.nav__count { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-muted); }
/* Muted grey and the warning orange fall below 4.5:1 on the tinted
   hover/active background; use the darker variants there. */
.nav__item:hover .nav__count { color: var(--color-text-secondary); }
.nav__item[aria-current="page"] .nav__count { color: inherit; }
.nav__count.nav__count--warning { color: var(--color-warning-text); }
.nav__item:hover .nav__count--warning,
.nav__item[aria-current="page"] .nav__count--warning { color: var(--color-warning-text-strong); }

.sites { display: flex; flex-direction: column; gap: 1px; }
.sites__heading { padding: 0 8px 6px; font-size: var(--fs-12); font-weight: 500; color: var(--color-text-muted); }
.sites__item { height: 32px; font-size: var(--fs-13); }
.sites__status {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 0;
  font-size: var(--fs-12);
  color: var(--color-success-text);
}

.site-square {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  background: var(--site-color, var(--site-1));
}

.sidebar__spacer { flex-grow: 1; }

.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px;
}
.user-row__name { flex-grow: 1; min-width: 0; font-size: var(--fs-13-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Main column ---------- */

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-13-5);
}
.topbar__menu.btn { display: none; }
.breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.breadcrumb li + li::before { content: "/"; color: var(--color-separator); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb [aria-current="page"] { font-weight: 500; }
/* A long current crumb ("Jonas Berger, SEO-Agentur" on a phone) is cut
   with an ellipsis instead of widening the page (stage 7, P1). The links
   before it keep their width and their focus ring. */
.topbar > nav { min-width: 0; }
.breadcrumb li:last-child { min-width: 0; }
.breadcrumb [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar__spacer { flex-grow: 1; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px var(--page-gutter) 0;
}
.page-title {
  margin: 0;
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--color-text-muted); }

.page-body { padding: 24px var(--page-gutter) 32px; }

.footer-hints {
  margin-top: auto;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--page-gutter);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-12-5);
  color: var(--color-text-muted);
}
.footer-hints__item { display: flex; align-items: center; gap: 6px; }
/* Single-key shortcuts turned off on this device (keys.js). */
[data-single-keys="off"] .footer-hints__item { display: none; }

/* ---------- Installed app on notched phones (viewport-fit=cover) ------ */

.sidebar {
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
}
.topbar {
  height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.footer-hints { padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(44px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Mobile: the sidebar becomes an off-canvas menu ---------- */

.nav-backdrop { display: none; }

@media (max-width: 860px) {
  /* Closed, the menu is hidden (not only moved off-screen), so its links
     leave the tab order and the screen reader's reading order; visibility
     switches after the slide-out. :target opens it without JavaScript. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(86vw, 300px);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
    box-shadow: var(--shadow-dialog);
  }
  .nav-open .sidebar, .sidebar:target {
    transform: none;
    visibility: visible;
    transition: transform 0.18s ease-out, visibility 0s;
  }
  .nav-open .nav-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 40;
    background: var(--backdrop-nav);
  }
  .topbar {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
  }
  .page-body { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .topbar__menu.btn { display: inline-flex; margin-left: -6px; }
  .breadcrumb li:not(:last-child) { display: none; }
  .breadcrumb li + li::before { content: none; }
  .page-header { padding-top: 20px; }
  .footer-hints { display: none; }
}

/* css/components.css */
/* Reusable components: buttons, kbd, avatars, badges, forms, cards,
 * dialogs, command palette, empty states. Values follow the mockups. */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-height);
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text-body);
  font-size: var(--fs-13);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { border-color: var(--color-border-hover); color: var(--color-text); }
.btn--primary {
  padding: 0 12px;
  border-color: var(--color-accent-bg);
  background: var(--color-accent-bg);
  color: var(--color-on-accent);
  font-weight: 500;
}
.btn--primary:hover { background: var(--color-accent-bg-hover); border-color: var(--color-accent-bg-hover); color: var(--color-on-accent); }
.btn--block { width: 100%; height: 38px; font-size: var(--fs-14); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover { background: var(--color-nav-active); color: var(--color-text); border-color: transparent; }
.btn--icon { width: 32px; padding: 0; }

/* ---------- Keyboard keys ---------- */

.kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-sidebar-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: 16px;
  text-align: center;
}
.search-button .kbd { color: var(--color-text-muted); }
.keys { display: inline-flex; align-items: center; gap: 4px; }
.keys__then { font-size: var(--fs-12); color: var(--color-text-muted); }

/* ---------- Avatars ---------- */

.avatar {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--avatar-bg, var(--avatar-blue-bg));
  color: var(--avatar-fg, var(--avatar-blue-fg));
  font-size: var(--fs-10);
  font-weight: 600;
}
.avatar--lg { width: 24px; height: 24px; font-size: 10.5px; }
.avatar--blue { --avatar-bg: var(--avatar-blue-bg); --avatar-fg: var(--avatar-blue-fg); }
.avatar--teal { --avatar-bg: var(--avatar-teal-bg); --avatar-fg: var(--avatar-teal-fg); }
.avatar--orange { --avatar-bg: var(--avatar-orange-bg); --avatar-fg: var(--avatar-orange-fg); }
.avatar--violet { --avatar-bg: var(--avatar-violet-bg); --avatar-fg: var(--avatar-violet-fg); }
.avatar--rose { --avatar-bg: var(--avatar-rose-bg); --avatar-fg: var(--avatar-rose-fg); }
.avatar--green { --avatar-bg: var(--avatar-green-bg); --avatar-fg: var(--avatar-green-fg); }
.avatar--slate { --avatar-bg: var(--avatar-slate-bg); --avatar-fg: var(--avatar-slate-fg); }

/* ---------- Website colour squares ---------- */

.site-1 { --site-color: var(--site-1); }
.site-2 { --site-color: var(--site-2); }
.site-3 { --site-color: var(--site-3); }
.site-4 { --site-color: var(--site-4); }
.site-5 { --site-color: var(--site-5); }
.site-6 { --site-color: var(--site-6); }
.site-7 { --site-color: var(--site-7); }
.site-8 { --site-color: var(--site-8); }

/* ---------- Status badges (dot + text on a light background) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--fs-12-5);
  font-weight: 500;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--badge-dot);
}
.badge--new { --badge-bg: var(--status-new-bg); --badge-fg: var(--status-new-fg); --badge-dot: var(--status-new-dot); }
.badge--in_progress { --badge-bg: var(--status-in-progress-bg); --badge-fg: var(--status-in-progress-fg); }
.badge--in_progress::before { background: transparent; border: 1.5px solid var(--status-in-progress-dot); }
.badge--answered { --badge-bg: var(--status-answered-bg); --badge-fg: var(--status-answered-fg); --badge-dot: var(--status-answered-dot); }
.badge--follow_up { --badge-bg: var(--status-follow-up-bg); --badge-fg: var(--status-follow-up-fg); --badge-dot: var(--status-follow-up-dot); }
.badge--won { --badge-bg: var(--status-won-bg); --badge-fg: var(--status-won-fg); --badge-dot: var(--status-won-dot); }
.badge--lost, .badge--closed { --badge-bg: var(--status-lost-bg); --badge-fg: var(--status-lost-fg); --badge-dot: var(--status-lost-dot); }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-13); font-weight: 500; color: var(--color-text-strong); }
.field__label .optional { font-weight: 400; color: var(--color-text-muted); }
.field__help { font-size: var(--fs-12-5); color: var(--color-text-muted); }

.input, .select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: var(--fs-14);
}
.input:hover, .select:hover { border-color: var(--color-text-secondary); }
.input:focus-visible, .select:focus-visible { outline-offset: 0; border-color: var(--color-focus); }

/* Info boxes (stage 7d): a status, not a description. A plain box holds
   a sentence (flash messages); with an .alert__body it lays out as the
   design's box: the icon (or .alert__tile around it) on the left, an
   optional bold .alert__title, the text and .alert__actions:

     <div class="alert alert--info" role="status">
       {{icon "info" 16}}
       <div class="alert__body">
         <p class="alert__title">…</p><p>…</p>
         <div class="alert__actions">…</div>
       </div>
     </div>

   .alert--lead is the large box of an empty page (Formulare-Leer). */
.alert {
  --alert-bg: var(--color-info-bg); --alert-border: var(--color-info-border);
  --alert-fg: var(--color-info-text); --alert-strong: var(--color-info-strong);
  --alert-icon: var(--color-info-icon); --alert-tile: var(--color-info-tile);
  padding: 11px 14px;
  border: 1px solid var(--alert-border);
  border-radius: var(--radius-md);
  background: var(--alert-bg);
  color: var(--alert-fg);
  font-size: var(--fs-13-5);
  line-height: 1.5;
}
.alert--success {
  --alert-bg: var(--color-success-bg); --alert-border: var(--color-success-border);
  --alert-fg: var(--color-success-strong); --alert-strong: var(--color-success-strong);
  --alert-icon: var(--color-success-text); --alert-tile: var(--color-success-tint);
}
.alert--warning {
  --alert-bg: var(--color-warning-bg); --alert-border: var(--color-warning-border);
  --alert-fg: var(--color-warning-strong); --alert-strong: var(--color-warning-strong);
  --alert-icon: var(--color-warning-text); --alert-tile: var(--color-warning-tile);
}
.alert--error {
  --alert-bg: var(--color-error-bg); --alert-border: var(--color-error-border);
  --alert-fg: var(--color-error-strong); --alert-strong: var(--color-error-strong);
  --alert-icon: var(--color-danger-text); --alert-tile: var(--color-error-bg);
}
.alert > .icon { color: var(--alert-icon); }
.alert:has(> .alert__body) { display: flex; align-items: flex-start; gap: 10px; }
.alert:has(> .alert__body) > .icon { flex: none; margin-top: 2px; }
.alert__tile {
  width: 32px; height: 32px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--alert-tile);
  color: var(--alert-icon);
}
.alert__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.alert__body > p { margin: 0; }
.alert__title { font-weight: 600; color: var(--alert-strong); }
.alert__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 18px; }
.alert__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; }
.alert a:not(.btn) { color: inherit; }
.alert__actions .btn:not(.btn--primary) { border-color: var(--alert-border); color: var(--color-accent-alt); }
.alert--lead { gap: 14px; padding: 20px 22px; border-radius: var(--radius-lg); }
.alert--lead .alert__title { font-size: 15px; }
.alert--lead .alert__body > p:not(.alert__title) { max-width: 640px; line-height: 1.55; }
.help__notice { display: none; margin-bottom: 16px; }
[data-single-keys="off"] .help__notice { display: block; }

/* ---------- Settings rows ---------- */

.setting { display: flex; flex-direction: column; gap: 8px; }
.setting .field__help { display: flex; align-items: center; gap: 6px; }
.setting__status { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13-5); color: var(--color-text-secondary); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13-5); }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Kopiert" on one line with its button (stage 7d): the check mark and
   the word never wrap apart, and never below the button. */
.copy-inline { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.copy-status {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--color-success-text);
  font-size: var(--fs-13-5); font-weight: 500;
  white-space: nowrap;
}

/* ---------- Cards and sections ---------- */

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.section { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.section__title { font-size: var(--fs-14); font-weight: 600; }

/* ---------- Empty states ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 64px auto;
  text-align: center;
}
.empty-state__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-sidebar-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.empty-state__title { font-size: var(--fs-16); font-weight: 600; }
.empty-state__body { font-size: var(--fs-13-5); color: var(--color-text-muted); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; }

/* ---------- Dialogs (mockup 02) ---------- */

.dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-dialog);
}
.dialog::backdrop { background: var(--backdrop-dialog); }
.dialog__header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-divider);
}
.dialog__title { font-size: var(--fs-16); font-weight: 600; }
.dialog__body { padding: 16px 24px 20px; }
.dialog__close { margin-left: auto; }

/* ---------- Keyboard help ---------- */

.shortcut-group { display: flex; flex-direction: column; gap: 2px; }
.shortcut-group + .shortcut-group { margin-top: 18px; }
.shortcut-group__title { margin-bottom: 6px; font-size: var(--fs-12); font-weight: 500; color: var(--color-text-muted); }
.shortcut {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 32px;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-13-5);
}

/* ---------- Command palette ---------- */

.palette {
  width: min(560px, calc(100vw - 32px));
  margin-top: 12vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  box-shadow: var(--shadow-dialog);
}
.palette::backdrop { background: var(--backdrop-palette); }
.palette__search {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-muted);
}
.palette__input {
  flex-grow: 1;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-14-5);
}
.palette__input:focus-visible { outline: none; }
.palette__list { max-height: min(420px, 60vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.palette__group {
  padding: 10px 10px 4px;
  font-size: var(--fs-11-5);
  font-weight: 500;
  color: var(--color-text-muted);
}
.palette__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-body);
  font-size: var(--fs-13-5);
  text-align: left;
  text-decoration: none;
}
.palette__item .keys { margin-left: auto; }
.palette__item[aria-selected="true"] { background: var(--color-nav-active); color: var(--color-accent); }
.palette__item[aria-selected="true"] .keys__then,
.palette__item[aria-selected="true"] .palette__meta { color: var(--color-text-secondary); }
/* Inquiry search results: name, subject, date. */
.palette__item--inquiry > span:first-of-type { flex-shrink: 0; font-weight: 500; }
.palette__detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); }
.palette__item[aria-selected="true"] .palette__detail { color: var(--color-text-secondary); }
.palette__meta { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-muted); }
.palette__empty { padding: 20px; text-align: center; font-size: var(--fs-13-5); color: var(--color-text-muted); }
.palette__footer {
  display: flex; gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--color-divider);
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
.palette__footer span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Auth pages ---------- */

.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--color-page-muted);
}
.auth__card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
}
.auth__brand { display: flex; align-items: center; gap: 10px; font-size: var(--fs-14-5); font-weight: 600; }
.auth__title { font-size: var(--fs-22); font-weight: 600; letter-spacing: -0.02em; }
.auth__subtitle { margin-top: 4px; font-size: var(--fs-13-5); color: var(--color-text-muted); }
.auth__form { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Error pages ---------- */

.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
/* Inside the app shell (stage 7, layout B3): below the top bar. */
.error-body { display: flex; justify-content: center; padding-top: 72px; }

/* css/inquiries.css */
/* Inquiry list (mockup 01) and inquiry detail (mockup 03). Values follow
 * the mockups; colours come from tokens.css. */

/* ---------- Shared bits ---------- */

.page-meta__sep { color: var(--color-separator); }
.stat strong { color: var(--color-accent); font-weight: 600; }
.stat--warning strong { color: var(--color-warning-text); }

.btn__count {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-bg);
  color: var(--color-on-accent);
  font-size: var(--fs-11);
  line-height: 18px;
}
.btn--sm { height: 30px; font-size: var(--fs-12-5); }
.btn[aria-disabled="true"] { color: var(--color-separator); pointer-events: none; }

.badge--ok { --badge-bg: var(--status-won-bg); --badge-fg: var(--status-won-fg); --badge-dot: var(--status-won-dot); }
.badge--promotion { --badge-bg: var(--tag-promotion-bg); --badge-fg: var(--tag-promotion-fg); --badge-dot: var(--tag-promotion-dot); }
.badge--spam { --badge-bg: var(--tag-spam-bg); --badge-fg: var(--tag-spam-fg); --badge-dot: var(--tag-spam-dot); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 19px;
  padding: 0 6px;
  margin-right: 4px;
  border-radius: 5px;
  background: var(--status-in-progress-bg);
  color: var(--status-in-progress-fg);
  font-size: var(--fs-11-5);
  font-weight: 500;
  vertical-align: 1px;
}

.site-label {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12-5);
  color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The domain gets a span of its own in the lists: the text of a flex
   container is an anonymous item that never shows an ellipsis. */
.site-label__domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}
.person { display: flex; align-items: center; gap: 8px; }
.avatar--sm { width: 20px; height: 20px; font-size: 9.5px; }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-alt);
  font-size: var(--fs-12-5);
  cursor: pointer;
}
.link-button:hover { color: var(--color-accent); text-decoration: underline; }

/* Flash message with optional undo. */
.flash {
  display: flex; align-items: center; gap: 12px;
  margin: 16px var(--page-gutter) 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--status-won-bg);
  color: var(--status-won-fg);
  font-size: var(--fs-13-5);
}
.flash--error { background: var(--tag-spam-bg); color: var(--tag-spam-fg); }
/* Someone else was quicker and nothing changed: neither done nor an
   error ("Erinnerungen", stage 7d). */
.flash--notice { background: var(--color-note-bg); color: var(--color-warning-text); }
/* Messages focused on load for screen readers (app.js); not controls. */
[data-flash]:focus-visible { outline: none; }
.flash form { margin-left: auto; }
.flash__action {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none;
  color: inherit;
  font-weight: 500;
  cursor: pointer;
}
.flash__action:hover { text-decoration: underline; }
/* On a phone "Rückgängig" is a target a finger can hit (44 px), reaching
   into the flash's padding so the flash keeps its height. */
@media (max-width: 860px) {
  .flash__action { min-height: 44px; margin: -8px -4px; padding: 0 4px; }
}
/* A link in a flash ("Öffnen" after a capture, the released inquiry on
   "Aussortiert"): on the right, underlined, so it reads as a link. */
.flash__link { margin-left: auto; text-decoration: underline; }

/* Disclosure menus (filter, status, assignee, appointment, templates). */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-dialog);
}
.menu--up .menu__panel { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.menu__list { display: flex; flex-direction: column; gap: 1px; }
.menu__item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-body);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--color-nav-active); color: var(--color-text); }
.menu__item[aria-current="true"] { background: var(--color-row-selected); font-weight: 500; }
.menu__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-divider); }
.menu__heading { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; font-size: var(--fs-12-5); color: var(--color-text-secondary); }
.menu__form, .filter-form { display: flex; flex-direction: column; gap: 12px; width: 280px; padding: 12px; }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.tabs__tab {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-13-5);
  text-decoration: none;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab[aria-current="page"] { border-bottom-color: var(--color-accent); color: var(--color-accent); font-weight: 500; }
.tabs__count { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400; }

/* The inbox's tab "Aussortiert": a line on what it holds, and the kinds
   as a segmented control, so they read as a filter of the tab rather than
   as a second row of tabs. */
.screened-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0 6px;
}
.screened-bar__intro { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--color-text-muted); }
.segmented { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--color-border); border-radius: 8px; }
.segmented__item {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px; border-radius: 6px;
  color: var(--color-text-muted); font-size: var(--fs-12-5);
  text-decoration: none; white-space: nowrap;
}
.segmented__item:hover { color: var(--color-text); }
.segmented__item[aria-current="page"] { background: var(--color-nav-active); color: var(--color-accent); font-weight: 500; }
.segmented__count { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400; }

/* ---------- Inquiry table ---------- */

.list-body { padding: 0 var(--page-gutter) 24px; }
.page-header + .list-body { margin-top: 18px; }

.inquiry-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-13-5);
}
.inquiry-table th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  font-size: var(--fs-12);
  font-weight: 500;
  text-align: left;
}
.inquiry-table td { padding: 0 8px; }
.col-status { width: 118px; }
.col-website { width: 214px; }
.col-source { width: 136px; color: var(--color-text-secondary); }
.col-assignee { width: 130px; }
.col-received { width: 128px; text-align: right; }
.inquiry-table th.col-received { text-align: right; }

.inquiry-row {
  height: var(--row-height);
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
}
.inquiry-row:hover, .inquiry-row[data-selected] { background: var(--color-row-selected); }
.inquiry-row[data-selected] { box-shadow: inset 2px 0 0 var(--color-accent); }
.col-inquiry { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inquiry-row__name { color: var(--color-text); font-weight: 600; text-decoration: none; }
.inquiry-row__name:hover { color: var(--color-text); text-decoration: underline; }
.inquiry-row__subject { color: var(--color-text-muted); }
.col-received time { font-family: var(--font-mono); font-size: var(--fs-12-5); color: var(--color-text-secondary); }
.col-received .overdue { color: var(--color-warning-text); font-weight: 500; }

/* ---------- Screened (mockup 05) ---------- */

.page-intro { margin: 0; max-width: 760px; font-size: var(--fs-13-5); line-height: 1.55; color: var(--color-text-muted); }

/* Column widths on the header cells (table-layout: fixed), so the phone
   layout below is free of them. The mockup's widths exclude the 8 px
   padding on either side. */
.screened-table th.col-kind { width: 136px; }
.screened-table th.col-reason { width: 276px; }
.screened-table th.col-website { width: 226px; }
.screened-table th.col-received { width: 96px; }
.screened-table th.col-release { width: 136px; }
.screened-row { height: 62px; }
.screened-row .col-sender { overflow: hidden; line-height: 1.3; }
.screened-row .col-sender .inquiry-row__name,
.screened-row .col-sender .inquiry-row__subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screened-row .col-sender .inquiry-row__subject { margin-top: 2px; }
.screened-row .col-reason { color: var(--color-text-secondary); line-height: 1.45; }
.screened-row .col-release { text-align: right; }
.release-button { color: var(--color-accent-alt); font-weight: 500; }
.release-button:hover { color: var(--color-accent); }
/* "… und 12 weitere" below a list cut at its limit. */
.list-more { margin: 12px 8px 0; font-size: var(--fs-13); color: var(--color-text-secondary); }

/* The three cards below the table. */
.hint-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.hint-card {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-sidebar-bg);
}
.hint-card__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}
.hint-card__icon .icon { stroke-width: 2; }
.hint-card__icon--blue { background: var(--status-new-bg); color: var(--status-new-fg); }
.hint-card__icon--teal { background: var(--status-answered-bg); color: var(--status-answered-fg); }
.hint-card__icon--orange { background: var(--status-follow-up-bg); color: var(--status-follow-up-fg); }
.hint-card__text { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-13); line-height: 1.5; color: var(--color-text-secondary); }
.hint-card__title { font-size: var(--fs-13-5); font-weight: 600; line-height: normal; color: var(--color-text); }

.footer-hints__link {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
  color: var(--color-accent-alt);
  text-decoration: none;
}
.footer-hints__link:hover { text-decoration: underline; }

/* ---------- Detail ---------- */

.pager { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-muted); }
.topbar__divider { width: 1px; height: 20px; margin: 0 4px; background: var(--color-border); }

.detail { display: flex; flex-grow: 1; min-height: calc(100vh - var(--topbar-height)); min-height: calc(100dvh - var(--topbar-height)); }
.detail__main {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 40px;
}
.detail__main .flash { margin: 0; }
/* Lines stay readable on wide screens (stage 7, D1): up to 1440 px the
   column is narrower than this anyway (mockup 03). */
.detail__main > * { max-width: 880px; }
.detail__header { display: flex; flex-direction: column; gap: 8px; }
.detail__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail__contact { font-size: var(--fs-13-5); color: var(--color-text-muted); }
.detail__section { display: flex; flex-direction: column; gap: 14px; }
.detail__heading { margin: 0; font-size: var(--fs-12-5); font-weight: 500; color: var(--color-text-muted); }

.fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
  font-size: var(--fs-13-5);
}
.fields dt { font-size: var(--fs-12); color: var(--color-text-muted); }
.fields dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.fields dd.mono { font-size: var(--fs-13); }
.fields a[href^="tel:"] { color: inherit; text-decoration: none; }
.fields a[href^="tel:"]:hover { text-decoration: underline; }

.message-card {
  overflow: hidden;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}
.message-card__header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--color-card-border);
  background: var(--color-card-header-bg);
  font-size: var(--fs-13);
}
.message-card__icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--color-accent-bg);
  color: var(--color-on-accent);
}
.message-card__title { flex-grow: 1; min-width: 0; }
.message-card__title strong { font-weight: 600; color: var(--color-text); }
.message-card__time { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-secondary); white-space: nowrap; }
/* Muted grey is below 4.5:1 on the tinted header. */
.message-card__header .muted { color: var(--color-text-secondary); }
.message-card__body {
  display: flex; flex-direction: column; gap: 9px;
  padding: 18px 20px;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
/* Attachments below the message (mockup 03: "2 Anhänge" and one button
   per file). Downloads only; files are never shown inline. */
.message-card__attachments {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-divider);
}
.message-card__attachments-label { margin-right: 4px; font-size: var(--fs-12); color: var(--color-text-muted); }
.attachment {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text-body);
  font-size: var(--fs-12-5);
  text-decoration: none;
}
.attachment:hover { border-color: var(--color-card-border); background: var(--color-card-header-bg); }
.attachment__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment__size { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--fs-11-5); }
/* A file the virus scan has not released (docs/security.md "Attachments"):
   no link, the name and why it is blocked. */
.attachment--blocked { border-style: dashed; background: transparent; color: var(--color-text-muted); }
.attachment--blocked:hover { border-color: var(--color-border); background: transparent; }
.attachment__note { flex-shrink: 0; font-size: var(--fs-11-5); }
.attachment--failed .attachment__note { color: var(--color-warning-text); }
.attachment--infected .attachment__name { text-decoration: line-through; }
.attachment--infected .attachment__note { color: var(--color-danger-text); }
/* A failed file WP Profis released by hand: a link that says it was not
   checked; staff see who, when and why. Staff get "Freigeben" on a
   failed file, everyone else who to ask. */
.attachment--released { border-style: dashed; }
.attachment--released .attachment__note { color: var(--color-warning-text); }
.attachment__detail { font-size: var(--fs-11-5); color: var(--color-text-muted); }
.attachment__release > summary { list-style: none; cursor: pointer; font-size: var(--fs-12-5); }
.attachment__release > summary::-webkit-details-marker { display: none; }
.attachment__release[open] { flex-basis: 100%; }
.attachment__release-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; padding-top: 10px; }

/* Activity timeline. */
.timeline { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-13-5); }
.timeline__item { display: flex; align-items: flex-start; gap: 10px; }
.timeline__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
}
.timeline__icon--blue { background: var(--status-new-bg); color: var(--status-new-fg); }
.timeline__icon--teal { background: var(--status-answered-bg); color: var(--status-answered-fg); }
.timeline__icon--slate { background: var(--status-in-progress-bg); color: var(--status-in-progress-fg); }
.timeline__icon--warning { background: var(--color-warning-tile); color: var(--color-warning-strong); }
.timeline__content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.timeline__line { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.timeline__text { flex-grow: 1; min-width: 0; }
.timeline__text strong { font-weight: 600; }
.timeline__time { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-muted); white-space: nowrap; }
.timeline__body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.timeline__body--note { padding: 10px 12px; border-color: var(--color-note-border); background: var(--color-note-bg); line-height: 1.55; }
.timeline__body--call { background: var(--color-sidebar-bg); }

/* Composer. */
.composer { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.composer:focus-within { border-color: var(--color-border-hover); }
/* The text field itself has no outline; the whole composer shows the
   focus ring instead (WCAG 2.4.7). */
.composer:has(.composer__input:focus) { border-color: var(--color-focus); box-shadow: 0 0 0 1px var(--color-focus); }
.composer__tabs { display: flex; gap: 16px; padding: 0 14px; border-bottom: 1px solid var(--color-divider); }
.composer__tab {
  display: inline-flex; align-items: center;
  height: 36px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-13);
  cursor: pointer;
}
.composer__tab input { position: absolute; opacity: 0; pointer-events: none; }
.composer__tab:has(input:checked) { border-bottom-color: var(--color-accent); color: var(--color-accent); font-weight: 500; }
.composer__tab:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.composer__tab:has(input:disabled) { color: var(--color-separator); cursor: not-allowed; }
.composer__error { margin: 10px 14px 0; color: var(--color-danger-text); font-size: var(--fs-13); }
/* Why replying by email is not possible; shown in every tab. */
.composer__notice { margin: 10px 14px 0; color: var(--color-text-secondary); font-size: var(--fs-13); }
.composer__notice:focus-visible { outline-offset: 4px; }
/* A reply refused because someone else replied or called meanwhile
   ("Luca hat um 10:42 bereits geantwortet."), with "Trotzdem senden" and
   "Verwerfen"; focused on load (detail.js). */
.conflict {
  margin: 10px 14px 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--status-follow-up-bg);
  color: var(--status-follow-up-fg);
  font-size: var(--fs-13);
}
.conflict:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.conflict__text { margin: 0 0 8px; }
.conflict__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Live notice (live.js): fixed above the footer hints, so it never moves
   a row under the selection. Empty, it takes no room and stays a live
   region for screen readers. */
.live {
  position: fixed;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-bg);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-dialog);
  font-size: var(--fs-13-5);
}
.live:empty { padding: 0; box-shadow: none; }
/* Reloading would lose a draft: the notice says so in the warning colours. */
.live--draft { background: var(--status-follow-up-bg); color: var(--status-follow-up-fg); }
.live__action {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.live__action:hover { text-decoration: underline; }
.live__action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 860px) {
  .live { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
.composer__input {
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-14);
  line-height: 1.55;
  resize: vertical;
}
.composer__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px 10px 14px; }
.composer__for { display: none; align-items: center; gap: 10px; min-width: 0; }
.composer:has(input[name="kind"][value="reply"]:checked) .composer__for--reply,
.composer:has(input[name="kind"][value="note"]:checked) .composer__for--note,
.composer:has(input[name="kind"][value="call"]:checked) .composer__for--call { display: flex; }
.composer__hint { font-size: var(--fs-12-5); color: var(--color-text-muted); }
.composer__directions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.composer__direction { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12-5); color: var(--color-text-secondary); }
.composer__spacer { flex-grow: 1; }
/* The outcome of a call we made and "Nochmals anrufen" for one nobody
   answered (stage 7b, §4.5.4): shown by the radios' state, no script. A
   floated legend is laid out as a flex item, so it reads "Ergebnis:" in
   line with the choices and stays the group's name. */
.composer__for--call { flex-wrap: wrap; row-gap: 8px; }
.composer__outcome, .composer__again { display: none; }
.composer:has(input[name="direction"][value="outbound"]:checked) .composer__outcome,
.composer:has(input[name="direction"][value="outbound"]:checked):has(input[name="reached"][value="0"]:checked) .composer__again { display: flex; }
.composer__outcome, .composer__again { padding-left: 10px; border-left: 1px solid var(--color-divider); }
.composer__legend { float: left; padding: 0; font-size: var(--fs-12-5); font-weight: 500; color: var(--color-text-muted); }

/* A callback ("Rückruf", stage 7b): its tag in the header and the list,
   and the request on the message card. */
.tag--callback { background: var(--status-new-bg); color: var(--status-new-fg); }
.message-card__callback a { font-family: var(--font-mono); }
/* The page's address: the domain on one line (.domain, cut with an
   ellipsis only where it is wider than the card; the link's title has
   the whole address), the path after it free to wrap. An inline block
   does not take its link's underline, so the domain draws its own; and
   it would split the link's name from its content in two ("…ch
   /kontakt/"), so the link is named by its whole label (aria-label). */
.message-card__page { overflow-wrap: break-word; }
.message-card__page a { color: inherit; }
.message-card__page a .domain { text-decoration: inherit; }
.fields__wide { grid-column: 1 / -1; }
.fields__wide dd p + p { margin-top: 6px; }
/* The service of an inquiry: a chip in the list and the property. */
.service-chip {
  display: inline-flex; align-items: center;
  max-width: 100%;
  height: 19px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  color: var(--color-text-secondary);
  font-size: var(--fs-11-5);
  font-weight: 500;
  vertical-align: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.props__hint { font-size: var(--fs-12); color: var(--color-text-muted); }
/* An inquiry's service archived since: said beside the chip, in the
   colour of the form card's "… ist archiviert" (websites.css). */
.props__hint--archived { color: var(--color-warning-text); }
/* The service and how it was set wrap in the narrow properties column. */
.props__value[data-service-value] { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
/* Name, tags, subject and chip of a list row. On a wide screen they
   share one line: the name and the tags first, then the subject, which
   takes the room left and ends with an ellipsis but keeps at least eight
   characters, then the chip, whole. What does not fit wraps onto a further
   line as a whole: a callback's tag, number and "Ich rufe zurück" (never
   cut, each an item of the line), the chip (cut with an ellipsis only
   where it is wider than the cell), the subject where fewer than eight
   characters are left beside the name. Nothing shrinks to make room,
   which would cut by a fraction of a pixel (an ellipsis). The line is a
   container (the cell, a table cell, cannot be one), so a narrow cell
   changes the order below. */
.inquiry-row__line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  min-width: 0;
  container: inquiry-line / inline-size;
}
.inquiry-row__line > * { flex: none; }
/* A callback's parts wrap a little further apart (on phones too). */
.inquiry-row__line:has(> .inquiry-row__callback) { row-gap: 4px; }
/* A name too long for the cell ends with an ellipsis. */
.inquiry-row__line > .inquiry-row__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inquiry-row__line > .inquiry-row__callback { display: contents; }
/* The subject's basis is eight characters (or its whole text, when
   shorter, through max-width): a line with less room left wraps it. */
.inquiry-row__line > .inquiry-row__subject { flex: 1 1 8ch; min-width: 0; max-width: max-content; overflow: hidden; text-overflow: ellipsis; }
.inquiry-row__line > .inquiry-row__service { flex: 0 1 auto; min-width: 0; }
/* A narrow "Anfrage" cell (a tablet, a narrow window, a laptop showing
   every column, up to about 1550 px): the subject was squeezed beside the
   name, a callback's parts, the reminder's chip and the service to a word
   or two ("Offerte Einb…" at 1440 px, stage 7d review). It gets the last
   line of its own and the whole width of the cell, as on a phone; the
   name, the tags and the chip stay on the first line while they fit. */
@media (min-width: 861px) {
  .inquiry-row .col-inquiry { padding-top: 6px; padding-bottom: 6px; }
  @container inquiry-line (max-width: 520px) {
    .inquiry-row__line > .inquiry-row__subject { order: 1; flex-basis: 100%; max-width: none; }
  }
}
/* The chip is a flex container, whose text would be an anonymous item
   that never shows an ellipsis: the name gets a span of its own (the
   detail page's property; the list's visible part). The full name is in
   the chip's title. */
.service-chip__name,
.inquiry-row__service > [aria-hidden] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inquiry-row__callback { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; vertical-align: 1px; }
.inquiry-row__callback .tag { margin-right: 0; }
.inquiry-row__phone { font-family: var(--font-mono); font-size: var(--fs-12-5); color: var(--color-text-secondary); white-space: nowrap; }
.inquiry-row__take { display: inline; }
.inquiry-row__take .link-button { font-size: var(--fs-12-5); font-weight: 500; color: var(--color-accent-alt); white-space: nowrap; }
.inquiry-row__take .link-button:hover { color: var(--color-accent); }
.inquiry-row__service { margin-left: 2px; }
/* The page a row's form was sent from (stage 7c, §4.12): an item of the
   line like the chip, whole where it fits, cut with an ellipsis only
   where it is wider than the cell, and from 861 px at most 18 characters;
   its whole text is the title. */
.inquiry-row__page {
  display: inline-flex; align-items: center; gap: 3px;
  max-width: 100%;
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
  white-space: nowrap;
  vertical-align: 1px;
}
.inquiry-row__page svg { flex: none; color: var(--color-text-muted); }
.inquiry-row__page-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inquiry-row__line > .inquiry-row__page { flex: 0 1 auto; min-width: 0; }
@media (min-width: 861px) {
  .inquiry-row__page-label { max-width: 18ch; }
}

/* Properties column. */
.detail__aside {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 20px;
  border-left: 1px solid var(--color-border);
  font-size: var(--fs-13);
}
.props { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.props__row { display: flex; align-items: center; gap: 12px; min-height: 22px; }
.props__row dt { width: 96px; flex-shrink: 0; color: var(--color-text-muted); }
.props__row dd { margin: 0; min-width: 0; }
.props__row dd.mono { font-size: var(--fs-12); }
.props--compact { gap: 9px; }
.props--compact .props__row { align-items: flex-start; }
.props--compact dd:not(.mono) { font-weight: 500; }
.props--compact .props__row + .props__row dd:not(.mono) { font-weight: 400; }
.props__value {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -3px -6px;
  padding: 3px 6px;
  border-radius: var(--radius);
}
.props__value:hover { background: var(--color-row-selected); }
/* Menus in the properties column open below their row, full width. */
.props__row { position: relative; }
.props__row .menu { position: static; }
.props__row .menu__panel { left: 0; right: 0; min-width: 0; }
.props__row .menu__form { width: auto; }
/* "Leistung" with the hint of stage 7c (§4.8): the value, an action's
   result and the hint below one another, the hint in the colour of the
   archived marker; the row's label stays at the top. */
.props__row:has(> .props__service > .props__unknown),
.props__row:has(> .props__service > .props__flash) { align-items: flex-start; }
.props__service { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.props__value--static:hover { background: none; }
.props__flash { margin: 0; font-size: var(--fs-12-5); }
.props__unknown { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: var(--fs-12-5); }
.props__unknown-line { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--color-warning-text); }
.props__unknown-line .icon { flex: none; margin-top: 2px; }
.props__unknown-team { margin: 0; color: var(--color-text-muted); }
.props__unknown .value-list__item { padding: 6px 0; }
.props__unknown .value-list__text { flex-basis: 100%; }
.props__unknown .value-actions { margin-left: 0; }
.aside__takeover { margin-top: -8px; }
.btn--block-sm { width: 100%; }
.aside__section { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
/* "Delete inquiry": the confirmation opens below, as wide as the column. */
.aside__danger { position: relative; align-items: flex-start; }
.aside__danger .menu { position: static; }
.aside__danger .menu__panel { left: 0; right: 0; min-width: 0; }
.aside__danger .menu__form { width: auto; }
.link-button--danger { color: var(--color-danger-text); }
.link-button--danger:hover { color: var(--color-danger-text); }
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-text-secondary); }

/* "Ablauf" steps. */
.steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-13-5); }
.steps__item { display: flex; align-items: center; gap: 10px; height: 26px; }
.steps__mark {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-separator);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-on-success);
}
.steps__item--done .steps__mark { border: 0; background: var(--color-success-text); }
.steps__item--current .steps__mark { border: 5px solid var(--color-accent); }
.steps__label { color: var(--color-text-muted); }
.steps__item--done .steps__label { color: var(--color-text-secondary); }
.steps__item--current .steps__label { color: var(--color-text); font-weight: 600; }
.steps__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11-5); color: var(--color-text-muted); }

/* ---------- Narrow screens ---------- */

@media (max-width: 1180px) {
  .col-source, .col-website { width: 150px; }
  .detail__main { padding: 24px var(--page-gutter); }
  .detail__aside { width: 280px; }
  .screened-table th.col-kind, .screened-table th.col-release { width: 120px; }
  .screened-table th.col-reason { width: 216px; }
  .screened-table th.col-website { width: 176px; }
}

@media (max-width: 1060px) {
  .screened-table .col-website { display: none; }
  .hint-cards { grid-template-columns: minmax(0, 1fr); }
}

/* The inbox on tablets, narrow windows and small laptops: the fixed
   columns left the "Anfrage" cell 0–250 px, too narrow for a name, let
   alone a callback's tag, number and "Ich rufe zurück". Up to 1280 px
   "Quelle" goes (as on phones; the detail page shows it), up to 1100 px
   "Website" narrows (a long domain ends with an ellipsis, its title is
   the whole domain), and below 1000 px it goes too (the filter stays).
   The cell keeps about 180 px or more, 270 px from 1101 px. */
@media (min-width: 861px) and (max-width: 1280px) {
  .inquiry-table--inbox .col-source { display: none; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .inquiry-table--inbox .col-website { width: 132px; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .inquiry-table--inbox .col-website { display: none; }
}

@media (max-width: 960px) {
  .detail { flex-direction: column; min-height: 0; }
  .detail__aside { width: auto; border-left: 0; border-top: 1px solid var(--color-border); padding: 24px var(--page-gutter); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: the table becomes a list (handover §4). */
@media (max-width: 860px) {
  .list-body { padding: 0 0 16px; }
  .inquiry-table, .inquiry-table tbody { display: block; }
  .inquiry-table thead { display: none; }
  .inquiry-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "inquiry received" "status assignee" "website website";
    gap: 6px 12px;
    height: auto;
    padding: 12px var(--page-gutter);
  }
  .inquiry-table td { padding: 0; width: auto; }
  .inquiry-row .col-inquiry { grid-area: inquiry; white-space: normal; }
  .inquiry-row .col-received { grid-area: received; }
  .inquiry-row .col-status { grid-area: status; }
  .inquiry-row .col-assignee { grid-area: assignee; text-align: right; }
  .inquiry-row .col-assignee .person { justify-content: flex-end; }
  .inquiry-row .col-website { grid-area: website; }
  .inquiry-row .col-source { display: none; }
  .inquiry-row__subject { display: block; margin-top: 2px; }
  .inquiry-row__line { flex-wrap: wrap; row-gap: 2px; }
  .inquiry-row__line > .inquiry-row__subject { flex-basis: 100%; max-width: none; white-space: normal; }
  .inquiry-row__line > .inquiry-row__callback { display: flex; flex-wrap: wrap; flex-basis: 100%; margin: 0; }
  .inquiry-row__service { display: inline-flex; margin: 0; }
  .screened-row { grid-template-areas: "sender received" "kind release" "reason reason" "website website"; align-items: center; }
  .screened-row .col-sender { grid-area: sender; }
  .screened-row .col-kind { grid-area: kind; }
  .screened-row .col-release { grid-area: release; }
  .screened-row .col-reason { grid-area: reason; }
  .screened-table .col-website { display: block; }
  .hint-cards { margin: 24px var(--page-gutter) 0; }
  .tabs { gap: 16px; }
  .screened-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px var(--page-gutter) 8px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  /* The call tab's groups stack (stage 7b). */
  .composer__for--call { flex-direction: column; align-items: flex-start; }
  .composer__outcome, .composer__again { padding-left: 0; border-left: 0; }
  .pager, .topbar__divider, .hide-mobile { display: none; }
  /* A menu is a panel 16 px from the edges; a tall one (the edit menu
     of a service with many other spellings) scrolls inside, so its top
     never leaves the screen. */
  .menu__panel {
    position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; min-width: 0;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  }
  /* Also the properties' menus ("Leistung" and its hint, stage 7c),
     which open below their row on wider screens. */
  .props__row .menu__panel { left: 16px; right: 16px; }
  .menu__form, .filter-form { width: auto; }
}

/* css/account.css */
/* Two-factor sign-in: the second step of the sign-in and the security
 * page (/account/security). Both use the card of the login page. */

.auth__card--wide { width: min(560px, 100%); }

.auth__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: var(--fs-13);
}
.auth__links a { color: var(--color-accent-alt); }
.auth__links .auth__links-muted { color: var(--color-text-muted); }

/* "or" between the passkey button and the code form. */
.auth__or {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
.auth__or::before,
.auth__or::after { content: ""; flex: 1; border-top: 1px solid var(--color-divider); }

.input--code {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.08em;
}

/* ---------- Security page ---------- */

.account__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.account__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  text-decoration: none;
}
.account__back:hover { color: var(--color-text); }

.account__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-sidebar-bg);
}
.account__switch { font-size: var(--fs-13); color: var(--color-accent-alt); }
.account__step { font-size: var(--fs-13-5); }
.account__logout { display: flex; justify-content: flex-end; }

.factor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
}
.factor__head { display: flex; align-items: center; gap: 10px; }
.factor__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-sidebar-bg);
  color: var(--color-text-secondary);
}
.factor__title { font-size: var(--fs-14); font-weight: 600; }
.factor__head .badge { margin-left: auto; }
.factor__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.factor__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
}
.factor__item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.factor__item-name { font-weight: 500; overflow-wrap: anywhere; }
.factor__item-meta { font-size: var(--fs-12-5); color: var(--color-text-muted); }

/* Inside the app with the settings tabs (stage 7, layout B1): the four
   blocks (app, passkeys, recovery codes, password) as cards, 2 × 2 from
   1100 px; in the plain card they stay one column (display: contents). */
.factor-grid { display: contents; }
/* The same width as the other settings tabs: 1136 px of content (V9). */
.security-body { max-width: calc(1136px + 2 * var(--page-gutter)); }
.security-body > .alert, .security-body > .account__panel { max-width: 720px; }
/* The cards of a row are equally tall (V15). */
.security-body .factor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.security-body .factor {
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.security-body > .factor { max-width: 720px; }
.security-body .account__logout { justify-content: flex-start; }
@media (min-width: 1100px) {
  .security-body .factor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.passkey-add { display: flex; flex-direction: column; gap: 6px; }
.passkey-add__row { display: flex; gap: 8px; }
.passkey-add__row .input { flex: 1; min-width: 0; }

/* Authenticator-app setup: the QR code is inline SVG (CSP-safe). */
.qr-frame {
  align-self: flex-start;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-qr-bg);
  line-height: 0;
}
.qr { width: 200px; height: 200px; }
.secret {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  word-spacing: 0.25em;
  user-select: all;
  overflow-wrap: anywhere;
}

/* Recovery codes, shown once. */
.codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34ch, 1fr));
  gap: 6px 16px;
  margin: 0;
  padding: 12px 16px;
  list-style-position: inside;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
}
.codes code { font-family: inherit; }

@media (max-width: 520px) {
  .auth__card { padding: 24px 18px; }
  .codes { grid-template-columns: minmax(0, 1fr); }
  .passkey-add__row { flex-direction: column; }
  .passkey-add__row .input { flex: none; }
}

/* Printing the recovery codes prints only them. The security page marks
   itself while it shows new codes (.print-codes-only); every other page
   prints as it is (the monthly report, stage 7). */
@media print {
  body:has(.print-codes-only) * { visibility: hidden; }
  .print-codes-only .codes, .print-codes-only .codes * { visibility: visible; }
  .print-codes-only .codes { position: absolute; top: 0; left: 0; border: 0; }
}

/* css/notifications.css */
/* Notifications: the member's preferences (/{org}/settings/notifications)
 * and the page behind an action link (/a/{token}). */

/* A group of checkboxes with a heading (fieldset and legend keep the
 * grouping for screen readers). */
.fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.fieldset legend { padding: 0; margin-bottom: 4px; }

/* From and until of the daily quiet hours, below their checkbox. */
.quiet-times {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-left: 24px;
}
.quiet-times .input { width: 8.5rem; }

/* From 1100 px the preferences are a grid (stage 7, S7): one row per
   event with its help on the left, a column for email and one for push,
   so the channels line up and can be compared at a glance. The legend is
   floated, which makes it an ordinary grid item while it stays the
   fieldset's first child (the group keeps its name for screen readers).
   Quiet hours span both channel columns. Below 1100 px the events stack
   as before. */
@media (min-width: 1100px) {
  .notify-settings { max-width: 1040px; }
  .notify-form { max-width: none; gap: 0; }
  .fieldset.notify-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 230px;
    gap: 4px 32px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .notify-row > legend { float: left; grid-column: 1; grid-row: 1; margin: 0; }
  .notify-row > .field__help { grid-column: 1; grid-row: 2; max-width: 560px; }
  .notify-row > .notify-row__email { grid-column: 2; grid-row: 1 / span 2; }
  .notify-row > .notify-row__push { grid-column: 3; grid-row: 1 / span 2; }
  .notify-row > .notify-row__wide { grid-column: 2 / span 2; }
  .notify-form > .setting, .notify-form > div:last-child { padding-top: 16px; }
}

/* Website, subject and first name of the inquiry on the action page. */
.action-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-13-5);
}
.action-facts dt { color: var(--color-text-muted); }
.action-facts dd { margin: 0; overflow-wrap: anywhere; }

/* css/settings.css */
/* Settings pages: sub-navigation, websites and their connector (cards in
 * the style of mockup 06), connection keys, field roles and templates.
 * Colours come from tokens.css. */

/* ---------- Layout ---------- */

/* Every settings page starts with the same header and tabs (partial
   "settings-header"), so the tabs never move when switching between
   them; the page's own title, intro and actions follow below the tabs. */
.settings-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 32px;
}
.settings-body > .settings-head { margin-bottom: 0; }
.settings-head__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.settings-head__title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.settings-head__title--mono { min-width: 0; font-family: var(--font-mono); font-size: var(--fs-16); letter-spacing: 0; overflow-wrap: anywhere; }
.settings-head__intro { max-width: 720px; font-size: var(--fs-13); color: var(--color-text-muted); }
.settings-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The current tab is set in a heavier weight. Every tab reserves the
   width of its heavier label (an invisible copy without accessible
   text), so the tabs do not shift sideways when switching either. */
.settings-tabs .tabs__tab { flex-direction: column; justify-content: center; gap: 0; }
.settings-tabs .tabs__tab::after {
  content: attr(data-label);
  content: attr(data-label) / "";
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
}

.settings-body { display: flex; flex-direction: column; gap: 32px; }
.settings-body > .alert { max-width: 720px; }
.settings-section { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
/* Every settings tab ends at the same edge: 1136 px of content, as the
   two-column blocks (V8, V9). */
.settings-section--wide { max-width: 1136px; }
.save-hint { align-self: center; font-size: var(--fs-12); color: var(--color-text-muted); }
fieldset.field, .setting-group { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; }
.setting-group { display: flex; flex-direction: column; gap: 16px; }
/* Help texts with a link inside a setting flow as text. */
.setting .setting__help { display: block; }

.input--mono { font-family: var(--font-mono); font-size: var(--fs-13); }
.select--sm { width: auto; min-width: 180px; max-width: 100%; height: 32px; font-size: var(--fs-13); }
.textarea {
  width: 100%;
  min-height: 160px;
  padding: 8px 10px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: var(--fs-14);
  line-height: 1.5;
  resize: vertical;
}
.textarea:hover { border-color: var(--color-text-secondary); }
.textarea:focus-visible { outline-offset: 0; border-color: var(--color-focus); }
.input[readonly], .textarea[readonly] { background: var(--color-sidebar-bg); }
/* A member's view of a form an owner changes (a disabled fieldset): the
   fields read as values, not as fields to type into (stage 7d review). */
fieldset:disabled :is(.input, .select, .textarea) {
  background: var(--color-sidebar-bg);
  color: var(--color-text-secondary);
  cursor: default;
}

.btn--danger { border-color: var(--color-danger-bg); background: var(--color-danger-bg); color: var(--color-on-accent); font-weight: 500; }
.btn--danger:hover { border-color: var(--color-danger-bg-hover); background: var(--color-danger-bg-hover); color: var(--color-on-accent); }
.menu__panel--left { left: 0; right: auto; }

/* ---------- Status badges and tags ---------- */

.badge--warning { --badge-bg: var(--status-follow-up-bg); --badge-fg: var(--color-warning-text-strong); --badge-dot: var(--status-follow-up-dot); }
.badge--idle { --badge-bg: var(--status-in-progress-bg); --badge-fg: var(--status-in-progress-fg); }
.badge--idle::before { background: transparent; border: 1.5px solid var(--status-in-progress-dot); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  display: inline-flex; align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-size: var(--fs-12);
  font-weight: 500;
  white-space: nowrap;
}
.tag-pill--info { background: var(--status-new-bg); color: var(--status-new-fg); }
.tag-pill--teal { background: var(--status-answered-bg); color: var(--status-answered-fg); }
.tag-pill--muted { background: var(--status-in-progress-bg); color: var(--status-in-progress-fg); }
/* What the visitor saw (stage 6b): a sentence, so it may wrap. */
.tag-pill--warning {
  gap: 6px;
  height: auto; min-height: 24px;
  padding: 3px 8px;
  background: var(--status-follow-up-bg); color: var(--color-warning-text-strong);
  white-space: normal;
}
.tag-pill--warning .icon { flex-shrink: 0; }

/* ---------- Website cards (mockup 06) ---------- */

.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.site-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.site-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.site-card__square { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: var(--site-color); }
.site-card__domain { min-width: 0; font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 500; overflow-wrap: anywhere; }
.site-card__domain a { color: inherit; text-decoration: none; }
.site-card__domain a:hover { text-decoration: underline; }
.site-card__spacer { flex-grow: 1; }
.site-card__meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-muted); white-space: nowrap; }
.site-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.site-card__footer .btn { margin-left: auto; }

.checks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: var(--fs-13-5); }
.checks__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-divider); }
.checks__item > .icon { color: var(--color-success-text); }
.checks__item--warning > .icon { color: var(--color-warning-text); }
.checks__text { flex-grow: 1; min-width: 0; }
.checks__meta { min-width: 0; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--color-text-muted); overflow-wrap: anywhere; text-align: right; }

.table-scroll { max-width: 100%; overflow-x: auto; }
.settings-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13-5); }
.settings-table th, .settings-table td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: middle;
}
.settings-table thead th { font-size: var(--fs-12); font-weight: 500; color: var(--color-text-muted); }
.settings-table tbody th { font-weight: 500; }
.settings-table__key { display: block; font-size: var(--fs-11-5); font-weight: 400; color: var(--color-text-muted); overflow-wrap: anywhere; }
.settings-table__actions { text-align: right; }
.settings-table__actions .menu { display: inline-block; }

.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-row-selected); }
.choice input { width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--color-accent); }
.choice__text { display: flex; flex-direction: column; gap: 2px; }
.choice__label { font-size: var(--fs-13-5); font-weight: 500; }
.choice__help { font-size: var(--fs-12-5); color: var(--color-text-muted); }
fieldset:disabled .choice, fieldset:disabled .check { cursor: default; color: var(--color-text-secondary); }

/* Colour picker of a new website: real radio buttons (keyboard, screen
   readers), drawn as the website squares. */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; display: inline-flex; }
.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch__square { width: 28px; height: 28px; border-radius: var(--radius); background: var(--site-color); }
.swatch input:checked + .swatch__square { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.swatch input:focus-visible + .swatch__square { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ---------- Templates ---------- */

.template-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.template-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.template-card:hover { border-color: var(--color-border-hover); color: var(--color-text); background: var(--color-row-selected); }
.template-card__name { font-size: var(--fs-13-5); font-weight: 500; }
.template-card__excerpt { font-size: var(--fs-12-5); color: var(--color-text-muted); overflow-wrap: anywhere; }

.template-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; max-width: 1040px; }
.template-editor__form { max-width: none; }
.template-editor__aside { display: flex; flex-direction: column; gap: 24px; }
.placeholders, .preview { display: flex; flex-direction: column; gap: 10px; }
.placeholders__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.placeholders__item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-13); }
.placeholder-chip {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-sidebar-bg);
  color: var(--color-text-body);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}
button.placeholder-chip:hover { border-color: var(--color-text-secondary); color: var(--color-text); }
.placeholder-chip code { font: inherit; }
.placeholders__label { color: var(--color-text-secondary); }
.preview__mail {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-page-muted);
  font-size: var(--fs-13-5);
}
.preview__subject { font-weight: 500; overflow-wrap: anywhere; }
.preview__body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Spam filter ---------- */

.spam-checks {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding-left: 18px;
  font-size: var(--fs-13-5); color: var(--color-text-secondary);
}
.spam-sender { min-width: 10rem; overflow-wrap: anywhere; }
.spam-sender .settings-table__key { margin-top: 2px; }
.spam-sender__rule { white-space: nowrap; }
/* Phones: address on its own line, rule and "Entfernen" below it. */
@media (max-width: 640px) {
  .spam-senders thead { display: none; }
  .spam-senders tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
  .spam-senders th, .spam-senders td { display: block; padding: 0; border-bottom: 0; }
  .spam-senders .spam-sender { flex: 1 0 100%; min-width: 0; }
  .spam-senders .settings-table__actions { margin-left: auto; }
}

@media (max-width: 860px) {
  .template-editor { grid-template-columns: minmax(0, 1fr); }
  .save-hint { display: none; }
  .select--sm { min-width: 0; width: 100%; }
}

/* ---------- Team (settings-team.gohtml) ---------- */

/* Members and pending invitations: one line each, the actions on the
   right; on narrow screens the actions wrap below the name. A list, not
   a table in a scroll box, so the confirmation menus are never cut off. */
.team-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.team-list__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
.team-list__who { display: flex; flex: 1 1 240px; flex-direction: column; gap: 2px; min-width: 0; }
.team-list__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--fs-13-5); font-weight: 500; overflow-wrap: anywhere;
}
.team-list__name--email { font-family: var(--font-mono); font-size: var(--fs-13); }
.team-list__meta { font-size: var(--fs-12-5); color: var(--color-text-muted); overflow-wrap: anywhere; }
.team-list__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.team-list__error { flex-basis: 100%; }

/* ---------- Leistungen (settings-services.gohtml, stage 7b) ---------- */

/* One line per service like the team list: name, other spellings and who
   is responsible on the left, the owners' actions on the right; on
   narrow screens the actions wrap below. */
.service-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.service-list__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
.service-list__who { display: flex; flex: 1 1 260px; flex-direction: column; gap: 2px; min-width: 0; }
.service-list__name { font-size: var(--fs-13-5); font-weight: 500; overflow-wrap: anywhere; }
.service-list__meta { font-size: var(--fs-12-5); color: var(--color-text-muted); overflow-wrap: anywhere; }
.service-list__meta--nobody { font-style: italic; }
.service-list__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; }
.service-list__move { display: flex; gap: 4px; }
.service-list__move .btn:disabled { opacity: 0.4; cursor: default; }
/* The edit menu is 340 px wide on a desktop; on phones every menu is a
   panel 16 px from both edges (inquiries.css), which a fixed width here
   would override, since this file comes later in the bundle. */
@media (min-width: 861px) {
  .service-form { width: 340px; }
}
/* A refused save focuses its first field with a message (autofocus);
   the browser scrolls only as far as the field, so the margin keeps the
   message below it in view as well, on a phone too. */
#service-add [aria-invalid="true"], .service-form [aria-invalid="true"] { scroll-margin-bottom: 80px; }
/* The edit menu's heading names the service. */
.service-form__title { margin: 0; font-size: var(--fs-13-5); font-weight: 600; overflow-wrap: anywhere; }
/* Other spellings: one per line, a few lines high. */
.service-form__aliases { min-height: 76px; }
/* The result of a change at its service, below the row. */
.service-list__flash { flex-basis: 100%; margin: 0; }
.service-empty { display: flex; flex-direction: column; gap: 6px; max-width: 720px; font-size: var(--fs-13-5); color: var(--color-text-secondary); }
.service-archived { margin-top: 8px; }
.service-archived > summary { cursor: pointer; font-size: var(--fs-13); color: var(--color-text-secondary); }
.service-archived .service-list__name { color: var(--color-text-secondary); }

/* ---------- Values without a service (stage 7c, §9.1–§9.3) ---------- */

/* A value, what is known about it and the owners' actions: one line on a
   desktop, the actions below on a narrow screen (values wrap as chips,
   §9.6). Shared by Settings › Leistungen, the form card and the inquiry. */
.value-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.value-list__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
}
.value-list__item:last-child { border-bottom: 0; }
.value-list__text { flex: 1 1 220px; min-width: 0; font-size: var(--fs-13); overflow-wrap: anywhere; }
.value-list__value { font-weight: 500; }
.value-list__meta { color: var(--color-text-muted); font-size: var(--fs-12-5); }
.value-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.value-actions__form { display: inline; }
/* A button's label wraps where its column is narrower than the button,
   so the page never scrolls sideways: the detail page's properties column
   from 961 to 1180 px leaves the hint 131 px, "Einer Leistung zuordnen"
   needs 160; a restore button names a service of any length. On one
   line the button keeps its height and its label's place. */
.value-actions .btn--sm {
  max-width: 100%;
  height: auto;
  min-height: 30px;
  padding-block: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (min-width: 861px) {
  .value-form { width: 300px; }
}
.value-section__group { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.value-section__group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.value-section__group-title { margin: 0; font-size: var(--fs-13-5); font-weight: 600; }
.value-section__more { margin: 4px 0 0; font-size: var(--fs-12-5); color: var(--color-text-muted); }
.value-section__flash { margin: 8px 0 0; }

/* ---------- Desktop layout (stage 7, docs/stage-7-plan.md §11) ---------- */

/* The settings use the width of a desktop: a heading with its help on the
   left and the controls on the right ("settings rows"), two blocks side
   by side ("settings columns", "settings split") and two short fields in
   one line ("field pair"). Unlike the rest of the CSS this part is mobile
   first: the wrappers are plain divs that are display: contents below
   their breakpoint, so phones and screens up to 1099 px keep exactly the
   stacked layout they had, and the DOM order (the tab order) never
   changes. A wrapper never replaces a section, fieldset, heading or
   button, so their semantics stay. */
.settings-row, .settings-row__head, .settings-row__body,
.settings-columns, .settings-columns__col,
.settings-split, .settings-split__main, .settings-split__aside,
.field-pair { display: contents; }

/* The app install block has nothing to show until pwa.js knows the state
   (or at all, in a browser that cannot install apps): no empty gap. */
.setting[data-install]:not(:has(> :not([hidden]))) { display: none; }

/* Label-left rows from 1100 px: the content is at least 796 px wide. */
@media (min-width: 1100px) {
  /* Long help texts in a wide section stay readable. */
  .settings-section--wide > .field__help, .settings-section--cards > .field__help { max-width: 720px; }
  .settings-rows { max-width: 1136px; gap: 0; }
  /* The header's button ends with the content, not at the window's edge. */
  .settings-head { max-width: 1136px; }
  .settings-row {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 0 48px;
    align-items: start;
    max-width: none;
    padding: 24px 0;
  }
  .settings-row + .settings-row { border-top: 1px solid var(--color-divider); }
  .settings-rows > .settings-row:first-child { padding-top: 4px; }
  .settings-row__head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .settings-row__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 600px; }
  .settings-row__body .section { max-width: none; }
  .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
}

/* Two blocks side by side from 1200 px: the content is at least 896 px
   wide. */
@media (min-width: 1200px) {
  .settings-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
    max-width: 1136px;
  }
  .settings-columns__col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
  .settings-columns .settings-section { max-width: none; }

  /* The list on the left, a form in a card on the right that stays in
     view while the list scrolls ("Person einladen"). */
  .settings-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 40px;
    align-items: start;
    max-width: 1136px;
  }
  .settings-split__main, .settings-split__aside { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
  .settings-split .settings-section { max-width: none; }
  .settings-split__aside--card {
    position: sticky;
    top: calc(var(--topbar-height) + 20px);
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-sidebar-bg);
  }
  /* The button in the header only jumps to that form, which is in view. */
  .settings-head__actions--jump { display: none; }

  /* Reply templates as cards, two or three per row. */
  .settings-section--cards { max-width: 1136px; }
  .template-list--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .template-list--cards > li { display: flex; min-width: 0; }
  .template-list--cards .template-card { flex: 1 1 auto; min-width: 0; }
}

/* css/calls.css */
/* "Anruf erfassen" (mockup 02): the dialog over the lists and the page
 * /{org}/calls/new with the same form. Values follow the mockup; colours
 * come from tokens.css. */

/* ---------- Header button ---------- */

.call-button__label { white-space: nowrap; }

/* ---------- Dialog ---------- */

.call-dialog {
  width: min(640px, calc(100vw - 32px));
  /* Mockup: 84 px from the top of the window, not centred. */
  margin: 84px auto auto;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
}
.call-dialog::backdrop { background: var(--backdrop-dialog); }

/* ---------- Form ---------- */

.call-form { display: flex; flex-direction: column; }
.call-form__header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px 16px 24px;
  border-bottom: 1px solid var(--color-divider);
}
.call-form__icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.call-form__heading { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.call-form__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.call-form__intro { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--color-text-muted); }
.call-form__close { flex-shrink: 0; }
.call-form__summary { margin: 16px 24px 0; }

.call-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 18px 24px 4px;
}
.call-form__wide { grid-column: 1 / -1; }
.call-form .field__label { font-size: var(--fs-12-5); line-height: 1.36; color: var(--color-text-body); }
.call-form .input, .call-form .select { font-size: var(--fs-13-5); color: var(--color-text); }
.call-form .input--mono, .call-form .select--mono { font-family: var(--font-mono); font-size: var(--fs-13); }
.call-form__note { min-height: 64px; padding: 9px 11px; font-size: var(--fs-13-5); }

.field__error { margin: 0; font-size: var(--fs-12-5); color: var(--color-danger-text); }
.call-form [aria-invalid="true"] { border-color: var(--color-danger-text); }

/* Selects with the chevron of the mockup instead of the browser's arrow,
   and "Zuständig" with the avatar of the chosen member (calls.js). */
.call-select { position: relative; }
.call-select .select { appearance: none; padding-right: 32px; }
.call-select__chevron {
  position: absolute; top: 50%; right: 10px;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.call-select__avatar {
  position: absolute; top: 50%; left: 10px;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  font-size: 9.5px;
  pointer-events: none;
}
.call-select--avatar .select { padding-left: 38px; }

/* Confirmation email, on a tinted row. */
.call-confirm {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 24px 0;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  background: var(--color-sidebar-bg);
  font-size: var(--fs-13-5);
  line-height: 1.3;
  color: var(--color-text-strong);
  cursor: pointer;
}
.call-confirm input { width: 18px; height: 18px; flex-shrink: 0; margin: 0; accent-color: var(--color-accent); }
.call-confirm:has(input:disabled) { color: var(--color-text-muted); cursor: default; }
.call-form__confirm-error { margin: 6px 24px 0; }

.call-form__footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 14px 20px 14px 24px;
  border-top: 1px solid var(--color-divider);
}
.call-form__meta { flex-grow: 1; font-size: var(--fs-12-5); color: var(--color-text-muted); }
.call-form__footer .btn { height: 34px; }

/* ---------- Page (without JavaScript, and after errors) ---------- */

.call-panel {
  max-width: 640px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
  .call-dialog { margin: 16px auto; max-height: calc(100dvh - 32px); }
  .call-form__header { padding: 16px 12px 14px 16px; }
  .call-form__summary { margin: 14px 16px 0; }
  .call-form__grid { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 4px; }
  .call-confirm { margin: 16px 16px 0; }
  .call-form__confirm-error { margin: 6px 16px 0; }
  .call-form__footer { flex-wrap: wrap; padding: 12px 16px; }
  .call-form__meta { flex-basis: 100%; }
  .call-form__footer .btn { flex: 1 1 0; }
  .call-page.page-body { padding-left: 0; padding-right: 0; padding-top: 0; }
  .call-panel { border-width: 0 0 1px; border-radius: 0; }
}

/* Narrow phones: the header button shows its icon only (the label stays
   the button's accessible name). */
@media (max-width: 420px) {
  .call-button { width: 32px; padding: 0; }
  .call-button__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* css/websites.css */
/* The daily form test (stage 6): the page "Websites" (mockup 06) with
 * key figures, daily bars and check lines on the website cards of
 * settings.css, the sidebar line and a form's test settings; stage 6b
 * adds the info tone, the plugin's facts and the staff's test options of
 * a website. The overview of every customer's websites for staff is in
 * staff.css. Colours come from tokens.css. */

/* ---------- Page "Websites" ---------- */

.websites-body { display: flex; flex-direction: column; gap: 20px; }
.websites-body > .alert { max-width: 720px; }
/* Two cards side by side as in the mockup (three on very wide screens),
   one on phones; a card is never narrower than its 14 daily bars. */
.site-grid--overview { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

.badge--failed { --badge-bg: var(--tag-spam-bg); --badge-fg: var(--tag-spam-fg); --badge-dot: var(--tag-spam-dot); }

/* "Jetzt testen" shows its result on the card. */
.flash.flash--card { margin: 0; }

/* Key figures: the value above its label. */
.site-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.site-figures__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }
.site-figures__value { margin: 0; font-size: var(--fs-22); font-weight: 600; line-height: 1.25; color: var(--color-accent); }
.site-figures__label { font-size: var(--fs-12-5); color: var(--color-text-muted); }

/* Daily bars of the last 14 days, oldest first. */
.check-days { display: flex; flex-direction: column; gap: 8px; }
.check-days__label { font-size: var(--fs-12-5); color: var(--color-text-muted); }
.check-days__bars {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 22px));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-day { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-check-none); }
.check-day--ok { background: var(--color-check-ok); }
.check-day--today { background: var(--color-check-today); }
.check-day--slow { background: var(--color-check-slow); }
.check-day--failed { background: var(--color-check-failed); }
.check-day--skipped { background: var(--color-check-skipped); }
.check-days__hint { margin: 0; font-size: var(--fs-12-5); }
.check-days__hint--warning { color: var(--color-warning-text); }
.check-days__hint--failed { color: var(--color-danger-text); }

/* Tones of the check lines (the check mark and the warning are in
   settings.css); "info" (stage 6b) marks facts and hints, such as real
   visitors sending although the test failed. */
.checks__item--failed > .icon { color: var(--color-danger-text); }
.checks__item--pending > .icon, .checks__item--off > .icon { color: var(--color-text-muted); }
.checks__item--alarm > .icon, .checks__item--info > .icon { color: var(--color-accent-alt); }
.checks__item > .icon { flex-shrink: 0; }
.checks__meta--text { font-family: var(--font-sans); font-size: var(--fs-12-5); }
/* A hint under a line ("Oft hilft es, den Seiten-Cache … zu leeren."). */
.checks__note { display: block; margin-top: 2px; font-size: var(--fs-12-5); color: var(--color-text-muted); }
/* A line with a hint aligns its icon with the first line. */
.checks__item:has(.checks__note) { align-items: flex-start; }
.checks__item:has(.checks__note) > .icon { margin-top: 3px; }

/* As in the mockup, the tags follow the check list; the settings'
   cards keep theirs at the bottom. */
.site-grid--overview .site-card__footer { margin-top: 0; }
/* Times ("heute 06:00") stay on one line and keep their width, so a
   long problem text wraps instead of pushing them out of the card; on
   phones a longer meta ("heute 12:08 · von Hand") may break at its
   spaces instead of leaving the card. */
.site-grid--overview .checks__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.site-grid--overview .checks__meta:not(.checks__meta--text) { white-space: nowrap; flex-shrink: 0; }
/* A form name next to a notice ("«Offerte Küche»") keeps its line while it
   fits in 45 % of the row, then wraps. */
.site-grid--overview .checks__meta--text { flex-shrink: 0; max-width: 45%; }
@media (max-width: 520px) {
  .site-grid--overview .checks__meta:not(.checks__meta--text) { white-space: normal; max-width: 45%; flex-shrink: 0; }
}

.site-card__action { margin-left: auto; }
.site-card__action .btn { color: var(--color-accent-alt); font-weight: 500; }
.site-card__action .btn:hover { color: var(--color-accent); }
.site-card__note { margin: 0 0 0 auto; font-size: var(--fs-12-5); color: var(--color-text-muted); }

@media (max-width: 860px) {
  .site-figures__value { font-size: 20px; }
}

/* ---------- Sidebar ---------- */

a.sites__status { text-decoration: none; }
.sites__status--problem { color: var(--color-warning-text); }
.sites__status--problem:hover { color: var(--color-warning-text-strong); text-decoration: underline; }

/* ---------- Settings › Websites: the list (stage 7d) ----------
   Each website's card says its state in the words and the status box of
   the website's page. */

.site-card__line { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--color-text-muted); }
.site-card__state .alert { margin: 0; }
.websites-empty { max-width: 720px; }
/* The WordPress plugin for download below the intro (stage 7d, partial
   connector-download): the button, its version and size beside it, the
   hint below; wraps on a phone. */
.connector-download { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.connector-download__meta { font-size: var(--fs-12-5); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.connector-download__help { flex-basis: 100%; }

/* ---------- Settings › Websites › a website (stage 7d) ----------
   The artboards Main, Formulare-Leer and Verbindung: a header with the
   website's colour, domain and state in one plain line, three tabs as
   plain links, the forms as summary cards (each one link to the form's
   page), the connection as cards, and the settings. Statuses are info
   boxes (components.css .alert). */

.site-page { gap: 22px; max-width: 1080px; }
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  min-height: 32px;
  font-size: var(--fs-13-5);
  text-decoration: none;
}
.back-link__short { display: none; }

.site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.site-head__tile {
  width: 40px; height: 40px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--site-color) 14%, var(--color-bg));
}
.site-head__square { width: 14px; height: 14px; border-radius: 3px; background: var(--site-color); }
.site-head__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.site-head__domain { min-width: 0; font-family: var(--font-mono); font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.site-head__line { margin: 0; font-size: var(--fs-13-5); color: var(--color-text-muted); }
.site-head__open { height: 34px; padding: 0 12px; font-size: var(--fs-13-5); color: var(--color-text-strong); }

/* The website's tabs: links; the current one is heavier, and every tab
   reserves its heavier width (data-label), so nothing shifts. */
.site-tabs {
  display: flex; gap: 22px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-14);
  overflow-x: auto;
}
.site-tabs__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px;
  padding: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.site-tabs__tab:hover { color: var(--color-text); }
/* The bar scrolls sideways on phones, which clips anything outside it:
   the focus ring is drawn inside the tab. */
.site-tabs__tab:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.site-tabs__tab[aria-current="page"] { border-bottom-color: var(--color-accent); color: var(--color-text); font-weight: 500; }
.site-tabs__count { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400; color: var(--color-text-muted); }
.attention-dot { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: var(--radius-pill); }
.attention-dot--warning { background: var(--status-follow-up-dot); }

.site-pane { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Tab "Formulare". */
.forms-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.forms-head__intro { max-width: 620px; font-size: var(--fs-14); line-height: 1.5; color: var(--color-text-secondary); }
.forms-head__summary { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-13); color: var(--color-text-muted); }
.forms-head__summary strong { font-weight: 600; color: var(--color-text-strong); }
.forms-head__attention { display: inline-flex; align-items: center; gap: 6px; }
.forms-head__attention strong { color: var(--color-warning-text-strong); }

.form-summaries { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.form-summary {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-decoration: none;
}
.form-summary:hover { border-color: var(--color-border-hover); color: var(--color-text); }
.form-summary:hover .form-summary__open { border-color: var(--color-border-hover); color: var(--color-text); }
.form-summary:focus-visible { outline-offset: 3px; border-radius: var(--radius-lg); }
.form-summary__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 18px 20px; }
.form-summary__icon {
  width: 36px; height: 36px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-page-muted);
  color: var(--color-accent);
}
.form-summary__body { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-summary__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.form-summary__name { min-width: 0; font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.form-summary__line { font-size: var(--fs-13); color: var(--color-text-muted); overflow-wrap: anywhere; }
.form-summary__open { flex: none; gap: 4px; height: 32px; padding: 0 12px; font-size: var(--fs-13-5); color: var(--color-text-strong); }
.form-summary__band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 11px 20px;
  border-top: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-strong);
  font-size: var(--fs-13-5);
}
.form-summary__band > .icon { color: var(--color-warning-text); }
.form-summary__band-text { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.form-summary__band-action { font-weight: 500; color: var(--color-warning-text-strong); white-space: nowrap; }
/* A form that is not captured: quiet, dashed. */
.form-summary--off { border-style: dashed; border-color: var(--color-border-dashed); background: var(--color-card-muted-bg); box-shadow: none; }
.form-summary--off .form-summary__icon { background: var(--color-divider); color: var(--color-text-muted); }
.form-summary--off .form-summary__name { color: var(--color-text-body); }
.form-summary--off .form-summary__open { background: var(--color-bg); }

.badge--off { --badge-bg: var(--status-lost-bg); --badge-fg: var(--status-lost-fg); }
.badge--off::before { background: transparent; border: 1.5px solid var(--status-lost-dot); }

.form-chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-12-5); }
.form-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-body);
  overflow-wrap: anywhere;
}
.form-chip--ok { border-color: var(--color-success-border); background: var(--color-success-tint); color: var(--color-success-text); }
.form-chip--warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); color: var(--color-warning-text-strong); }
.form-chip--failed { border-color: var(--color-error-border); background: var(--color-error-bg); color: var(--color-danger-text); }
.form-chip--muted { color: var(--color-text-muted); }

.forms-more { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13-5); }
.forms-more__title { color: var(--color-text-secondary); }
.forms-more__list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
/* A form beyond the cards that needs attention: first, with its dot and
   its reason on a line of its own. */
.forms-more__item--attention { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; flex-basis: 100%; }
.forms-more__reason { flex-basis: 100%; padding-left: 15px; font-size: var(--fs-12-5); color: var(--color-warning-text-strong); }

/* Cards of the tabs and of a form's page: a head (title, description),
   the body, a footer with the card's own "Speichern". */
.site-panel { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.site-panel--quiet { background: var(--color-card-muted-bg); }
.site-panel__head { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px 4px; }
.site-panel__title { margin: 0; font-size: var(--fs-16); font-weight: 600; }
.site-panel__title .icon { display: inline-block; margin-right: 6px; vertical-align: -2px; color: var(--color-text-muted); }
.site-panel__help { max-width: 640px; font-size: var(--fs-13-5); line-height: 1.5; color: var(--color-text-secondary); }
.site-panel__help--small { font-size: var(--fs-12-5); color: var(--color-text-muted); }
.site-panel__body { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 18px 24px 22px; }
.site-panel__head + .site-panel__body { padding-top: 14px; }
.site-panel__body + .site-panel__body { padding-top: 0; }
.site-panel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--color-divider);
}
.site-panel__foot--split { justify-content: space-between; align-items: flex-start; }
.site-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.site-panel__flash { margin: 14px 24px 0; }
/* A card whose title is a fieldset's legend: the legend floats to sit
   in the card's head like a heading. */
.site-panel__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.site-panel .setting-group { gap: 20px; }
.field--narrow { max-width: 460px; }

/* A checkbox with its label and help in a bordered row. */
.check-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.check-row input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--color-accent); }
.check-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.check-row__label { font-size: var(--fs-14); font-weight: 500; }
.check-row__help { font-size: var(--fs-13); line-height: 1.45; color: var(--color-text-secondary); }
.check-row__link { margin-top: -12px; padding-left: 46px; }
fieldset:disabled .check-row { cursor: default; }
.check--lg { gap: 10px; font-size: var(--fs-14); }
.check--lg input { width: 18px; height: 18px; }
.capture { display: flex; flex-direction: column; gap: 10px; }

/* Radio buttons as cards ("Automatisch (empfohlen)", "Immer", "Nie"). */
.choice--card { gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); }
.choice--card:has(input:checked) { box-shadow: inset 0 0 0 1px var(--color-accent); }
.choice--card input { width: 18px; height: 18px; margin-top: 1px; }
.choice--card .choice__text { gap: 3px; }
.choice--card .choice__label { font-size: var(--fs-14); }
.choice--card .choice__help { font-size: var(--fs-13); color: var(--color-text-secondary); }
.choice__hint { font-weight: 400; color: var(--color-text-muted); }
.choice__now { font-size: var(--fs-12-5); color: var(--color-text-muted); }
.choice__now--ok { color: var(--color-success-text); }

/* "Technische Angaben zeigen", "Technische Feldnamen zeigen", "Andere
   Seite angeben": a link-like disclosure. */
.site-disclosure > summary {
  display: inline-flex; align-items: center;
  min-height: 32px;
  color: var(--color-accent-alt);
  font-size: var(--fs-13);
  cursor: pointer;
}
.site-disclosure > summary:hover { color: var(--color-accent); }
.site-disclosure__body { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }

/* Tab "Verbindung". */
.conn-grid { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 20px; }
.conn-grid__status { flex: 3 1 420px; }
.plugin-card { flex: 2 1 300px; }
.conn-grid .site-panel__body { gap: 14px; }
.facts-plain {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 10px 16px;
  margin: 0;
  font-size: var(--fs-13-5);
}
.facts-plain__row { display: contents; }
.facts-plain dt { color: var(--color-text-muted); }
.facts-plain dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.facts-plain dd.mono { font-size: var(--fs-12-5); }
.facts-plain__row--warning dd { color: var(--color-warning-text-strong); }
/* The plugin's state after its version: "aktuell" in green, "veraltet,
   bitte aktualisieren" in amber (artboard Verbindung). */
.facts-plain__suffix { white-space: nowrap; }
.facts-plain__suffix--ok { color: var(--color-success-text); }
.facts-plain__suffix--warning { color: var(--color-warning-text-strong); white-space: normal; }
.plugin-facts .checks__text { overflow-wrap: anywhere; }
.plugin-facts .checks__item:first-child { border-top: 0; }
.plugin-card__head { display: flex; align-items: center; gap: 12px; }
.plugin-card__icon {
  width: 36px; height: 36px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-icon-paper);
}
.plugin-card__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plugin-card__meta { font-size: var(--fs-13); color: var(--color-text-muted); }
/* The version the website runs, "aktuell" in green or "veraltet" in
   amber as in the facts beside the card, and the download (stage 7d). */
.plugin-card__state { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-13-5); }
.plugin-card__state .icon { flex: none; margin-top: 3px; }
.plugin-card__state--ok { color: var(--color-success-text); }
.plugin-card__state--warning { color: var(--color-warning-text-strong); }
.plugin-card__download { display: flex; flex-wrap: wrap; gap: 8px; }

/* A new connection key: the warning, the key on one line with
   "Kopieren" and "Kopiert", and the steps. */
.key-panel {
  display: flex; flex-direction: column; gap: 16px;
  margin: 14px 24px 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-muted-bg);
}
.key-panel__title { margin: 0; font-size: 15px; font-weight: 600; }
.key-panel__subtitle { margin: 0 0 10px; font-size: var(--fs-14); font-weight: 600; }
.key-create { max-width: 460px; }
/* "Widerrufen" at the table's right edge, as in the artboard. */
.key-table .settings-table__actions { width: 1%; padding-right: 0; white-space: nowrap; text-align: right; }

.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy-row__input { flex: 1 1 320px; min-width: 0; height: 38px; background: var(--color-bg); }
.copy-row__actions { display: inline-flex; flex: none; align-items: center; gap: 10px; white-space: nowrap; }
.copy-row__actions .btn { height: 38px; padding: 0 14px; font-size: var(--fs-13-5); }

.setup-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-13-5); color: var(--color-text-strong); }
.setup-steps__item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.setup-steps__number {
  width: 22px; height: 22px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-bg);
  color: var(--color-on-accent);
  font-size: var(--fs-12); font-weight: 600;
}
.setup-steps__text { flex: 1 1 180px; min-width: 0; padding-top: 2px; }
.setup-steps__item > .copy-row { flex: 1 1 100%; max-width: 560px; margin-left: 34px; }
.setup-steps__item > .copy-row .copy-row__input { flex-basis: 220px; height: 34px; }
.setup-steps__item > .copy-row .btn { height: 34px; }
/* Step 4 copies the key once more, so it is in the clipboard when the
   plugin asks for it. */
.setup-steps__copy { margin-left: 34px; }
.setup-steps__copy .btn { height: 34px; font-size: var(--fs-13); }
/* Step 1 downloads the plugin ("Plugin 1.5.1", artboard Verbindung). */
.setup-steps__download { height: 34px; margin-left: 34px; font-size: var(--fs-13); }

/* Tab "Einstellungen". */
.site-settings { gap: 20px; max-width: 820px; }
.settings-details { font-size: var(--fs-13); line-height: 1.5; color: var(--color-text-secondary); }
.settings-details strong { font-weight: 600; color: var(--color-text-body); }
.staff-options { border-style: dashed; border-color: var(--color-border-hover); }
.staff-options .select { max-width: 240px; }

/* ---------- A form's page (stage 7d, artboards Formular and
   Formular-Handy) ---------- */

.form-page { display: flex; flex-direction: column; gap: 20px; max-width: 1180px; }
.form-head { display: flex; flex-direction: column; gap: 6px; }
.form-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.form-head__title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.form-head__meta { font-size: var(--fs-13-5); color: var(--color-text-muted); overflow-wrap: anywhere; }

/* What needs attention, as a link to its card (narrow screens; the
   aside marks it from 1200 px). */
.attention-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
  color: var(--color-warning-strong);
  font-size: var(--fs-13-5);
  text-decoration: none;
}
.attention-link:hover { color: var(--color-warning-strong); border-color: var(--color-warning-text); }
.attention-link > .icon { color: var(--color-warning-text); }
.attention-link__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.attention-link__action { font-weight: 500; color: var(--color-warning-text-strong); white-space: nowrap; }

.form-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.form-layout__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form-layout__main > .site-panel { scroll-margin-top: calc(var(--topbar-height) + 16px); }
.glance { display: none; }

/* The fields: the label and its type in words left, the role right. */
.field-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.field-table thead th {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-12-5); font-weight: 500;
  color: var(--color-text-muted);
  text-align: left;
}
.field-table__role { width: 46%; }
.field-table tbody th {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--color-divider);
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
}
.field-table tbody td { padding: 12px 0; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.field-table tbody tr:last-child > * { border-bottom: 0; }
.field-table__label { overflow-wrap: anywhere; }
.field-table__type { display: block; margin-top: 2px; font-size: var(--fs-12-5); font-weight: 400; color: var(--color-text-muted); overflow-wrap: anywhere; }
.field-table .select { max-width: 280px; }
.settings-table__note {
  display: inline-block;
  margin-left: 4px;
  padding: 0 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-11-5); font-weight: 400;
  color: var(--color-text-muted);
  vertical-align: 1px;
  white-space: nowrap;
}
.tech-names { min-width: 0; }
.tech-names__list { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 16px; margin: 8px 0 0; font-size: var(--fs-12-5); }
.tech-names__row { display: contents; }
.tech-names__list dt { color: var(--color-text-secondary); }
.tech-names__list dd { margin: 0; overflow-wrap: anywhere; }

/* A choice of the service field that is no service yet: an amber card. */
.site-panel--attention { border-color: var(--color-warning-border); background: var(--color-warning-tint); }
.attention-card { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; }
.attention-card__icon {
  width: 32px; height: 32px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-warning-tile);
  color: var(--color-warning-text);
}
.attention-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.attention-card__title { color: var(--color-warning-strong); }
.attention-card__text { max-width: 640px; margin-top: -8px; font-size: var(--fs-13-5); line-height: 1.5; color: var(--color-warning-strong); overflow-wrap: anywhere; }
.attention-card__values { padding: 2px 12px; border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); background: var(--color-bg); }
.attention-card__values .value-list__value { font-size: var(--fs-14); font-weight: 600; }
.attention-card__all { align-self: flex-start; }
.attention-card__help { font-size: var(--fs-12-5); color: var(--color-warning-text-strong); }
.attention-card .site-panel__flash { margin: 0; }
/* "Als Leistung anlegen" is the card's main action (artboards Formular
   and Formular-Handy). */
.attention-card [data-adopt] { border-color: var(--color-accent-bg); background: var(--color-accent-bg); color: var(--color-on-accent); font-weight: 500; }
.attention-card [data-adopt]:hover { border-color: var(--color-accent-bg-hover); background: var(--color-accent-bg-hover); color: var(--color-on-accent); }

/* The pages the form is on. */
.form-pages { gap: 12px; }
.form-pages__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.form-pages__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-13);
}
.form-pages__item:first-child { padding-top: 0; }
.form-pages__item:last-child { border-bottom: 0; padding-bottom: 0; }
.form-pages__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.form-pages__name { font-size: var(--fs-14); font-weight: 500; }
.form-pages__path { font-size: var(--fs-12-5); }
span.form-pages__path { color: var(--color-text-secondary); }
.form-pages__marker { font-size: var(--fs-13); color: var(--color-text-secondary); }
.form-pages__marker--none { color: var(--color-text-muted); }
.form-pages .value-actions { margin-left: 0; }

/* The daily form test. */
.test-page { display: flex; flex-direction: column; gap: 4px; }
.test-page__label { font-size: var(--fs-13-5); font-weight: 500; }
.test-page__value { font-size: var(--fs-13-5); color: var(--color-text-body); overflow-wrap: anywhere; }
.form-test__url { font-size: var(--fs-12-5); }
.form-test [aria-invalid="true"] { border-color: var(--color-danger-text); }
/* "oder Ctrl+S" only beside the card that has the focus: that is the one
   the shortcut saves (settings.js form.save). */
.form-page .site-panel:not(:focus-within) .save-hint { visibility: hidden; }
.form-profile__archived { color: var(--color-warning-text-strong); }

/* "Auf einen Blick" beside the cards from 1200 px; narrower screens
   show the link to the card that needs attention instead. */
@media (min-width: 1200px) {
  .form-layout { grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); }
  .attention-link { display: none; }
  .glance {
    position: sticky;
    top: calc(var(--topbar-height) + 20px);
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 18px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-muted-bg);
  }
  .glance__title { font-size: var(--fs-12-5); font-weight: 500; color: var(--color-text-muted); }
  .glance__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: var(--fs-13-5); }
  .glance__fact { display: contents; }
  .glance__facts dt { color: var(--color-text-muted); }
  .glance__facts dd { margin: 0; overflow-wrap: anywhere; }
  .glance__fact--warning dd { color: var(--color-warning-text-strong); }
  .glance__nav { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: var(--fs-13-5); }
  .glance__nav a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--color-text-body); text-decoration: none; }
  .glance__nav a:hover { color: var(--color-accent); }
  .glance__nav .glance__link--problem { color: var(--color-warning-text-strong); }
}

/* Phones (artboard Formular-Handy): labels above their fields, 44 px
   touch targets, full-width buttons in the cards' footers. Every rule is
   scoped to the website's and the form's page, and the touch targets also
   to the list of websites (.sites-page), so no other page's fields change
   (stage 7d review). */
@media (max-width: 640px) {
  :is(.site-page, .form-page) .back-link { min-height: 44px; font-size: var(--fs-14); }
  .back-link__long { display: none; }
  .back-link__short { display: inline; }
  .site-head { align-items: flex-start; gap: 12px; }
  .site-head__tile { width: 32px; height: 32px; }
  .site-head__text { flex: 1 1 0; }
  .site-head__open { flex-basis: 100%; }
  .site-tabs { gap: 18px; }
  .site-tabs__tab { min-height: 44px; }
  /* The cards: no icon of their own (it took a row), the chevron says
     the card opens. */
  .form-summary__main { flex-wrap: nowrap; gap: 12px; padding: 16px; }
  .form-summary__icon { display: none; }
  .form-summary__open { align-self: center; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-pill); }
  .form-summary__open-text { display: none; }
  .form-summary__band { padding: 11px 16px; }
  .form-head__title { font-size: 21px; }
  .site-panel__head { padding: 18px 16px 4px; }
  .site-panel__body { padding: 14px 16px 18px; }
  .site-panel__foot { padding: 12px 16px; }
  .site-panel__foot .btn--primary { width: 100%; height: 44px; font-size: 15px; }
  .site-panel__foot--split { flex-direction: column; align-items: stretch; }
  .site-panel__actions { margin-left: 0; }
  .site-panel__flash { margin: 12px 16px 0; }
  :is(.site-page, .form-page) .save-hint { display: none; }
  :is(.site-page, .form-page, .sites-page) :is(.input, .select) { height: 44px; font-size: var(--fs-16); }
  /* 44 px touch targets: every button, the disclosures' toggles, the
     copy rows, the pages' links and the colours of a new website (each
     colour's square keeps its size in a 44 px target). */
  :is(.site-page, .form-page, .sites-page) .btn { min-height: 44px; }
  .sites-page .swatches { gap: 0; margin-left: -8px; }
  .sites-page .swatch { width: 44px; height: 44px; align-items: center; justify-content: center; }
  :is(.site-page, .form-page) .site-disclosure > summary { min-height: 44px; }
  /* The card's chevron is no target of its own: the whole card is. */
  .site-page .form-summary__open { min-height: 0; }
  .copy-row__input { height: 44px; }
  .setup-steps__item > .copy-row .copy-row__input { height: 44px; }
  .setup-steps__copy { margin-left: 0; }
  .setup-steps__download { margin-left: 0; }
  a.form-pages__path { display: inline-flex; align-items: center; min-height: 44px; }
  .check-row { padding: 14px; }
  .check-row input, .check--lg input, .choice--card input { width: 20px; height: 20px; }
  .check--lg { min-height: 44px; }
  .check-row__link { margin-top: -8px; padding-left: 0; }
  .choice--card { padding: 14px; }
  .attention-card { flex-direction: column; gap: 10px; padding: 18px 16px; }
  .attention-card__icon { display: none; }
  /* A choice's actions under it, full width (artboard Formular-Handy). */
  .attention-card .value-list__item { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
  .attention-card .value-list__text { flex: none; }
  .attention-card .value-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-left: 0; }
  .attention-card .value-actions__form, .attention-card .value-actions__assign,
  .attention-card .value-actions .btn, .attention-card__all .btn { width: 100%; }
  .attention-card__all { align-self: stretch; }
  .key-panel { margin: 12px 16px 0; padding: 16px; }
  .setup-steps__item > .copy-row { margin-left: 0; }
  .facts-plain { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts-plain dd { margin-bottom: 8px; }
  .field-table thead { display: none; }
  .field-table, .field-table tbody, .field-table tr, .field-table th, .field-table td { display: block; }
  .field-table tbody tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
  .field-table tbody tr:last-child { border-bottom: 0; }
  .field-table tbody th, .field-table tbody td { padding: 0; border: 0; }
  .field-table__type { display: inline; margin: 0 0 0 4px; }
  .field-table__type::before { content: "· "; }
  .field-table .select { max-width: none; }
  /* The keys: one block per key, each value under its label. */
  .key-table thead { display: none; }
  .key-table, .key-table tbody, .key-table tr, .key-table td { display: block; }
  .key-table tbody tr { position: relative; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
  .key-table tbody tr:last-child { border-bottom: 0; }
  .key-table tbody td { display: flex; gap: 8px; padding: 2px 0; border: 0; overflow-wrap: anywhere; }
  .key-table tbody td[data-label]::before { content: attr(data-label); flex: none; width: 128px; color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--fs-13); }
  .key-table .settings-table__actions { width: auto; padding-top: 8px; text-align: left; }
}

/* css/staff.css */
/* The pages of WP Profis across customers (plain layout): the overview
 * of every customer's websites (/admin/websites, stage 6; the filters and
 * columns of stage 6b; rebuilt for wide screens in stage 7, layout B6),
 * the monthly overview of every customer (/admin/reports, stage 7), the
 * navigation between them and the links in the customer switcher.
 * Colours come from tokens.css. */

/* The links in the customer switcher. */
.org-switch__menu .org-switch__staff { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-divider); }
.org-switch__staff .icon, .org-switch__staff-more .icon { color: var(--color-text-muted); }

/* ---------- The staff pages ---------- */

.staff {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 1680px;
  margin: 0 auto;
  padding: 24px var(--page-gutter) 48px;
}
.staff__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.staff__top .account__back { margin-left: auto; }
.staff__head { display: flex; flex-direction: column; gap: 6px; }
.staff > .alert { max-width: 720px; }

/* Between the two staff pages: buttons like the sidebar's entries, so
   they do not read as a second row of filters. */
.staff-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.staff-nav__item {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 12px;
  border-radius: var(--radius);
  color: var(--color-text-body);
  font-size: var(--fs-13-5);
  text-decoration: none;
}
.staff-nav__item:hover { background: var(--color-nav-active); color: var(--color-text); }
.staff-nav__item[aria-current="page"] { background: var(--color-nav-active); color: var(--color-accent); font-weight: 500; }

/* The filters and sorts as tabs, on the page's own gutter (the staff
   pages have no app layout). */
.staff .staff__filters { margin-top: 0; padding: 0; }
.staff__pages { display: flex; flex-wrap: wrap; gap: 8px; }
.staff__next { margin-left: auto; }

/* ---------- Tables ---------- */

.staff-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13-5); }
.staff-table th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  font-size: var(--fs-12);
  font-weight: 500;
  text-align: left;
  /* Headers may wrap: long notices must not push the table past the page. */
  white-space: normal;
}
.staff-table td, .staff-table tbody th { padding: 12px 8px; border-bottom: 1px solid var(--color-divider); vertical-align: top; text-align: left; }
.staff-table tr > :first-child { padding-left: 0; }
.staff-table tr > :last-child { padding-right: 0; }
.staff-table .staff-row--problem > :first-child { box-shadow: inset 2px 0 0 var(--color-warning-text); padding-left: 10px; }
.staff-table a { color: var(--color-text); text-decoration: none; }
.staff-table a:hover { text-decoration: underline; }
/* The customer's name leads to the customer: underlined on the row's
   hover, so it reads as a link (V18). */
.staff-row:hover .staff-table__org a, .staff-row:hover .staff-report__customer a { text-decoration: underline; text-underline-offset: 3px; }
.staff-table__org a, .staff-report__customer a { font-weight: 500; }
.staff-table a.site-label { display: inline-flex; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.staff-table__time { font-family: var(--font-mono); font-size: var(--fs-12-5); color: var(--color-text-secondary); white-space: nowrap; }
.staff-table__alert { color: var(--color-text-secondary); font-size: var(--fs-12-5); }
/* The labels of the cells on phones (the table is a list there). */
.staff-table__label { display: none; }
/* The small labels inside a cell: "Plugin 1.2.0", "Tages-Check heute 06:00". */
.staff-table__sublabel { font-size: var(--fs-12); color: var(--color-text-muted); }
.staff-result { font-size: var(--fs-12-5); font-weight: 500; white-space: nowrap; }
.staff-result--ok { color: var(--color-success-text); }
.staff-result--warning { color: var(--color-warning-text); }
.staff-result--failed { color: var(--color-danger-text); }
.staff-result--muted { color: var(--color-text-muted); font-weight: 400; }
.staff-result--pending { color: var(--color-accent-alt); }

/* Websites of every customer (layout B6): seven columns; the plugin in
   the website's cell, the latest check and inquiry in one column, so the
   notices get the room. */
.staff-table--websites .staff-table__org { width: 12%; }
.staff-table--websites .staff-table__site { width: 16%; }
.staff-table--websites .staff-table__last { width: 14%; }
.staff-table--websites .staff-table__visitors { width: 10%; }
.staff-table--websites .staff-table__alert { width: 12%; }
/* The status keeps its badge's width; the notices take the rest and the
   largest share. Without a share of their own they were served after the
   columns with one: at 1280 px they fell to their 220 px floor, below the
   website's (a domain set in one line, wider by 11.5 px where glyphs are
   rounded to whole pixels, as on Linux). */
.staff-table--websites .staff-table__notices { width: 22%; min-width: 220px; }
.staff-table__plugin, .staff-last { display: block; margin-top: 2px; }
.staff-last:first-child { margin-top: 0; }
.staff-table__plugin { font-size: var(--fs-12-5); }
.staff-table__plugin .mono { font-size: var(--fs-12-5); }
.staff-last .staff-table__time { white-space: nowrap; }
.staff-visitors { font-size: var(--fs-12-5); color: var(--color-text-secondary); }
.staff-visitors[title] { text-decoration: underline dotted var(--color-separator); text-underline-offset: 3px; cursor: help; }
.staff-table__notices { font-size: var(--fs-12-5); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.staff-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--status-follow-up-bg); color: var(--color-warning-text-strong);
  font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 500;
}
.staff-mark { font-size: var(--fs-12); font-weight: 500; color: var(--color-warning-text); }
.staff-flag { display: inline-flex; flex: none; color: var(--color-text-muted); cursor: help; }
/* The domain and its flags stay on one line; a long domain wraps inside
   its link (V14). */
.staff-site { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.staff-site .site-label { min-width: 0; }

/* The monthly overview of every customer. */
.staff-reports__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.staff-reports__bar .staff__filters { flex: 1 1 auto; min-width: 0; }
.staff-months .menu__panel { left: 0; right: auto; max-height: 360px; overflow-y: auto; }
.staff-months .menu__item { text-decoration: none; }
/* The months are a list: no bullets or indent of the browser (V6). */
.staff-months .menu__list { margin: 0; padding: 0; list-style: none; }
.staff-months summary .icon:last-child { color: var(--color-text-muted); }
.staff-reports__totals, .staff-reports__missing { margin: 0; font-size: var(--fs-13-5); color: var(--color-text-secondary); }
.staff-report__num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.staff-table th.staff-report__num { text-align: right; font-family: var(--font-sans); }
/* The customer's name is the row's header cell: text, not a column label. */
.staff-table tbody th { font-size: var(--fs-13-5); font-weight: 500; color: var(--color-text); }
.staff-table .staff-report__num { text-align: right; }
.staff-report__num--failed { color: var(--color-warning-text); font-weight: 500; }
.staff-report__value { font-weight: 500; }
.staff-report__sub { font-family: var(--font-sans); font-size: var(--fs-12); color: var(--color-text-muted); }
.staff-report__note { display: block; font-family: var(--font-sans); font-size: var(--fs-12); color: var(--color-text-muted); white-space: normal; }
.staff-report__note--better { color: var(--color-success-text); }
.staff-report__mailing { white-space: nowrap; }
/* Eight columns do not need a 1920 px screen (V18). */
.staff-table--reports { max-width: 1280px; }

/* Phones: the tables become lists. */
@media (max-width: 860px) {
  .staff__top .account__back { margin-left: 0; }
  .staff-table, .staff-table tbody { display: block; }
  .staff-table thead { display: none; }
  .staff-table .staff-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .staff-table td, .staff-table tbody th { display: block; padding: 0; border: 0; }
  .staff-table tr > :first-child, .staff-table .staff-row--problem > :first-child { box-shadow: none; padding-left: 0; }
  .staff-table .staff-row--problem { box-shadow: inset 2px 0 0 var(--color-warning-text); padding-left: 10px; }
  .staff-table__label { display: inline; font-size: var(--fs-12-5); color: var(--color-text-muted); }
  .staff-table--websites .staff-row {
    grid-template-areas: "org status" "site site" "last last" "visitors visitors" "notices notices" "alert alert";
  }
  /* Wins over the desktop widths of the cells (same specificity, later),
     so no cell of the list is squeezed to a column's width (V1). */
  .staff-table--websites .staff-row > * { width: auto; }
  .staff-table__org { grid-area: org; }
  .staff-table__status { grid-area: status; }
  .staff-table__site { grid-area: site; }
  .staff-table__last { grid-area: last; }
  .staff-table__visitors { grid-area: visitors; }
  .staff-table__notices { grid-area: notices; }
  .staff-table__alert { grid-area: alert; }

  .staff-table--reports .staff-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-table--reports .staff-report__customer { grid-column: 1 / -1; }
  .staff-table .staff-report__num, .staff-table .staff-report__mailing { text-align: left; white-space: normal; }
  .staff-table--reports td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    color: var(--color-text-muted);
  }
}

/* css/reports.css */
/* The monthly report (stage 7, mockup 08, docs/stage-7-plan.md §9.1,
 * §9.5, §9.6): a white card of at most 960 px on the muted page, the rail
 * beside it from 1360 px, below it otherwise; one column on phones. Bars
 * are inline SVG coloured by classes, the day cells reuse the form test's
 * .check-day colours (websites.css). Printing prints the card alone, on
 * white (tokens.css sets the light theme for print). Colours come from
 * tokens.css. */

.report-page {
  min-height: calc(100vh - var(--topbar-height));
  background: var(--color-page-muted);
}

/* Page header: the title and the month navigation. */
.report-head {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  /* Ends with the card (and the rail beside it from 1360 px), not at the
     window's edge (V10). */
  max-width: calc(960px + 2 * var(--page-gutter));
}
.report-months { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: var(--fs-13-5); }
.report-months__link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-accent-alt);
  text-decoration: none;
}
.report-months__link:hover { text-decoration: underline; }
.report-months__current { font-weight: 600; }
.report-months__live { font-weight: 400; color: var(--color-text-muted); }

.report-body { display: flex; flex-direction: column; gap: 16px; }
/* "Ihr erster Monatsbericht kommt am …" spans the card and the rail. */
.report-first { display: flex; align-items: flex-start; gap: 8px; grid-column: 1 / -1; margin: 0; }
.report-first .icon { flex-shrink: 0; margin-top: 2px; }
.report-first a { color: inherit; }

.report-layout { display: grid; grid-template-columns: minmax(0, 960px); gap: 24px; align-items: start; }

/* The inbox header's "23 im September" leads to the month's report. */
.stat__link { color: inherit; text-decoration: none; }
.stat__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The card ---------- */

.report {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
  padding: 56px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.report a { color: var(--color-accent-alt); }
.report a:hover { color: var(--color-accent); }
.report--empty { padding: 40px 24px; }

.report__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.report__brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-14-5); font-weight: 600; }
.report__brand img { display: block; flex-shrink: 0; }
.report__kind { margin-left: auto; font-size: var(--fs-13); color: var(--color-text-muted); white-space: nowrap; }
.report__code { margin-left: 6px; font-family: var(--font-mono); font-weight: 500; color: var(--color-accent); }

.report__intro { display: flex; flex-direction: column; gap: 10px; }
.report__org { margin: 0; font-size: var(--fs-13); color: var(--color-text-muted); overflow-wrap: anywhere; }
.report__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: var(--fs-13); color: var(--color-text-secondary); }
.report__live {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: var(--radius);
  background: var(--status-new-bg);
  color: var(--status-new-fg);
  font-size: var(--fs-12-5);
  font-weight: 500;
}
.report__headline {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  /* Two even lines rather than a number alone at the end of the first
     (the catalogs keep "– 6 mehr" together, V11). */
  text-wrap: balance;
}

/* Four key figures in a row (2 × 2 on phones). */
.report-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.report-figure { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 16px; }
.report-figure:first-child { padding-left: 0; }
.report-figure:last-child { padding-right: 0; }
.report-figure + .report-figure { border-left: 1px solid var(--color-divider); }
.report-figure__label { font-size: var(--fs-12-5); color: var(--color-text-muted); }
.report-figure__value {
  margin: 0;
  font-size: var(--fs-28);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  /* "1 Std. 42 Min." breaks into two even lines rather than one long one. */
  text-wrap: balance;
}
/* A narrow column takes a smaller value, so "1 Std. 42 Min." stays on one
   line (170 px at 28 px). */
.report-figure { container-type: inline-size; }
@container (max-width: 172px) {
  .report-figure__value { font-size: 24px; }
}
@container (max-width: 146px) {
  .report-figure__value { font-size: var(--fs-22); }
}
.report-figure__note { margin: 0; font-size: var(--fs-12-5); color: var(--color-text-muted); }
.report-figure__note--better { color: var(--color-success-text); font-weight: 500; }

/* "Am 1. Okt. waren 3 Anfragen … noch ohne Antwort." */
.report-open {
  display: flex; align-items: flex-start; gap: 8px;
  margin: -16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--color-note-border);
  border-radius: var(--radius-lg);
  background: var(--color-note-bg);
  font-size: var(--fs-13-5);
  color: var(--color-text-body);
}
.report-open .icon { flex-shrink: 0; margin-top: 2px; color: var(--color-warning-text); }

.report-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.report-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.report-section__title { margin: 0; font-size: var(--fs-16); font-weight: 600; }
.report-section__intro { font-size: var(--fs-13); color: var(--color-text-muted); }
.report-note { margin: 0; font-size: var(--fs-13); color: var(--color-text-muted); }

/* Sources: label, bar, count, won; the rows share the columns (subgrid),
   so the bars line up whatever the won text says. */
.report-sources {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(32px, auto) minmax(96px, auto);
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
}
.report-source {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: 32px;
}
.report-source__label { overflow-wrap: anywhere; }
.report-bar { display: block; width: 100%; height: 8px; overflow: visible; }
.report-bar__track { fill: var(--color-divider); }
.report-bar__fill { fill: var(--color-accent); }
.report-source__count { font-family: var(--font-mono); font-weight: 500; text-align: right; }
.report-source__won { font-size: var(--fs-13); color: var(--color-text-muted); }
.report-source__earlier { white-space: nowrap; }

/* Per website: a table (a list on phones). */
.report-sites { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.report-sites thead th,
.report-sites thead th.report-sites__num {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: left;
}
/* Headers in the sans font, as in mockup 08 (V13); the numbers below are
   mono. */
.report-sites thead th.report-sites__num { padding-left: 16px; font-family: var(--font-sans); text-align: right; }
.report-sites tbody > tr > * { padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.report-sites tbody > tr:last-child > * { border-bottom: 0; }
.report-sites .report-sites__num { padding-left: 16px; text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.report-sites__count { font-weight: 500; }
.report-sites__name { font-weight: 400; text-align: left; overflow-wrap: anywhere; }
.report-sites__name--mono { font-family: var(--font-mono); font-size: var(--fs-13); }
.report-sites__name .site-square { display: inline-block; margin-right: 10px; vertical-align: 1px; }
/* Per service (stage 7b): the website table without the response column;
   "Ohne Leistung" is muted like "Ohne bestimmte Website". */
.report-services tr[data-service-none] > th { color: var(--color-text-muted); }

/* Reliability: the form checks and the messages set aside. */
.report-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-card {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.report-card__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.report-card__value { font-size: 24px; font-weight: 600; color: var(--color-accent); white-space: nowrap; }
.report-card__value--good { color: var(--color-success-text); }
.report-card__label { font-size: var(--fs-13); color: var(--color-text-secondary); }
.report-card__none { margin: 0; font-size: var(--fs-13-5); color: var(--color-text-secondary); }
.report-card__text { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--color-text-muted); overflow-wrap: anywhere; }
.report-card__text--note { color: var(--color-text-secondary); }
.report-card__sub { color: var(--color-text-muted); }

/* One cell per day of the month, 8 × 16 px, in one row: 31 columns that
   may narrow a little in a narrow card (V3); two rows on phones. */
.report-days {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 8px));
  gap: 2px;
  margin: 0; padding: 0;
  list-style: none;
}
.report-days .check-day { width: auto; height: 16px; aspect-ratio: auto; border-radius: var(--radius-xs); }
.check-day--none { background: var(--color-check-none); }
.check-day--future { background: transparent; box-shadow: inset 0 0 0 1px var(--color-check-none); }

.report-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.report-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: var(--radius);
  background: var(--status-in-progress-bg);
  color: var(--status-in-progress-fg);
  font-size: var(--fs-12-5);
  font-weight: 500;
  white-space: nowrap;
}
.report-chip.tag-promotion { background: var(--tag-promotion-bg); color: var(--tag-promotion-fg); }
.report-chip.tag-spam { background: var(--tag-spam-bg); color: var(--tag-spam-fg); }

.report__footer {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider);
  font-size: var(--fs-12-5);
  color: var(--color-text-muted);
}
.report__asof { margin-left: auto; }

/* ---------- The rail ---------- */

.report-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 32px; min-width: 0; font-size: var(--fs-13); }
.report-rail__block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.report-rail__title { margin: 0; font-size: var(--fs-13); font-weight: 600; }
/* Secondary, not muted: 13 px on the muted page needs it for 4.5:1 (V2). */
.report-rail__text { margin: 0; line-height: 1.55; color: var(--color-text-secondary); }
.report-rail__delivery p { display: flex; gap: 8px; margin: 0; line-height: 1.5; color: var(--color-text-secondary); }
.report-rail__delivery .icon { flex-shrink: 0; margin-top: 3px; color: var(--color-text-muted); }
.report-rail__delivery a { color: var(--color-accent-alt); }
.report-rail__delivery strong { white-space: nowrap; }
.report-archive { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.report-archive a {
  display: flex; align-items: center; gap: 4px;
  min-height: 30px; padding: 4px 8px;
  border-radius: var(--radius);
  color: var(--color-text-body);
  text-decoration: none;
}
.report-archive a:hover { background: var(--color-nav-active); color: var(--color-text); }
.report-archive a[aria-current="page"] { background: var(--color-nav-active); color: var(--color-accent); font-weight: 500; }
.report-archive__live { font-weight: 400; color: var(--color-text-secondary); }

/* From 1360 px the rail stands beside the card. */
@media (min-width: 1360px) {
  .report-head { max-width: calc(960px + 32px + 280px + 2 * var(--page-gutter)); }
  .report-layout { grid-template-columns: minmax(0, 960px) minmax(240px, 280px); gap: 32px; }
  .report-rail { display: flex; flex-direction: column; position: sticky; top: calc(var(--topbar-height) + 24px); }
}

@media screen and (max-width: 1200px) {
  .report { padding: 40px; }
}

/* ---------- Phones ---------- */

@media screen and (max-width: 860px) {
  .report { gap: 28px; padding: 24px; border-radius: var(--radius-lg); }
  .report__headline { font-size: var(--fs-22); }
  .report-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-figure, .report-figure:first-child, .report-figure:last-child { padding: 14px 12px; }
  .report-figure:nth-child(odd) { padding-left: 0; border-left: 0; }
  .report-figure:nth-child(even) { padding-right: 0; }
  .report-figure:nth-child(n + 3) { border-top: 1px solid var(--color-divider); }
  .report-figure__value { font-size: var(--fs-22); }
  .report-open { margin-top: -8px; }

  /* The label above the bar; count and won beside it. */
  .report-sources { display: flex; flex-direction: column; gap: 6px; }
  .report-source {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label count" "bar bar" "won won";
    gap: 4px 12px;
    padding: 6px 0;
  }
  .report-source__label { grid-area: label; }
  .report-source .report-bar { grid-area: bar; }
  .report-source__count { grid-area: count; }
  .report-source__won { grid-area: won; }

  /* The website table becomes a list. */
  .report-sites, .report-sites tbody { display: block; }
  .report-sites thead { display: none; }
  .report-sites tbody > tr {
    display: grid;
    /* Each figure as wide as it needs, so "1 Std. 25 Min." stays on one
       line (V12). */
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 6px 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .report-sites tbody > tr:last-child { border-bottom: 0; }
  .report-sites tbody > tr > * { padding: 0; border: 0; }
  .report-sites tbody th { grid-column: 1 / -1; }
  .report-sites .report-sites__num { display: flex; flex-direction: column; gap: 2px; padding: 0; text-align: left; white-space: nowrap; }
  .report-sites td::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    font-weight: 400;
    color: var(--color-text-muted);
  }

  .report-cards { grid-template-columns: minmax(0, 1fr); }
  .report-rail { grid-template-columns: minmax(0, 1fr); }
  .report-days { grid-template-columns: repeat(16, minmax(0, 8px)); row-gap: 4px; }
}

/* ---------- Print ----------
   Only the card, full width, on white (the light theme, tokens.css);
   bars, day cells and chips keep their colours; a section never splits
   across pages. The other pages print as they are. */
@media print {
  @page { size: A4; margin: 15mm; }

  body:has(.report-page) .sidebar,
  body:has(.report-page) .topbar,
  body:has(.report-page) .footer-hints,
  body:has(.report-page) .skip-link,
  .report-head, .report-rail, .report-first { display: none; }
  body:has(.report-page) { background: var(--color-bg); }
  body:has(.report-page) .app, body:has(.report-page) .main { display: block; min-height: 0; }
  .report-page { min-height: 0; background: var(--color-bg); }
  .report-body { padding: 0; }
  .report-layout { display: block; }
  /* A normal month fits one A4 page (V4). */
  .report { gap: 18px; padding: 0; border: 0; border-radius: 0; }
  .report__intro { gap: 6px; }
  .report__headline { font-size: 22px; }
  .report-figure { padding: 10px 12px; }
  .report-figure__value { font-size: 22px; }
  .report-open { margin-top: -6px; padding: 8px 12px; }
  .report-section { gap: 8px; }
  .report-source { min-height: 24px; }
  .report-sources { row-gap: 2px; }
  .report-sites tbody > tr > * { padding: 7px 0; }
  .report-card { padding: 12px 16px; gap: 6px; }
  .report__footer { padding-top: 10px; }
  .report-figures, .report-open, .report-section, .report-card, .report__footer { break-inside: avoid; }
  .report-bar, .report-days .check-day, .report-chip, .report__live, .report-open, .site-square {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .report a { color: inherit; text-decoration: none; }
}

/* css/reminders.css */
/* Reminders (stage 7d, the design's "Erinnerungen", "Posteingang" and
 * "Seitenleiste" artboards): the overview of the reminders, the bell
 * chip of an inbox row, a due row's tint and the sidebar's amber number
 * of due reminders. Colours come from tokens.css. */

/* ---------- Sidebar: the number of due reminders ---------- */

/* An amber pill with white digits, hidden at 0 like every counter. */
.nav__count.nav__count--due,
.nav__item:hover .nav__count.nav__count--due,
.nav__item[aria-current="page"] .nav__count.nav__count--due {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-due-count-bg);
  color: var(--color-on-due-count);
  font-size: var(--fs-11-5);
  font-weight: 600;
  line-height: 1;
}

/* ---------- Inbox: the bell chip and a due row ---------- */

/* Grey while the reminder comes, amber once it is due; the row keeps its
   height (the chip is as high as the line's other tags). */
.reminder-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 19px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-body);
  font-size: var(--fs-12);
  white-space: nowrap;
  vertical-align: 1px;
}
.reminder-chip .icon { flex: none; color: var(--color-text-muted); }
.reminder-chip--due {
  border-color: var(--color-note-border);
  background: var(--color-note-bg);
  color: var(--color-warning-text);
  font-weight: 500;
}
.reminder-chip--due .icon { color: currentColor; }
.inquiry-row__line > .reminder-chip { flex: none; }
/* "Erinnerung fällig" where the cell has room, "fällig" (the bell says
   the rest) where it would push the row onto a second line, and the bell
   alone (amber when due) in the narrow cell of a tablet or a narrow
   window, where a word beside the name and the service would add a line
   to the row. The whole time is the title and for screen readers. */
.reminder-chip__short { display: none; }
@container inquiry-line (max-width: 460px) {
  .reminder-chip__long { display: none; }
  .reminder-chip__short { display: inline; }
}
@media (min-width: 861px) {
  @container inquiry-line (max-width: 300px) {
    .reminder-chip { width: 22px; padding: 0; justify-content: center; }
    .reminder-chip .reminder-chip__text { display: none; }
  }
}
.inquiry-row.inquiry-row--due { background: var(--color-due-bg); }
.inquiry-row.inquiry-row--due:hover,
.inquiry-row.inquiry-row--due[data-selected] { background: var(--color-row-selected); }

/* ---------- "Erinnerungen" ---------- */

.reminders {
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px var(--page-gutter) 48px;
}
.reminder-group { display: flex; flex-direction: column; gap: 8px; }
.reminder-group__title {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: var(--fs-13-5);
  font-weight: 600;
  color: var(--color-text-body);
}
.reminder-group--due .reminder-group__title { color: var(--color-warning-text); }
.reminder-group--due .reminder-group__title::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--status-follow-up-dot);
}

/* A group is a card; its menus ("Später") open over the next group, so
   the card never clips (no overflow), and the rows' corners are rounded
   instead. */
.reminder-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.reminder-group--due .reminder-card { border-color: var(--color-note-border); background: var(--color-due-bg); }

.reminder-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--fs-14);
}
.reminder-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
/* The header row is for screen readers only: no height, no text box. */
.reminder-table__head th {
  height: 0; padding: 0; border: 0;
  overflow: hidden;
  font-size: 0; line-height: 0;
}
.reminder-group--due .reminder-table td { border-bottom-color: var(--color-note-border); }
.reminder-table tr:last-child td { border-bottom: 0; }
.reminder-table td:first-child { padding-left: 16px; }
.reminder-table td:last-child { padding-right: 16px; }
.reminder-table tr:first-child td:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
.reminder-table tr:first-child td:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); }
.reminder-table tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius-lg) - 1px); }
.reminder-table tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius-lg) - 1px); }

.reminder-row { cursor: pointer; }
.reminder-row:hover td, .reminder-row[data-selected] td { background: var(--color-row-selected); }
.reminder-row[data-selected] td:first-child { box-shadow: inset 2px 0 0 var(--color-accent); }

/* The design's columns (their padding included: the table's cells are
   border-box). The time takes "Mo 05.10. 09:00"; a longer one (another
   year, en-US's "Mon, Oct 12, 10:30 AM") wraps between its date and its
   time of day. The website takes a name like "schreinerei-seeblick.ch"
   whole (a longer one is cut with an ellipsis, its whole name in the
   title; stage 7d review): 23 glyphs of 12.5 px Geist Mono are 172.5 px
   where glyphs are placed at fractions of a pixel (macOS) but 184 px where
   each is rounded to a whole pixel (Linux), so the column counts 8 px a
   glyph, plus the padding, the square and its gap (32 px). The actions
   take their buttons, so the contact and subject keep the rest. */
.reminder-row__when { width: 168px; }
.reminder-row__status { width: 132px; }
.reminder-row__site { width: 216px; }
.reminder-row__assignee { width: 126px; }
.reminder-row__actions { width: 208px; text-align: right; }

.reminder-row__when time {
  display: inline-flex; align-items: flex-start; gap: 6px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: 18px;
  color: var(--color-text-body);
}
.reminder-row__when .icon { flex: none; margin-top: 2px; color: var(--color-text-muted); }
.reminder-row__time { min-width: 0; }
.reminder-row--due .reminder-row__when time { color: var(--color-warning-text); }
.reminder-row--due .reminder-row__when .icon { color: currentColor; }

/* The contact and the subject share one line, like an inbox row: only the
   subject gives way and ends with an ellipsis (its whole text in the
   title), the name stays whole up to a share of the cell. Why the
   reminder was set ("nochmals anrufen") is a smaller second line, so it
   never squeezes the subject to a few letters (stage 7d: "Holztr…" at
   1440 px). */
.reminder-row__inquiry { min-width: 0; line-height: 1.4; }
.reminder-row__link {
  display: grid; grid-template-columns: fit-content(55%) minmax(0, 1fr);
  align-items: baseline; column-gap: 6px;
  min-width: 0;
  color: var(--color-text); text-decoration: none;
  white-space: nowrap;
}
.reminder-row__link > * { overflow: hidden; text-overflow: ellipsis; }
.reminder-row__link:hover .reminder-row__name { text-decoration: underline; }
.reminder-row__name { font-weight: 600; }
.reminder-row__subject { min-width: 0; color: var(--color-text-secondary); }
.reminder-row__reason { grid-column: 1 / -1; font-size: var(--fs-12-5); color: var(--color-text-muted); }
/* On its own line the reason needs no separator; phones run it on after
   the subject and keep it (below). */
.reminder-row__reason > [aria-hidden] { display: none; }
.reminder-row__assignee { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reminder-row__assignee .person { min-width: 0; }

.reminder-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; }
.reminder-actions .btn--sm { height: 30px; padding: 0 10px; color: var(--color-text-strong); }
.reminder-actions .btn .icon { flex: none; }
/* The menu opens on the right edge of the row, over what follows; "Andere
   Zeit …" (a link to the inquiry) is set apart from the quick choices. */
.reminder-actions__later .menu__panel { text-align: left; min-width: 200px; }
.reminder-actions__later .menu__item { min-height: 36px; }
.reminder-actions__later .menu__item + .reminder-actions__other {
  margin-top: 4px;
  border-top: 1px solid var(--color-divider);
  border-radius: 0 0 var(--radius) var(--radius);
}
.reminder-actions__other { color: var(--color-text-secondary); text-decoration: none; }
/* A finger on a tablet: buttons and menu entries it can hit. */
@media (pointer: coarse) {
  .reminder-actions .btn--sm { height: 44px; }
  .reminder-actions__later .menu__item { min-height: 44px; }
}

/* "Keine Erinnerungen" (the large box of an empty page, .alert--lead)
   and the note below the list are info boxes (components.css .alert,
   stage 7d); the note as drawn: 860 px wide at most, the large radius. */
.reminders .alert { max-width: 860px; }
.reminders__note { gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); }
.reminders .alert__body a:not(.btn) { font-weight: 500; }
.reminders .list-more { margin: -12px 0 0 16px; }

/* ---------- Narrower screens ---------- */

/* A laptop beside the sidebar (1366 px and the like): the website goes
   (the inquiry names it), so the contact and subject keep one line. */
@media (max-width: 1399px) {
  .reminder-row__site { display: none; }
}

/* A tablet or a narrow window: each reminder is two lines, the contact
   and subject above, the time, status and assignee below, the actions on
   the right of both. */
@media (max-width: 1180px) {
  .reminders { padding-top: 20px; gap: 20px; }
  .reminder-table, .reminder-table tbody { display: block; }
  .reminder-table__head { display: none; }
  .reminder-row {
    display: grid;
    grid-template-columns: 150px 128px minmax(0, 1fr) auto;
    grid-template-areas: "inquiry inquiry inquiry actions" "when status assignee actions";
    align-items: center;
    gap: 6px 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
  }
  .reminder-group--due .reminder-row { border-bottom-color: var(--color-note-border); }
  .reminder-row:last-child { border-bottom: 0; }
  .reminder-row:hover td, .reminder-row[data-selected] td { background: transparent; }
  .reminder-row:hover, .reminder-row[data-selected] { background: var(--color-row-selected); }
  .reminder-row:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); border-top-right-radius: calc(var(--radius-lg) - 1px); }
  .reminder-row:last-child { border-bottom-left-radius: calc(var(--radius-lg) - 1px); border-bottom-right-radius: calc(var(--radius-lg) - 1px); }
  .reminder-row[data-selected] td:first-child { box-shadow: none; }
  .reminder-row[data-selected] { box-shadow: inset 2px 0 0 var(--color-accent); }
  .reminder-table td { display: block; width: auto; padding: 0; border: 0; border-radius: 0 !important; }
  .reminder-table td:first-child, .reminder-table td:last-child { padding: 0; }
  .reminder-row__inquiry { grid-area: inquiry; }
  .reminder-row__when { grid-area: when; }
  .reminder-row__status { grid-area: status; }
  .reminder-row__assignee { grid-area: assignee; }
  .reminder-row__actions { grid-area: actions; }
  .reminder-table .reminder-row__site { display: none; }
}

/* Phones: like an inbox row on a phone, the contact and the time, the
   status and the assignee, the website, then the actions on a line of
   their own with buttons a finger can hit. */
@media (max-width: 860px) {
  .reminder-group { gap: 6px; }
  .reminder-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "inquiry when" "status assignee" "site site" "actions actions";
    gap: 8px 12px;
  }
  /* The contact on its line, the subject and the reason below it,
     wrapping whole (no ellipsis on a phone). */
  .reminder-row__link { display: block; white-space: normal; overflow-wrap: anywhere; }
  .reminder-row__link > * { overflow: visible; max-width: none; }
  .reminder-row__name { display: block; }
  .reminder-row__subject { margin-top: 2px; }
  .reminder-row__reason { font-size: inherit; color: var(--color-text-secondary); }
  .reminder-row__reason > [aria-hidden] { display: inline; }
  .reminder-row__when { align-self: start; text-align: right; }
  .reminder-row__assignee { text-align: right; }
  .reminder-row__assignee .person { justify-content: flex-end; }
  .reminder-table .reminder-row__site { grid-area: site; display: block; }
  .reminder-table .reminder-row__site:empty { display: none; }
  .reminder-row__actions { text-align: left; }
  .reminder-actions { display: flex; justify-content: flex-start; gap: 8px; }
  .reminder-actions .btn--sm { width: 100%; height: 44px; padding: 0 16px; font-size: var(--fs-14); }
  .reminder-actions__done, .reminder-actions__later, .reminder-actions__other-time { flex: 1 1 0; }
  .reminder-actions__later .menu__item { min-height: 44px; font-size: var(--fs-14); }
  .reminders .alert { max-width: none; }
  .reminders .alert__actions .btn { min-height: 44px; }
}