/* Researcher UI. Calm, modern, system fonts (no external font requests). */
:root {
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --bg: #f6f6f3;
  --surface: #ffffff;
  --fg: #1c1c1a;
  --muted: #6b6b66;
  --subtle: #9a9a93;
  --accent: #2957a4;
  --accent-hover: #1f4787;
  --accent-soft: rgba(41, 87, 164, 0.10);
  /* AI actions: a light violet, clearly apart from the blue of ordinary buttons */
  --ai: #7a3fd1;
  --ai-soft: #f2ebfc;
  --ai-border: #d9c6f5;
  /* linked elements (app/linked.py): a petrol blue, apart from the blue of buttons and the green of constructs */
  --linked: #0b6e86;
  --linked-soft: rgba(11, 110, 134, 0.11);
  /* interview guides (app/interview.py): a warm brown, apart from the blue of live votes and the petrol of linked elements */
  --interview: #8a4b14;
  --interview-soft: rgba(138, 75, 20, 0.11);
  /* live votes: a raspberry red, apart from the blue of questionnaires and the brown of interview guides */
  --live: #b4235f;
  --live-soft: rgba(180, 35, 95, 0.10);
  --on-accent: #ffffff;
  --surface-2: #f8f8f5;
  --surface-3: #efeee9;
  --header-bg: rgba(255, 255, 255, 0.92);
  --footer-bg: rgba(250, 250, 247, 0.95);
  --focus-ring: rgba(41, 87, 164, 0.3);
  /* the keyboard focus: an opaque line, 7:1 on the background (WCAG 1.4.11, 2.4.7; UI audit 2026-10-04, R66) */
  --focus-outline: 2px solid var(--accent);
  /* frames of input fields: at least 3:1 against the surface (WCAG 1.4.11, R73) */
  --field-border: #8c8a82;
  --border: #e3e2dc;
  --border-strong: #cfcdc5;
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, 0.09);
  --on-danger: #ffffff;
  --ok: #1f6b2a;
  --ok-soft: rgba(31, 107, 42, 0.11);
  --warn: #7a5b00;
  --warn-soft: rgba(200, 150, 0, 0.13);
  --warn-border: rgba(200, 150, 0, 0.45);
  --warn-bar: #e0b400;
  --on-warn: #ffffff;
  /* "check this" and negative values, apart from errors (red) and warnings (yellow) (UI audit 2026-10-04, R78) */
  --caution: #b35c00;
  /* data colours of charts with several series (segments, profiles): Datenfarben tragen keine Bewertung. After Okabe
     & Ito (2008): blue, orange, bluish green, reddish purple, sky blue and yellow, darkened to 3:1 and more against
     the surface (WCAG 1.4.11) and kept apart from every colour with a meaning (OK, caution, warning, error, AI,
     linked, interview, live, buttons); told apart with protanopia and deuteranopia as well (Machado et al., 2009).
     tests/test_display.py checks all three (UI/UX audit 2026-10-07, W120, W121) */
  --chart-1: #00649c; --chart-2: #b97f00; --chart-3: #009b71; --chart-4: #8d5273; --chart-5: #4491bc; --chart-6: #625d15;
  /* palettes by the type of scale (Harrower & Brewer, 2003; UI/UX audit 2026-10-07, S11), after the hues of Okabe & Ito:
     sequential --seq-1 (few) to --seq-5 (many) in one blue, in even steps of lightness (ΔL*), for amounts on maps and
     in heat maps; diverging --div-1 (low end, amber) over a neutral grey --div-4 to --div-7 (high end, blue), the same
     lightness on both sides, for ordered levels (stacked bars of a scale); --div-ink is the text on every one of them
     (4.5:1). --data-fill is the one fill of bars, columns and areas (3:1 against the surface and against the error
     bars in --fg), --data-neg its negative side (part-worths, scores below zero: the sign stands next to it). In the
     light styles the scales darken towards "more", in the dark ones they lighten. Ends 3:1 against the surface, told
     apart with protanopia and deuteranopia, and kept apart from OK, caution, warning and error: they judge nothing.
     tests/test_display.py checks all of it */
  --seq-1: #cfe1fa; --seq-2: #a3c4ed; --seq-3: #71a7e0; --seq-4: #378ccf; --seq-5: #0270ae;
  --div-1: #af7c38; --div-2: #c49d6f; --div-3: #d6bfa7; --div-4: #e3e2df; --div-5: #b0c5e0; --div-6: #79a8db; --div-7: #1e8cd6;
  --div-ink: #1c1c1a; --data-fill: #378ccf; --data-neg: #ac7d3f;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* font sizes in six steps (UI audit R84): 0.75 / 0.85 / 0.95 / 1.05 / 1.35 / 1.55 rem; above that only display numbers */
  --radius: 8px;  /* controls (Ralf: radius 8); panels 12, tags and badges 6, circles 50 % (UI audit R81, R82) */
  --radius-panel: 12px; --radius-tag: 6px;
  --field-h: 42px;  /* every field (Ralf: 42 px); inside table cells as high as the row needs (UI audit R83) */
  --shadow: 0 1px 2px rgba(20, 20, 15, 0.05), 0 1px 1px rgba(20, 20, 15, 0.03);
  --shadow-pop: 0 10px 30px rgba(20, 20, 15, 0.12), 0 2px 6px rgba(20, 20, 15, 0.06);
}
* { box-sizing: border-box; }
/* what gets the focus is scrolled clear of the sticky header (56 px) and the fixed footer (34 px) (WCAG 2.4.11, R69) */
html { scroll-padding-top: 72px; scroll-padding-bottom: 44px; scrollbar-gutter: stable; }  /* no jump of 15 px between pages with and without a scroll bar (UI/UX audit 2026-10-09, X71) */
body { margin: 0; background: var(--bg); color: var(--fg); padding-bottom: 44px;
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; }
/* Links: never underlined. Under the mouse a link gets darker (lighter in the dark mode); keyboard focus shows
   the focus ring. Text links (no class, or only "small") are semi-bold, so they stand out from the text around them by
   more than their colour (WCAG 1.4.1). Links that are a component (button, tab, card, chip) have a class
   or a rule of their own; :where() keeps these rules weak, so such a rule always wins. */
a { color: var(--accent); text-decoration: none; }
a:where(:not([class]), .small) { font-weight: 600; }
a:where(:not([class]), .small):where(:hover) { color: var(--accent-hover); }
.leaflet-container a { font-weight: inherit; }
.leaflet-container .leaflet-control-attribution a:hover, .leaflet-container .leaflet-control-attribution a:focus { text-decoration: none; }
h1 { font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0.2em 0 0.6em; }
h2 { font-size: 1.05rem; margin: 0 0 12px; letter-spacing: -0.005em; }
code { font-size: 0.85rem; word-break: break-all; background: var(--surface-3); padding: 2px 6px; border-radius: var(--radius-tag); }
.icon { flex: none; vertical-align: -3px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  height: 56px; padding: 0 20px; background: var(--header-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); }
/* a thin band in the accent colour of the look under the header; on a development server (UNDER_CONSTRUCTION=1)
   under_construction.css makes it the yellow and black tape (Ralf, 2026-10-07) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; pointer-events: none; background: var(--accent); }
.site-header a { color: var(--fg); text-decoration: none; }
.brand { font-weight: 700; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; }
.site-header nav { display: flex; gap: 6px; align-items: center; }
/* Narrow windows and phones: the menu wraps below the name instead of running out of the window */
@media (max-width: 800px) {
  .site-header { height: auto; min-height: 56px; flex-wrap: wrap; padding: 6px 12px; row-gap: 2px; }
  .site-header nav { flex-wrap: wrap; row-gap: 2px; justify-content: flex-end; margin-left: auto; }
  .site-header nav a:not(.button), .site-header nav button.link { padding: 6px 8px; }
  .flashes { top: 8px; }
}
.site-header nav a:not(.button), .site-header nav button.link { padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 0.95rem; }
/* icon links keep their square: the text-link padding would push the icon off centre */
.site-header nav a.icon-btn { padding: 0; }
.site-header nav a:not(.button):hover, .site-header nav button.link:hover { background: var(--surface-3); color: var(--fg); text-decoration: none; }
.site-header nav a:where(:not([class])), .site-header nav button.link { font-weight: 400; }
/* Signed in: work areas on the left, the rest on the right, the account in a menu at the name */
.site-header.signed-in { justify-content: flex-start; gap: 18px; }
.site-header .nav-tools { margin-left: auto; }
.site-header nav a[aria-current="page"] { background: var(--surface-3); color: var(--fg); font-weight: 600; }
/* the app's focus ring in the header too, not the thin ring of the browser (UI audit 2026-10-07, W99) */
.site-header a:focus-visible, .site-header summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.nav-wide { display: inline-flex; align-items: center; gap: 6px; }
.nav-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border-strong); }
.nav-menu > summary { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 8px;
  color: var(--muted); font-size: 0.95rem; white-space: nowrap; cursor: pointer; }
.nav-menu > summary:hover, .nav-menu[open] > summary { background: var(--surface-3); color: var(--fg); }
.nav-menu > summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.nav-menu > summary > .icon:nth-child(2) { display: none; }  /* the three lines: narrow windows only */
.nav-menu-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.nav-menu-panel { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); min-width: 220px; display: grid; gap: 1px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-pop); }
.site-header .nav-menu-panel a:not(.button), .nav-menu-panel button { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 0.95rem; font-weight: 400;
  color: var(--fg); text-align: left; cursor: pointer; }
.nav-menu-panel button:hover { background: var(--surface-3); }
.site-header .nav-menu-panel a[aria-current="page"] { background: var(--surface-3); font-weight: 600; }
.nav-menu-panel .icon { color: var(--muted); }
.nav-menu-panel hr { width: 100%; margin: 5px 0; border: 0; border-top: 1px solid var(--border); }
.nav-menu-panel form { margin: 0; }
.nav-menu-panel .theme-sun, :root[data-theme="dark"] .nav-menu-panel .theme-moon { display: none; }
:root[data-theme="dark"] .nav-menu-panel .theme-sun { display: block; }
.nav-narrow { display: none; }
@media (max-width: 1120px) { .nav-menu-name { display: none; } }
/* Narrower windows (UI audit 2026-10-07, W82): first Administration and the prices go into the menu, the areas
   only below about 820 px; with a larger text size on "Konto" (112 %, 125 %) these steps come that much earlier. */
@media (max-width: 1000px) {
  .site-header .nav-wide, .site-header .nav-tools > .donate-link { display: none; }
  .nav-narrow-more { display: grid; gap: 1px; }
}
@media (max-width: 1120px) {
  :root[data-size="112"] .site-header .nav-wide, :root[data-size="112"] .site-header .nav-tools > .donate-link { display: none; }
  :root[data-size="112"] .nav-narrow-more { display: grid; gap: 1px; }
}
@media (max-width: 1250px) {
  :root[data-size="125"] .site-header .nav-wide, :root[data-size="125"] .site-header .nav-tools > .donate-link { display: none; }
  :root[data-size="125"] .nav-narrow-more { display: grid; gap: 1px; }
}
/* Narrow windows and phones: one line; the areas, Administration and prices are in the menu */
@media (max-width: 820px) {
  .site-header.signed-in { height: 56px; flex-wrap: nowrap; padding: 0 12px; }
  .site-header.signed-in nav { flex-wrap: nowrap; }
  .site-header .nav-areas { display: none; }
  .nav-narrow-areas { display: grid; gap: 1px; }
  .nav-menu > summary { width: 32px; padding: 0; justify-content: center; }
  .nav-menu > summary > .icon { display: none; }
  .nav-menu > summary > .icon:nth-child(2) { display: block; }
  .site-header details.nav-menu { position: static; }
  .nav-menu-panel { left: 8px; right: 8px; top: calc(100% + 6px); max-height: calc(100vh - 120px); overflow-y: auto; }
  .site-header .nav-menu-panel a:not(.button), .nav-menu-panel button { padding: 11px 12px; font-size: 1.05rem; }
}
@media (max-width: 920px) {
  :root[data-size="112"] .site-header.signed-in { height: 56px; flex-wrap: nowrap; padding: 0 12px; }
  :root[data-size="112"] .site-header.signed-in nav { flex-wrap: nowrap; }
  :root[data-size="112"] .site-header .nav-areas { display: none; }
  :root[data-size="112"] .nav-narrow-areas { display: grid; gap: 1px; }
  :root[data-size="112"] .nav-menu > summary { width: 32px; padding: 0; justify-content: center; }
  :root[data-size="112"] .nav-menu > summary > .icon { display: none; }
  :root[data-size="112"] .nav-menu > summary > .icon:nth-child(2) { display: block; }
  :root[data-size="112"] .site-header details.nav-menu { position: static; }
  :root[data-size="112"] .nav-menu-panel { left: 8px; right: 8px; top: calc(100% + 6px); max-height: calc(100vh - 120px); overflow-y: auto; }
  :root[data-size="112"] .site-header .nav-menu-panel a:not(.button), :root[data-size="112"] .nav-menu-panel button { padding: 11px 12px; font-size: 1.05rem; }
}
@media (max-width: 1025px) {
  :root[data-size="125"] .site-header.signed-in { height: 56px; flex-wrap: nowrap; padding: 0 12px; }
  :root[data-size="125"] .site-header.signed-in nav { flex-wrap: nowrap; }
  :root[data-size="125"] .site-header .nav-areas { display: none; }
  :root[data-size="125"] .nav-narrow-areas { display: grid; gap: 1px; }
  :root[data-size="125"] .nav-menu > summary { width: 32px; padding: 0; justify-content: center; }
  :root[data-size="125"] .nav-menu > summary > .icon { display: none; }
  :root[data-size="125"] .nav-menu > summary > .icon:nth-child(2) { display: block; }
  :root[data-size="125"] .site-header details.nav-menu { position: static; }
  :root[data-size="125"] .nav-menu-panel { left: 8px; right: 8px; top: calc(100% + 6px); max-height: calc(100vh - 120px); overflow-y: auto; }
  :root[data-size="125"] .site-header .nav-menu-panel a:not(.button), :root[data-size="125"] .nav-menu-panel button { padding: 11px 12px; font-size: 1.05rem; }
}
@media (max-width: 800px) { .signed-in ~ main .flashes { top: 64px; } }

.container { max-width: 1440px; margin: 0 auto; padding: 28px 20px 40px; }  /* a column of at most 1400 px, like .tabpage-single */

/* Footer: narrow, fixed. The legal links on the right never shrink (flex: none); when room runs out the sentence
   before them gives way first (it only gets the room left over), then the names (UI/UX audit 2026-10-09, X67: § 5 DDG wants the
   legal notice directly reachable) */
.site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 34px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px;
  background: var(--footer-bg); backdrop-filter: blur(6px); border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.site-footer a { color: var(--muted); }
.footer-owner, .footer-stats { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.footer-owner { flex: 0 1 auto; }
.footer-stats { flex: 1 1 0; text-align: right; }  /* only the room the others leave: it gives way first */
.footer-legal { flex: none; }
/* on the phone: not fixed, in two lines if need be, without the sentence; the links stay whole */
@media (max-width: 600px) {
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; }
  .site-footer { position: static; height: auto; flex-wrap: wrap; row-gap: 2px; padding: 8px 16px; white-space: normal; }
  .footer-stats { display: none; }
  .footer-owner { flex: 1 1 auto; overflow: visible; }
  .footer-legal { flex: 0 1 auto; min-width: 0; }  /* a line of its own: between the links it may break (125 %) */
  .footer-legal a { white-space: nowrap; }
}
/* the affiliation behind the names; in narrow windows it gives way to the links on the right */
@media (max-width: 1200px) { .footer-affiliation { display: none; } }
.footer-brand, .site-footer a.footer-brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; color: var(--fg); margin-right: 10px; }
/* ORCID iD icon at ORCID's optimal 24 px; the negative margin keeps list lines as high as the text */
.orcid-link { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.orcid-icon { width: 24px; height: 24px; margin: -5px 0; flex: none; }
:root[data-theme="dark"] .orcid-icon { opacity: 1; }  /* used as provided, not dimmed like other images */
.orcid-full { overflow-wrap: anywhere; }
.orcid-unauth-text { color: var(--muted); font-size: 0.85em; }
/* style "Kontrast": ORCID's black-and-white icon, on dark ground its white one (only these two besides green) */
:root[data-look="kontrast"]:not([data-theme="dark"]) .orcid-icon { content: url("img/orcid/orcid-id-mono.svg"); }
:root[data-look="kontrast"][data-theme="dark"] .orcid-icon { content: url("img/orcid/orcid-id-reverse.svg"); }
:root[data-look="kontrast"]:not([data-theme="dark"]) .orcid-icon.orcid-unauth { content: url("img/orcid/orcid-id-unauth-mono.svg"); }
:root[data-look="kontrast"][data-theme="dark"] .orcid-icon.orcid-unauth { content: url("img/orcid/orcid-id-unauth-reverse.svg"); }

/* Buttons: one look for <a class="button"> and <button class="button"> */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box;
  height: 38px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: var(--on-accent) !important; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: 0.95rem; font-weight: 550; cursor: pointer; vertical-align: middle;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* one focus ring for everything one can tab to (UI/UX audit 2026-10-03, U32) */
.button:focus-visible, .icon-btn:focus-visible, .tab:focus-visible, .chip:focus-visible, .survey-tabs a:focus-visible,
.admin-tabs a:focus-visible, .facet-chip:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.button-secondary { background: var(--surface); color: var(--fg) !important; border-color: var(--border-strong); }
.button-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.button-small { height: 30px; padding: 0 12px; font-size: 0.85rem; }  /* Ralf: small buttons 30 px (R83) */
/* in a side column a long label wraps instead of making the column scroll sideways (Ralf, 2026-10-03) */
.editor-grid > .sidebar .button, .flow-side .button, .flow-palette .button, .board-side .button { max-width: 100%; white-space: normal; height: auto; min-height: 38px; padding-top: 4px; padding-bottom: 4px; text-align: left; }
.editor-grid > .sidebar .button-small, .flow-side .button-small, .flow-palette .button-small, .board-side .button-small { min-height: 30px; }
.button:disabled { opacity: 0.6; cursor: progress; }
button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
button.link:hover { color: var(--accent-hover); }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--fg); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
form.inline { display: inline; margin: 0; }
.toolbar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.toolbar .button { margin-right: 4px; }

/* Messages */
.flash { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius);
  margin: 0 0 16px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font-size: 0.95rem; }
.flash-success { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 24%, transparent); }
.flash-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.flash-warning { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-bar) 30%, transparent); }
/* Messages after an action: below the header, also when the page opens at an anchor further down.
   The tint lies over the opaque surface colour, so the page does not show through. */
.flashes { position: sticky; top: 64px; z-index: 15; margin: 0 0 16px; display: grid; gap: 8px; }
.flashes .flash { margin: 0; box-shadow: var(--shadow); background: var(--surface); position: relative; overflow: hidden; }
.flashes .flash::before { content: ""; position: absolute; inset: 0; background: var(--accent-soft); pointer-events: none; }
.flashes .flash-success::before { background: var(--ok-soft); }
.flashes .flash-error::before { background: var(--danger-soft); }
.flashes .flash-warning::before { background: var(--warn-soft); }
.flashes .flash > * { position: relative; }
.flash-text { flex: 1; min-width: 0; }
.fl-node.is-here > .fl-head { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; transition: outline-color .6s; }
.fl-tools .icon-btn:disabled { opacity: .3; cursor: default; }
.badge-dirty { background: var(--warn-soft); color: var(--warn); margin-left: 8px; }
.flash-close { margin: -4px -6px -4px 0; flex: none; }
.flash-undo { margin: -3px 0; flex: none; }
.flash.is-leaving { opacity: 0; transition: opacity .4s; }
@media (prefers-reduced-motion: reduce) { .flash.is-leaving { transition: none; } }

/* Layout blocks */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.page-head h1 { margin: 0; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.back-link:hover { color: var(--fg); }
/* a quiet link forward with its icon (Archiv, Mehrere exportieren): looks like .back-link, is none (UI audit R96) */
.icon-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); text-decoration: none; margin-bottom: 8px; font-weight: 600; }
.icon-link:hover { color: var(--fg); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 20px; margin: 16px 0; box-shadow: var(--shadow); }
.card-list, ul.plain, ol.plain { list-style: none; padding: 0; margin: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 16px 18px; margin-bottom: 12px;
  box-shadow: var(--shadow); transition: border-color 0.12s; }
.card:hover { border-color: var(--border-strong); }
.card-title { font-weight: 650; font-size: 1.05rem; margin-right: 8px; color: var(--fg); text-decoration: none; }
.card-title:hover { color: var(--accent); }
.card-meta { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.card-actions > form { display: flex; }  /* a button in a form stands on the line of the links (W98) */
/* working on it on the left (main action, then Fragebogen/Fragen, Einstellungen, Ergebnisse, Export), Duplizieren,
   Archivieren and Löschen on the right (Ralf, 2026-10-05): the first of those takes the free space */
.card-actions > :not(.card-act-end) + .card-act-end { margin-left: auto; }
/* the buttons of every card share one width, so they stand in columns from card to card (Ralf, 2026-10-05) */
.card-actions > .button, .card-actions > form.card-act-end .button { min-width: 136px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; padding: 2px 9px;
  border-radius: var(--radius-tag); background: var(--surface-3); color: var(--muted); vertical-align: middle; letter-spacing: 0.01em; }
.badge-running, .badge-approved { background: var(--ok-soft); color: var(--ok); }
.badge-closed { background: rgba(138, 75, 18, 0.13); color: #8a4b12; }
.badge-paused, .badge-pending { background: var(--warn-soft); color: var(--warn); }
.badge-error, .badge-rejected { background: var(--danger-soft); color: var(--danger); }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack label, .block-form label { display: flex; flex-direction: column; gap: 6px; }
.stack label { min-width: 0; }
.stack label > select { min-width: 0; }  /* a long option does not widen the page on a phone (S2) */
.stack label, .label-title, legend { font-weight: 600; font-size: 0.95rem; }
.hint { font-size: 0.85rem; font-weight: 400; color: var(--muted); margin-left: 6px; }
.hint.alt-missing { display: block; margin: -8px 0 0; }  /* an image without alternative text, under its field (accessibility D8) */
label.check, .stack label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; flex-wrap: wrap; }
/* a box with one long text after it (a span): the text starts next to the box and wraps in itself (Ralf, 2026-10-05) */
/* a hint (.hint) is no such text: it always stands under the text, flush with it, also next to a lock (V83) */
label.check:has(> input:first-child + span:last-child:not(.hint)) { flex-wrap: nowrap; align-items: flex-start; }
label.check > input:first-child + span:last-child:not(.hint) { flex: 1 1 0; min-width: 0; }
label.check > input:is([type=checkbox], [type=radio]) { margin: 0; }
label.check:has(> input:first-child + span:last-child:not(.hint)) > input { margin-top: 3px; }
input, textarea, select { font: inherit; font-size: 0.95rem; padding: 8px 11px; border: 1px solid var(--field-border);
  border-radius: 8px; background: var(--surface); color: var(--fg); max-width: 100%; transition: border-color 0.12s, box-shadow 0.12s; }
input:focus, textarea:focus, select:focus { outline: var(--focus-outline); outline-offset: 1px; border-color: var(--accent); }
input:disabled, textarea[readonly], input[readonly], select:disabled { background: var(--surface-3); color: var(--muted); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); padding: 0; }
textarea { resize: vertical; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=image]), select) { min-height: var(--field-h); }
:where(td, th) :where(input, select) { min-height: 0; }
input.narrow { width: 7em; }
.dummy-n { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 400; }  /* „[50] simulierte Personen“ (W23) */
/* fields as wide as what goes in (V92): variable names fit (pendelzeit_min), names of things get room, short
   lists in a column of the page stay as wide as their longest choice, not 1300 px */
input.narrow[data-varname] { width: 16ch; }
input.field-name { width: 24ch; max-width: 100%; }
.needs-off { opacity: 0.6; }  /* fields that count only while a tick is set (data-needs, app.js) */
input.field-name-wide { min-width: min(100%, 50ch); }
:is(.stack, .block-form, .option-group) label > select.fit { align-self: flex-start; width: auto; max-width: 100%; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0; min-width: 0; }  /* min-width: a wide row inside does not widen the page on a phone (S2) */
legend { padding: 0 6px; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; min-width: 0; }
@media (max-width: 600px) { .row { flex-wrap: wrap; } }  /* field and button one below the other when both do not fit (S2) */
.row.testing-actions { flex-wrap: wrap; }
/* "Person hinzufügen" (_people.html; members, group, design, linked element; UI audit 2026-10-07, W96, W102, S8): a
   visible label, a field as wide as a name, the button as high as the field; each match in one line, the role and
   the button at its end */
.person-add label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }
.person-add .row { max-width: 48ch; }
.person-add .button { height: 42px; }
.person-results { margin: 8px 0 0; }
form.person-line-add { display: flex; gap: 6px; align-items: center; margin-inline-start: auto; }
.person-line-add select { font-size: 0.85rem; padding: 2px 6px; }
.person-line-add .button { height: 42px; }  /* as high as the role beside it */
input.name-field { max-width: 40ch; }
input.description-field { max-width: 60ch; }  /* a line of description, not the whole page (X80) */
.group-offer > label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.95rem; }  /* Vorschau and Kommentare side by side, on a phone one under the other (W79) */
.row-fields { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
/* a long option ("Gelegenheitsstichprobe (Bekanntenkreis, Verteiler)") stays inside a narrow screen (UI/UX audit
   2026-10-07, W6) */
.row-fields > label { max-width: 100%; min-width: 0; }
.row-fields select { max-width: 100%; }
.row-fields .link-mode { flex: 0 0 210px; min-width: 0; }
/* a hint between a label and its field pushed the fields of the row to different heights: in a row of fields the hint
   stands under its field, and the row aligns at the top, so labels and fields each share one line (V84) */
.row-fields > label:not(.check):has(> .hint) { display: flex; flex-direction: column; gap: 6px; }
.row-fields > label:not(.check) > .hint { order: 1; margin-left: 0; }
.row-fields:has(> label:not(.check) > .hint) { align-items: flex-start; }
.row-fields .link-mode select { width: 100%; }
.row-fields .link-mode[hidden], .link-row[hidden], .link-add[hidden] { display: none; }
.link-add { margin-top: 12px; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-add select { width: auto; min-width: min(220px, 100%); max-width: 100%; }
/* the parameters of the link: no empty table with heads before the first one (UI/UX audit 2026-10-05, V20) */
.param-table:not(:has(tr[data-row])) { display: none; }
/* rows of the questionnaire and the flow: ↑ ↓ and the bin always, the rarer moves while the row is pointed at or has
   the focus; on touch screens always (UI audit 2026-10-04, R92) */
@media (hover: hover) {
  .row-tool-more { visibility: hidden; }
  :is(.item-row, .fl-head, .fl-node):is(:hover, :focus-within) .row-tool-more { visibility: visible; }
}
.icon-btn.icon-btn-word { display: inline-flex; align-items: center; width: auto; padding: 0 8px; gap: 4px; font-size: 0.85rem; }
.link-row:not([hidden]) ~ .link-row { margin-top: 18px; }  /* each label nearer to its own field than to the one above (R87) */
/* question texts in a row of fields: as wide as the row allows, the short labels beside them keep their width */
.row-fields > .wide-field { flex: 1 1 320px; min-width: 0; }
.row-fields > .wide-field input { width: 100%; }
/* Side-by-side matrix editor (items/side_by_side/editor.html): the columns as parts divided by a line, not boxes in the
   box of the form; the question of a column over the whole width; the answers a condition picks from without a frame
   of their own, their name a line between (UI/UX audit 2026-10-09, X27, X28) */
.sbs-cols > .sbs-col { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 0 4px; margin-top: 18px; }
.sbs-cols > .sbs-col > legend { padding: 0 8px 0 0; }
.sbs-col-title { margin-bottom: 14px; }
.sbs-col-title input { width: 100%; }
.sbs-col-remove { margin: 10px 0 0; }
fieldset.sbs-when-src { border: 0; padding: 0; margin: 10px 0 0; }
fieldset.sbs-when-src > legend { padding: 0; margin-bottom: 4px; font-size: 0.85rem; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
/* a form that saves by itself: "Fertig" and what happened to the last change, in place of "Speichern" */
.autosave-bar { align-items: center; gap: 12px; }
.autosave-bar.is-quiet:not(:has(.autosave-status:is(.is-error, .is-conflict, .is-invalid, .is-warn), [data-autosave-done])) { display: none; }
/* the element editor's bar keeps "Fertig"; only its line waits for trouble (S2) */
.autosave-bar.is-quiet .autosave-status:not(.is-error, .is-conflict, .is-invalid, .is-warn) { display: none; }
.autosave-page { margin-right: 8px; white-space: nowrap; }
/* S2 (UI/UX audit 2026-10-07): the one line in the head of every page of a survey (surveys/_tabs.html, app.js
   saveState); long text, short on a phone; trouble in red, with ⚠ and words, and a link to the form's own line
   ("Erneut versuchen", "Deren Stand laden") */
.autosave-page .autosave-short { display: none; }
.autosave-page.is-busy::before { content: "↻ "; color: var(--muted); }
.autosave-page:is(.is-error, .is-conflict, .is-invalid) { color: var(--danger); }
.autosave-page .autosave-goto { margin-left: 6px; font-weight: 600; color: var(--danger); }
.autosave-page .autosave-goto:hover { color: var(--fg); }
.autosave-status { color: var(--muted); font-size: 0.85rem; }  /* as .small: a note next to it stands on the same line */
.autosave-status.is-ok::before { content: "✓ "; color: var(--ok); }
.autosave-status.is-warn, .autosave-status.is-error, .autosave-status.is-conflict, .autosave-status.is-invalid { color: var(--fg); font-weight: 600; }
.autosave-status.is-error::before, .autosave-status.is-conflict::before, .autosave-status.is-warn::before,
.autosave-status.is-invalid::before { content: "⚠ "; color: var(--danger); }
.fl-live { display: contents; }  /* a wrapper for redrawing a line after a save (data-live), invisible to the layout */

/* Segmented language switch */
.lang-switch { display: inline-flex; padding: 3px; background: var(--surface-3); border-radius: var(--radius); gap: 2px; }
.lang-switch a { padding: 3px 11px; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; color: var(--muted); font-size: 0.85rem; font-weight: 500; }
/* the chosen part as in .segmented (W81) */
.lang-switch a.active, .lang-switch a[aria-current] { background: var(--surface); color: var(--fg); font-weight: 650;
  border-color: var(--border-strong); box-shadow: inset 0 -2px 0 var(--accent); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 -20px 18px; padding: 0 20px; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; margin-bottom: -1px; border: 0;
  border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 0.95rem; font-weight: 550;
  color: var(--muted); cursor: pointer; border-radius: 8px 8px 0 0; }
.tab:hover { color: var(--fg); background: var(--surface-3); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: flex; flex-direction: column; gap: 14px; }
.tab-panel[hidden] { display: none; }

/* Drop zone */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; padding: 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius-panel); background: var(--surface-2);
  color: var(--muted); text-align: center; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone strong { color: var(--fg); }
.dropzone-file { font-size: 0.85rem; color: var(--fg); font-weight: 600; }

/* Design check */
.finding { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 0.95rem; }
.finding a { color: inherit; }
.finding-body { min-width: 0; }
.finding-fix { margin: 6px 0 0; }
.finding-error { color: var(--danger); }
.finding-warning { color: var(--warn); }
.ok { color: var(--ok); margin: 0; display: flex; gap: 8px; align-items: center; }

/* Editor: blocks and items */
.block { padding: 0; overflow: visible; }
.block-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start;
  padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.block-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Block header as a grid: the toolbar (Schleife, preview, move, delete) always sits top right next to the
   name; meta line and options below use the full width. The form's children join the grid (display: contents). */
.block-head:has(> .block-form) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; }
.block-head > .block-form { display: contents; }
.block-head > .block-form > * { grid-column: 1; }
.block-head > .block-form > .block-meta, .block-head > .block-form > .block-options { grid-column: 1 / -1; }
.block-head > .block-form ~ .toolbar { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
.block-head > .block-form > .block-meta { margin: -4px 0 0; }
/* a phone: the name first and whole, the tools in the line below it (wrapping), the loop button only its 🔁 (W41) */
@media (max-width: 600px) {
  .block-head:has(> .block-form) { grid-template-columns: minmax(0, 1fr); }
  .block-head > .block-form ~ .toolbar { grid-column: 1; grid-row: 2; flex-wrap: wrap; }
  .loop-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* checkbox and its text stay together; long text wraps next to the box, not below it */
.block-options label.check { flex-wrap: nowrap; align-items: flex-start; }
.block-options label.check input { flex-shrink: 0; margin-top: 3px; }
.block-form input[name=title] { font-weight: 600; }
.block-options { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 0.95rem; }
.block-times { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.block-times label { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; margin: 0; font-weight: inherit; white-space: nowrap; }
.block-times input { width: 72px; padding: 3px 6px; font-size: inherit; }
.item-list { list-style: none; margin: 0; }
.item-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--surface-3); flex-wrap: wrap; border-radius: 8px; }
.item-row:hover { background: var(--surface-2); }
.item-row .toolbar { color: var(--muted); }  /* in rest muted, not faded: 3:1 for controls (R72) */
.item-row:hover .toolbar, .item-row:focus-within .toolbar { color: var(--fg); }
@media (hover: none) { .item-row .toolbar, .fl-tools { opacity: 1 !important; } }  /* touch: nothing to hover, so not dimmed */
.item-main { flex: 1; min-width: 240px; display: flex; gap: 12px; align-items: flex-start; }
.item-body { min-width: 0; }
.item-code { font-weight: 650; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; margin-right: 6px; color: var(--fg); text-decoration: none; }
.item-code:hover { color: var(--accent); }
.item-text { color: var(--muted); font-size: 0.95rem; margin-top: 1px; overflow-wrap: anywhere; }
.page-break-row { padding: 4px 8px; }
.page-break-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.75rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.08em; }
.page-break-line::before, .page-break-line::after { content: ""; flex: 1; border-top: 2px dashed var(--border-strong); }

/* "Add element" menu */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: min(560px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--shadow-pop); padding: 8px; }

/* Rows of fields in the element editors: the variant is-edit of the one table (list_table, S8), compact, heads small */
.list-table:where(.is-edit) { width: 100%; border-collapse: collapse; }
.list-table:where(.is-edit) th { text-align: left; font-size: 0.75rem; color: var(--muted); font-weight: 600; padding: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.list-table:where(.is-edit) td { padding: 3px 4px; }
/* the hint under a column head in normal writing, not in capitals in the same line (W35) */
.list-table:where(.is-edit) th .hint { display: block; margin: 1px 0 0; text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.list-table:where(.is-edit) input:not([type=checkbox]) { width: 100%; }
.list-table:where(.is-edit) .narrow-col { width: 120px; }
/* columns shown only while a box is ticked (subscales and attention checks of a matrix, app.js data-toggle-cols) */
.list-table.off-sub .col-sub, .list-table.off-check .col-check { display: none; }
/* on a phone the narrow columns (code, ticks) take what their content needs, so the rows fit the page (S2) */
@media (max-width: 600px) {
  .list-table:where(.is-edit) .narrow-col { width: auto; }
  .list-table:where(.is-edit) th { overflow-wrap: anywhere; hyphens: auto; }
  /* lists of options and rows (.stack-phone): each row as two lines, the text over the whole width, below it the
     code, the ticks named in words and the tools (UI/UX audit 2026-10-09, X24) */
  .list-table.stack-phone thead { display: none; }
  .list-table.stack-phone tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0;
    border-bottom: 1px solid var(--border); }
  .list-table.stack-phone td { padding: 0; }
  .list-table.stack-phone td:has(> input:is([name$="_label"], [name="row_text"], [name="option_alt"], [name^="option_prompt_"])) { flex: 1 1 100%; }
  .list-table.stack-phone td:has(> input:is([name$="_label"], [name="row_text"])) { order: -1; }
  .list-table.stack-phone td > input[name$="_code"] { width: 8ch; min-width: 0; }
  .list-table.stack-phone td:has(> input[name$="_code"])::before { content: "Code"; margin-right: 6px; font-size: 0.75rem; color: var(--muted); }
  .list-table.stack-phone td[data-label] { display: inline-flex; align-items: center; gap: 4px; }
  .list-table.stack-phone td[data-label]::after { content: attr(data-label); font-size: 0.75rem; color: var(--muted); }
  .list-table.stack-phone td.row-tools { margin-left: auto; }
}
/* the column of variable names: wide enough for pendelzeit_min (V92) */
.list-table:where(.is-edit) td > input[data-varname="part"] { min-width: 16ch; }
@media (max-width: 600px) { .list-table:where(.is-edit) td > input[data-varname="part"] { min-width: 9ch; } }
.list-table:where(.is-edit) .center { text-align: center; }
/* Scientific sources in APA style (templates/_sources.html, app/apa.py): the reference list folded away at the end of
   the page or block, set apart when open; in the text the short reference (.cite-group) */
details.sources { margin: 4px 0 0; font-size: 0.85rem; }
details.sources > summary { display: inline-block; cursor: pointer; color: var(--accent); font-weight: 600; list-style: none;
  padding: 1px 0; border-radius: 4px; }
details.sources > summary::-webkit-details-marker { display: none; }
details.sources > summary::before { content: "▸"; display: inline-block; width: 1.1em; }
details.sources[open] > summary::before { content: "▾"; }
details.sources > summary:hover { color: var(--accent-hover); }
details.sources > summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
details.sources > ul { margin: 6px 0 4px; padding: 8px 12px; background: var(--surface-2); list-style: none;
  border-left: 3px solid var(--border-strong); border-radius: 0 8px 8px 0; color: var(--muted); }
#sources details.sources { margin: 0; font-size: 0.85rem; }
ul.refs > li { margin: 4px 0; padding-left: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }  /* hanging indent, as in APA */
ul.refs > li:target { color: var(--fg); background: var(--accent-soft); border-radius: 4px; }
ul.refs .ref-use { display: block; text-indent: 0; font-size: 0.9em; }  /* no opacity: 4.5 : 1 (X88) */
.cite-group { font-weight: 400; font-size: 0.9em; color: var(--muted); white-space: normal; }
a.cite { font-weight: 400; color: inherit; }  /* also the short references written into a text (app.js links them) */
a.cite:hover { color: var(--accent); }
.criteria { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.95rem; }
.criteria > li { padding: 8px 0; border-top: 1px solid var(--border); }
.criteria > li > strong { display: block; }
.list-table:where(.is-edit) .check-col { width: 170px; }
.list-table:where(.is-edit) .check-col select { width: 100%; min-width: 0; }
.new-row input:not([type=checkbox]) { border-style: dashed; background: var(--surface-2); }
.scale-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 0; margin: 12px 0 0; list-style: none; counter-reset: pt; }
.scale-labels li { counter-increment: pt; display: flex; flex-direction: column; gap: 3px; }
.scale-labels li::before { content: counter(pt); font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.scale-labels input { width: 100%; }
/* from 7 points the suggested labels get room to be read whole: fewer per row, the rest below (W31) */
.scale-labels:has(> li:nth-child(7)) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26ch), 1fr)); }
input.dimmed { opacity: 0.45; }

/* Preview frame */
.participant-frame { border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 20px; background: var(--surface); }

/* Image assets */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.asset { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.asset img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface-3); }
.asset figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.asset-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.asset-rejected img { opacity: 0.35; filter: grayscale(1); }
.asset-approved { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
/* an upload per image of a set (answer options as images): a button that opens the file choice and sends it */
.asset-upload { display: flex; gap: 6px; align-items: center; }
.asset-upload label.button { cursor: pointer; }
.asset-upload label.button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.multi-upload { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.multi-upload .multi-dropzone { flex: 1 0 100%; min-height: 110px; }
.multi-upload .multi-dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.multi-upload-preview { flex: 1 0 100%; }
.multi-upload-miss { color: var(--warn); }
.image-ways { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.level-mode { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; border: 0; padding: 0; margin: 0; min-width: 0; }

/* Misc */
.results li, ul.plain li, ol.plain li { padding: 8px 0; border-bottom: 1px solid var(--surface-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.results li:last-child, ul.plain li:last-child, ol.plain li:last-child { border-bottom: 0; }
.stat-line { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 600px) {
  .container { padding: 20px 14px 32px; }
  .panel { padding: 16px; }
  .tabs { margin: 0 -16px 16px; padding: 0 16px; }
  .block-head { padding: 14px 16px; }
}

/* Three-column editor workspace */
.workspace { max-width: 1480px; margin: 0 auto; padding: 20px 20px 40px; }
.workspace-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.workspace-head h1 { margin: 0; }
.editor-grid { display: grid; gap: 20px; align-items: start; }
.canvas .panel:first-child { margin-top: 0; }
.sidebar { position: sticky; top: 72px; max-height: calc(100vh - 72px - 50px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 16px; box-shadow: var(--shadow); }
.sidebar h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 10px; }
.sidebar h2.mt { margin-top: 22px; }
.palette { list-style: none; padding: 0; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 2px; }
.palette-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: var(--radius);
  background: none; font: inherit; text-align: left; cursor: grab; color: var(--fg); }
.palette-item:hover, .palette-item:focus-visible { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.palette-item:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.palette-item:active { cursor: grabbing; }
.palette-item strong { display: block; font-size: 0.85rem; line-height: 1.3; }
.palette-item .desc { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.3; margin-top: 1px; }
/* at most two lines (the whole text is in the title): no word cut in the middle without a hyphen (W40) */
.palette-row .palette-item .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.palette-block { width: 100%; }
.item-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.item-icon.big { display: inline-grid; width: 38px; height: 38px; vertical-align: middle; margin-right: 4px; }

/* Blocks as drop targets */
.block.is-active { border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent), var(--shadow); }
.item-list { min-height: 12px; padding: 6px 12px 10px; }
.drop-hint { list-style: none; margin: 4px 0 0; padding: 14px; border: 2px dashed var(--border); border-radius: var(--radius);
  text-align: center; color: var(--muted); font-size: 0.85rem; }
.item-list:has(.item-row) .drop-hint { display: none; }
.drag-handle { color: var(--muted); cursor: grab; font-weight: 700; letter-spacing: -2px; padding: 0 2px; user-select: none; }
/* Dragging (app.js): an element is taken anywhere on its row, a block anywhere on its head, except on what is
   clicked or typed into. Nothing moves while dragging: lines show where the drop goes. */
.item-row[data-drag], .block-head:has([data-block-handle]) { cursor: grab; }
.item-row[data-drag] label, .block-head:has([data-block-handle]) label { cursor: default; }
.editor-grid .drag-handle, .row-drag { touch-action: none; }  /* a finger on the handle drags at once instead of scrolling */
.row-drag { display: inline-block; padding: 6px 4px; vertical-align: middle; }
tr.is-dragging { opacity: 0.6; }  /* a finger on the handle drags at once instead of scrolling */
@media (pointer: coarse) {
  .item-row .drag-handle { padding: 8px 6px; margin: -8px -4px; }
  /* holding a finger on a row drags it: no text selection, no link menu */
  .item-row[data-drag], .block-head:has([data-block-handle]), .palette-item { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
body.drag-active, body.drag-active * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; max-width: min(380px, 80vw); padding: 8px 12px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.95rem; font-weight: 600; opacity: 0.96; }
.drag-ghost .item-main, .drag-ghost .palette-item { min-width: 0; padding: 0; font-weight: 400; }
.drag-ghost .item-text, .drag-ghost .desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row.is-dragged, .palette-item.is-dragged { opacity: 0.4; }
/* between two blocks: the element gets a new block of its own */
.block-gap-marker { position: absolute; z-index: 5; height: 0; border-top: 3px dashed var(--accent); pointer-events: none; }
.block-gap-marker span { position: absolute; left: 50%; top: -1px; transform: translate(-50%, -50%); padding: 2px 12px; border-radius: var(--radius-tag);
  background: var(--accent); color: var(--surface); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.drop-marker { list-style: none; height: 0; border-top: 3px solid var(--accent); border-radius: 3px; margin: -1px 0; position: relative; }
.drop-marker::before { content: ""; position: absolute; left: -4px; top: -6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
/* Blocks are dragged by their head (the handle in its left margin shows that); meanwhile only the heads show */
.block-head { position: relative; }
.block-handle { position: absolute; left: 3px; top: 20px; padding: 6px 2px; line-height: 1; }
.block-pinned .block-handle { top: 50%; transform: translateY(-50%); }
.block-handle:hover { color: var(--accent); }
.block.is-dragged { opacity: 0.4; }
.block.is-here { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor-grid.dragging-block .block > .item-list { display: none; }
.editor-grid.dragging-block .canvas { padding-bottom: 100vh; }  /* room to keep the dragged block under the pointer */
.editor-grid.dragging-block .block-head { border-bottom: 0; border-radius: var(--radius-panel); }
.block-drop-marker { height: 0; border-top: 3px solid var(--accent); border-radius: 3px; margin: -10px 0 -9px; position: relative; }
.block-drop-marker::before { content: ""; position: absolute; left: -4px; top: -6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* Figures in the right sidebar */
.figures { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }  /* a long name wraps, the column never scrolls sideways */
.figures div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.figures dt { font-size: 0.75rem; color: var(--muted); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.figures dt .hint { margin: 0; display: block; font-size: 0.75rem; }
.figures dd { margin: 2px 0 0; font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.figures dd.fig-note { margin: 2px 0 0; font-size: 0.75rem; font-weight: 400; }  /* "–" with its reason (CBC with D-efficiency 0) */
.figures .fig-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-bar) 30%, transparent); }
.figures .fig-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.findings .finding { font-size: 0.85rem; border-bottom: 0; padding: 4px 0; }
.empty-state { text-align: center; padding: 36px 20px; color: var(--muted); }
/* the app's error pages 403/404/500 (app/errors.py, UI/UX audit 2026-10-09, X68) */
.error-page { max-width: 720px; margin: 32px auto; }
.error-page h1 { margin-top: 0; }

/* Segmented control (answer mode) */
.field { display: flex; flex-direction: column; gap: 6px; }
.segmented { display: inline-flex; align-self: flex-start; padding: 3px; background: var(--surface-3); border-radius: var(--radius); gap: 2px; }
.segmented label { display: block; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
/* One control for choosing a view (UI audit 2026-10-07, W80, W81): radio buttons (label > input + span) or links
   (a, the chosen one with aria-current). The chosen part is told by more than a lighter surface: a frame, a bar in
   the accent colour and heavier type, in every look (light, dark, contrast). */
.segmented span, .segmented a { display: block; padding: 5px 13px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 500; color: var(--muted); text-decoration: none; }
.segmented a:hover { color: var(--fg); }
.segmented input:checked + span, .segmented a[aria-current], .segmented a.is-active {
  background: var(--surface); color: var(--fg); font-weight: 650; border-color: var(--border-strong);
  box-shadow: inset 0 -2px 0 var(--accent); }
.segmented input:focus-visible + span, .segmented a:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.segmented input:disabled + span { opacity: 0.6; cursor: default; }
.item-editor { margin-top: 12px; }

@media (max-width: 1000px) {
  .editor-grid { --left-shown: min(var(--left-w), 34vw); grid-template-columns: var(--left-shown) minmax(320px, 1fr); }
  .sidebar-right { grid-column: 1 / -1; position: static; max-height: none; order: -1; }
}
@media (max-width: 800px) {
  .sidebar { position: static; max-height: none; }
  .palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .palette-item .desc { display: none; }
}
.consent-draft { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
[hidden] { display: none !important; }
.confirm-list li { display: grid; grid-template-columns: minmax(200px, 240px) 1fr; gap: 10px; align-items: center; }
@media (max-width: 600px) { .confirm-list li { grid-template-columns: 1fr; } }
.findings .finding, ul.plain li.finding { flex-wrap: nowrap; align-items: flex-start; } .finding .icon { margin-top: 3px; }
.copy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.copy-row input { flex: 1; min-width: 240px; font-family: ui-monospace, monospace; font-size: 0.85rem; }
/* export page: groups of exports, each export a row (name, one line of explanation, a control of the same width) */
.export-groups { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.export-group h3 { font-size: 0.95rem; margin: 0 0 8px; }
.export-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.export-list li { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: center; padding: 10px 14px; }
.export-list li + li { border-top: 1px solid var(--border); }
.export-list strong { font-weight: 600; font-size: 0.95rem; }
.export-list .desc { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 400; line-height: 1.4; margin-top: 1px; }
.export-list .button, .export-list select { width: 100%; }
.export-note { margin: 8px 2px 0; }
@media (max-width: 600px) { .export-list li { grid-template-columns: 1fr; gap: 8px; } }
.member-list li { gap: 6px; }
.member-rank { width: 1.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.member-moves { display: inline-flex; gap: 0; }
.palette-row { display: flex; align-items: center; gap: 2px; }
/* the description wraps beside the "+" instead of running under it (long words like "Kategorien"; Ralf, 2026-10-06) */
.palette-row > .palette-item { flex: 1 1 auto; width: auto; min-width: 0; }
.palette-row > .palette-item > span:last-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.palette-row > .palette-add { flex: 0 0 auto; }
.palette-row .palette-item { flex: 1; min-width: 0; }
.palette-add { flex: none; color: var(--accent); }
/* star on a construct: favourites are the constructs the editor lists (same yellow as the pinned surveys) */
.pg-constructs .palette-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; }
.pg-constructs .palette-item { grid-row: 1 / span 2; }
/* long names ("Technikbereitschaft") break inside their column instead of running under star and plus */
.pg-constructs .palette-item > span:last-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.star-btn { height: 24px; min-width: 24px; align-self: end; color: var(--muted); }
.pg-constructs .palette-add { height: 26px; align-self: start; }
.star-btn:hover:not(:disabled), .star-btn[aria-pressed="true"] { color: #e0a800; background: transparent; }
.star-btn[aria-pressed="true"] .icon { fill: currentColor; }
.left-collapsed .star-btn { display: none; }
.palette-add:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.block-pinned { border-style: dashed; }
.block-pinned .block-head { background: var(--surface-2); align-items: center; }
.pinned-title { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pinned-title .label-title { color: var(--fg); }

/* Left sidebar: resizable and collapsible */
/* sidebars never take more than about a quarter of the window each; the questionnaire keeps room */
.editor-grid { --left-w: 280px; --right-w: 270px;  /* 280: "Mehrfachauswahl", "Zuordnungsaufgabe" fit whole (W40) */
  /* the widths as shown: the columns and the resize handles use the same capped values, so a handle never
     drifts into the questionnaire when the window is narrower than a remembered width */
  --left-shown: min(var(--left-w), 26vw); --right-shown: min(var(--right-w), 24vw);
  grid-template-columns: var(--left-shown) minmax(360px, 1fr) var(--right-shown); }
.sidebar-left { overflow: visible; }
.sidebar-left > .palette, .sidebar-left > form, .sidebar-left > .sidebar-help { position: relative; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sidebar-head h2 { margin: 0; }
.sidebar-toggle .icon { transition: transform 0.15s; }
.editor-grid { position: relative; }
.sidebar-resizer { position: absolute; top: 0; bottom: 0; left: var(--left-shown); width: 20px; cursor: col-resize; z-index: 3; }
.sidebar-resizer-right { left: auto; right: var(--right-shown); }
.sidebar-resizer::after { content: ""; position: sticky; display: block; top: 40vh; margin: 0 auto; height: 48px; width: 3px;
  border-radius: 1px; background: var(--border-strong); opacity: 0; transition: opacity 0.12s; }
.sidebar-resizer:hover::after, .sidebar-resizer:focus-visible::after, .editor-grid.resizing .sidebar-resizer::after { opacity: 1; background: var(--accent); }
.sidebar-resizer:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.editor-grid.resizing { user-select: none; cursor: col-resize; }
.sidebar-left { max-height: calc(100vh - 72px - 50px); overflow-y: auto; }

/* Collapsed: icon rail */
.editor-grid.left-collapsed { --left-w: 64px; }
.left-collapsed .sidebar-left { padding: 12px 8px; }
.left-collapsed .sidebar-head { justify-content: center; }
.left-collapsed .sidebar-head h2, .left-collapsed .sidebar-help, .left-collapsed .palette-item > span:last-child,
.left-collapsed .palette-add, .left-collapsed .sidebar-resizer, .left-collapsed .palette-block span { display: none; }
.left-collapsed .sidebar-toggle .icon { transform: rotate(180deg); }
.left-collapsed .palette { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.left-collapsed .palette-item { justify-content: center; padding: 6px; }
.left-collapsed .palette-block { padding: 0; width: 40px; }
@media (max-width: 800px) { .sidebar-resizer, .sidebar-toggle { display: none; } }
.account-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.account-data { margin-top: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); border-radius: var(--radius); background: var(--danger-soft); }
.account-data h3 { margin-top: 0; }
.account-facts, .file-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; }
.account-facts dt, .file-facts dt { color: var(--muted); }
.account-facts dd, .file-facts dd { margin: 0; }
.account-delete select { max-width: 100%; }
.admin-account { white-space: nowrap; }
.account-form { max-width: 520px; }
/* Administration > account: the sign-in address with its button right beside the field; the one-time link a
   paragraph of its own below (UI audit 2026-10-07, W103) */
.account-form label { display: block; margin-bottom: 6px; }
.field-with-button { align-items: center; flex-wrap: wrap; }
.field-with-button input { min-width: 220px; }
.account-link-head { font-size: 0.95rem; margin: 22px 0 6px; }
.sign-in { max-width: 460px; margin: 0 auto; }
.sign-in .or { text-align: center; color: var(--muted); margin: 18px 0 6px; }
.one-time-link { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; width: 100%; }

/* Right sidebar: collapse to a rail with preview and status */
.right-rail { display: flex; justify-content: flex-end; margin: -6px -6px 4px 0; }
.rail-only { display: none !important; }
.sidebar-right .sidebar-toggle .icon { transform: rotate(180deg); }
.editor-grid.right-collapsed { --right-w: 64px; }
.right-collapsed .sidebar-right { padding: 12px 8px; }
.right-collapsed .sidebar-right > :not(.right-rail), .right-collapsed .sidebar-resizer-right { display: none; }
.right-collapsed .right-rail { flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.right-collapsed .rail-only { display: inline-grid !important; }
.right-collapsed .sidebar-right .sidebar-toggle .icon { transform: none; }
.rail-status { place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--radius-panel); font-size: 0.85rem; font-weight: 700; }
.rail-status.bad { background: var(--danger-soft); color: var(--danger); }
.rail-status.good { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 1000px) { .sidebar-resizer-right, .sidebar-right .sidebar-toggle { display: none; } }

/* Flow tree (right sidebar) */
.flow-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.flow-badge { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-tag); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); text-decoration: none; }
.flow-badge:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Image style picker */
.chip { font: inherit; font-size: 0.75rem; padding: 2px 10px; border-radius: var(--radius-tag); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; color: var(--muted); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.style-card { display: flex; flex-direction: column; gap: 4px; cursor: pointer; font-weight: 400 !important; }
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.style-frame { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; border: 2px solid transparent; background: var(--surface-3); }
.style-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.7s ease; }
.style-frame img.on { opacity: 1; }
.style-frame-custom { display: grid; place-items: center; font-size: 2rem; color: var(--subtle); }
.style-card input:checked + .style-frame { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.style-card input:focus-visible + .style-frame { outline: var(--focus-outline); outline-offset: 2px; }
.style-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: none; place-items: center; font-size: 0.85rem; font-weight: 700; }
.style-card input:checked + .style-frame .style-check { display: grid; }
.style-label { font-weight: 650; font-size: 0.85rem; }
.style-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.35; }
section[id], [id^="item-"], [id^="block-"] { scroll-margin-top: 72px; }
.cj-attrs { display: flex; flex-direction: column; gap: 12px; }
.cj-attr { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.cj-attr.new-attr { border-style: dashed; }
.md-statements .md-num { width: 2.5rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.md-statements .cj-row-tools { white-space: nowrap; }
.cj-figures { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin-bottom: 12px; }
.cj-design-view { margin-top: 12px; font-size: 0.85rem; }
.cj-design-view table { margin-top: 8px; }
.cj-reverse { margin-bottom: 12px; font-size: 0.85rem; }
.cj-reverse label, .cj-reverse table { margin-top: 8px; }
.cj-reverse table { max-width: 560px; }
.cj-reverse td { font-variant-numeric: tabular-nums; }
.cj-reverse .is-current td { font-weight: 650; }
.cj-reverse .cj-long { color: var(--warn); }
.cj-reverse .cj-over { color: var(--muted); }
.batch-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 0.85rem; }
.batch-progress .p-progress { flex: 0 1 320px; margin: 0; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.batch-progress .p-progress span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.batch-progress .p-progress { min-width: 120px; }
.batch-progress.is-failed .p-progress span { background: var(--danger); }
.batch-progress.is-failed [data-status] { color: var(--danger); }
/* no share known yet: a piece of the bar moves, so the page visibly waits for the server */
.batch-progress.is-waiting .p-progress span { width: 30% !important; transition: none; animation: progress-wait 1.3s ease-in-out infinite; }
@keyframes progress-wait { from { transform: translateX(-100%); } to { transform: translateX(334%); } }
.res-run .batch-progress { flex-basis: 100%; margin-top: 0; }
.hb-progress { margin: 6px 0 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .batch-progress.is-waiting .p-progress span { animation: none; width: 100% !important; opacity: 0.45; } }
.cj-gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cj-gallery .asset img { aspect-ratio: 1 / 1; }
.asset-missing { border-style: dashed; }
.asset-pending { border-color: color-mix(in srgb, var(--warn-bar) 42%, transparent); }
.prompt-text { white-space: pre-wrap; margin: 6px 0 0; }
.palette-search { width: 100%; margin: 4px 0 2px; font-size: 0.85rem; padding: 7px 10px; }
.left-collapsed .palette-search, .left-collapsed .palette-empty { display: none; }
.palette-row[hidden] { display: none; }
.cj-row-tools { width: 40px; text-align: center; }
.row-tools { width: 1%; white-space: nowrap; }
.row-tools > * { vertical-align: middle; }  /* handle, ↑ ↓ and the drawn × on one line (W32) */
.row-tools .icon-btn:disabled { opacity: .3; cursor: default; }
.row-add { margin: 6px 0 8px; }
.cj-attr .row-fields { align-items: flex-end; }
.cj-remove { margin-left: auto; }
.cj-attr > .button-small { align-self: flex-start; }

/* Survey header with tabs (Fragebogen | Einstellungen | Daten | Vorschau) */
/* Breadcrumb header: ← Meine Befragungen / Title [status] in one line */
.survey-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.survey-head h1, .survey-head .survey-title { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.survey-head .survey-title { font-size: 1.05rem; }  /* on a page below a tab the page's own h1 leads */
.survey-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.survey-head-actions .undo-bar { margin-left: 0; }
.survey-head .crumb { margin: 0; }
/* phones: Vorschau and ↶ ↷ stay in the window; the line of the autosave goes below them and wraps
   (UI audit 2026-10-07, W79, W6) */
@media (max-width: 600px) {
  .survey-head-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
  .survey-head-actions .undo-bar { display: contents; }  /* its buttons on the row of Vorschau and the saved state */
  /* S2: the line shrinks to "✓ gespeichert" (before any save: nothing) and stays on the row of Vorschau and ↶ ↷ */
  .survey-head-actions { gap: 4px; }
  .survey-head-actions .icon-btn { width: 28px; }  /* ↶ ↷ stay beside Vorschau with "⚠ nicht gespeichert" (still over 24 px, WCAG 2.5.8) */
  .survey-head-actions .autosave-page { margin: 0 2px; font-size: 0.75rem; }
  .autosave-page .autosave-goto { margin-left: 2px; }
  .autosave-page .autosave-long { display: none; }
  .autosave-page .autosave-short { display: inline; }
}
/* ↶ ↷ and the list of the last changes (editor/_undo.html) */
.undo-bar { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.undo-bar form { margin: 0; }
.undo-bar .icon-btn:not(:disabled) { color: var(--accent); }  /* something to take back: in the accent colour, not grey */
.undo-menu > summary { width: 22px; cursor: pointer; }
/* Export: line and arrows keep their place, invisible, so "Vorschau" stands where it stands on every tab (X71) */
.autosave-reserved, .undo-reserved { visibility: hidden; }
.undo-reserved .undo-menu > .icon-btn { width: 22px; }
.undo-panel { left: auto; right: 0; width: min(380px, calc(100vw - 40px)); }
.undo-head { margin: 4px 8px 6px; font-weight: 600; font-size: 0.95rem; }
.undo-head .hint { display: block; font-weight: 400; }
.undo-list { list-style: none; margin: 0; padding: 0; }
.undo-list button, .undo-more { display: flex; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 0.95rem; text-align: left; color: var(--fg); cursor: pointer; }
.undo-list button:hover, .undo-list button:focus-visible, .undo-more:hover { background: var(--surface-3); }
.undo-list button:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
/* everything a click takes back: the step under the pointer and those above it */
.undo-list li:has(~ li button:hover) button, .undo-list li:has(~ li button:focus-visible) button { background: var(--surface-3); }
.undo-time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.undo-more { color: var(--accent); font-weight: 600; }
.crumb-sep { color: var(--subtle); font-size: 1.05rem; }
/* horizontal scrolling only on narrow screens; never a vertical scrollbar (the tab underline overlaps the border by 1px) */
.survey-tabs { display: flex; gap: 2px; margin: 12px 0 20px; border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.survey-tabs::-webkit-scrollbar { display: none; }
.survey-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; margin-bottom: 0; text-decoration: none;
  color: var(--muted); font-weight: 550; font-size: 0.95rem; border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 8px 8px 0 0; }
.survey-tabs a:hover { color: var(--fg); background: var(--surface-3); }
.survey-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
/* the row fits 1400 px; narrower windows drop the symbols first, then the row scrolls with a fade at its ends (R1) */
/* icons go first when the row gets tight; with "Studienplan" (2026-10-06) the row needs about 1500 px with them */
@media (max-width: 1500px) { .survey-tabs a > .icon { display: none; } }
.survey-tabs.is-scrolling { mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.survey-tabs-sep { flex: 0 0 1px; align-self: center; height: 20px; margin: 0 6px; background: var(--border-strong); }
.workspace-head { align-items: flex-end; }
.workspace-title { flex: 1; min-width: 0; }
.workspace-title .survey-tabs { margin-bottom: 0; }

/* Editor as an app shell: three full-height areas (left | center | right), each scrolling on its own */
@media (min-width: 801px) {
  body:has(.workspace) { padding-bottom: 0; overflow: hidden; }
  main.workspace { max-width: none; margin: 0; padding: 0; height: calc(100vh - 56px - 34px);
    display: flex; flex-direction: column; }
  .workspace-head { padding: 10px 20px 0; margin: 0; background: var(--surface); border-bottom: 1px solid var(--border); }
  .workspace-head .back-link { margin-bottom: 2px; }
  .workspace-head .survey-tabs { border-bottom: 0; margin: 8px 0 0; }
  .workspace-head .lang-switch { margin-bottom: 8px; }
  .workspace > .flashes { position: static; margin: 8px 20px 0; }
  .editor-grid { flex: 1; min-height: 0; gap: 0; align-items: stretch;
    width: 100%; max-width: calc(var(--left-shown) + var(--page-col) + var(--right-shown)); margin: 0 auto; }
  .editor-grid > .sidebar { position: static; top: auto; max-height: none; height: 100%; overflow-y: auto;
    border: 0; border-radius: 0; box-shadow: none; background: var(--surface); padding: 16px; }
  .sidebar-left { border-right: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; }
  .sidebar-right { border-left: 1px solid var(--border) !important; border-right: 1px solid var(--border) !important; }
  .canvas { height: 100%; overflow-y: auto; padding: 20px; min-width: 0; }
  .sidebar-resizer { left: calc(var(--left-shown) - 6px); width: 12px; }
  .sidebar-resizer-right { left: auto; right: calc(var(--right-shown) - 6px); }
  .sidebar-resizer::after { position: absolute; top: 50%; left: 5px; margin: -24px 0 0; }
}
@media (min-width: 801px) and (max-width: 1000px) {
  /* two areas: palette | center; the right sidebar moves above the blocks, capped so it cannot push them away */
  .editor-grid > .sidebar-right { height: auto; max-height: 32vh; overflow-y: auto; border-left: 0 !important;
    border-bottom: 1px solid var(--border) !important; }
}

/* Loop & Merge */
.loop-table-wrap { overflow-x: auto; }
.loop-table th { vertical-align: top; min-width: 150px; }
.loop-table th .check { font-weight: 400; margin-top: 4px; text-transform: none; letter-spacing: 0; }
.loop-table .loop-rownum { min-width: 0; width: 36px; color: var(--muted); text-align: center; }
.loop-table .loop-addcol { min-width: 0; width: 1%; }
.loop-colname { font-family: ui-monospace, monospace; font-weight: 600; }
.loop-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 0; padding: 10px 12px;
  background: color-mix(in srgb, var(--ok) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent); border-radius: var(--radius); }
.loop-vars .chip { font-family: ui-monospace, monospace; cursor: grab; }
.loop-vars .chip:active { cursor: grabbing; }
.loop-vars .chip-answer { font-family: inherit; color: var(--fg); }
.loop-vars .chip-answer small { font-family: ui-monospace, monospace; color: var(--muted); margin-left: 4px; }
/* while a loop variable is dragged: text fields show that they accept it */
body.dragging-var [data-var-target] {
  outline: 2px dashed var(--accent); outline-offset: 1px; background: var(--accent-soft); }
.style-card.just-switched .style-frame { animation: style-pulse 1.2s ease-out; }
@keyframes style-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); transform: scale(1); }
  30% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .style-card.just-switched .style-frame { animation: none; } }

/* Setup wizard */
.wizard-steps { list-style: none; padding: 0; margin: 14px 0 18px; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.wizard-steps::-webkit-scrollbar { display: none; }
.wizard-step { flex: 1; min-width: 92px; }
.wizard-step a, .wizard-step > span:first-child { text-decoration: none; font-weight: inherit; }
.wizard-step a, .wizard-step { color: var(--muted); }
.wizard-step > a, .wizard-step { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.wizard-step { border-top: 3px solid var(--border); padding-top: 8px; font-size: 0.85rem; }
.wizard-step.done { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.wizard-step.current { border-top-color: var(--accent); color: var(--fg); font-weight: 650; }
.wizard-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); font-size: 0.75rem; font-weight: 700; }
.wizard-step.done .wizard-num { background: var(--accent-soft); color: var(--accent); }
.wizard-step.done.skipped { border-top-color: var(--border); }
.wizard-step.done.skipped .wizard-num { background: var(--surface-3); color: var(--muted); }
.lang-default select { width: auto; min-width: 220px; max-width: 100%; }
.wizard-defaults { border-top: 1px solid var(--border); padding-top: 12px; }
.wizard-defaults p { margin: 0 0 6px; }
.wizard-step.current .wizard-num { background: var(--accent); color: var(--on-accent); }
/* .wizard-panel: as wide as the page's other blocks (Ralf, 2026-10-03: the file import below was wider) */
.wizard-nav { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.wizard-spacer { flex: 1; }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.summary dt { font-weight: 650; color: var(--muted); font-size: 0.85rem; }
.summary dd { margin: 0; }
/* on the phone all steps fit as numbers, and "Schritt 2 von 8 · Studienplan" names the current one (X12) */
.wizard-count { display: none; }
@media (max-width: 600px) {
  .wizard-label { display: none; }
  .wizard-step { min-width: 0; }
  .wizard-count { display: block; margin: 14px 0 -8px; font-weight: 650; font-size: 0.95rem; }
}
.zenodo-connections { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
/* two classes, so the row rule of ul.plain li (padding 8px 0, its own bottom line) does not take the inner space away (Ralf) */
.zenodo-connections > .zenodo-conn { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 0.95rem; }

/* ------------------------------------------------------------------------------------------
   Night mode (researcher UI). Participant pages and previews stay light on purpose. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141517;
  --surface: #1c1e21;
  --surface-2: #212428;
  --surface-3: #2a2e33;
  --fg: #e7e5e0;
  --muted: #a4a29c;
  --subtle: #7e7c77;
  --accent: #7ea6e6;
  --accent-hover: #9ab9ec;
  --accent-soft: rgba(126, 166, 230, 0.14);
  --ai: #c4a2f3;
  --ai-soft: rgba(168, 120, 240, 0.16);
  --ai-border: rgba(196, 162, 243, 0.40);
  --linked: #6fc7dc;
  --linked-soft: rgba(111, 199, 220, 0.13);
  --interview: #e0a66e;
  --interview-soft: rgba(224, 166, 110, 0.14);
  --live: #f08cb6;
  --live-soft: rgba(240, 140, 182, 0.14);
  --on-accent: #0e1a2e;
  --border: #33363c;
  --border-strong: #464a51;
  --field-border: #74757a;
  --danger: #f08d86;
  --danger-soft: rgba(240, 141, 134, 0.12);
  --on-danger: #2a0d0b;
  --ok: #86d293;
  --ok-soft: rgba(134, 210, 147, 0.12);
  --warn: #e7c566;
  --warn-soft: rgba(231, 197, 102, 0.13);
  --warn-border: rgba(231, 197, 102, 0.40);
  --warn-bar: #c9a43a;
  --on-warn: #241a00;
  --caution: #f0a35e;
  --chart-1: #307ab5; --chart-2: #c88a00; --chart-3: #009d72; --chart-4: #d598b8; --chart-5: #54b1e5; --chart-6: #dfd43d;
  --seq-1: #2f445a; --seq-2: #3c648b; --seq-3: #3886c6; --seq-4: #71a7e0; --seq-5: #9ecafe;
  --div-1: #f1d2b1; --div-2: #cbb297; --div-3: #a29485; --div-4: #787774; --div-5: #8b97a7; --div-6: #a1b8d6; --div-7: #bddaff;
  --div-ink: #000000; --data-fill: #3886c6; --data-neg: #a5793e;
  --header-bg: rgba(28, 30, 33, 0.92);
  --footer-bg: rgba(20, 21, 23, 0.95);
  --focus-ring: rgba(126, 166, 230, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------------------------------
   Styles of the panel "Darstellung" (app/display.py, concept darstellung-forschende-konzept.md): each one only
   sets tokens, for light and for dark. Forms, spacing and radii stay those of Askurious. The colours that carry a
   meaning (AI, linked, interview, live, OK, error, warning) are the same in every style; "Kontrast" only makes them
   stronger. Every pairing is checked in tests/test_display.py (text 4.5:1, controls and chart series 3:1). */
/* Kontrast: white or black ground, darker text, frames of panels 3:1, a 3 px focus line */
:root[data-look="kontrast"]:not([data-theme="dark"]) {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f6f3; --surface-3: #e9e8e3;
  --fg: #0f0f0e; --muted: #4a4a45; --subtle: #5e5e58;
  --accent: #1d4a8f; --accent-hover: #143566; --accent-soft: rgba(29, 74, 143, 0.12); --on-accent: #ffffff;
  --border: #8c8a82; --border-strong: #5e5c56; --field-border: #5e5c56;
  --header-bg: rgba(255, 255, 255, 0.97); --footer-bg: rgba(255, 255, 255, 0.97);
  --focus-outline: 3px solid var(--accent);
  --ai: #5f2aae; --ai-border: #a98be0; --linked: #06566a; --interview: #6e3a0c; --live: #93194c;
  --ok: #17531f; --danger: #8f1c16; --warn: #5c4400; --warn-border: #876800; --caution: #8a4600;
  --chart-1: #00507f; --chart-2: #b47c00; --chart-3: #00976e; --chart-4: #784561; --chart-5: #3f88b1; --chart-6: #686317;
  --seq-1: #cfe1fa; --seq-2: #a0c1ea; --seq-3: #6ca2da; --seq-4: #2a84c6; --seq-5: #03659e;
  --div-1: #a67531; --div-2: #bf986a; --div-3: #d4bca4; --div-4: #e3e2df; --div-5: #adc2dd; --div-6: #73a2d5; --div-7: #0584cd;
  --div-ink: #0f0f0e; --data-fill: #2a84c6; --data-neg: #a47638;
}
:root[data-look="kontrast"][data-theme="dark"] {
  --bg: #000000; --surface: #121315; --surface-2: #1a1c1f; --surface-3: #26292e;
  --fg: #f7f6f2; --muted: #c9c7c1; --subtle: #b0aea8;
  --accent: #a8c5f2; --accent-hover: #c4d8f6; --accent-soft: rgba(168, 197, 242, 0.18); --on-accent: #06101f;
  --border: #6b6e74; --border-strong: #9a9ca1; --field-border: #9a9ca1;
  --header-bg: rgba(18, 19, 21, 0.97); --footer-bg: rgba(0, 0, 0, 0.97);
  --focus-outline: 3px solid var(--accent);
  --ai: #d9c2f8; --ai-border: rgba(217, 194, 248, 0.55); --linked: #97dbeb; --interview: #f0c39a; --live: #f7b3cf;
  --ok: #a9e3b2; --danger: #f6b0aa; --warn: #f0d58a; --warn-border: #e7c566; --caution: #f5c08e;
  --chart-1: #4b83b9; --chart-2: #e59e00; --chart-3: #009169; --chart-4: #d088af; --chart-5: #65b8ea; --chart-6: #f0e551;
  --seq-1: #2b3f56; --seq-2: #396188; --seq-3: #3886c6; --seq-4: #74aae2; --seq-5: #a8cfff;
  --div-1: #f0d2b3; --div-2: #c8b29c; --div-3: #a09488; --div-4: #787774; --div-5: #8d97a4; --div-6: #a5b8d1; --div-7: #bfdafc;
  --div-ink: #000000; --data-fill: #3886c6; --data-neg: #a5793e;
}
/* RWTH: Farbwelt of RWTH Aachen (RWTH-Blau, black and its grey steps), the house fonts Helvetica / Arial of the
   device (nothing is loaded); only for members of RWTH, like the participants' RWTH theme (display.allowed) */
:root[data-look="rwth"]:not([data-theme="dark"]) {
  --bg: #eceded; --surface: #ffffff; --surface-2: #f6f6f6; --surface-3: #e8f1fa;
  --fg: #000000; --muted: #646567; --subtle: #646567;
  --accent: #00549f; --accent-hover: #00427d; --accent-soft: #e8f1fa; --on-accent: #ffffff;
  --border: #cfd1d2; --border-strong: #9c9e9f; --field-border: #646567;
  --header-bg: rgba(255, 255, 255, 0.95); --footer-bg: rgba(236, 237, 237, 0.95);
  --seq-1: #d8dffa; --seq-2: #b2c0ec; --seq-3: #8aa2df; --seq-4: #6185ce; --seq-5: #386ab6;
  --div-1: #ac7e36; --div-2: #c29e6e; --div-3: #d5c0a6; --div-4: #e3e2df; --div-5: #bac2e0; --div-6: #8ea3da; --div-7: #5b86d5;
  --div-ink: #000000; --data-fill: #6185ce; --data-neg: #a97f3e;
}
:root[data-look="rwth"][data-theme="dark"] {
  --bg: #000000; --surface: #000000; --surface-2: #141414; --surface-3: #1f2a36;
  --fg: #ffffff; --muted: #9c9e9f; --subtle: #9c9e9f;
  --accent: #8ebae5; --accent-hover: #c7ddf2; --accent-soft: rgba(142, 186, 229, 0.16); --on-accent: #000000;
  --border: #646567; --border-strong: #9c9e9f; --field-border: #9c9e9f;
  --header-bg: rgba(0, 0, 0, 0.92); --footer-bg: rgba(0, 0, 0, 0.95);
  --seq-1: #39425a; --seq-2: #4e608a; --seq-3: #5f80c5; --seq-4: #8aa2df; --seq-5: #b2c5fd;
  --div-1: #efd3b0; --div-2: #cab296; --div-3: #a19485; --div-4: #787774; --div-5: #9195a7; --div-6: #abb5d6; --div-7: #cad6ff;
  --div-ink: #000000; --data-fill: #5f80c5; --data-neg: #a37a3d;
}
:root[data-look="rwth"] body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* text size of the panel "Darstellung": every rem grows (the six steps, fields, body text) */
:root[data-size="112"] { font-size: 112%; }
:root[data-size="125"] { font-size: 125%; }
/* the panel itself: one row per question, the answers as a segmented choice */
.display-form fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.display-form legend { float: left; width: 10rem; padding: 0; font-weight: 600; font-size: 0.95rem; }
:root[data-theme="dark"] .participant-frame { background: #fff; }
:root[data-theme="dark"] .style-frame { background: var(--surface-3); }
:root[data-theme="dark"] img { opacity: 0.94; }
.theme-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 1.05rem; }
.theme-toggle:hover { background: var(--surface-3); color: var(--fg); }
/* show the icon of the mode you switch TO */
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .badge-closed { color: #e0a878; }
:root[data-theme="dark"] .badge-paused, :root[data-theme="dark"] .badge-pending { color: var(--warn); }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--surface-2); }
:root[data-theme="dark"] input:disabled, :root[data-theme="dark"] textarea[readonly], :root[data-theme="dark"] input[readonly] { background: var(--surface-3); }
:root[data-theme="dark"] .participant-frame input, :root[data-theme="dark"] .participant-frame textarea { background: #fff; }

/* Ablauf page: nested groups as boxes, drag before/after/into */
.flow-page { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
main.tabpage > .flow-page { max-width: min(calc(280px + var(--page-col) + 300px + 40px), calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.flow-palette { position: sticky; top: 72px; }
.flow-palette .panel { margin: 0; }
.flow-side { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 0; }
.flow-side .panel { margin: 0 0 16px; }
.flow-canvas { margin-top: 0; }
@media (max-width: 1200px) { .flow-page { grid-template-columns: 260px minmax(0, 1fr); } .flow-side { grid-column: 1 / -1; position: static; } }
@media (max-width: 1000px) { .flow-page { grid-template-columns: 1fr; } .flow-side, .flow-palette { position: static; } }
.fl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fl-node { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fl-node.fl-block { background: var(--surface-2); }
.fl-node.fl-rand { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.fl-node.fl-branch { border-color: var(--warn-border); background: color-mix(in srgb, var(--warn-bar) 6%, transparent); }
/* a condition has two slots: "dann" and "sonst" */
.fl-slots { display: grid; gap: 8px; margin-top: 8px; }
.fl-slot { border: 1px dashed var(--warn-border); border-radius: var(--radius); padding: 6px 8px 8px; background: var(--surface-2); }
.fl-slot-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn); margin: 0 0 4px 2px; }
.fl-slot-label .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fl-slot-if { border-style: solid; background: color-mix(in srgb, var(--warn-bar) 8%, transparent); }
.fl-slot-if .fl-cond { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--fg); margin-left: 4px; }
.fl-slot-if .fl-settings { margin: 2px 0 0 2px; }
.fl-slot.drop-into { background: color-mix(in srgb, var(--warn-bar) 12%, transparent); border-style: solid; }
.fl-slot .fl-list { margin: 0; }
.fl-node.fl-end { border-color: var(--border-strong); background: var(--surface-3); }  /* an end is a regular step, not an error (R78) */
.fl-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; font-size: 0.95rem; }
.fl-head .hint { margin-left: 0; }
/* a long line of what the element does (a loop: rows, placeholder, export) wraps in itself next to the title, so
   ↑ ↓ and the bin stay in the head as with every other element (UI/UX audit 2026-10-05, V94) */
.fl-head > .fl-live > .hint, .fl-head > .hint { flex: 1 1 120px; min-width: 0; }
.fl-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.fl-title:hover { color: var(--accent); }
.fl-icon { width: 20px; text-align: center; flex: none; }
.fl-tools { margin-left: auto; display: inline-flex; gap: 0; color: var(--muted); }
.fl-head:hover .fl-tools, .fl-head:focus-within .fl-tools { color: var(--fg); }
.fl-children { margin: 0 10px 10px 26px; }
.fl-empty { list-style: none; padding: 10px; border: 2px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: 0.85rem; text-align: center; }
.fl-children:has(> .fl-node) > .fl-empty { display: none; }
.flow-page.dragging .fl-children > .fl-empty { display: block; }
.fl-settings { margin: 0 10px 8px 38px; font-size: 0.85rem; }
.fl-settings summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.fl-settings .stack { gap: 8px; margin-top: 8px; }
.fl-node[draggable="true"] > .fl-head { cursor: grab; }
.fl-node.is-dragged { opacity: 0.4; }
.fl-node.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.fl-node.drop-after { box-shadow: 0 3px 0 var(--accent); }
.fl-node.drop-into > .fl-children { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 8px; }
.flow-add-grid { display: grid; gap: 6px; }
.fl-add { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; text-align: left; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); font: inherit; color: var(--fg); }
.fl-add:hover { border-color: var(--accent); background: var(--accent-soft); }
/* the cards are dragged into the flow (app.js); onto a block, loop, randomizer and condition take it in */
.fl-add { cursor: grab; }
.fl-add.is-dragged { opacity: 0.4; }
@media (pointer: coarse) { .fl-add { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
.fl-node.drop-wrap { position: relative; outline: 2px dashed var(--accent); outline-offset: 2px; }
.fl-node.drop-wrap::after { content: attr(data-drop-note); position: absolute; right: 10px; top: 0; transform: translateY(-50%); padding: 2px 10px;
  border-radius: var(--radius-tag); background: var(--accent); color: var(--surface); font-size: 0.75rem; font-weight: 600; white-space: nowrap; pointer-events: none; }
.fl-add span:first-child { grid-row: span 2; font-size: 1.05rem; }
.fl-add strong { font-size: 0.85rem; }
.fl-add .desc { font-size: 0.75rem; color: var(--muted); }

/* Einstellungen, Ablauf, Export: full width like the Fragebogen tab; panels in one linear column */
main.tabpage { max-width: none; margin: 0; padding: 0 0 40px; }
.tabpage-head { padding: 10px 20px 0; margin-bottom: 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.tabpage-head .survey-tabs { border-bottom: 0; margin: 8px 0 0; }
.tabpage > :not(.tabpage-head) { margin-left: 20px; margin-right: 20px; }
.tabpage-grid > .panel { margin-top: 0; }
/* pages with one column (Einstellungen, Quoten, Feld, Ergebnisse, ...): the column is centred like Stichprobengröße and
   Administration, at most --page-col wide; on pages with three columns (Fragebogen, Ablauf) the middle one has the same
   cap and the side columns move in (.editor-grid, .flow-page) */
:root { --page-col: 1400px; }
/* three-column pages (Fragebogen, Ablauf): the middle column keeps --page-col, so the outer ones stand where they are,
   but its content is at most --page-content wide in its middle (Ralf, 2026-10-03, as in the live views) */
:root { --page-content: 1200px; }
.canvas > * { max-width: var(--page-content); margin-left: auto; margin-right: auto; }
.flow-page > .flow-canvas { width: 100%; max-width: var(--page-content); justify-self: center; }
.tabpage-single > :not(.tabpage-head) { max-width: min(var(--page-col), calc(100% - 40px)); margin-left: auto; margin-right: auto; }
/* a back link ("← Fragebogen") on such a page: at the left edge of the column, as wide as its text */
.tabpage-single > .back-link { display: flex; width: fit-content; margin-left: max(20px, calc((100% - var(--page-col)) / 2)); margin-right: auto; }
#settings-participation, #settings-privacy, #settings-quality, #settings-test { scroll-margin-top: 70px; }

/* Construct toolbox: note on the item page */
.construct-note { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin: 0 0 16px;
  padding: 12px 16px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.construct-note.is-adapted { border-left-color: var(--warn); }
.construct-note.linked-note { border-left-color: var(--linked); }
.linked-figures { margin-top: 18px; }
/* a bar per survey in the tables of the shared analysis: share of an answer, or the mean on the scale */
.lk-bar { display: block; height: 8px; width: 100%; min-width: 90px; margin: 2px 0 3px; border-radius: 4px;
  background: linear-gradient(90deg, var(--linked) var(--v), var(--linked-soft) var(--v)); }
.linked-figures th .hint { text-transform: none; letter-spacing: 0; }  /* "n = 25", not "N = 25" */
.construct-note.linked-note.is-adapted { border-left-color: var(--warn); }
.linked-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex-shrink: 0; }
.kind-fields-locked { opacity: 0.75; }
.construct-note p { margin: 4px 0 0; }
.construct-note strong { display: inline-flex; align-items: center; gap: 6px; }
.construct-explore { display: block; margin: 4px 8px 14px; }

/* Konstrukte page: search, facet chips, linear result list */
.construct-search { display: flex; gap: 8px; margin: 0 0 14px; }
.construct-search input[type=search] { flex: 1; height: var(--field-h); }  /* 42 px like every field (X80) */
.facets { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
/* the chips keep apart from the row "Alle / Meine und geteilte" above and from each other when they wrap (Ralf, 2026-10-05) */
.dash-groups + .facets { margin-top: 14px; }
.facet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.facet-label { min-width: 96px; font-size: 0.85rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.facet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--border); border-radius: var(--radius-tag);
  background: var(--surface); color: var(--fg); font-size: 0.85rem; text-decoration: none; }
.facet-chip:hover { border-color: var(--border-strong); }
.facet-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.facet-chip.is-empty { color: var(--muted); border-style: dashed; }
.facet-count { font-size: 0.75rem; opacity: 0.75; }
.construct-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.construct-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 14px 18px; }
.construct-card:hover { border-color: var(--border-strong); }
.construct-short { margin: 4px 0 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font-size: 0.75rem; padding: 2px 9px; border-radius: var(--radius-tag); background: var(--accent-soft); color: var(--fg); text-decoration: none; }
.tag-thema { background: var(--ok-soft); }
.tag-fach { background: var(--warn-soft); }
.tag-status { background: transparent; border: 1px solid var(--border-strong); font-weight: 600; }
.construct-facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; margin: 14px 0 0; }
.construct-facts dt { font-weight: 600; color: var(--muted); }
.construct-facts dd { margin: 0; }
@media (max-width: 600px) { .construct-facts { grid-template-columns: 1fr; } .facet-label { min-width: 0; width: 100%; } }

/* Nutzungsbedingungen */
.terms h1 { margin-top: 0; }
.terms h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.terms p, .terms li { line-height: 1.6; }
.terms ul { padding-left: 20px; }
.terms li { margin-bottom: 6px; }
.terms-accept label.check { align-items: flex-start; flex-wrap: nowrap; }  /* the long sentence next to the box, wrapping in itself */
.terms-accept label.check input { flex: none; margin-top: 3px; }
/* new terms: what is new, one paragraph per version under the sentence with the jump (X69) */
.flash.terms-pending { display: block; }
.terms-pending p { margin: 0; }
.terms-pending p + p { margin-top: 8px; }

/* Export page: timeline */
.timeline-svg { display: block; width: 100%; height: auto; margin: 10px 0 6px; overflow: visible; }
.timeline-svg .tl-bar, .tl-key.tl-bar { fill: var(--accent); background: var(--accent); }
/* not completed: hatched accent, draft: a light band with a dark edge; both at least 3:1 to the surface (V76) */
.timeline-svg .tl-bar-other { fill: url(#tl-hatch); stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-key.tl-bar-other { background: repeating-linear-gradient(45deg, var(--accent) 0 1.5px, var(--surface) 1.5px 4px); box-shadow: inset 0 0 0 1px var(--accent); }
.timeline-svg .tl-hatch-ground { fill: var(--surface); }
.timeline-svg .tl-hatch-line { stroke: var(--accent); stroke-width: 2; }
.timeline-svg .tl-draft { fill: var(--surface-3); stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-key.tl-draft { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--muted); }
.timeline-svg .tl-tick { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.timeline-svg .tl-running, .tl-key.tl-running { fill: var(--ok); background: var(--ok); }
.timeline-svg .tl-paused, .tl-key.tl-paused { fill: var(--warn); background: var(--warn); }
.timeline-svg .tl-closed, .tl-key.tl-closed { fill: var(--muted); background: var(--muted); }
.timeline-svg .tl-planned { fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tl-key.tl-planned { border: 1.5px dashed var(--ok); }
.timeline-svg .tl-axis { stroke: var(--border-strong); }
.timeline-svg .tl-event { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.timeline-svg .tl-now { stroke: var(--accent); stroke-width: 1.5; }
.timeline-svg .tl-label { fill: var(--muted); font-size: 12px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--muted); }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.tl-events { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
ol.plain.tl-events li { border: 0; padding: 0; }  /* plain dates and actions, no rule under each */

/* Palette: one highlight for the whole row (element and its "+") */
.palette-row { border: 1px solid transparent; border-radius: var(--radius); padding-right: 4px; }
.palette-row:hover, .palette-row:focus-within { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.palette-row .palette-item:hover, .palette-row .palette-item:focus-visible { background: transparent; border-color: transparent; }
.palette-row .palette-add:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.figures .fig-wide { grid-column: 1 / -1; }
.badge-construct { background: var(--ok-soft); color: var(--ok); text-decoration: none; }
.badge-construct.is-modified { background: var(--warn-soft); color: var(--warn); }
.badge-linked { background: var(--linked-soft); color: var(--linked); text-decoration: none; }
.badge-linked.is-modified { background: var(--warn-soft); color: var(--warn); }
.badge .icon { vertical-align: -1px; }

/* Block name as an editable heading */
.block-name { display: block; position: relative; }
.block-name input { width: 100%; font-size: 1.05rem; font-weight: 650; color: var(--fg); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; margin-left: -8px; }
.block-name input:hover { border-color: var(--border); }
.block-name input:focus { border-color: var(--accent); background: var(--surface); outline: var(--focus-outline); outline-offset: 1px; }
.block-name input::placeholder { font-weight: 500; color: var(--muted); }
.block-meta { display: block; margin: 0 0 6px; }
.reopen-box { margin: 10px 0; }
.reopen-box summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.start-check ul { margin: 6px 0; padding-left: 18px; }
.start-check p { margin: 0; }
p.start-check { margin: 0 0 12px; }
.reopen-box .flash { margin: 10px 0; align-items: flex-start; }
.reopen-box .flash ul { margin: 6px 0 0; padding-left: 18px; }
.reopen-box .flash p { margin: 0; }
.snapshot-list li { padding: 4px 0; }

/* absolutely positioned children must not escape the scrolling columns (else the page itself scrolls) */
.workspace .canvas, .workspace .sidebar { position: relative; }

/* "Fragebogen bearbeiten" on paused/closed surveys: a yellow (warning) button */
.reopen-box summary { list-style: none; padding: 8px 14px; border-radius: 8px; background: var(--warn-soft);
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); font-weight: 650; }
.reopen-box summary::-webkit-details-marker { display: none; }
.reopen-box summary:hover { border-color: var(--warn); }
.reopen-box[open] summary { margin-bottom: 4px; }
.reopen-box .button-secondary { background: var(--warn); color: var(--on-warn); border-color: var(--warn); }

/* Loop & Merge page */
.loop-intro p { margin-top: 0; }
.loop-example { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.2fr) minmax(240px, 1.6fr); gap: 16px; margin-top: 10px; }
.loop-example-q { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--bg); font-size: 0.95rem; }
.loop-example table { margin-top: 6px; }
@media (max-width: 800px) { .loop-example { grid-template-columns: 1fr; } }
.step-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); font-size: 0.85rem; margin-right: 6px; vertical-align: 2px; }
[data-loop-editor] h2 { margin-top: 18px; }
[data-loop-editor] h2:first-of-type { margin-top: 0; }
.copy-chip { cursor: pointer; }
.copy-chip.copied { background: var(--ok-soft); color: var(--ok); }
.copy-chip.copy-failed { background: var(--danger-soft); color: var(--danger); }
.copy-chip:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.loop-usage li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
/* vignettes (app/vignettes.py): figures of the plan and the preview of one vignette */
.vig-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.vig-stats > div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.vig-stats strong { font-size: 1.35rem; }
.vig-stats .text-ok { color: var(--ok); }
.vig-stats .text-warn { color: var(--warn); }
.loop-row-out td { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.loop-plan-cols { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; flex-basis: 100%; }
.vig-ai-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; }
.vig-ai-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.vig-ai-levels input { width: auto; min-width: 9rem; flex: 1 1 9rem; }
.vig-ai-buttons { flex-wrap: wrap; gap: 8px; align-items: center; }
.vig-ai-buttons form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.vig-preview { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--warn-border); background: var(--warn-soft); border-radius: 0; }
.loop-btn { white-space: nowrap; }
.loop-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* product subtitle */
.brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; }

/* Palette groups: question types, validated constructs (green), feedback (yellow); collapsible */
.palette-group { margin: 10px 0; border-radius: var(--radius); }
.pg-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer; text-align: left; }
.pg-head:hover { color: var(--fg); }
.pg-chevron { display: inline-block; transition: transform 0.15s; }
.palette-group.is-collapsed .pg-chevron { transform: rotate(-90deg); }
.palette-group.is-collapsed .pg-body { display: none; }
.pg-count { margin-left: auto; font-size: 0.75rem; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-tag); background: var(--bg); color: var(--muted); letter-spacing: 0; }
.pg-body { padding: 0 4px 6px; }
.pg-body .palette { margin: 2px 0 6px; }
.palette-group.no-hits .pg-head { color: var(--muted); }
.pg-constructs { background: var(--ok-soft); }
.pg-feedback { background: var(--warn-soft); }
/* the same colours on the questionnaire canvas: validated constructs green, feedback yellow */
.item-row.row-construct { background: var(--ok-soft); box-shadow: inset 3px 0 0 var(--ok); margin: 2px 0; }
.item-row.row-feedback { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); margin: 2px 0; }
.item-row.row-ai { background: var(--ai-soft); box-shadow: inset 3px 0 0 var(--ai); margin: 2px 0; }  /* AI-drafted scale */
.item-row.row-linked { background: var(--linked-soft); box-shadow: inset 3px 0 0 var(--linked); margin: 2px 0; }  /* linked element */
.item-row.row-linked:hover { filter: brightness(0.98); }
.item-row.row-construct:hover, .item-row.row-feedback:hover, .item-row.row-ai:hover { filter: brightness(0.98); }
.badge-ai { background: var(--ai-soft); color: var(--ai); }
.palette-ai { border-radius: 8px; }  /* the entry itself is in the AI violet, see below */
.pg-constructs .palette-row:hover, .pg-constructs .palette-row:focus-within,
.pg-feedback .palette-row:hover, .pg-feedback .palette-row:focus-within { background: var(--surface); }
.left-collapsed .palette-group .pg-head, .left-collapsed .construct-explore { display: none; }
.left-collapsed .palette-group.is-collapsed .pg-body { display: block; }

/* Feedback */
.feedback-btn { color: var(--muted); }
.feedback-btn:hover { color: var(--accent); }
.feedback-count { text-decoration: none; min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center; }
.feedback-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 18px 20px;
  background: var(--surface); color: var(--fg); box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.feedback-dialog::backdrop { background: rgba(20, 20, 18, 0.35); }
/* "Person hinzufügen …" on Administration › Personen (UI/UX audit 2026-10-07, S10): the panel with the two ways, which
   app.js turns into this dialog; side by side, on a phone one below the other */
.person-dialog { box-sizing: border-box; width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 1px solid var(--border);
  border-radius: var(--radius-panel); padding: 18px 22px 22px; background: var(--surface); color: var(--fg); box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.person-dialog::backdrop { background: rgba(20, 20, 18, 0.35); }
.person-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 12px; }
.person-way { border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 14px 16px; min-width: 0; }
.person-way h3 { margin: 0 0 4px; font-size: 1.05rem; }
.person-way > p { margin: 0 0 10px; }
.person-way input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
@media (max-width: 720px) { .person-ways { grid-template-columns: 1fr; } .person-dialog { padding: 14px 14px 18px; } }
/* The question before a step that cannot be taken back (askConfirm in app.js) */
.confirm-dialog { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 20px 22px;
  background: var(--surface); color: var(--fg); box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.confirm-dialog::backdrop { background: rgba(20, 20, 18, 0.35); }
.confirm-dialog h2 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.confirm-dialog p { margin: 8px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.feedback-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.feedback-dialog-head h2 { margin: 0; display: inline-flex; gap: 8px; align-items: center; font-size: 1.05rem; }
.severity-scale { border: 0; padding: 0; margin: 0; }
.severity-scale legend { font-weight: 600; margin-bottom: 6px; }
.severity-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.severity-option { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 6px;
  text-align: center; cursor: pointer; font-size: 0.85rem; }
.severity-option input { position: absolute; opacity: 0; pointer-events: none; }
.severity-option .hint { display: block; font-size: 0.75rem; }
.severity-option:has(input:checked) { border-width: 2px; }
.sev-1:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.sev-2:has(input:checked) { background: var(--warn-soft); border-color: var(--warn); }
.sev-3:has(input:checked) { background: var(--danger-soft); border-color: var(--danger); }
@media (max-width: 520px) { .severity-options { grid-template-columns: 1fr; } }
/* own list, not ul.plain: its row rule would take the card padding away and put the text next to the head */
.feedback-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.feedback-panel .page-head { margin: 0; }
.page-sub { font-size: 1.35rem; margin: 8px 0 10px; }  /* the title of a page below a tab of the administration (W101) */
.feedback-panel .page-head h2 { margin: 0; }
.feedback-item { margin: 0; padding: 16px 20px; }
.feedback-item.is-done { background: var(--surface-2); }
.feedback-empty { padding: 8px 0; }
.feedback-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.feedback-source { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.feedback-meta form { margin: 0 0 0 auto; }
.feedback-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; }
.sev-badge.sev-1 { background: var(--accent-soft); color: var(--accent); }
.sev-badge.sev-2 { background: var(--warn-soft); color: var(--warn); }
.sev-badge.sev-3 { background: var(--danger-soft); color: var(--danger); }
.sev-badge.sev-4 { background: var(--danger); color: var(--on-danger); }
.feedback-item.is-complaint:not(.is-done) { box-shadow: inset 4px 0 0 var(--danger); }

/* landing page: wider, serif headings, sans-serif text */
.landing-page { max-width: 1200px; }
.landing-page h1, .landing-page h2 { font-family: var(--font-serif);
  font-weight: 600; letter-spacing: -0.01em; }
.landing-page h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; margin: 8px 0 12px; }
.landing-page h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 16px; }
/* the head (Ralf, 2026-10-04): text and two ways in on the left, the changing screenshot on the right */
.landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; margin: 24px 0 56px; }
.landing-lead { font-size: 1.35rem; line-height: 1.45; margin: 0; }
.landing-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.landing-dev { margin: 16px 0 0; font-size: 0.95rem; color: var(--muted); }
.landing-dev .dev-mark { font-weight: 600; margin-right: 4px; }
.landing-hero .shots { margin: 0; max-width: none; }
.landing-hero .shot a { display: block; cursor: zoom-in; }
.landing-hero .shot figcaption { font-size: 0.95rem; color: var(--muted); margin-top: 10px; }
/* the three kinds, with the stripes of "Meine Befragungen" (.card-kind) */
.landing-kinds { margin-bottom: 48px; }
.landing-kind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.landing-kind-grid .card { margin: 0; }
.landing-kind-grid h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.landing-kind-grid p { margin: 0 0 10px; line-height: 1.5; }
/* the functions in groups */
.landing-features { margin-bottom: 32px; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; }
.landing-feature-grid h3 { margin: 0 0 8px; font-size: 1.05rem; }
.landing-feature-grid ul { margin: 0; padding-left: 18px; line-height: 1.55; }
.landing-feature-grid li { margin-bottom: 3px; }
@media (max-width: 900px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .landing-kind-grid { grid-template-columns: minmax(0, 1fr); }
  .landing-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .landing-feature-grid { grid-template-columns: minmax(0, 1fr); } }
[data-description-count].is-ok { color: var(--ok); }
.duration-field { display: flex; flex-direction: column; gap: 4px; }
.inline-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.inline-controls .hint { margin: 0; }
.email-field { max-width: 360px; }

/* answer mode on each question in the questionnaire */
.mode-badge.mode-optional { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.mode-badge.mode-nudge { background: var(--warn-soft); color: var(--warn); }
.mode-badge.mode-required { background: var(--accent-soft); color: var(--accent); }

@media (min-width: 801px) and (max-width: 1000px) {
  .editor-grid { --left-shown: min(var(--left-w), 34vw); grid-template-columns: var(--left-shown) minmax(320px, 1fr); }
}
/* long design-check messages wrap inside their column */
.findings li, .finding { overflow-wrap: anywhere; }

/* Trash below the blocks: deleted questions, restorable for a week */
.trash-area .item-body .hint { margin-left: 6px; }

/* Mark an image: overview of all marks in the item editor */
.mark-pool { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.mark-pool img { max-width: 100%; height: auto; border-radius: 8px; }
.mark-pool canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Hot spot in the editor (app.js [data-hot-editor]): rectangles drawn over the image, the one to be drawn anew marked */
.hot-edit-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; cursor: crosshair; touch-action: none;
  user-select: none; margin-bottom: 10px; }
.hot-edit-stage[data-fixed] { cursor: default; }
.hot-edit-stage img { max-width: 100%; height: auto; border-radius: 8px; }
.hot-edit-area { position: absolute; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 4px; cursor: pointer; line-height: 1.2; }
.hot-edit-area span { position: absolute; left: 2px; top: 2px; max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 1px 5px; border-radius: 3px; background: var(--surface); color: var(--fg); font-size: 0.85rem; }
.hot-edit-area.is-target { border-style: dashed; }
.hot-edit-area.is-ghost { border-style: dashed; pointer-events: none; }
tr.hot-target td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* the rectangle as four numbers, without dragging (X22) */
.hot-nums { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; vertical-align: middle; }
.hot-nums label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 400; white-space: nowrap; }
.list-table:where(.is-edit) .hot-nums input.hot-num { width: 6ch; padding: 4px 6px; }
/* Hot spot on the results page (_hotspot_results.html): each area tinted by its share (--strength) */
.hot-res-stage { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto 12px; line-height: 0; }
.hot-res-stage img { max-width: 100%; height: auto; border-radius: 8px; }
.hot-res-area { position: absolute; border: 2px solid var(--accent); border-radius: 4px; line-height: 1.2;
  background: color-mix(in srgb, var(--accent) var(--strength), transparent); }
.hot-res-area.is-like { border-color: var(--ok); background: color-mix(in srgb, var(--ok) var(--strength), transparent); }
.hot-res-area.is-dislike { border-color: var(--danger); background: color-mix(in srgb, var(--danger) var(--strength), transparent); }
.hot-res-area b { position: absolute; left: 2px; top: 2px; padding: 1px 5px; border-radius: 3px; background: var(--surface);
  color: var(--fg); font-size: 0.85rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Roles: settings forms locked for people who may not change them */
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
.role-note { grid-column: 1 / -1; }
.role-badge { font-size: 0.75rem; }
.member-role select { font-size: 0.85rem; padding: 2px 6px; }

/* Export: completion times and speeder threshold */
/* the histogram on the left, threshold, result and explanation on the right (one above the other when narrow):
   the slider is no time axis of the chart, so it does not sit under it */
.speed-body { display: grid; grid-template-columns: minmax(0, 600px) minmax(240px, 420px); gap: 20px 28px; align-items: start;
  justify-content: start; }  /* the filter right next to the histogram, no gap in between */
.speed-body[hidden] { display: none; }
.speed-chart { max-width: 600px; }
.speed-side { min-width: 0; }
.speed-note { grid-column: 1 / -1; }  /* the explanation under chart and filter, across both columns */
.speed-note .muted.small { margin: 0; }
@media (max-width: 760px) { .speed-body { grid-template-columns: 1fr; } }
.speed-chart svg { width: 100%; height: auto; display: block; }
.speed-bar { fill: var(--data-fill); }  /* the one fill of all figures, see .res-bar span (V77: 3:1 against the surface) */
.speed-bar.is-speeder { fill: color-mix(in srgb, var(--caution) 68%, var(--surface)); }
.speed-grid { stroke: var(--border); stroke-dasharray: 3 3; }  /* flagged, to check: not an error (R78) */
.speed-zone { fill: color-mix(in srgb, var(--caution) 10%, transparent); }
.speed-median { stroke: var(--fg); stroke-dasharray: 3 3; }
.speed-cut { stroke: var(--caution); stroke-width: 2; }
.speed-axis { stroke: var(--border); }
.speed-tick, .speed-label { font-size: 11px; fill: var(--muted); }
.speed-slider { display: flex; flex-direction: column; gap: 6px; margin-top: 0; }
.speed-slider input { width: 100%; margin: 0; accent-color: var(--caution); }
.speed-summary { margin: 6px 0 0; }
.speed-rule { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.speed-base { margin-bottom: 8px; align-items: flex-start; flex-wrap: nowrap; }
.speed-base input { margin-top: 3px; flex-shrink: 0; }
.speed-base small { display: block; }

/* Sample size calculator */
.ss-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
/* one grid of two columns: a cell is name, field and hint below each other, and the cells of a row share their
   three lines (subgrid), so the fields of a row stand on one line whatever wraps above or below them. Every
   field, select and button has the height of the text fields and the width of its column. */
.ss-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.ss-inputs > * { margin: 0 0 10px; min-width: 0; }
.ss-inputs > label:not(.check) { display: flex; flex-direction: column; gap: 6px; }
.ss-inputs > .ss-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; align-items: end; }
@supports (grid-template-rows: subgrid) {
  .ss-inputs > label:not(.check), .ss-inputs > .ss-presets { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .ss-presets > .button { grid-row: 2; }
}
.ss-inputs > .ss-wide { grid-column: 1 / -1; }
/* the power curve under inputs and result (PA3) */
.ss-choice-power { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.ss-choice-power .label-title { margin: 0 0 6px; }
.ss-choice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.ss-choice-fields > label { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ss-choice-fields .ss-name { align-self: flex-start; }
.ss-choice-fields input, .ss-choice-fields select { width: 100%; height: 42px; }
.ss-curve { grid-column: 1 / -1; margin: 4px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.ss-curve-plot svg { display: block; width: 100%; height: auto; }
.ss-curve figcaption { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; justify-content: space-between; }
.ss-inputs > label.check { display: flex; }
.ss-name { font-weight: 600; font-size: 0.95rem; align-self: end; }
.ss-inputs em { font-family: Georgia, serif; }
.ss-name sub { line-height: 0; }
.ss-inputs input:not([type=checkbox]), .ss-inputs select, .ss-presets > .button { width: 100%; height: 42px; }
.ss-presets > .button { padding: 0 6px; font-size: 0.85rem; }
.ss-inputs > label:not(.check) > .hint { margin: 0; }
/* one column: the buttons follow their field directly, without the empty line of a name */
@media (max-width: 520px) {
  .ss-inputs { grid-template-columns: minmax(0, 1fr); }
  .ss-inputs > .ss-presets { grid-row: auto; grid-template-rows: none; margin-top: -8px; }
  .ss-presets > .button { grid-row: auto; }
}
.ss-more > summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.ss-more > .ss-inputs { margin-top: 12px; }
.ss-result { background: var(--accent-soft); border-radius: var(--radius-panel); padding: 16px 18px; }
.ss-big { font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.ss-big small { display: block; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.ss-detail { font-size: 0.95rem; color: var(--muted); }
.ss-invite { margin: 8px 0 12px; }
.ss-warning { font-size: 0.95rem; background: var(--warn-soft); border-radius: var(--radius); padding: 8px 10px; }
.ss-result [data-ss-apply][aria-disabled] { opacity: 0.5; pointer-events: none; }
@media (max-width: 800px) { .ss-grid { grid-template-columns: 1fr; } }

/* AI suggestions: construct ideas in the design check, the drafting dialog */
.ai-ideas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.ai-ideas h2 { margin-top: 0; }
.ai-ideas .button { margin: 4px 0; white-space: normal; text-align: left; max-width: 100%; height: auto; }
.ai-idea-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ai-ideas .ai-idea-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.ai-ideas .ai-idea-actions button.link { font-size: 0.85rem; }
.ai-idea-actions { display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.ai-dialog { border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 20px 22px; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--fg); }
.ai-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.ai-dialog h2 { margin: 0; }
.ai-dialog textarea { width: 100%; }
.ai-note { background: var(--ai-soft); border-left: 3px solid var(--ai); }

/* Flow: a drop zone at the very end, only while dragging (also to move a node out of a group) */
.fl-root > .fl-root-end { display: none; }
.flow-page.dragging .fl-root > .fl-root-end { display: block; }
.fl-root-end.drop-into { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); }

/* Start page: own surveys, narrow column with running surveys of others */

/* Questionnaire editor: the separated section below a grey divider (a fixed divider), then the trash in the same grey */
.split-divider { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 28px -20px 0; padding: 10px 20px;
  background: var(--surface-3); border-top: 2px solid color-mix(in srgb, var(--muted) 45%, transparent);
  color: var(--muted); font-size: 0.95rem; }
.split-divider strong { color: var(--fg); }
.split-divider > span { flex: 1; min-width: 0; }
.split-divider form { flex: none; }
/* the trash: the same full-width band, the deleted questions below it */
/* below a band, the whole width is tinted: separated blocks, the trash */
.separated-area, .trash-area .item-list { margin: 0 -20px; padding: 18px 20px 20px; background: var(--surface-2); }
.separated-area > .block:last-child { margin-bottom: 0; }
.area-empty { list-style: none; margin: 0; padding: 6px 2px; color: var(--muted); font-size: 0.85rem; font-style: italic; }
.trash-area { margin-top: 10px; }
.trash-area .item-list { margin-bottom: -20px; padding-bottom: 28px; min-height: 60px; }
.trash-area .item-row { background: var(--surface); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); margin: 6px 0; }
.block.block-separated { border-color: var(--border); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--muted) 40%, transparent); }
/* Flow page: the split as the same grey divider */
.fl-node.fl-split { background: var(--surface-3); border-color: var(--border); margin: 14px 0; }
.fl-node.fl-split strong, .fl-node.fl-split .fl-icon { color: var(--fg); }
.trash-area .item-row { border-color: var(--border); }

/* Results page (work in progress) */
.badge-wip { background: var(--warn-soft); color: var(--warn); font-size: 0.75rem; }
/* the results column is as wide as the other one-column pages (.tabpage-single); tables and figures inside a panel
   keep their own width, set by their content */
.res-scroll { overflow-x: auto; position: relative; }  /* a table wider than its panel scrolls within it; relative: a visually hidden span in a column head (position: absolute) stays inside instead of widening the page (X52) */
/* tables and figures stand in the middle of their panel, as in a publication (Ralf, 2026-10-03, again 2026-10-05:
   UI audit R90 had set them left); the texts around them stay left. A table keeps its content width, a figure its
   own maximum width. */
.results-page .res-scroll { width: fit-content; max-width: 100%; margin-inline: auto; }
.results-page :is(.res-freq, .res-bars, .psm-chart, .res-map, .pos2d-res, .pw-chart) { margin-inline: auto; }
.results-page .res-freq { max-width: 900px; }
.results-page .acbc-results { max-width: none; }  /* its texts stay left; its stacked tables share one width */
.results-page .acbc-results .res-scroll { width: 100%; max-width: 900px; }  /* room for Zahlungsbereitschaft and its interval: no scrolling sideways (Ralf, 2026-10-06) */
/* blocks that hold texts, figures and tables together take the whole width; their figures and tables are centred
   above (Van Westendorp/NMS), or here (text highlighting: the text with its bars, the legend, the top words) */
.results-page .psm-results { max-width: none; }
.results-page .psm-legend { max-width: 720px; margin-inline: auto; justify-content: center; }
.results-page :is(.res-hl-text, .res-hl-top) { max-width: 820px; margin-inline: auto; }
.results-page .res-hl-legend { justify-content: center; }
.results-filter .row-fields { align-items: center; }
/* results tables as wide as their content, not the window */
.res-table { width: auto; max-width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.res-table th, .res-table td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.res-table th:first-child, .res-table td:first-child { text-align: left; }
.res-table td.res-top { font-weight: 700; }  /* card sort: the most frequent group of a card */
.res-pairs th, .res-pairs td { padding: 3px 5px; font-size: 0.85rem; text-align: center; }
.res-pairs tbody th { text-align: left; white-space: nowrap; font-weight: 400; }
.res-scale { margin: 0 0 10px; }
/* bars: a track of about 430 px with the axis (0) as a line on its left, the longest bar of a list fills it (V57);
   square at the axis, small round ends, so 3 % stays a bar and not a dot */
.res-bars { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.results-page .res-bars > li { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 0.95rem; }
/* a long answer without spaces (e.g. "Bachelor/Master/Staatsexamen/Diplom") breaks inside its column instead of running into the bar (Ralf) */
.res-bar-label { min-width: 0; overflow-wrap: anywhere; }
.res-bar { height: 14px; background: none; border-left: 1px solid var(--muted); overflow: hidden; }
/* one fill for all bars, columns and areas of the figures (Ralf, 2026-10-06): --data-fill keeps 3:1 against the surface
   and against the error bars in --fg (S11); dots and lines stay in the full accent */
.res-bar span { display: block; height: 100%; min-width: 1px; background: var(--data-fill); border-radius: 0 3px 3px 0; }
.res-bar-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 95 % intervals of the shares (app/intervals.py): an error bar on the bar (Ralf, 2026-10-06), the numbers in its title */
.res-bars.res-bars-ci { max-width: 900px; }
.results-page .res-bars.res-bars-ci > li { grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 130px; }
.res-bars-ci .res-bar { position: relative; overflow: visible; }
.res-ci-bar { position: absolute; top: -3px; bottom: -3px; border-left: 1.5px solid var(--fg); border-right: 1.5px solid var(--fg); pointer-events: none; }
.res-ci-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--fg); }
.res-ci { white-space: nowrap; }
@media (max-width: 640px) {
  /* on a phone the numbers go under the bar, which keeps the width of the row (V57) */
  .results-page .res-bars > li, .results-page .res-bars.res-bars-ci > li { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr); row-gap: 2px; }
  .results-page .res-bars > li > .res-bar-n { grid-column: 2; text-align: left; }
}
/* item analysis: what to look at again (r_it below 0.30, alpha higher without the statement) */
.res-flag { color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.res-freq + .res-freq { margin-top: 12px; }
.res-freq-head { margin: 0 0 4px; }

.res-group-head { margin: 14px 0 4px; font-weight: 650; font-size: 0.95rem; }
.res-run { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.res-run p { margin: 0; }
/* the line of a form that saves by itself next to a note (Qualitätskontrolle): one baseline, also when the note wraps */
.res-run:has(> .autosave-bar) { align-items: baseline; }
.res-run > .autosave-bar { padding-top: 0; }
/* Qualitätskontrolle: the save line stays out of sight unless a change was not saved */
.qc-save:not(:has(.autosave-status:is(.is-error, .is-conflict, .is-invalid, .is-warn))) { display: none; }
.res-fold-all { display: inline-flex; gap: 8px; }
/* Results: each item folds on its header */
/* one pattern for folding sections: the chevron left of the heading, as in the settings (UI audit R86) */
.res-fold > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.res-fold > summary::-webkit-details-marker { display: none; }
/* "gefiltert: …" in the head of every section while "Nur zeigen" is on (W62) */
.res-filtered { margin-left: 8px; vertical-align: middle; font-weight: 400; }
.res-fold > summary h2 { margin: 0; }
.res-fold[open] > summary { margin-bottom: 12px; }
.res-fold[open] > summary .settings-caret, .quota-intro[open] > summary .settings-caret { transform: rotate(90deg); }
.quota-intro > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.quota-intro > summary::-webkit-details-marker { display: none; }
.quota-intro > summary h2 { margin: 0; }

/* Participant link on the Feld page: QR codes, links per group */
.links-head { font-size: 1.05rem; margin: 18px 0 6px; }
/* the three parts of "Teilnahmelink" (Ralf, 2026-10-08): folds with the heading in the summary */
.link-part { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
.link-part > summary .links-head { display: inline; margin: 0; }
.link-part > summary .hint { font-weight: 400; }
.link-fold { margin-top: 10px; }
.link-fold > summary .hint { font-weight: 400; }
.link-tools { margin-top: 12px; }
.links-subhead { font-size: 0.95rem; margin: 16px 0 6px; }
.links-head-first { margin-top: 4px; }
.value-links .value-count-head { font-weight: 600; border-bottom: 0; }
.value-for { display: flex; gap: 6px; align-items: center; }
.value-link-copy { display: flex; gap: 6px; align-items: center; min-width: 300px; }
.value-link-copy input { flex: 1; min-width: 0; }
.value-links-steps { margin: 4px 0 12px; padding-left: 20px; }
.panel-paste-preview .panel-paste-url { word-break: break-all; font-size: 0.75rem; }
#panel-paste { margin-bottom: 14px; }
/* speeder and Geo-IP lines left after "Übernehmen", to copy (X55) */
.panel-paste-left { border: 1px solid var(--warn-border); background: var(--warn-soft); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.panel-paste-left .copy-row { margin-bottom: 8px; }
.value-links-add-fields textarea { min-height: 0; }
.link-panel .copy-row select { width: auto; }
.allowed-sum { font-size: 0.85rem; color: var(--muted); }
.allowed-sum .link-button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.group-links { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.geo-counts-pair { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: flex-start; margin-bottom: 10px; }
.geo-counts { font-size: 0.95rem; min-width: 260px; }
.geo-counts th { text-align: left; font-weight: 650; }
.geo-counts :is(th, td):not(:first-child) { text-align: right; padding-left: 18px; padding-right: 8px; font-variant-numeric: tabular-nums; }
.group-links th, .group-links td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.group-links th.num, .group-links td.num { text-align: right; width: 1%; white-space: nowrap; }
.group-links input { width: 100%; min-width: 180px; font-size: 0.85rem; }
.lang-links { margin: 4px 0 14px; }
.lang-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 16px; margin-bottom: 6px; }
.lang-checks .check { margin: 0; }
fieldset.option-group, div.option-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.option-group + .option-group { margin-top: 18px; }
/* proximity (UI audit 2026-10-04, R87): a field with its hint and "Mehr dazu" is one block; the next field stands
   apart by more than three times the space inside it */
.option-group > label ~ label, .option-group > .hint-more ~ :is(label, .row-fields, fieldset) { margin-top: 20px; }
/* one place for a hint (R88): under its label, at the left edge of the label's text, never indented on its own */
.stack label:not(.check) > .hint, .block-form label:not(.check) > .hint, .option-group label:not(.check) > .hint { margin-left: 0; }
label.check > .hint { flex-basis: 100%; margin-left: 25px; }
label.check + .hint-more { margin-left: 25px; }
.hint-more { margin: -4px 0 6px; }
.hint-more > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent); width: fit-content; }
.hint-more > .hint { display: block; margin: 4px 0 0; }
.group-links .nowrap { white-space: nowrap; width: 1%; }
/* links per person (concept "Werbelinks", 2026-10-08): the name field, the buttons under the table, the form to make them */
.value-links .value-label { min-width: 140px; }
.value-links-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.value-links-add { margin-top: 10px; }
.value-links .value-flag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: var(--radius-tag); font-size: 0.8em;
  color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-border); cursor: help; }
.value-links .value-flag[hidden] { display: none; }
.value-links .value-rest td { border-top: 1px solid var(--border); }
.value-links-limit input[type=number] { max-width: 120px; }
.value-links-add input[type=number] { max-width: 120px; }
.value-links-add input[name=param] { max-width: 240px; }
/* printed cards: one per person with name, QR code and address, to cut apart */
.value-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.value-card { border: 1px dashed var(--border); padding: 12px; text-align: center; break-inside: avoid; }
.value-card svg { width: 150px; height: auto; display: block; margin: 6px auto; background: #fff; }
.value-card .qr-url code { font-size: 0.75rem; word-break: normal; }
/* the address breaks only before "?w=…", never inside the code (UI/UX audit 2026-10-09, X58) */
.value-card .qr-url-base { overflow-wrap: anywhere; }
.value-card .qr-url-query { white-space: nowrap; }
.value-card-survey { font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.value-card-status { font-size: 0.75rem; color: var(--muted); margin-top: 6px; }
.value-card-status code { overflow-wrap: anywhere; word-break: normal; font-size: inherit; }
@media print {
  .value-cards-head .form-actions, .value-cards-back { display: none !important; }
  .value-cards { grid-template-columns: repeat(3, 1fr); }
}
.qr-page { max-width: 560px; margin: 0 auto; text-align: center; }
.qr-page h1 { font-size: 1.35rem; }
.qr-image { width: min(360px, 100%); height: auto; display: block; margin: 12px auto; background: #fff; }
.qr-url code { word-break: break-all; }
.qr-actions { justify-content: center; }
@media print {
  .qr-actions, .site-header, .site-footer, header, footer { display: none !important; }
  .qr-page { border: 0; box-shadow: none; }
}
/* label box in the settings and on creation */
.label-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.label-row .label-prefix { color: var(--muted); font-size: 0.95rem; }
.label-row input { max-width: 240px; }
.label-form { margin-top: 14px; }
.label-form p, [data-label-form] p { margin: 4px 0; }
.label-state:empty { display: none; }
.label-state.ok { color: var(--ok); }
.label-state.bad { color: var(--danger); }

/* Landing page: screenshot carousel below the illustration */
.shots { position: relative; margin: 32px auto 8px; max-width: 870px; }
.shots-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 16px;
  scrollbar-width: none; border-radius: var(--radius-panel); }
.shots-track::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-panel); background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); }
.shot figcaption { margin-top: 12px; text-align: center; font-size: 1.05rem; }
.shots-nav { position: absolute; top: calc(50% - 40px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: inherit; font-size: 1.55rem; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.shots-prev { left: -20px; }
.shots-next { right: -20px; }
.shots-nav[disabled] { opacity: 0.35; cursor: default; }
.shots-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.shots-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--border-strong); cursor: pointer; position: relative; }
.shots-dots button::before { content: ""; position: absolute; inset: -8px; }  /* a 25 px target around the 9 px dot (WCAG 2.5.8, R70) */
.shots-dots button[aria-current="true"] { background: var(--accent); }
@media (max-width: 1040px) { .shots-prev { left: 6px; } .shots-next { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .shots-track { scroll-behavior: auto; } }

/* Landing page: feature list */
.features { max-width: 1160px; margin: 48px auto 0; }

/* landing page: pronunciation and origin of the name, two small grey lines next to the title */
.name-note { display: inline-flex; flex-direction: column; justify-content: center; gap: 0.12em; vertical-align: middle;
  margin-left: 0.35em; font-size: 0.3em; line-height: 1.15; font-weight: 400; letter-spacing: 0; color: var(--muted);
  font-family: var(--font-serif); }

/* Confetti after starting a survey (full window, does not block clicks) */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* Comments from test runs: yellow flags in the editor and the list page */
.badge-comment { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); text-decoration: none; width: fit-content; justify-self: start; align-self: center; }
.item-row.has-comments { box-shadow: inset 3px 0 0 var(--warn-bar); }
.block.has-comments { border-color: var(--warn-border); box-shadow: 0 0 0 2px var(--warn-soft); }
.comments-link { margin: 0 0 14px; font-size: 0.95rem; font-weight: 600; }
.comments-link a.has-open { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); text-decoration: none; font-weight: 600; }
.comment-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.comment { border: 1px solid var(--border); border-left: 4px solid var(--warn-bar); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.comment-resolved { border-left-color: #3aa76d; opacity: 0.85; }
.comment-ignored { border-left-color: var(--border-strong); opacity: 0.7; }
.comment-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.comment-text { white-space: pre-wrap; margin: 6px 0; }
.comment-note { margin: 4px 0; font-size: 0.95rem; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.comment-actions input { flex: 1; min-width: 200px; }
/* a comment with an image of the page: the image small on the left, a click shows it large (app.js, .shot-view) */
.comment.has-shot { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: start; }
.comment-shot { display: block; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.comment-shot img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: cover; object-position: top; }
.comment-shot:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }  /* as everywhere (X90) */
.comment-env { margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .comment.has-shot { grid-template-columns: 1fr; } .comment-shot img { max-height: 220px; } }
.tabs-inline a[aria-current="page"] { font-weight: 700; }
.dur-range { font-size: 0.75em; font-weight: 400; color: var(--muted); }

/* Separated section and trash: collapsible (closed while empty) */
.area-toggle > summary { list-style: none; cursor: pointer; user-select: none; }
.area-toggle > summary::-webkit-details-marker { display: none; }
.area-toggle > summary:hover { filter: brightness(0.98); }
.area-caret { flex: none; color: var(--muted); transition: transform 0.15s; }
.area-toggle:not([open]) .area-caret { transform: rotate(-90deg); }
.area-state { color: var(--muted); font-weight: 400; }
.area-toggle:not([open]) + .area-toggle > summary { margin-top: 10px; }
input.is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-soft); }
.varname-msg { display: block; margin-top: 3px; font-size: 0.85rem; font-weight: 400; color: var(--danger); }

/* Element editor: live preview frame */
.item-frame { display: block; width: 100%; min-height: 120px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: #fff; }
.live-dirty { margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-tag); background: var(--warn-soft); color: var(--warn); font-size: 0.75rem; font-weight: 600; }

/* Conjoint: prohibited level pairs as a grid per attribute pair */
.cj-prohib-pair { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.cj-prohib-pair > summary { cursor: pointer; font-weight: 600; }
.cj-prohib-grid { border-collapse: collapse; margin: 8px 0 4px; font-size: 0.85rem; }
.cj-prohib-grid th, .cj-prohib-grid td { border: 1px solid var(--border); padding: 4px 8px; text-align: center; }
.cj-prohib-grid th[scope="row"] { text-align: left; font-weight: 500; }
.cj-prohib-cell { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; cursor: pointer; }
.cj-prohib-cell input { position: absolute; opacity: 0; pointer-events: none; }
.cj-prohib-cell span { color: transparent; font-weight: 700; }
.cj-prohib-cell input:checked + span { color: var(--fg); }
.cj-prohib-cell:hover span { color: var(--border-strong); }
.cj-prohib-cell input:checked + span, .cj-prohib-cell:hover input:checked + span { color: var(--fg); }
td:has(> .cj-prohib-cell input:checked) { background: var(--surface-3); }  /* excluded, not wrong (R78) */

/* Conjoint editor tabs */
.cj-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--border); margin: 6px 0 4px; }
.cj-tabs button { border: 0; background: none; padding: 9px 14px 8px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; }
.cj-tabs button:hover { background: var(--surface-2); color: var(--fg); }
.cj-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Feld page: who is in the survey right now */
.live-strip { margin: 10px 0 14px; }
.live-strip svg { display: block; width: 100%; height: 124px; overflow: visible; }
.live-axis-title { font-weight: 600; fill: var(--fg); }
.live-axis { stroke: var(--border-strong); stroke-width: 2; }
.live-tick { stroke: var(--border-strong); stroke-width: 1.5; }
.live-label { font: 12px system-ui, -apple-system, 'Segoe UI', sans-serif; fill: var(--muted); text-anchor: middle; }
.live-label-start { text-anchor: start; }  /* not .live-start/.live-end: participant.css styles the live vote's end */
.live-label-end { text-anchor: end; }
.live-person { fill: #173a7a; }
:root[data-theme="dark"] .live-person { fill: #9cc0ff; }
.live-legend { margin: 2px 0 0; }
/* its own name: participant.css (also loaded here) has .live-dot (the presenter's jump dots) and .live-mean-dot (on a track) */
.live-key-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #173a7a; margin-right: 5px; }
:root[data-theme="dark"] .live-key-dot { background: #9cc0ff; }
.live-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.live-key { display: inline-flex; align-items: center; }
.button-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
/* one class for deleting (UI audit R80): the button that asks stays neutral with a bin, the final one (in the dialog,
   on a page of its own) is red */
.button-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.button-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); filter: brightness(0.9); }
.button-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Timeline: the drawing stretches in width, the labels on top stay normal text */
.timeline-wrap { position: relative; margin: 10px 0 6px; }
.timeline-wrap .timeline-svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.tl-label-html { position: absolute; font-size: 12px; line-height: 1; color: var(--muted); white-space: nowrap; pointer-events: none; }
.timeline-svg .tl-event, .timeline-svg .tl-now, .timeline-svg .tl-axis, .timeline-svg .tl-planned { vector-effect: non-scaling-stroke; }

/* Van Westendorp curves on the results page (categorical slots 1-4; "not" curves dashed) */
.psm-results { margin: 8px 0 16px; max-width: 720px; }
.psm-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 4px; font-size: 0.85rem; color: var(--muted); }
.psm-legend li { display: flex; align-items: center; gap: 6px; }
.psm-chart { position: relative; margin: 0 0 12px; max-width: 720px; }  /* the SVG scales with its box, text included */
.psm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.psm-grid { stroke: var(--border); stroke-width: 1; }
.psm-axis { stroke: var(--border-strong); stroke-width: 1; }
.psm-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.psm-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* the four curves in the data colours (3:1 and more, light and dark, S11), the two "not" curves dashed as well */
.psm-too_cheap { stroke: var(--chart-1); }
.psm-not_cheap { stroke: var(--chart-4); stroke-dasharray: 6 4; }
.psm-not_expensive { stroke: var(--chart-3); stroke-dasharray: 6 4; }
.psm-too_expensive { stroke: var(--chart-2); }
.psm-trial, .psm-revenue { stroke: var(--chart-1); }
.psm-direct { fill: var(--fg); font-size: 11px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.psm-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.psm-mark-label { fill: var(--fg); font-size: 11px; font-weight: 600; }
.psm-cross { stroke: var(--muted); stroke-width: 1; }
/* Semantic differential: polarity profile (surveys/_profile_results.html). Poles left and right of a track with the
   scale points; per series a bar (quartiles or ± SD), a marker and a line through the markers. Series colours as
   the PSM curves. */
.sd-profile { --sd-row: 40px; --sd-mid: calc(var(--sd-row) / 2); max-width: 900px; margin: 8px 0 12px; }
.sd-pair { display: none; }
.results-page .sd-profile { margin-inline: auto; }
.sd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0 0 8px; font-size: 0.85rem; color: var(--muted); }
.sd-legend li { display: flex; align-items: center; gap: 6px; }
.sd-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--sd); }
.sd-grid { display: grid; grid-template-columns: minmax(70px, max-content) minmax(160px, 1fr) minmax(70px, max-content); column-gap: 14px; }
.sd-axis { position: relative; height: 20px; font-size: 0.75rem; color: var(--muted); }
.sd-axis span { position: absolute; transform: translateX(-50%); }
.sd-poles { display: grid; grid-auto-rows: var(--sd-row); font-size: 0.95rem; }
.sd-poles span { display: flex; align-items: center; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; max-width: 220px; }
.sd-left span { justify-content: flex-end; text-align: right; }
.sd-track { position: relative; height: calc(var(--sd-rows) * var(--sd-row)); background-repeat: repeat-y; background-size: 100% var(--sd-row);
  background-image: linear-gradient(transparent calc(50% - 0.5px), var(--border) calc(50% - 0.5px), var(--border) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.sd-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.sd-track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sd-line { fill: none; stroke: var(--sd); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0.8; }
.sd-range { position: absolute; height: 2px; margin-top: -1px; background: var(--sd); }  /* opaque and thin (V60) */
.sd-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--sd); border: 2px solid var(--surface); box-sizing: content-box; }
.sd-profile figcaption { text-align: center; margin-top: 6px; }
/* series of the profile (V60): the chart colours of the theme (each at least 3:1 to the surface) and a marker shape
   each (circle, triangle, square, diamond), so they differ without colour too */
.sd-c0 { --sd: var(--chart-1); } .sd-c1 { --sd: var(--chart-2); } .sd-c2 { --sd: var(--chart-3); }
.sd-c3 { --sd: var(--chart-4); } .sd-c4 { --sd: var(--chart-5); } .sd-c5 { --sd: var(--chart-6); }
.sd-m1 { border-radius: 0; border: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sd-dot.sd-m1 { width: 14px; height: 14px; margin: -8px 0 0 -7px; }
.sd-m2 { border-radius: 2px; }
.sd-m3 { border-radius: 0; border: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sd-dot.sd-m3 { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.sd-legend i.sd-m1, .sd-legend i.sd-m3 { width: 13px; height: 13px; }
.res-dist > summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--accent); width: fit-content; margin: 4px 0; }
.res-dist[open] > summary { margin-bottom: 10px; }
/* on a phone (and at 125 % text) the pair stands as a line over its row, the track takes the whole width (X89) */
@media (max-width: 600px) {
  .sd-profile { --sd-row: 68px; --sd-mid: calc(var(--sd-row) / 2 + 10px); }
  .sd-grid { grid-template-columns: minmax(0, 1fr); }
  .sd-grid > span:empty, .sd-poles { display: none; }
  .sd-pair { display: block; position: absolute; left: 0; right: 0; padding-top: 4px; font-size: 0.85rem; line-height: 1.2;
    color: var(--fg); overflow-wrap: break-word; }
  .sd-track svg { transform: translateY(10px); }
  .sd-track { background-position: 0 10px; }
}
.psm-hit { fill: transparent; cursor: crosshair; }
.psm-tip { position: absolute; top: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 6px 9px; font-size: 0.85rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); white-space: nowrap; }
.psm-tip b { font-variant-numeric: tabular-nums; }
.psm-points td:first-child, .psm-points th:first-child, .psm-points td:last-child, .psm-points th:last-child { text-align: left; }
.psm-table { margin: 8px 0; }
.psm-table summary { cursor: pointer; color: var(--accent); }

/* Map element: start view in the element editor (Leaflet); the cross marks the centre that is saved */
.map-editor { margin-bottom: 10px; }
.map-editor .p-map-search { display: flex; gap: 8px; margin-bottom: 8px; }
.map-editor .p-map-search[hidden], .map-editor .p-map-results[hidden] { display: none; }
.map-editor .p-map-search input { flex: 1; min-width: 0; }
.map-editor .p-map-results { list-style: none; margin: 0 0 8px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.map-editor .p-map-results button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--fg); padding: 5px 8px; cursor: pointer; font: inherit; font-size: 0.95rem; }
.map-editor .p-map-results button:hover { background: var(--accent-soft); }
.map-editor .p-map-empty, .map-editor .p-map-credit { padding: 4px 8px; color: var(--muted); font-size: 0.85rem; }
.map-editor-canvas { position: relative; height: 320px; border: 1px solid var(--border); border-radius: 8px; z-index: 0; }
/* follow-up questions of a map: the ends of a scale, or the options of a single choice */
td[data-mq-kind] .mq-options { display: block; width: 100%; min-width: 10em; }
.list-table:where(.is-edit) input[name="mq_text"] { min-width: 10em; }
td[data-mq-kind="choice"] .mq-ends, td[data-mq-kind="text"] .mq-ends, td[data-mq-kind="scale"] .mq-options,
td[data-mq-kind="text"] .mq-options { display: none; }
.map-editor-cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 500; pointer-events: none;
  background: linear-gradient(#d62828, #d62828) center / 2px 100% no-repeat, linear-gradient(#d62828, #d62828) center / 100% 2px no-repeat; }

/* Map element on the results page: heatmap or all markers (map_results.js) */
.res-map { margin: 8px 0 16px; max-width: 720px; }
.res-map-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.res-map-canvas { height: min(65vh, 480px); min-height: 280px; border: 1px solid var(--border); border-radius: 8px; z-index: 0; }
.res-map .q-map-icon { background: none; border: 0; }
.res-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.res-legend li { display: flex; align-items: center; gap: 5px; }
.res-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(8, 48, 107, 0.5); }
.res-swatch.is-none { background: #ffffff; }  /* as the states nobody chose on the map */
.res-map .q-map-icon svg { display: block; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }

/* Menu bar: "€" link to pricing and donations */
/* Pricing page */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.pricing .price-card { margin: 0; }
.price-card h2 { margin-top: 0; }
.price-card .price { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; margin: 4px 0 12px; }
.price-card ul { padding-left: 20px; }
.price-card-donate { border-color: var(--accent); }

/* Method section page: facts in columns, then the AI description */
.mfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.mfacts-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mfacts > .panel { margin: 0; }
.mfacts h2 { margin-top: 0; }
.mfacts-list { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.mfacts-list dt { color: var(--muted); }
.mfacts-list :is(dt, dd) { overflow-wrap: anywhere; }
.mfacts-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.mfacts-instrument { padding: 6px 0; border-top: 1px solid var(--surface-3); }
.mfacts-instrument:first-of-type { border-top: 0; }
.mgen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.mgen-langs { flex-basis: 100%; display: flex; gap: 10px; }  /* the language buttons in a line of their own, under the length */
.methods-text { width: 100%; font: inherit; line-height: 1.5; }

/* Results: 2D positioning and free associations */
.pos2d-res { max-width: 480px; margin: 8px 0 16px; }
.pos2d-res svg { width: 100%; height: auto; display: block; overflow: visible; }
.pos2d-frame { fill: var(--surface-2, transparent); stroke: var(--border-strong); }
.pos2d-mid { stroke: var(--border); }
.pos2d-sd { stroke: var(--accent); stroke-opacity: 0.35; stroke-width: 2; }
.pos2d-dot { fill: var(--accent); }
.pos2d-label { font-size: 12px; fill: var(--fg); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.pos2d-end { font-size: 11px; fill: var(--muted); }
.pos2d-axis { font-size: 12px; font-weight: 600; fill: var(--fg); }
.res-terms td:nth-child(2), .res-terms td:nth-child(3) { white-space: nowrap; }
.res-terms-bar { display: inline-block; height: 8px; border-radius: 4px; background: var(--data-fill); margin-right: 6px; vertical-align: middle; }
.res-terms-val.is-neg { color: var(--caution); }
.res-terms-val.is-pos { color: var(--ok); }
/* Texts typed next to an answer option ("Anderes: ...") */
.res-texts { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; font-size: 0.95rem; }
.res-texts > li { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; overflow-wrap: anywhere; }

/* Conjoint (CBC, ACBC) on the results page: stacked tables with the same columns, as wide as the PSM charts */
.acbc-results { max-width: 720px; }
.acbc-results .res-table { width: 100%; margin: 0 0 12px; table-layout: fixed; }  /* stacked tables share their columns */
.acbc-results .res-table th:first-child { width: 38%; }
.acbc-results .acbc-counts th:first-child { width: 30%; }
.acbc-results .res-table th .hint { font-weight: 400; }

/* Conjoint part-worths: zero-centred bars (app/choice_model.py charts()) */
.pw-chart { display: block; width: 100%; max-width: 720px; height: auto; margin: 4px 0 2px; overflow: visible; }
/* on a phone a chart keeps a readable size and scrolls within its panel, like the tables (no page-wide scroll) */
.pw-scroll { overflow-x: auto; overflow-y: hidden; }
/* numbers and intervals of the MaxDiff tables stay on one line ("71 %", "[27,8; 31,0]"); the table scrolls instead */
.res-table:is(.md-counts, .md-mnl) td + td { white-space: nowrap; }
@media (max-width: 600px) { .pw-scroll > .pw-chart:not(.pw-wide, .pw-narrow) { min-width: 540px; } }
/* part-worths on a phone (W59): the narrow chart with its labels above the bars, full width, no sideways scrolling */
.pw-chart.pw-narrow { display: none; }
@media (max-width: 600px) { .pw-chart.pw-wide { display: none; } .pw-chart.pw-narrow { display: block; } }
.pw-grid { stroke: var(--border); stroke-width: 1; }
.pw-grid.pw-zero { stroke: var(--border-strong); stroke-width: 1.5; }
.pw-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pw-label { fill: var(--fg); font-size: 13px; }
.pw-value { fill: var(--fg); font-size: 12px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.pw-pos { fill: var(--data-fill); }
.pw-neg { fill: var(--data-neg); }  /* the direction in the hue and in the sign of the value beside it (S11) */
.pw-whisker { stroke: var(--fg); stroke-width: 1.2; opacity: 0.55; }
.cm-importance-bars { margin: 4px 0 2px; }
/* HB (app/conjoint_hb.py): value with its interval on one line; intervals and quartiles get the wider columns */
.results-page .res-bars.hb-importance > li { grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 150px; }
.hb-importance .res-bar-n { white-space: nowrap; }
.acbc-results .hb-utilities th:first-child { width: auto; }
/* the market simulator grows with its products: content width up to the whole column, then it scrolls (Ralf, 2026-10-04) */
.results-page .acbc-results .sim-fold .res-scroll { width: fit-content; max-width: 100%; }
.acbc-results .res-table.sim-table { width: auto; table-layout: auto; }
.acbc-results .sim-table th:first-child { width: auto; }
.sim-table td { white-space: nowrap; text-align: left; min-width: 10em; }
/* W74: the choices of a product in the app's field size, as wide as their column and flush left; the save button
   as high as the name field next to it */
.sim-table :is(select, input.sim-price) { height: var(--field-h); width: 100%; }
.sim-save .button { height: var(--field-h); }
.sim-head { display: inline-flex; align-items: center; gap: 4px; }
.sim-head .icon-btn { width: 26px; height: 26px; }
.sim-status:empty { display: none; }
.sim-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sim-fold.sim-busy > :not(summary) { opacity: 0.55; transition: opacity 0.15s 0.15s; }  /* only when it takes a moment */
.sim-opt { margin-top: 18px; }
.sim-opt-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.sim-opt-fix { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.res-table.sim-opt-table { width: auto; table-layout: auto; }
.res-table.sim-opt-table th:first-child { width: auto; }
.sim-opt-table td { white-space: nowrap; }
.sim-opt-table tr.sim-opt-current td { font-weight: 600; }
.hb-utilities .hb-c-label { width: 24%; }
.hb-utilities .hb-c-num { width: 10%; }
.hb-utilities .hb-c-range { width: 21.5%; }
.hb-utilities .hb-c-share { width: 13%; }
.hb-utilities th, .hb-utilities td { white-space: nowrap; }
.hb-utilities td:first-child { white-space: normal; }
.pw-head { margin: 16px 0 0; font-weight: 600; font-size: 0.95rem; }
/* MaxDiff MNL scores (app/maxdiff_analysis.py chart()): bars from 0, dashed anchor threshold */
.pw-pos.md-below { opacity: 0.45; }
.md-threshold { stroke: var(--caution); stroke-width: 1.5; stroke-dasharray: 5 3; }
.md-threshold-label { fill: var(--caution); }
/* MaxDiff HB (app/maxdiff_hb.py): distribution across persons, RLH histogram */
.res-run-hb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.res-run-hb form { margin: 0; }
/* segments (app/segments.py, _segments.html): one colour per segment, the same in every table and bar */
.lc-c1 { --seg: var(--chart-1); } .lc-c2 { --seg: var(--chart-2); } .lc-c3 { --seg: var(--chart-3); }
.lc-c4 { --seg: var(--chart-4); } .lc-c5 { --seg: var(--chart-5); } .lc-c6 { --seg: var(--chart-6); }
.lc-bar span, .lc-mini span { background: var(--seg); }
.lc-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--seg); margin-right: 6px; vertical-align: baseline; }
/* each segment also has its own shape (circle, triangle, square, diamond, triangle down, hexagon), so the key tells
   the segments apart without colour too, as the markers of the profiles do (UI/UX audit 2026-10-07, W120) */
.lc-key.lc-c2, .lc-key.lc-c3, .lc-key.lc-c4, .lc-key.lc-c5, .lc-key.lc-c6 { border-radius: 0; width: 11px; height: 11px; }
.lc-key.lc-c2 { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lc-key.lc-c3 { width: 10px; height: 10px; border-radius: 1px; }
.lc-key.lc-c4 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 12px; height: 12px; }
.lc-key.lc-c5 { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.lc-key.lc-c6 { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); width: 12px; }
.lc-mini { display: inline-block; width: 48px; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.lc-mini span { display: block; height: 100%; }
.lc-name { width: 100%; max-width: 200px; height: 32px; border-left: 4px solid var(--seg); }
.lc-shown td { background: var(--accent-soft); }
.lc-table .lc-attr th { text-align: left; font-weight: 600; background: var(--surface-2); }
.lc-table td { white-space: nowrap; }
.acbc-results .res-table.lc-solutions, .acbc-results .res-table.lc-table { width: auto; table-layout: auto; }
.acbc-results .res-table.lc-solutions th:first-child, .acbc-results .res-table.lc-table th:first-child { width: auto; }
.lc-solutions td { white-space: nowrap; }
.lc-solutions th { white-space: normal; vertical-align: bottom; }
.lc-solutions .lc-pick { display: inline-flex; align-items: center; gap: 6px; font-weight: inherit; margin: 0; }
.lc-suggested td:first-child { font-weight: 600; }
.lc-star { font-size: 0.75rem; color: var(--muted); font-weight: 400; margin-left: 4px; }
.lc-best { font-weight: 700; }
.lc-warn { color: var(--caution); }
.lc-flag { font-size: 0.85rem; font-weight: 600; }  /* "⚠ klein", "⚠ instabil": the verdict in words, not only in colour (W68) */
.results-page .acbc-results .lc-scroll, .results-page .lc-scroll { width: fit-content; max-width: 100%; }  /* as wide as the table, not 720 px */
.lc-table th { white-space: normal; vertical-align: bottom; }
.lc-part.lc-busy > :not(.res-group-head):not(.lc-loading) { opacity: 0.55; pointer-events: none; }
.lc-loading { height: 6px; max-width: 320px; margin: 6px 0 10px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.lc-loading span { display: block; width: 35%; height: 100%; background: var(--accent); border-radius: 3px; animation: lc-slide 1.1s ease-in-out infinite; }
@keyframes lc-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .lc-loading span { animation: none; width: 100%; opacity: 0.5; } }
.lc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.lc-groups { margin-bottom: 6px; }
.results-page .lc-sizes > li { grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 190px; }
.lc-profile-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; margin: 8px 0; }
.lc-profile-pick .check { font-size: 0.85rem; }
.lc-profile td:first-child { white-space: normal; }
.md-dot { fill: var(--accent); opacity: 0.3; }
.md-range { stroke: var(--fg); stroke-width: 1.2; opacity: 0.6; }
.md-box { fill: var(--surface); fill-opacity: 0.75; stroke: var(--fg); stroke-width: 1.2; }
.md-median { stroke: var(--fg); stroke-width: 2.5; }
.md-mean { fill: var(--caution); }
.md-rlh { fill: var(--accent); }
.md-rlh-low { fill: var(--caution); }
.md-rlh-legend { margin: 2px 0 6px; }
.md-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.md-key-ok { background: var(--accent); }
.md-key-low { background: var(--caution); }
.md-key-line { display: inline-block; width: 14px; height: 0; vertical-align: 3px; border-top: 2px solid var(--muted); }
.md-key-limit { border-top: 2px dashed var(--caution); }
.md-hb td:not(:first-child), .md-hb th:not(:first-child) { white-space: nowrap; }
/* HB convergence (app/hb_convergence.py): log-likelihood trace, status */
.hb-trace { max-height: 110px; }
.hb-trace-line { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.hb-conv-ok { color: var(--ok); }
.hb-conv-check { color: var(--caution); }

/* Admin: AI usage */
.aic-periods { margin: 0 0 16px; }
.aic-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aic-kpis > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .aic-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* four figures in two rows on a phone (W78) */
.aic-big { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 600; }
.aic-chart { width: 100%; height: auto; display: block; }
.aic-axis { stroke: var(--border-strong); }
.aic-tick { font-size: 12px; fill: var(--muted); }
.aic-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; color: var(--muted); }
.aic-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* One table for every list outside the results (macro list_table in _macros.html; UI/UX audit 2026-10-07, W93, S8):
   inside a scroll wrapper; heads in the text colour, cells with room between them (no "2.1 MBbleibt"), rows in two
   quiet shades, so the eye stays in its line across a wide table. Variants: is-num (columns after the first are
   numbers), is-wide (whole width), is-lines (lines instead of shades), is-edit (rows of fields in the editors, below).
   :where() keeps every variant as specific as the single class it replaces. */
.table-scroll { overflow-x: auto; max-width: 100%; margin: 4px 0 12px; }
.list-table { border-collapse: collapse; }
.list-table:where(:not(.is-edit)) :is(th, td) { padding: 6px 8px; }
.list-table:where(:not(.is-edit)) :is(th, td) + :is(th, td) { padding-left: 12px; }
.list-table:where(:not(.is-edit)) th { text-align: left; vertical-align: bottom; }
.list-table:where(:not(.is-edit, .is-lines)) tbody tr:nth-child(even) { background: var(--surface-2); }
.list-table:where(.is-lines) :is(th, td) { border-bottom: 1px solid var(--border); }
.list-table:where(.is-wide) { width: 100%; }
.list-table :is(th, td).num { text-align: right; white-space: nowrap; }
.list-table:where(.is-num) td:not(:first-child), .list-table:where(.is-num) th:not(:first-child) { text-align: right; white-space: nowrap; }
/* a price is a short number: its field keeps .narrow, the price columns 10em, next to the model (W91) */
.list-table:where(.is-num) input:not(.narrow) { width: 100%; }
/* the results keep their own tables (geo counts) with the shaded rows */
.zebra { border-collapse: collapse; }
.zebra :is(th, td) { padding: 6px 8px; }
.zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.aic-prices { width: auto; }
.aic-prices th:not(:first-child), .aic-prices td:not(:first-child) { width: 10em; padding-left: 16px; }
.aic-prices th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
/* one row like the tabs of a survey: on a phone it scrolls sideways with a fade at its ends, the current tab in view
   (UI audit 2026-10-07, W83) */
.admin-tabs { display: flex; align-items: center; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs.is-scrolling { mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.admin-tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.admin-tabs a.is-active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.admin-people td:nth-child(2), .admin-people td:nth-child(3), .admin-people td:nth-child(4), .admin-people th:nth-child(2), .admin-people th:nth-child(3), .admin-people th:nth-child(4) { text-align: left; white-space: normal; }
.admin-people { width: 100%; }
.list-table.admin-people th, .list-table.admin-ranking th { white-space: normal; vertical-align: bottom; line-height: 1.25; }  /* heads may break: narrow number columns */
.admin-people th:first-child { text-align: left; }
.admin-people td, .admin-people th { padding-right: 10px; }
.admin-people td:last-child, .admin-people th:last-child { padding-right: 0; }
/* the actions as framed symbols; the note for platform admins may break (no sideways scrolling, Ralf 2026-10-07) */
.admin-act { border-color: var(--border); color: var(--fg); }
.admin-account .hint { display: inline-block; max-width: 9em; white-space: normal; text-align: right; }
.admin-people .admin-name { white-space: nowrap; }
.list-table:is(.admin-people, .admin-ranking) :is(th, td):last-child { padding-right: 8px; }
/* row actions: small secondary buttons (30 px), the dangerous ones with their symbol */
.admin-row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.admin-row-actions form { margin: 0; }
/* Long lists (app/tables.py, _listing.html): search field, column heads that sort, pages */
.list-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.list-search input[type=search] { flex: 1 1 260px; max-width: 520px; height: 38px; box-sizing: border-box; }
/* the search of a list with its one action beside it ("Person hinzufügen …", S10) */
.admin-listhead { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.admin-listhead .list-search { flex: 1 1 420px; margin-bottom: 0; }
.admin-listhead > .button { min-height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) { .admin-listhead > .button { width: 100%; justify-content: center; } }
.sort-link { color: inherit; text-decoration: none; font-weight: inherit; }
.sort-link:hover, .sort-link.is-active { color: var(--accent); }
.sort-link:focus-visible, .pager-link:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: 6px; }
.sort-arrow { margin-left: 4px; font-size: 0.7em; vertical-align: 1px; white-space: nowrap; }
.sort-arrow.is-off { color: var(--subtle); font-weight: 400; }
/* a head that sorts in the browser (data-sort-table): a button that looks like the sort links */
button.th-sort { padding: 0; border: 0; background: none; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.list-sort { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; }
.list-sort .sort-link { font-weight: 600; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0; }
.pager-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pager-link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 32px; height: 32px;
  padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg);
  font-size: 0.85rem; font-weight: 550; text-decoration: none; }
a.pager-link:hover { background: var(--surface-3); }
.pager-link.is-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager-link.is-off { color: var(--muted); border-color: var(--border); background: transparent; }
.pager-gap { color: var(--muted); padding: 0 2px; }

/* Survey wizard: no boxes around groups of fields; their legends become plain subheadings */
.wizard-panel fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wizard-panel legend, .wizard-sub { font-size: 1.05rem; font-weight: 600; padding: 0; margin: 8px 0 6px; }
.wizard-step-sprachen legend { display: none; }  /* the step title already says "Sprachen" */
.reveal { margin: -4px 0 4px 28px; }
.reveal[hidden] { display: none; }
.cm-utilities td:not(:first-child) { white-space: nowrap; }  /* intervals on one line; long headers may break */
.consent-facts-summary .plain-inline { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--muted); }

/* AI actions: violet buttons and the "being written" box while the AI works; the result itself looks normal */
.button.button-ai, .icon-btn.button-ai { background: var(--ai-soft); border-color: var(--ai-border); color: var(--ai) !important; }
.button.button-ai:hover:not(:disabled), .icon-btn.button-ai:hover { background: var(--ai-soft); border-color: var(--ai); color: var(--ai); filter: none; }
.button.button-ai .icon, .icon-btn.button-ai .icon { color: var(--ai); }
.ai-writing { border: 1px solid var(--ai-border); background: var(--ai-soft); border-radius: 8px; padding: 12px 14px; margin: 8px 0 12px; }
.ai-writing[hidden] { display: none; }
.ai-writing-head { color: var(--ai); font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.ai-writing-head::before { content: "✦"; animation: ai-pulse 1.2s ease-in-out infinite; }
.ai-writing-text { margin: 0; color: var(--ai); filter: blur(3.5px); line-height: 1.6; user-select: none; white-space: pre-wrap; }
@keyframes ai-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ai-writing-head::before { animation: none; } }
/* an AI button while its request runs (app.js): a glint runs across it from left to right; without motion it pulses */
.button.button-ai.ai-busy { position: relative; overflow: hidden; cursor: progress; }
.button.button-ai.ai-busy::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.85) 50%, transparent 85%);
  transform: translateX(-100%); animation: ai-glint 1.1s linear infinite; }
.button.button-ai.ai-busy .icon { animation: ai-pulse 1.3s ease-in-out infinite; }
@keyframes ai-glint { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .button.button-ai.ai-busy::after { animation: none; transform: none; background: transparent; }
  .button.button-ai.ai-busy { animation: ai-pulse 2s ease-in-out infinite; }
}
/* the AI entry in the palette ("Skala mit KI entwerfen") in the AI violet */
.palette-row.palette-ai { background: var(--ai-soft); border: 1px solid var(--ai-border); border-radius: var(--radius); margin: 10px 0; padding-right: 4px; }
.palette-row.palette-ai:hover { border-color: var(--ai); }
.palette-row.palette-ai .palette-item { background: transparent; border-color: transparent; }
.palette-row.palette-ai .palette-item strong, .palette-row.palette-ai .palette-item .item-icon { color: var(--ai); }
.palette-row.palette-ai .palette-add.button-ai { background: transparent; border-color: transparent; }
/* the AI button under "Anregungen": as large and wide as "+ Neuer Block"; its longer text may wrap */
.palette-block.button-ai { white-space: normal; height: auto; min-height: 38px; padding-top: 7px; padding-bottom: 7px; text-align: center; }

/* Theme of the participant pages: summary in the settings, page "Erscheinungsbild" (settings left, live preview right) */
.theme-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.theme-summary .button { margin-left: auto; }
.theme-swatches { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; vertical-align: middle; }
.theme-swatches span { width: 18px; height: 18px; }
.design-title { margin-bottom: 14px; }
.design-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 24px; }
.design-page .panel { margin: 0 0 16px; }
.design-side { min-width: 0; }
.design-presets { display: flex; flex-direction: column; gap: 6px; }
.design-preset { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--fg); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.design-preset:hover { border-color: var(--accent); }
.design-preset[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.design-preset .muted { font-weight: 400; }
.design-colours { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.design-colours legend { padding: 0; margin-bottom: 8px; }
.stack label.design-colour { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-weight: 400; }
.design-colour > span:first-child { display: flex; flex-direction: column; font-weight: 600; }
.design-colour .hint { margin-left: 0; }
.design-colour-inputs { display: flex; align-items: center; gap: 6px; flex: none; }
.design-colour-inputs input[type=color] { width: 40px; height: 36px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; }
.design-colour-inputs input[type=text] { width: 6.2em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; }
.design-colour-inputs input[type=text]:invalid { border-color: var(--danger); }
.design-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.design-widths { display: flex; gap: 6px; }
.design-widths .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.design-frame { display: block; width: 100%; height: 640px; margin: 0 auto 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; }
.design-frame.is-phone { width: 390px; max-width: 100%; }
.design-checks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.design-checks li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: 0.95rem; }
.design-check-sample { display: grid; place-items: center; height: 28px; border: 1px solid var(--border); border-radius: 6px; font-weight: 700; font-size: 0.85rem; }
.design-check-ratio { font-variant-numeric: tabular-nums; color: var(--muted); }
.design-check-state { font-weight: 600; min-width: 6.5em; }
.design-checks .is-ok .design-check-state { color: var(--ok); }
.design-checks .is-error .design-check-state { color: var(--danger); }
.design-checks .is-warning .design-check-state { color: var(--warn); }
.design-check-fix { grid-column: 2 / -1; justify-self: start; }
@media (max-width: 1000px) { .design-page { grid-template-columns: minmax(0, 1fr); } .design-frame { height: 520px; } }
.design-form { grid-area: form; } .design-logo { grid-area: logo; } .design-side { grid-area: side; }
.design-logo-fields { border: 0; border-top: 1px solid var(--border); padding: 14px 0 0; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.design-logo-fields legend { padding: 0 8px 0 0; }
.design-logo-fields .hint { margin-left: 0; }
.design-logo-slot + .design-logo-slot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.design-logo-slot h3 { font-size: 0.95rem; margin: 0 0 10px; }
.design-logo-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.design-logo-current.is-dark { background: #141517; }
.design-logo-current img { max-width: 60%; max-height: 64px; height: auto; width: auto; }
.design-logo-upload input[type=file] { font-size: 0.85rem; max-width: 100%; }
/* the left column runs to ~3000 px: the preview stays in view while font or corners far down are changed; the
   contrast list scrolls away under it (UI/UX audit 2026-10-05, V87) */
@media (min-width: 1001px) {
  .design-side { align-self: stretch; }
  .design-preview { position: sticky; top: 72px; z-index: 1; }
  .design-frame { height: min(640px, calc(100vh - 200px)); }
}
.design-page .stack label.check { flex-wrap: nowrap; align-items: flex-start; }
.design-page .stack label.check input { flex: none; margin-top: 3px; }
.source-choice label.check { flex-wrap: nowrap; align-items: flex-start; }  /* a long label stays next to its box (phone) */
.source-choice label.check input { flex: none; margin-top: 3px; }
/* "Konto": the experimental features a site admin switched on, as a list without ticks (app/experimental.py) */
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Administration > Experimentell and the admin page of an account */
.exp-feature + .exp-feature { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.exp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.exp-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.exp-add select { max-width: 100%; min-width: 0; }
.design-fixed-note { margin: 0; }
.design-fixed-note[hidden] { display: none; }
.admin-theme-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 12px; }
.admin-theme-logo h3 { font-size: 0.95rem; margin: 0 0 10px; }
.admin-ranking td:nth-child(2), .admin-ranking td:nth-child(4), .admin-ranking th:nth-child(2), .admin-ranking th:nth-child(4) { text-align: left; white-space: normal; }
.admin-ranking td:nth-child(3), .admin-ranking th:nth-child(3) { text-align: left; }
.admin-ranking code { white-space: nowrap; }
.admin-ranking td, .admin-ranking th { padding-right: 14px; }
.design-scheme { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.design-scheme legend { padding: 0; margin-bottom: 6px; }
.design-dark { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.design-dark[hidden] { display: none; }
.design-dark .hint { margin: 0; }
.design-widths .chip[hidden] { display: none; }
/* a message instead of construct ideas (e.g. context missing): clearly visible, not grey small print */
.ai-idea-list li.ai-idea-note { display: block; background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 6px; padding: 8px 10px; font-size: 0.95rem; }
.design-mine { grid-area: mine; }
.design-apply { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.design-apply label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.95rem; flex: 1 1 180px; min-width: 0; }
.design-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.design-tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
/* the sample page at 40 % of its size: the frame is 2.5 times as wide and high as the tile's window and scaled down */
.design-tile-look { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 8px; }
.design-tile-look iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0; transform: scale(0.4); transform-origin: 0 0; pointer-events: none; }
.design-tile-facts, .design-tile-title { margin: 0; }
.design-tile-share { display: flex; gap: 6px; }
.design-tile-person { margin: 0 0 8px; }
.design-tile-person .person-add .row { max-width: none; }
/* the name of a design: the field over the whole width, the autosave line small under it (Ralf, 2026-10-05: the
   line beside it squeezed the field to a small box) */
.design-tile-name { display: flex; flex-direction: column; gap: 2px; }
.design-tile-name .autosave-bar { padding: 0; font-size: 0.85rem; color: var(--muted); }
.design-tile-name input, .design-tile-share input, .design-tile-share select { flex: 1; min-width: 0; }
.design-tile-share + .design-tile-share { margin-top: 6px; }
.design-tile-note { margin: 6px 0 0; }
.design-tile-shares li { flex-wrap: wrap; }
.design-right { padding: 1px 8px; font-size: 0.85rem; font-weight: 500; }
.group-list .group-name { font-weight: 600; }
.group-list .group-description { flex-basis: 100%; }
.design-tile-shares { font-size: 0.95rem; }
.design-tile-shares ul { list-style: none; margin: 4px 0 8px; padding: 0; }
.design-tile-shares li { display: flex; align-items: center; gap: 6px; }
.design-builtin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.design-builtin li { display: flex; align-items: center; gap: 10px; }
.theme-choice { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.theme-choice-list { border: 0; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; min-width: 0; }
.theme-choice-list legend { padding: 0; margin-bottom: 8px; }
.theme-choice-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; font-size: 0.95rem; }
.theme-choice-item:hover { border-color: var(--accent); }
.theme-choice-item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.theme-choice-item input { flex: none; margin: 0; }
/* Settings: seven groups, each folded to one line (name, what is set, lock); open, the group shows its forms */
.settings-tools { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.tabpage-grid > .settings-group { padding: 0; margin: 0 0 12px; }
.settings-group > summary { list-style: none; cursor: pointer; user-select: none; display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: 20px minmax(160px, 260px) minmax(0, 1fr) auto; padding: 14px 20px; border-radius: var(--radius-panel); }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary:hover { background: var(--surface-2); }
.settings-group > summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.settings-group[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.settings-group > summary h2 { margin: 0; font-size: 1.05rem; }
.settings-caret { display: inline-flex; color: var(--muted); transition: transform 0.15s; }
.settings-group[open] .settings-caret { transform: rotate(90deg); }
.settings-sum { color: var(--muted); font-size: 0.85rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.settings-body > :first-child { margin-top: 0; }
.settings-body h3 { font-size: 1.05rem; margin: 8px 0 0; }
.settings-fold > summary { cursor: pointer; font-weight: 600; width: fit-content; }
.settings-fold[open] > summary { margin-bottom: 10px; }
.fixed-mark { display: inline-flex; vertical-align: -2px; color: var(--muted); opacity: 0.6; }
.fixed-mark.is-fixed { opacity: 1; }
.consent-mentions { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; font-size: 0.95rem; }
.consent-mentions ul { margin: 6px 0 0; padding-left: 18px; }
.consent-mentions li { margin: 2px 0; }
@media (max-width: 700px) {
  .settings-group > summary { grid-template-columns: 18px minmax(0, 1fr) auto; padding: 12px 14px; }
  .settings-sum { grid-column: 2 / 4; grid-row: 2; white-space: normal; }
  .settings-body { padding: 14px; }
}
/* the page "Duplizieren": two panels side by side */
.settings-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.settings-pair > .panel { margin: 0; max-width: none; width: auto; }
@media (max-width: 1100px) { .settings-pair { grid-template-columns: 1fr; } }
.stack label.theme-choice-item { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }  /* in the wizard's form */
.design-logo-colours { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.design-logo-swatches { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 0.85rem; color: var(--muted); }
.design-logo-swatch { width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; padding: 0; }
.design-logo-swatch:hover { outline: 2px solid var(--accent); outline-offset: 2px; }
.design-logo-swatch:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.design-page { grid-template-areas: "form side" "mine side" "logo side" "partner side"; }
.design-partner { grid-area: partner; }
.design-partner .design-logo-current img { max-width: 40%; }
.design-partner-name { flex: 1; min-width: 0; font-size: 0.95rem; }
@media (max-width: 1000px) { .design-page { grid-template-areas: "side" "form" "mine" "logo" "partner"; } }
.design-edit-head { margin: 20px 20px 14px; }
.design-edit-head h1 { margin: 0; }
.design-new { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.design-new { align-items: flex-end; }
.design-new-name { display: flex; flex-direction: column; gap: 6px; font-weight: 600; flex: 1 1 220px; min-width: 0; max-width: 360px; }
.design-new input { min-width: 0; }
.admin-groups { list-style: none; margin: 0; padding: 0; }
.admin-groups > li { padding: 14px 0; border-bottom: 1px solid var(--surface-3); display: flex; flex-direction: column; gap: 8px; }
.admin-groups > li:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-group-name { max-width: 520px; }
.admin-group-facts { margin: 0; }
.admin-group-actions { justify-content: space-between; align-items: center; }
.admin-group-members { margin: 0; line-height: 1.7; }  /* all members visible, in one flowing line under the leads */
.admin-group-member { white-space: nowrap; }
.member-groups { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--surface-3); }
.member-groups h3 { margin: 0 0 4px; font-size: 0.95rem; }
.member-group summary { cursor: pointer; }
.member-group ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 18px; }
.member-group li { border: 0; padding: 2px 0; }
.member-group-add { flex-wrap: wrap; margin-top: 8px; }
.member-group-add select:first-of-type { flex: 1 1 200px; min-width: 0; }
/* the kinds on "Meine Befragungen" and the two lists on "Konstrukte": one choice, so a .segmented (W81) */
.dash-groups { flex-wrap: wrap; margin: 16px 0 0; }
/* Start page: pin (star) a survey to the top of the list */
.pin-form { margin-right: 4px; vertical-align: 1px; }
.pin-btn { border: 0; background: none; padding: 0 2px; font-size: 1.05rem; line-height: 1; color: var(--muted); cursor: pointer;
  min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }  /* a target of 24 px (WCAG 2.5.8, W99) */
.pin-btn:hover, .pin-btn[aria-pressed="true"] { color: #e0a800; }
.pin-btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: 4px; }
.construct-wording { font-size: 0.85rem; color: var(--muted); font-style: italic; }  /* W88: a state in words, no status colour */
.card-list > .card { scroll-margin-top: 96px; }  /* a jump to a card (e.g. after pinning) clears the sticky header */
/* the parameter table in half width: the name column wide enough for its placeholder, the long select shrinks */
#panel .list-table:where(.is-edit) td:first-child input { min-width: 124px; }
#panel .list-table:where(.is-edit) select[name="param_mode"] { width: 100%; max-width: 100%; min-width: 0; }
#panel .list-table:where(.is-edit) td:nth-child(2) { width: 36%; }

/* Landing page: a highlighter note that the tool is still being built (light yellow, like a text marker) */
.dev-mark { padding: 0.05em 0.3em; border-radius: 0.3em 0.15em; color: #1c1c1a; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, rgba(255, 233, 80, 0.75), rgba(255, 238, 110, 0.9) 50%, rgba(255, 233, 80, 0.7)); }

/* Results: text highlighting (the text with a stacked bar under every word) and cloze gaps */
.hl-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); vertical-align: middle; margin-right: 6px; }
.res-hl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.res-hl-key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.res-hl-key i, .res-hl-top h4 i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); }
.res-hl-text { white-space: pre-wrap; line-height: 2.5; font-size: 1.05rem; max-width: 820px; }
.res-hl-w { position: relative; display: inline-block; line-height: 1.4; padding-bottom: 8px; }
.res-hl-bar { position: absolute; left: 0; right: 0; bottom: 1px; height: 6px; display: flex; border-radius: 3px; overflow: hidden;
  background: var(--border); }
.res-hl-bar i { display: block; height: 100%; }
.res-hl-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin-top: 10px; }
.res-hl-top h4 { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; margin: 0 0 6px; }
.res-hl-top ol { margin: 0; }
.res-cloze { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }
.res-cloze-gap h4 { font-size: 0.95rem; margin: 0 0 6px; }

/* Translation page (surveys/translation.html): source left, translation right, status per text */
.tr-head-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.tr-head-row h2 { margin: 0; }
.tr-progress { display: flex; height: 10px; border-radius: var(--radius-tag); overflow: hidden; background: var(--surface-3); margin: 14px 0 10px; }
.tr-progress i, .tr-dot { display: block; }
.tr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.is-ok.tr-dot, .tr-progress .is-ok { background: var(--ok); }
.is-validated.tr-dot, .tr-progress .is-validated { background: var(--accent); }
.is-ai.tr-dot, .tr-progress .is-ai { background: var(--ai); }
.is-changed.tr-dot, .tr-progress .is-changed { background: var(--warn-bar); }
.is-missing.tr-dot, .tr-progress .is-missing { background: var(--field-border); }  /* 3:1 (R79) */
.tr-filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.tr-chip { border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: var(--radius-tag); padding: 4px 12px; font: inherit; font-size: 0.95rem; cursor: pointer; }
.tr-chip.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.tr-chip span { color: var(--muted); margin-left: 2px; }
.tr-actions { margin-top: 14px; align-items: center; }
.tr-ai-status { margin: 0; }
.tr-group-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.tr-group-head h2 { margin: 0; }
.tr-unit { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--surface-3); scroll-margin-top: 90px; }
.tr-unit h3 { font-size: 0.95rem; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.tr-unit h3 a { color: var(--fg); }
.tr-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 7px 0; align-items: start; }
.tr-role { color: var(--muted); font-size: 0.85rem; padding-top: 6px; }
.tr-source { white-space: pre-wrap; padding: 6px 0; line-height: 1.5; }
.tr-target { display: flex; flex-direction: column; gap: 4px; }
.tr-target textarea { width: 100%; min-height: 0; resize: vertical; line-height: 1.5; }
.tr-validated { white-space: pre-wrap; padding: 6px 0; line-height: 1.5; }
.tr-fixed { white-space: pre-wrap; padding: 6px 8px; border-radius: 6px; background: var(--surface-2, var(--surface-3)); line-height: 1.5; }
.tr-status { align-self: flex-start; font-size: 0.85rem; padding: 1px 8px; border-radius: var(--radius-tag); background: var(--surface-3); color: var(--muted); }
.tr-status.is-ok { background: var(--ok-soft); color: var(--ok); }  /* tokens, so the dark theme follows (R85) */
.tr-status.is-ai { background: var(--ai-soft); color: var(--ai); }
.tr-status.is-changed { background: var(--warn-soft); color: var(--warn); }
.tr-status.is-validated { background: var(--accent-soft); color: var(--accent); }
.tr-status.is-error { background: var(--danger-soft); color: var(--danger); }
.tr-diff { padding: 6px 8px; border-left: 3px solid var(--warn-bar); background: var(--warn-soft); border-radius: 0 6px 6px 0; }
.tr-diff-label { display: block; font-size: 0.85rem; color: var(--warn); margin-bottom: 2px; white-space: normal; }
.tr-n { font-weight: inherit; margin: 0; }
.tr-diff del { color: var(--danger); text-decoration: line-through; }
.tr-diff ins { text-decoration: none; background: var(--ok-soft); border-radius: 3px; }
.tr-row.is-saving textarea { opacity: 0.6; }
.tr-row.is-ai-working textarea { border-color: var(--ai-border); animation: tr-ai-shimmer 1.4s ease-in-out infinite; }
@keyframes tr-ai-shimmer { 0%, 100% { background: var(--ai-soft); } 50% { background: var(--bg); } }
@media (prefers-reduced-motion: reduce) { .tr-row.is-ai-working textarea { animation: none; background: var(--ai-soft); } }
@media (max-width: 900px) { .tr-row { grid-template-columns: minmax(0, 1fr); } .tr-role { padding-top: 0; } }
:root[data-theme="dark"] .tr-status.is-ok { color: #7fd09c; }
:root[data-theme="dark"] .tr-status.is-changed { color: #f0c94f; }
:root[data-theme="dark"] .tr-status.is-validated { color: #9cbcf0; }

/* quotas: the page "Quoten" (editor/quotas.html) and the state on the fieldwork page (surveys/_quotas.html) */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.quota-cells td { vertical-align: top; }
.quota-cells .quota-new td { padding-top: 10px; border-top: 1px dashed var(--border); }
/* one grid: every field of a row has the height of the text fields, and a line of answers to tick sits on the
   middle of the select next to it (further lines follow below) */
.quota-cells select, .quota-cells input:not([type=checkbox]) { height: 42px; }
.quota-options { display: flex; flex-wrap: wrap; gap: 2px 14px; line-height: 24px; }
.quota-special { display: inline-block; line-height: 24px; }
.quota-options .check, .quota-cat .check { margin: 0; font-weight: 400; }
.quota-range { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-table:where(.is-edit) .quota-range input:not([type=checkbox]), .quota-range input { width: 7em; }
.quota-special { font-size: 0.95rem; color: var(--muted); }
.quota-add { margin-top: 2px; }
.quota .quota-code-col { display: none; }
.quota.show-codes th.quota-code-col, .quota.show-codes td.quota-code-col { display: table-cell; }
.quota.show-codes label.quota-code-col { display: block; }
.quota-attr { padding: 8px 0; border-top: 1px solid var(--border); }
.quota-attr > label select { max-width: 420px; }
.quota-attr-cats { margin-top: 6px; }
.quota-cats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.quota-cat { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.quota-generate label.quota-share { display: none; flex-direction: row; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.quota-generate label.quota-share input { width: 5.5em; }
.quota-generate .with-shares label.quota-share { display: inline-flex; }
.quota-delete { margin-top: 10px; }
.quota-state-actions { align-items: center; margin-bottom: 6px; }
.quota-state-name { margin: 18px 0 6px; font-size: 1.05rem; }
.quota-table { width: auto; max-width: 100%; border-collapse: collapse; font-size: 0.95rem; }  /* as wide as its content (Ralf, 2026-10-03) */
.quota-table th, .quota-table td { padding: 4px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.quota-table th { font-size: 0.75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.quota-table th.num, .quota-table td.num { text-align: right; white-space: nowrap; }  /* no width: 1%: in a table without a set width it would stretch the table to the panel */
.quota-table .quota-sum td { font-weight: 600; border-bottom: 0; }
.quota-bar { display: flex; width: 100%; min-width: 80px; max-width: 320px; height: 10px; border-radius: var(--radius-tag); background: var(--border); overflow: hidden; }
.quota-bar-done { background: var(--accent); }
.quota-bar-running { background: var(--accent); opacity: 0.35; }
.quota-flag { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.quota-flag-open { color: var(--muted); }
.quota-flag-full { color: var(--ok); }
.quota-flag-word { display: block; font-size: 0.75rem; font-weight: 600; }
.quota-flag-closed { color: var(--muted); }  /* closed on purpose, not an error (R78) */
.quota-totals { margin-top: 14px; }
/* an end: its triggers as cards, checked from the top; each with what holds it and what it does */
/* an external section in the flow: its fields in one grid, all of one height */
.ext-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; align-items: end; }
.ext-grid > label { min-width: 0; }
.ext-grid > .ext-wide { grid-column: 1 / -1; }
.ext-grid input, .ext-grid select, .ext-values input, .ext-values select { width: 100%; height: 42px; }
.ext-values td:last-child { width: 30%; }
.ext-help > summary { cursor: pointer; font-weight: 600; }
.ext-help ol { margin: 8px 0; padding-left: 22px; }
@media (max-width: 720px) { .ext-grid { grid-template-columns: minmax(0, 1fr); } }
.end-cases { display: flex; flex-direction: column; gap: 12px; counter-reset: end-case; }
.end-case { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); counter-increment: end-case; }
.end-case-head { align-items: flex-end; }
.end-case > summary { cursor: pointer; font-weight: 650; }
.end-case > summary::before { content: counter(end-case) ". "; }
.end-case:not([open]) { padding: 8px 14px; }
.end-case-tools { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.end-case:first-of-type [data-case-up] { visibility: hidden; }
.end-case-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; max-height: 260px; overflow: auto; }
.end-case:has([data-case-remove] input:checked) { opacity: 0.55; }
.quota-page .page-head h2 { margin: 0; }
/* the quota assistant "Bevölkerung Deutschland": the preview of the quotas */
.census-cross { display: flex; flex-direction: column; gap: 4px; }
.census-attrs { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.census-cross p { margin: 4px 0 0; }
.census-others p { margin: 0; }
.census-others-choice { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; }  /* ersetzen or zusätzlich (W18) */
.census-cross .check { margin: 0; font-weight: 400; }
.census-steps { margin: 4px 0 12px; padding-left: 20px; }
.census-steps li { margin: 3px 0; }
.census-scroll { overflow-x: auto; margin-bottom: 14px; }
/* scales in one table (results page): k, M, SD, α and ω are symbols, upper case would turn α into Α */
.scale-table th { text-transform: none; letter-spacing: 0; }
.scale-table th.stat { font-style: italic; }
.census-table { width: auto; min-width: 320px; }
.census-table tbody th { text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: inherit; font-weight: 400; white-space: nowrap; }
.census-table th.num, .census-table td.num { width: auto; padding-left: 14px; }
.census-apply { margin: 6px 0 12px; }
.quota-cells { table-layout: fixed; }
.quota-cells th:nth-child(1) { width: 24%; }
.quota-cells th:nth-child(2) { width: 150px; }
.quota-cells th:nth-child(3) { width: 96px; }
.quota-cells th:nth-child(5) { width: 76px; }
.quota-provider { align-items: flex-end; margin: 6px 0; }
.quota-recount { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.quota-shares { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
.quota-shares h3 { margin: 0 0 8px; font-size: 1.05rem; }
.quota-share-form { margin-top: 10px; }
.quota-steer td { vertical-align: middle; }
.quota-steer th.num, .quota-steer td.num { text-align: right; width: 1%; white-space: nowrap; }
.quota-print { background: var(--bg); }
.quota-print h1 { font-size: 1.55rem; }
@media print {
  .no-print, .quota-print .quota-state-actions { display: none !important; }
  .quota-print { background: #fff; color: #000; }
  .quota-print .quota-bar { border: 1px solid #999; }
}
.link-rules-head { margin: 14px 0 4px; font-size: 0.95rem; }
#panel fieldset { min-width: 0; }
.link-rule { padding: 8px 0 4px; border-top: 1px solid var(--border); }
.link-rule-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.link-rule-row select, .link-rule-row input { flex: 1 1 110px; min-width: 0; max-width: 100%; }
.link-rule-row select:first-child { flex: 1.5 1 150px; }
.link-rule-row .link-rule-url { flex: 3 1 220px; }
.link-rule-row select[name="rule_mode"] { flex: 2 1 170px; }
.link-rule-row [data-row-remove] { flex: 0 0 auto; }
.link-rule-word { flex: 0 0 2.6em; color: var(--muted); font-size: 0.85rem; }
.quota-generate { margin-top: 14px; }
.quota-generate summary { cursor: pointer; font-weight: 600; }
.quota-generate textarea { font-family: var(--mono); font-size: 0.85rem; }
.quota-matrix { margin: 6px 0 4px; }
.quota-matrix summary { cursor: pointer; font-size: 0.95rem; }
.quota-matrix-table { width: auto; margin-top: 6px; }
.quota-matrix-table th, .quota-matrix-table td { padding: 4px 12px; }
.quota-matrix-table td.quota-flag-open { color: inherit; }

/* Formatted texts (richtext.js): a field over the textarea that shows the text as participants see it */
.rt { display: flex; flex-direction: column; font-weight: 400; }
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface-2); }
.rt-btn { font: inherit; font-size: 0.85rem; font-weight: 400; min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--fg); cursor: pointer; line-height: 1; }
.rt-btn:hover:not(:disabled) { background: var(--surface-3); }
.rt-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rt-btn:disabled { opacity: 0.45; cursor: default; }
.rt-btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.rt-btn-b { font-weight: 700; }
.rt-btn-i { font-style: italic; font-family: var(--font-serif); }
.rt-btn-small { font-size: 0.75rem; }
.rt-btn-source { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.rt-ed { position: relative; font-size: 0.95rem; line-height: 1.5; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 0 0 8px 8px; background: var(--surface); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; transition: border-color 0.12s, box-shadow 0.12s; }
.rt-ed:focus { outline: var(--focus-outline); outline-offset: 1px; border-color: var(--accent); }
.rt-ed.is-locked { border-radius: 8px; background: var(--surface-3); color: var(--muted); cursor: default; }
.rt-field { position: relative; }
.rt-placeholder { position: absolute; inset: 0; padding: 9px 12px; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; overflow: hidden; color: var(--muted); pointer-events: none; }
.rt-ed:not(.is-empty) + .rt-placeholder { display: none; }
.rt-ed small, .rt-placeholder small, .rt-shown small { font-size: 0.82em; }
.rt-ed p, .rt-ed ul, .rt-placeholder p, .rt-placeholder ul, .rt-shown p, .rt-shown ul { margin: 0 0 0.6em; }
.rt-ed ul, .rt-placeholder ul, .rt-shown ul { padding-left: 1.3em; }
.rt-ed h3, .rt-placeholder h3, .rt-shown h3 { font-size: 1.05rem; margin: 0 0 0.4em; }
.rt-ed > :last-child, .rt-shown > :last-child { margin-bottom: 0; }
.rt-shown .rt-gap { cursor: default; }
/* where many fields stand in rows (translations): the buttons appear over the field that is being edited */
.rt-float { position: relative; }
.rt-float .rt-bar { display: none; position: absolute; left: 0; right: 0; bottom: 100%; z-index: 5; border-bottom: 1px solid var(--border-strong); border-radius: 8px; margin-bottom: 4px; box-shadow: var(--shadow-pop); }
.rt-float:focus-within .rt-bar { display: flex; }
.rt-float .rt-ed, .rt-float textarea.rt-area { border-radius: 8px; }
.rt-var { color: #1c1c1a; cursor: default; }
/* a placeholder the page can name ("Antwort: Welche Marke?"): words instead of its code; a click sets the text for an empty value */
.rt-var.is-named { font-family: inherit; font-size: 0.88em; padding: 1px 7px; border-radius: var(--radius-tag); background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.rt-ed:not(.is-locked) .rt-var { cursor: pointer; }
.rt-var.is-unknown { background: var(--danger-soft); color: var(--danger); }
/* a plain one-line field with chips (statements, answer options): looks like the input it stands for */
.rt-line-wrap { position: relative; width: 100%; }
.rt-line { font-size: 0.95rem; line-height: 1.5; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; min-height: calc(1.5em + 18px); box-sizing: border-box; transition: border-color 0.12s, box-shadow 0.12s; }
.rt-line:focus { outline: var(--focus-outline); outline-offset: 1px; border-color: var(--accent); }
.rt-line .rt-var { cursor: pointer; }
:root[data-theme="dark"] .rt-line { background: var(--surface-2); }
.rt { position: relative; }
.rt-btn-insert { margin-left: 6px; color: var(--accent); font-weight: 600; }
.rt-menu, .rt-pop { position: absolute; z-index: 20; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: 0.85rem; font-weight: 400; }
.rt-menu { width: min(440px, 100%); padding: 6px; }
.rt-menu-search { width: 100%; margin: 0 0 6px; }
.rt-menu-list { max-height: 280px; overflow-y: auto; }
.rt-menu-title { padding: 6px 8px 2px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.rt-menu-item { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.rt-menu-item:hover, .rt-menu-item:focus-visible { background: var(--accent-soft); }
.rt-menu-item:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.rt-menu-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rt-menu-name { flex: none; font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--muted); }
.rt-menu-none { padding: 6px 8px; color: var(--muted); }
.rt-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: min(340px, 100%); padding: 8px 10px; }
.rt-pop-title { flex: 1 0 100%; font-size: 0.85rem; color: var(--muted); }
.rt-pop input { flex: 1; min-width: 0; }
.rt-pop .rt-btn { border-color: var(--border-strong); }
.rt-gap { display: inline-block; height: 1.3em; vertical-align: text-bottom; margin: 0 2px; border: 1px solid var(--border-strong); border-bottom: 2px solid var(--muted); border-radius: 4px; background: var(--surface-2); cursor: pointer; }
.rt-gap.is-s { width: 3.5em; }
.rt-gap.is-m { width: 6em; }
.rt-gap.is-l { width: 9.5em; }
.rt .format-hint { margin: 6px 0 0; }
.rt textarea.rt-area { border-radius: 0 0 8px 8px; }
.rt textarea.rt-area[hidden] { display: none; }
:root[data-theme="dark"] .rt-ed { background: var(--surface-2); }
:root[data-theme="dark"] .rt-ed.is-locked, :root[data-theme="dark"] .rt-gap { background: var(--surface-3); }

/* Dashboards (app/boards.py): the list, and the designer with its form on the left and the preview on the right */
.board-index .board-list td { vertical-align: middle; }
.board-templates { display: flex; flex-wrap: wrap; gap: 10px; }
.board-template { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; flex: 1 1 180px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; font-weight: 400; }
.board-template:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.board-template .hint { display: block; margin: 0; }
/* three columns: the tiles with their settings | preview (at most --page-col) | name and links; the outer ones move in */
.board-designer { display: grid; grid-template-columns: 400px minmax(0, var(--page-col)) 340px; gap: 20px; align-items: start;
  justify-content: center; }
.board-side-pick { grid-column: 1; grid-row: 1; }
.board-preview { grid-column: 2; grid-row: 1; }
.board-side-tiles { grid-column: 3; grid-row: 1; }
.board-designer .panel { margin: 0 0 16px; }
.board-back { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.board-back .back-link { margin: 0; }
.board-side > .autosave-bar { margin: 0 0 8px; padding-top: 0; }
.board-side-tiles .row-fields { display: flex; flex-direction: column; align-items: stretch; }  /* the narrow right column: the link fields one under another */
.board-side-tiles .row-fields > label { width: 100%; }
/* the side columns are narrow: a tick stays beside its text, the hint goes under the text (no break after the box) */
.board-side label.check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
.board-side label.check > input { margin-top: 3px; }
.board-side label.check > .hint { grid-column: 2; }
.board-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.board-form h2 { margin-top: 16px; }
.board-rows { list-style: none; margin: 0; padding: 0; }
.board-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.board-row.is-dragged { opacity: 0.4; }
.board-row .drag-handle { touch-action: none; padding: 2px 4px; }
.board-row-name { font-weight: 600; font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; }
.board-row-move { display: flex; gap: 2px; }
.board-row-move button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent;
  border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.board-row-move button:hover:not(:disabled) { background: var(--surface-3); color: var(--fg); border-color: var(--border); }
.board-row-move button:disabled { opacity: 0.3; cursor: default; }
.board-row-settings { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 0.85rem; }
.board-row-settings label { display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.board-row-settings select { font-size: 0.85rem; padding: 3px 6px; max-width: 100%; min-width: 0; }
/* long question texts: the split takes a row of its own and its list stays inside the card */
.board-row-settings label.board-row-split { flex-basis: 100%; min-width: 0; }
.board-row-split select { flex: 1 1 0; width: 0; }
.board-row-title { flex-basis: 100%; }
.board-row-title summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.board-row-title input { width: 100%; margin-top: 4px; }
.board-drop-line { list-style: none; height: 3px; margin: -2px 0; border-radius: 2px; background: var(--accent); }
/* the elements not yet on the dashboard, below the tiles: one line each with its "+" */
.board-more-head { margin: 14px 0 4px; font-size: 0.95rem; font-weight: 600; }
.board-more-list { list-style: none; margin: 0; padding: 0; }
.board-more-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 0.95rem; }
.board-more-row .board-row-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.board-more-row.board-off { color: var(--muted); }
.board-off { color: var(--muted); }
.board-preview { position: sticky; top: 12px; }
/* wide: every column scrolls on its own (Ralf, 2026-10-03), from where the columns start (--board-top, set by app.js)
   down to the footer (34 px); the page itself does not scroll */
@media (min-width: 1301px) {
  .board-side, .board-preview { position: static; max-height: calc(100vh - var(--board-top, 180px) - 46px); overflow-y: auto;
    overscroll-behavior: contain; padding-right: 4px; }
  .board-preview { display: flex; flex-direction: column; height: calc(100vh - var(--board-top, 180px) - 46px); }
  .board-frame { flex: 1 1 auto; height: auto; min-height: 360px; }  /* the preview fills its column below its head */
}
.board-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.board-preview-links { margin-left: auto; display: flex; gap: 6px; }
.board-frame { display: block; width: 100%; height: calc(100vh - 110px); min-height: 480px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface);
  position: relative; overflow: hidden; }  /* scaled to the width of the box (app.js, X66): nothing to scroll sideways */
.board-frame-inner { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform-origin: 0 0; }
/* narrower: both lists in one column beside the preview (choose, then arrange), the preview over both rows */
@media (max-width: 1300px) {
  .board-designer { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .board-side-pick { grid-column: 1; grid-row: 1; }
  .board-side-tiles { grid-column: 1; grid-row: 2; }
  .board-preview { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 1000px) {
  .board-designer { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .board-side-pick, .board-side-tiles, .board-preview { grid-column: 1; grid-row: auto; }
  .board-preview { position: static; }
  .board-frame { height: 70vh; }
}
.board-links { list-style: none; margin: 0 0 16px; padding: 0; }
.board-links li { padding: 10px 0; border-top: 1px solid var(--border); }
.board-links li:first-child { border-top: 0; padding-top: 0; }
.board-links p { margin: 0 0 6px; }
.board-embed { margin: 0 0 6px; font-size: 0.85rem; }
.board-embed summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.board-links .copy-row { flex-wrap: nowrap; margin-bottom: 6px; }
.board-links .copy-row input { min-width: 0; }
.board-row-settings textarea { flex-basis: 100%; width: 100%; font-size: 0.85rem; }
.board-add { margin-top: 10px; align-items: center; }
/* AI suggestions (items/_suggestion.html): two rows each, above where and why, below the old text and the
   suggestion; the tick spans both; one light stripe per suggestion */
.review-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.review-table col.check-col { width: 44px; }
.review-table td { vertical-align: top; padding: 8px 10px; }
.review-table tbody:nth-of-type(even) { background: var(--surface-2); }
.review-table tbody + tbody tr.review-head td { border-top: 1px solid var(--border); }
.review-table .check-col { text-align: center; padding-top: 12px; }
.review-table .review-why { color: var(--muted); font-size: 0.95rem; }
.review-table tr.review-head td { padding-bottom: 2px; }
.review-table .review-old { color: var(--muted); font-size: 0.95rem; white-space: pre-wrap; }
.review-table .review-tag { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); margin-bottom: 4px; }
.review-table textarea { width: 100%; }
/* Export page: the draft of the methods section, right under the heading of the export */
.methods-callout { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 6px;
  padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.methods-callout .desc { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.methods-callout .button { flex: none; }
@media (max-width: 600px) { .methods-callout { flex-wrap: wrap; } .methods-callout .button { white-space: normal; height: auto; min-height: 38px; } }
/* AI review of the texts: a button under the item form, and one in the design check */
.page-head-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }  /* item page: AI check next to undo */
/* the tools stay on the title row; a long description wraps under the title instead of pushing them onto a row of their own
   (Ralf, 2026-10-06: conjoint pages looked different) */
@media (min-width: 801px) { .page-head:has(> .page-head-tools) { flex-wrap: nowrap; } .page-head:has(> .page-head-tools) > h1 { flex: 1 1 auto; min-width: 0; } }
.ai-check-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 10px 0 0; }

/* Rows of a matrix shown only to some (items/_row_conditions.html): one line per row with its condition */
.row-conds summary { cursor: pointer; color: var(--muted); font-size: 0.95rem; }
.row-conds details[open] > summary { margin-bottom: 10px; }
.row-cond-all { display: block; text-align: left; margin-bottom: 12px; }
.row-cond-all select { display: block; height: 42px; width: 320px; max-width: 100%; margin: 4px 0; }
.row-cond-all .hint { display: block; margin: 0; }

/* Options carried from an earlier question (items/_carry.html) */
.carry-rows { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 10px 0 6px; }
.carry-row { border: 1px solid var(--border); border-radius: var(--radius-tag); padding: 2px 10px; font-size: 0.95rem; }
.carry-row code { color: var(--muted); }
/* Quoten: the explanation folds once there is a quota; the quota comes with its flow elements (tick) */
.quota-intro > summary { cursor: pointer; }
.quota-intro > summary h2 { display: inline; margin: 0; }
.quota-add-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.facet-more > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--accent); margin: 4px 0; width: fit-content; }

/* One condition, the same in the flow, the Teilquoten and the rows shown only to some (_condition.html) */
.cond-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; margin-bottom: 8px; }
.cond-line > select { flex: 0 1 380px; min-width: 0; height: 42px; }
.cond-line > select[data-cond-mode] { flex: 0 1 160px; }
.cond-line > select[data-cond-mode]:not(:has(option)) { display: none; }
.cond-value { flex: 1 1 220px; min-width: 0; min-height: 42px; }
.cond-value > .quota-options, .cond-value > .quota-special { padding: 9px 0 4px; }
.cond-value > input:not(.narrow) { width: 100%; }
.cond-value input:not([type=checkbox]) { height: 42px; }
.cond-line > [data-cond-remove] { flex: 0 0 auto; margin-top: 6px; }
/* the × of a line stays at its end, on the height of the fields, also when the answers wrap below (V93) */
.cond-line:has(> [data-cond-remove]) { position: relative; padding-right: 40px; }
.cond-line > [data-cond-remove] { position: absolute; top: 0; right: 0; }
/* in a Teilquote the × of a condition sits right behind it, apart from the bin of the whole row (UI audit R91) */
.quota-page .cond-value { flex: 0 1 auto; }
.cond-name { flex: 0 0 220px; min-width: 0; padding-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-conds .cond-line { padding: 6px 0 0; margin: 0; border-top: 1px solid var(--border); }
.cond-list { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.cond-list > .label-title { margin-bottom: 4px; }
.cond-list > [data-add-cond], .cond-list > .cond-rule { align-self: flex-start; }
.cond-rule, .stack label.cond-rule { flex-direction: row; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 400; }
.cond-rule select { height: 42px; width: auto; }
@media (max-width: 700px) { .cond-name { flex-basis: 100%; padding-top: 0; white-space: normal; } }
/* instead of inline styles (UI/UX audit 2026-10-03, U51): how much of a row a field takes, a paragraph without margins, an empty state */
.grow-1 { flex: 1 1 0; min-width: 0; }
.grow-2 { flex: 2 1 0; min-width: 0; }
.flush { margin: 0; }
.space-above { margin-top: 14px; }  /* a part that follows a form or a list, set apart */
input.mono, textarea.mono { font-family: var(--mono); }  /* code typed in (a regular expression), the table of a drill-down */
.empty-panel { text-align: center; padding: 40px 20px; }
.min-180 { min-width: 180px; }
/* the affiliation next to a researcher of the consent: its word stays visible beside the field (V97) */
label.consent-aff { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
label.consent-aff > .hint { margin: 0; flex: none; }
label.consent-aff > input { flex: 1 1 auto; min-width: 0; }
.link-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.link-chips .hint { margin-right: 2px; }

/* Live votes (app/live.py): the presenter's page */
.live-run { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.live-run form.inline { display: inline-flex; gap: 8px; align-items: stretch; }  /* name field and button of the same height */
.live-run form.inline input, .live-run form.inline .button { height: auto; min-height: 0; margin: 0; }
@media (max-width: 600px) { .live-run form.inline { flex-wrap: wrap; } }
.badge-live { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* "Meine Befragungen": a live vote has a quiet tag beside its title; "Läuft" (fieldwork, or a live vote being presented)
   stands out in the top right corner with a pulsing dot */
.badge-live-tag { background: var(--live-soft); color: var(--live); font-weight: 600; }
.badge-survey-tag { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* the kind of a card by a stripe on its left (Ralf, 2026-10-04): questionnaire blue, live vote red, interview guide brown;
   drawn inside the card, so titles and buttons of all cards stay in line */
.card.card-kind { --kind: var(--accent); box-shadow: inset 6px 0 0 var(--kind), var(--shadow); padding-left: 24px; }
.card.card-kind.card-live { --kind: var(--live); }
.card.card-kind.card-interview { --kind: var(--interview); }
/* the buttons that create each kind carry its stripe too, all white with a 10 px stripe (Ralf, 2026-10-04) */
.button.button-kind { --kind: var(--accent); box-shadow: inset 10px 0 0 var(--kind); padding-left: 22px; }
.button.button-kind.kind-live { --kind: var(--live); }
.button.button-kind.kind-interview { --kind: var(--interview); }
.card.card-running { position: relative; padding-right: 104px; }
/* the room for „Läuft“ is only needed beside the title: the buttons keep the right edge of the other cards (Ralf, 2026-10-05) */
.card.card-running .card-actions { margin-right: -86px; }
.run-mark { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 9px;
  border-radius: var(--radius-tag); background: var(--ok-soft); color: var(--ok); font-size: 0.85rem; font-weight: 700; }
.run-mark i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .run-mark i { animation: none; } }
@media (max-width: 600px) { .card.card-running { padding-right: 18px; padding-top: 44px; } .card.card-running .card-actions { margin-right: 0; } }
.live-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.live-state.is-open { color: var(--accent); }
.live-state.is-closed { color: var(--muted); }

/* Live vote, editing page (live/manage.html): blocks and their questions on the left, the item editor on the right */
.live-work { display: grid; grid-template-columns: minmax(320px, 40%) 1fr; gap: 20px; align-items: start; }
.live-left { display: flex; flex-direction: column; gap: 12px; }
.live-work > * { min-width: 0; }  /* a long row in a column does not widen the grid on a phone (S2) */
.live-block { padding: 12px 14px; }
.live-block.is-released { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
/* the head of a block in the accent colour, so it stands apart from its questions (Philipp, 2026-10-07) */
.live-block-head { display: flex; align-items: center; gap: 10px; margin: -12px -14px 10px; padding: 8px 14px;
                   background: var(--accent); color: var(--on-accent); border-radius: var(--radius) var(--radius) 0 0; }
.live-block-name { flex: 1; }
.live-block-name input { width: 100%; font-weight: 600; background: transparent; color: inherit; border-color: transparent; }
.live-block-name input:hover, .live-block-name input:focus { border-color: var(--on-accent); }
.live-block-head .live-state { color: inherit; opacity: 0.9; }
.live-items { list-style: none; margin: 0 0 8px; padding: 0; }
.live-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--border); }
.live-item:first-child { border-top: 0; }
.live-item.is-selected { background: var(--accent-soft); border-radius: 6px; }
.live-item .drag-handle { touch-action: none; padding: 4px 2px; }
.live-item-text { flex: 1; display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.live-item-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-break { padding: 2px 4px; }
.live-break-line { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.live-break-line::before, .live-break-line::after { content: ""; flex: 1; border-top: 1px dashed var(--border-strong); }
.live-item.is-dragging { opacity: 0.4; }
.live-item.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.live-item.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.guide-block.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.guide-block.drop-after { box-shadow: 0 3px 0 var(--accent); }
.guide-block.is-dragging { opacity: 0.6; }
.guide-block-drag { touch-action: none; }
.live-block.drop-into { outline: 2px dashed var(--accent); outline-offset: 2px; }
.live-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.live-add > summary::-webkit-details-marker { display: none; }
.live-add-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid var(--border);
                  border-radius: var(--radius); background: var(--surface-2); }
.live-add-types > p { flex-basis: 100%; }
.live-add-type { font: inherit; font-size: 0.85rem; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-tag);
                 background: var(--surface); color: var(--fg); cursor: pointer; }
.live-add-type:hover, .live-add-type:focus-visible { border-color: var(--accent); color: var(--accent); }
.live-add-type.is-break { border-style: dashed; color: var(--muted); }
.live-right { position: sticky; top: 12px; }
.live-editor { width: 100%; height: calc(100vh - 140px); min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.live-hint { color: var(--fg); }
@media (max-width: 900px) { .live-work { grid-template-columns: 1fr; } .live-right { position: static; } }
/* a page inside another one (?embed=1, base.html): no header and footer, less space around */
body.embedded > main.container { padding-top: 12px; }
/* Live votes, wizard and Präsentieren (concept mentimeter-abgleich.md 6.2/6.3): QR code beside the address */
.live-join-box { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.live-qr { width: 168px; flex: none; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.live-qr svg { display: block; width: 100%; height: 100%; }
.live-big-url { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.live-code { letter-spacing: 0.08em; }
.live-first .theme-choice-item { align-items: center; }

/* AI assistant of a live vote (live/assistant.html) */
.live-ai-link { align-self: flex-start; }
.live-ai-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; text-align: left; }
/* a suggestion: tick and type on the left, the texts across the rest of the width (to read and edit them) */
ol.plain li.live-ai-item { display: grid; grid-template-columns: 220px 1fr; gap: 8px 24px; align-items: start; justify-items: stretch;
  padding: 16px 12px; border-top: 1px solid var(--border); text-align: left; }
ol.plain li.live-ai-item:nth-child(even) { background: var(--surface-2); }
.live-ai-pick { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.live-ai-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.live-ai-fields label { display: flex; flex-direction: column; gap: 4px; }
.live-ai-fields textarea { width: 100%; font: inherit; line-height: 1.45; resize: vertical; }
.live-ai-fields textarea[name$="_question"] { font-size: 1.05rem; font-weight: 600; }
@media (max-width: 720px) { ol.plain li.live-ai-item { grid-template-columns: 1fr; } }
.live-ai-item input[type=text], .live-ai-item input:not([type]), .live-ai-item textarea { width: 100%; }
/* live votes, moderation on Präsentieren (package D) */
.live-mod-list { list-style: none; margin: 8px 0 0; padding: 0; }
.live-mod { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.live-mod-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.live-mod-status { font-size: 0.85rem; color: var(--muted); }
.live-mod.is-hidden .live-mod-text, .live-mod.is-filtered .live-mod-text { text-decoration: line-through; color: var(--muted); }
.live-mod.is-pending .live-mod-status { color: var(--warn); font-weight: 600; }
/* live votes, the quiz box above the question editor (package F) */
.live-quiz { margin: 0 0 12px; padding: 10px 14px; }
.live-quiz summary { cursor: pointer; }
.live-quiz form { margin-top: 10px; }
.live-quiz-row { display: flex; gap: 12px; flex-wrap: wrap; }
.live-own { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.live-own .link { font-weight: 600; }

/* Administration > Datenbank */
.db-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) repeat(3, minmax(0, 1.5fr)); gap: 12px; }
.db-fields input { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 760px) { .db-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.db-result { flex-direction: column; gap: 6px; margin: 12px 0; }
.db-result p { margin: 0; }
.db-steps { margin: 0 0 12px; padding-left: 1.4em; display: grid; gap: 4px; }
.db-tables table { margin-top: 8px; }
.db-tables td.num, .db-tables th.num { text-align: right; }

/* live vote settings: the reactions the phones offer, a grid of emojis to tick */
.live-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.live-emojis legend { margin-bottom: 6px; }
.live-emoji { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius); cursor: pointer; }
.live-emoji:hover { background: var(--surface-2); }
.live-emoji-face { font-size: 1.55rem; line-height: 1; }

/* live votes: the earlier runs on Präsentieren, each with its delete button */
.live-runs-old { list-style: none; margin: 10px 0; padding: 0; }
.live-runs-old li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); }

/* "Nach Gruppen aufteilen" on the results page (app/compare.py) */
.res-group-pick { margin: 0; max-width: 100%; min-width: 0; }
.res-group-pick label { display: flex; align-items: center; gap: 10px; margin: 0; max-width: 100%; }
.res-group-pick label > select { min-width: 0; max-width: 100%; }  /* a long name of a group must not widen a phone's page (W79) */
/* W73: the names of the choices in one column, so "Nach Gruppen aufteilen" and "Nur zeigen" start their lists alike */
.res-group-pick label > .label-title { flex: 0 0 11.5em; }
.res-only-groups { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0 calc(11.5em + 10px); }
@media (max-width: 600px) { .res-group-pick label { flex-wrap: wrap; } .res-group-pick label > .label-title { flex-basis: 100%; } .res-only-groups { margin-left: 0; } }
.res-group-note { flex-basis: 100%; }
.res-compare { margin-top: 12px; }
.res-cross td.num, .res-cross th.num { white-space: nowrap; }
.res-cross th .lc-key, .res-group-shares .lc-key { margin-right: 5px; }
/* "Unterschiede auf einen Blick" (S6): every test of the comparison in one table, the largest effect first */
.cmp-overview td:nth-child(2), .cmp-overview td.num { white-space: nowrap; }
.cmp-overview th:nth-child(2), .cmp-overview td:nth-child(2) { text-align: left; }
.cmp-overview td:first-child { min-width: 16em; }
.cmp-overview th:last-child, .cmp-overview td.cmp-verdict { text-align: left; }
.cmp-overview td.cmp-verdict { white-space: nowrap; font-weight: 550; }
.cmp-overview td.cmp-verdict-none { font-weight: 400; color: var(--muted); }  /* the word of a row (X53): no difference stays quiet */
/* the weighting on the page "Quoten": the attributes under their choice */
.weighting-sub { display: flex; flex-direction: column; gap: 4px; margin-left: 26px; }
.live-big-url { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }  /* the copy button right behind the link */
/* a long request on its way (data-busy-form): a running bar and a note beside the buttons */
.busy-note { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.95rem; }
.busy-note[hidden] { display: none; }
.busy-note progress { width: 120px; height: 8px; accent-color: var(--accent); }

/* Interview guides (app/interview.py, concept interviewleitfaden-konzept.md) */
.badge-interview { background: var(--interview-soft); color: var(--interview); font-weight: 600; }
.guide-total { margin: 0; }
.guide-block-tools { display: inline-flex; gap: 2px; }
.guide-part-short, .guide-part-post { background: var(--surface-2); }
.guide-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guide-list { min-width: 0; margin: 0; }
.guide-list .list-table:where(.is-edit) { width: 100%; }
.guide-list .list-table:where(.is-edit) input { width: 100%; }
@media (max-width: 1100px) { .guide-lists { grid-template-columns: 1fr; } }
.interview-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.interview-template { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; }
.interview-template:has(input:checked) { border-color: var(--interview); box-shadow: inset 3px 0 0 var(--interview); }
.interview-template span { display: flex; flex-direction: column; gap: 2px; }
.export-rows { list-style: none; margin: 0 0 16px; padding: 0; }
.export-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); }
@media (max-width: 600px) { .export-row { flex-wrap: wrap; gap: 8px; } }
.export-row:first-child { border-top: 0; }

/* the interview view (interview/conduct.html, interview.js): a page of its own for a tablet or laptop */
.iv-body { margin: 0; background: var(--bg); }
.iv { display: flex; flex-direction: column; min-height: 100vh; }
.iv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 5; }
.iv-title { font-size: 1.05rem; }
.iv-spacer { flex: 1; }
.iv-clock { font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.iv-bar .button.is-paused, .iv-bar .button.is-armed { border-color: var(--interview); color: var(--interview); }
.iv-main { flex: 1; display: grid; grid-template-columns: 290px 1fr; }
.iv-nav { border-right: 1px solid var(--border); padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.iv-nav-block { border-radius: 8px; padding: 4px; }
.iv-nav-block.is-current { background: var(--interview-soft); }
.iv-nav-head { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; font: inherit; font-weight: 600;
  background: none; border: 0; text-align: left; color: inherit; border-radius: 6px; }
button.iv-nav-head { cursor: pointer; }
button.iv-nav-head:hover, .iv-nav-steps button:hover { background: var(--surface-3); }
.iv-nav-time { font-weight: 400; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-nav-steps { list-style: none; margin: 0; padding: 0 0 0 6px; }
.iv-nav-steps button, .iv-nav-steps span[data-iv-mark] { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 4px 6px;
  font: inherit; font-size: 0.85rem; background: none; border: 0; text-align: left; color: inherit; border-radius: 6px; }
.iv-nav-steps button { cursor: pointer; }
.iv-nav-steps [aria-current] { font-weight: 600; }
.iv-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.is-done > .iv-dot { background: var(--ok); border-color: var(--ok); }
.is-skipped > .iv-dot { background: var(--surface-3); border-style: dashed; }
.iv-core-mark { font-size: 0.75rem; font-weight: 700; color: var(--interview); }
.iv-jump summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.iv-jump .button { display: block; width: 100%; margin-top: 6px; text-align: left; }
.iv-stage { padding: 22px 28px; max-width: 1100px; width: 100%; }
.iv-where { margin: 0 0 6px; }
.iv-prompt { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.5; background: var(--surface); border-left: 4px solid var(--interview);
  padding: 14px 18px; border-radius: 6px; }
.iv-prompt p { margin: 0 0 0.6em; }
.iv-prompt p:last-child { margin: 0; }
.iv-state { margin: 14px 0 6px; }
.iv-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 10px; }
.iv-col h3 { font-size: 0.95rem; margin: 0 0 6px; }
.iv-tick { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
.iv-tick input { width: 20px; height: 20px; flex: none; }
.iv-keep { list-style: none; margin: 0; padding: 0; color: var(--muted); font-style: italic; }
.iv-keep li { padding: 4px 0; }
.iv-hint { margin-top: 16px; padding: 8px 12px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 0.95rem; }
.iv-form { background: var(--surface); border-radius: var(--radius); padding: 14px 18px; }
.iv-content { background: var(--surface); border-radius: var(--radius); padding: 14px 18px; }
.iv-steps-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.iv-sources { margin-top: 18px; }
@media (max-width: 760px) {
  .iv-main { grid-template-columns: 1fr; }
  .iv-nav { border-right: 0; border-bottom: 1px solid var(--border); }
  .iv-stage { padding: 16px; }
  .iv-note { display: none; }
}
@media print {
  .iv-bar, .iv-nav, .iv-steps-nav, .iv-state { display: none; }
  .iv-main { display: block; }
  .iv-step[hidden] { display: block !important; }
  .iv-step { break-after: page; }
}

/* the guide to print or save as PDF (interview/print.html): white paper, the table of the Word guide */
.export-row-buttons { display: inline-flex; gap: 6px; flex: none; }
body.guide-print { background: #fff; color: #1c1c1a; margin: 0; }
.guide-print-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; border-bottom: 1px solid #e3e2dc; }
.guide-print-page { max-width: 1050px; margin: 0 auto; padding: 24px; font-size: 0.95rem; }
.guide-print-page h1 { font-size: 1.55rem; margin: 0 0 6px; }
.guide-print-page h2 { font-size: 1.05rem; margin: 22px 0 8px; break-after: avoid; }
.guide-print-note, .guide-print-hint, .guide-print-min { color: #66665f; font-size: 0.85rem; }
.guide-print-hint { font-style: italic; margin-top: 6px; }
.guide-print-table { width: 100%; border-collapse: collapse; margin: 0 0 10px; table-layout: fixed; }
.guide-print-table th, .guide-print-table td { border: 1px solid #b8b6ae; padding: 6px 8px; text-align: left; vertical-align: top; }
.guide-print-table th { background: #efeee9; font-size: 0.85rem; }
.guide-print-table th:nth-child(1) { width: 36%; }
.guide-print-table th:nth-child(2) { width: 24%; }
.guide-print-table th:nth-child(3), .guide-print-table th:nth-child(4) { width: 20%; }
.guide-print-table tr { break-inside: avoid; }
.guide-print-item { margin: 8px 0; }
.guide-print-sources { font-size: 0.85rem; color: #66665f; padding-left: 1.2em; }
@media print {
  .guide-print-bar { display: none; }
  .guide-print-page { padding: 0; max-width: none; }
  @page { size: A4 landscape; margin: 14mm; }
}

/* answers of earlier questions in the element editor: folded at first */
.pipe-fold { flex-basis: 100%; }
.pipe-fold > summary { cursor: pointer; list-style-position: inside; }
.pipe-fold[open] > summary { margin-bottom: 6px; }
.pipe-fold .chip { margin: 0 4px 4px 0; }
/* a word to type before what nothing brings back (data-confirm-type; Ralf, 2026-10-05, instead of the safety latch) */
.confirm-type { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; font-size: 0.85rem; }
.confirm-type[hidden] { display: none; }
.confirm-type input { width: 100%; box-sizing: border-box; }
/* the AI assistant of an interview guide (app/interview_ai.py) */
.guide-ai { flex-wrap: wrap; align-items: center; }
.guide-ai-icon { color: var(--ai); }
.ai-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ai-step { padding: 4px 12px; border-radius: var(--radius-tag); font-size: 0.85rem; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.ai-step.is-current { background: var(--ai-soft); color: var(--ai); box-shadow: inset 0 0 0 1px var(--ai-border); }
.ai-step.is-done { background: var(--ok-soft); color: var(--ok); }
.ai-develop .row { flex-wrap: wrap; align-items: center; }
.ai-develop .spacer, .ai-review-row + .row .spacer { flex: 1; }
.ai-suggest { align-items: flex-start; }
.ai-checks { display: flex; flex-direction: column; gap: 8px; }
.ai-check { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.ai-check-q span { display: block; }
.ai-check-c { display: flex; flex-direction: column; gap: 4px; }
.ai-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px 14px; margin: 0; }
.ai-group legend { display: flex; gap: 10px; align-items: center; padding: 0 6px; }
.ai-group-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.ai-group-row:first-of-type { border-top: 0; }
.ai-suggest-row { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.ai-suggest-row input[type=text], .ai-suggest-row input:not([type]) { flex: 1; }
.ai-review-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .ai-check { grid-template-columns: 1fr; } }
/* loop: the source at the top of the page, table or factors (editor/_loop_source.html) */
.loop-source { display: flex; flex-direction: column; gap: 8px; }
.loop-source-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.loop-source-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--fg); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.loop-source-item:hover { border-color: var(--accent); }
.loop-source-item.is-current { border-color: var(--accent); background: var(--accent-soft); cursor: default; }
.loop-source-item strong { display: block; }
.loop-source-item .hint { display: block; margin-top: 2px; }

/* stored interviews (experimental "Interviews erheben", app/interview_data.py) */
.iv-label { font-size: 1.05rem; }
.iv-saved.is-ok { color: var(--ok); }
.iv-saved.is-busy { color: var(--muted); }
.iv-saved.is-error { color: var(--danger); font-weight: 600; }
.iv-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.iv-notes textarea { width: 100%; }
.iv-marks ul { margin: 8px 0 0; }
.iv-marks li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.iv-marks li b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.iv-marks li input { flex: 1; min-width: 0; }
@media (max-width: 760px) { .iv-notes { grid-template-columns: 1fr; } }
.list-table .row-actions { white-space: nowrap; text-align: right; }
.erase-code-box { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 14px 18px; margin: 14px 0; }
.erase-code code { font-size: 1.55rem; letter-spacing: 0.08em; }

/* evaluation of the stored interviews (interview/results.html) */
.results-head { align-items: center; flex-wrap: wrap; }
.results-head .spacer { flex: 1; }
.coverage-table td.center, .coverage-table th.center { text-align: center; }
.coverage-block td { background: var(--surface-2); font-weight: 600; color: var(--muted); font-size: 0.85rem; }
.coverage-asked { color: var(--ok); }
.coverage-spontaneous { color: var(--warn); }
.coverage-skipped, .coverage-none { color: var(--muted); }
.coverage-missing { background: var(--warn-soft); }
.coverage-aspects { font-size: 0.85rem; }
.coverage-aspect { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; white-space: nowrap; }
.coverage-bar { display: inline-block; height: 7px; border-radius: 4px; background: var(--accent); }
.notes-fold { border-top: 1px solid var(--border); padding: 8px 0; }
.notes-fold summary { cursor: pointer; }
.notes-entry { padding: 6px 0 6px 14px; }

/* the recording of an interview (app/interview_audio.py, interview.js) */
.iv-rec { display: inline-flex; align-items: center; gap: 6px; }
.iv-rec-btn { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.iv-rec.is-recording .iv-rec-btn { animation: live-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .iv-rec.is-recording .iv-rec-btn { animation: none; } }
.iv-remote { position: relative; }
.iv-remote > summary { list-style: none; cursor: pointer; }
.iv-remote > summary::-webkit-details-marker { display: none; }
.iv-remote-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); }
.iv-remote-panel img { display: block; margin: 6px auto; background: #fff; border-radius: 6px; }
.iv-remote-panel a { word-break: break-all; }
.iv-remote-state.is-recording { color: var(--danger); font-weight: 600; }
/* a recording in trouble (an error, a microphone gone, no piece for 15 s; data audit I-20) */
.iv-rec.is-trouble [data-iv-rec-state], .iv-remote-state.is-trouble, .iv-recorder.is-trouble [data-rec-state] { color: var(--danger); font-weight: 600; }
.iv-recorder { max-width: 420px; margin: 0 auto; padding: 24px 16px; text-align: center; }
.iv-recorder-time { font-size: 3rem; font-variant-numeric: tabular-nums; margin: 16px 0; }
.iv-recorder-buttons { justify-content: center; gap: 10px; }
.iv-recorder-buttons .button { font-size: 1.05rem; padding: 12px 20px; }
.iv-mic { max-width: 180px; height: 32px; font-size: 0.85rem; }
.iv-level { display: inline-block; width: 48px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; vertical-align: middle; }
.iv-level > span { display: block; height: 100%; width: 0; background: var(--ok); transition: width 80ms linear; }
.iv-level.is-loud > span { background: var(--danger); }
.iv-level[hidden] { display: none; }
.iv-level-wide { display: block; width: 100%; height: 12px; margin: 12px 0; }
.iv-recorder-mic { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 14px; }
.iv-recorder-mic select { flex: 1; min-width: 0; height: 36px; }
.iv-audio summary { cursor: pointer; }
.iv-audio-part { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.iv-audio-part audio { height: 32px; max-width: 280px; }

/* transcripts (app/interview_transcribe.py) */
.iv-transcript { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.danger-text { color: var(--danger); }
.transcript-text { width: 100%; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.6; }

/* search over the transcripts (interview/search.html) */
.kwic-text mark { background: var(--warn-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
.kwic td { vertical-align: top; }
.word-freq { display: flex; flex-wrap: wrap; gap: 6px; }
.word-freq small { color: var(--muted); margin-left: 3px; }

/* case summaries of an interview guide (interview/summaries.html) */
.summary-table td { vertical-align: top; min-width: 220px; }
.summary-table textarea { width: 100%; min-height: 90px; resize: vertical; font: inherit; }
.summary-note { font-size: 0.85em; color: var(--muted); margin-top: 4px; }

/* AInstein (app/ainstein.py): the brain button left of the work areas, the canvas beside the conversation */
.site-header .ainstein-btn { color: var(--ai); }
.site-header .ainstein-btn:hover, .site-header .ainstein-btn[aria-current="page"] { background: var(--ai-soft); color: var(--ai); }
.ainstein-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
/* the conversation leads (left, wider, framed in the colour of the AI); the canvas beside it is quieter */
.ainstein-layout { display: grid; grid-template-columns: minmax(400px, 1.15fr) minmax(0, 1fr); gap: 18px; }
.ainstein-canvas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ainstein-box { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color 0.2s, box-shadow 0.2s; }
/* a box AInstein has filled keeps a purple frame; an empty one is dashed: what is still open shows at a glance */
.ainstein-box { border-width: 2px; }  /* all boxes, so filling one does not shift its text */
.ainstein-box.is-filled { border-color: var(--ai); background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai) 25%, transparent); }
.ainstein-box:not(.is-filled) { border-style: dashed; }
.ainstein-box.is-focus { border-color: var(--ai-border); box-shadow: 0 0 0 3px var(--ai-soft); }
.ainstein-box h2 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.ainstein-box .hint { font-size: 0.85rem; }
.ainstein-box textarea { font-size: 0.85rem; }
.ainstein-box .hint { margin: 0; }
.ainstein-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3);
  font-size: 0.85rem; color: var(--muted); }
.ainstein-box textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px; }
.ainstein-chat { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 230px);
  padding: 18px; background: var(--surface); border: 2px solid var(--ai-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-pop); }
.ainstein-chat-head { display: flex; align-items: center; gap: 8px; color: var(--ai); font-size: 1.05rem; }
.ainstein-chat-head strong { color: var(--fg); }
.ainstein-messages { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.ainstein-msg { padding: 10px 14px; border-radius: var(--radius-panel); font-size: 1.05rem; line-height: 1.5; max-width: 90%; overflow-wrap: anywhere; }
.ainstein-msg p { margin: 0 0 6px; white-space: pre-wrap; }
.ainstein-msg p:last-child, .ainstein-msg ul:last-child { margin-bottom: 0; }
.ainstein-msg ul { margin: 0 0 6px; padding-left: 18px; }
.ainstein-msg-ai { align-self: flex-start; background: var(--ai-soft); border: 1px solid var(--ai-border); }
.ainstein-msg-user { align-self: flex-end; background: var(--accent-soft); }
.ainstein-msg.is-pending { color: var(--muted); }
.ainstein-msg.is-error { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.ainstein-send { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ainstein-send textarea { width: 100%; box-sizing: border-box; resize: vertical; font-size: 1.05rem; border-color: var(--ai-border); }
.ainstein-send textarea:focus { border-color: var(--ai); outline: 2px solid var(--ai); outline-offset: 1px; }
.ainstein-note { margin: 0; font-size: 0.75rem; line-height: 1.35; }
.ainstein-send-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ainstein-send-foot .button { flex: none; }
.ainstein-plan { display: flex; flex-direction: column; gap: 10px; }
.ainstein-plan h3 { margin: 8px 0 0; font-size: 0.95rem; }
.ainstein-table { width: 100%; border-collapse: collapse; }
.ainstein-table th { text-align: left; font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 4px 6px; }
.ainstein-table td { padding: 4px 6px; vertical-align: top; }
.ainstein-table textarea, .ainstein-table input:not([type="checkbox"]), .ainstein-table select { width: 100%; box-sizing: border-box; min-width: 110px; }
.ainstein-table input[type="number"] { min-width: 64px; }
.ainstein-table td:nth-child(2) textarea { min-width: 260px; }
@media (max-width: 1000px) {
  .ainstein-layout { grid-template-columns: minmax(0, 1fr); }
  .ainstein-chat { position: static; height: auto; min-height: 0; }
  .ainstein-messages { max-height: 60vh; }
}

/* Windows contrast themes (forced colours) drop shadows and backgrounds: the focus and chosen states keep a
   system-coloured line (WCAG 2.4.7, 1.4.11; UI audit 2026-10-04, R67) */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
  .survey-tabs a[aria-current="page"], .admin-tabs a[aria-current="page"] { border-bottom: 3px solid Highlight; }
  .segmented input:checked + span, .segmented a[aria-current], .lang-switch a.active, .lang-switch a[aria-current] {
    border: 2px solid Highlight; color: Highlight; }
}

/* "Zum Inhalt": hidden until it gets the keyboard focus (WCAG 2.4.1, UI audit R76) */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }  /* the target of the skip link, not a control */
/* tabs sit in a row that scrolls sideways (overflow cuts outside lines): their focus line goes inside */
.survey-tabs a:focus-visible, .admin-tabs a:focus-visible, .cj-tabs [role="tab"]:focus-visible { outline-offset: -2px; }
/* Phones: one column without a minimum width (the 360 px of the wide grid ran out of the screen), the questionnaire
   first, then adding and the design check (WCAG 1.4.10; UI audit 2026-10-04, R8) */
.block-palette-btn { display: none; }  /* "+ Element" under a block: phones only (X29) */
@media (max-width: 800px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .editor-grid > .canvas { order: 0; min-width: 0; }
  .editor-grid > .sidebar-left { order: 1; }
  .editor-grid > .sidebar-right { order: 2; }
  .editor-grid > .sidebar-resizer { display: none; }
  .block-palette-btn { display: inline-flex; margin: 4px 12px 12px; }
  .canvas .sidebar-left { margin: 12px 0 20px; }  /* shown under a block by "+ Element" (X29) */
}

/* Datenerhebung › Testen: sub-heads inside a group and the pretest link with its QR code (UI audit R11) */
.settings-body .sub-head { margin: 18px 0 8px; font-size: 0.95rem; }
.pretest-link { display: grid; gap: 8px; margin-bottom: 10px; max-width: 720px; }
.pretest-qr { width: 160px; margin: 0; }
.start-list { margin: 0 0 12px; display: grid; gap: 4px; }
.start-list li { display: flex; align-items: baseline; gap: 6px; }
.start-list li .icon { align-self: center; }
.start-list .is-ok .icon { color: var(--ok); }
.start-list .is-open .icon { color: var(--warn); }
.start-form .button-row > [form="archive-form"] { margin-left: auto; }  /* archiving apart from the start (R10) */
.basis .results-filter { gap: 6px; }
.basis-line { margin: 6px 0 0; }
.basis-line .label-title { margin-right: 6px; }
/* Ergebnisse: one panel "Grundlage und Ansicht" (UI/UX audit 2026-10-07, S6): the state in one sentence, then what is
   saved for the survey and what changes this view only, side by side as two regions, one under the other on a phone */
.res-state { margin: 0 0 2px; font-size: 1.05rem; }
.res-state .badge { vertical-align: 1px; }
.res-state-more { margin: 0 0 12px; }
.basis-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0 0 4px; }
.basis-zone { min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.basis-zone-view { background: var(--surface); border-style: dashed; border-color: var(--border-strong); }
.basis-zone-head { margin: 0 0 8px; font-size: 0.95rem; font-weight: 650; }
.basis-zone-head .hint { display: block; font-weight: 400; margin: 2px 0 0; }
.basis-zone .row-fields { gap: 6px 16px; }
/* the view: one form, the names of the lists in one column (W73), the boxes as in the zone beside it */
.res-view { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.res-view label.check { display: flex; margin: 0; }
.res-view-row { display: flex; align-items: center; gap: 10px; margin: 0; max-width: 100%; }
.res-view-row > .label-title { flex: 0 0 11.5em; }
.res-view-row > select { flex: 1 1 auto; min-width: 0; max-width: 100%; }  /* a long name must not widen a phone's page (W79) */
.res-view .res-only-groups, .res-view .res-only-hint { margin: -4px 0 0 calc(11.5em + 10px); }
@media (max-width: 600px) {
  .res-view-row { flex-wrap: wrap; } .res-view-row > .label-title { flex-basis: 100%; }
  .res-view .res-only-groups, .res-view .res-only-hint { margin-left: 0; }
}
.basis-zone .res-group-pick { margin-top: 10px; }
.res-basis > .res-group-note { margin-top: 12px; }
/* "Alle zuklappen" at the start of the sections, not a band of its own: one small row, on the right */
.res-fold-row { display: flex; justify-content: flex-end; margin: 0; }
.quota-summary { display: grid; gap: 6px; margin: 0 0 8px; }
.quota-summary li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quota-summary .quota-bar { width: 160px; }
.dash-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; }
.dash-filter .dash-groups { margin: 0; }
.dash-group-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.dash-group-choice select { height: 32px; padding: 2px 8px; }
/* filters left, search and sort right in the same row (no extra band) */
.dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; }
.dash-toolbar .dash-filter { margin: 0; }
.dash-find { display: flex; gap: 8px; margin-left: auto; }
.dash-find[hidden], .card-list > [hidden] { display: none; }
.dash-find input { width: 220px; max-width: 100%; }
/* narrow: search and sort may wrap, the sort field shrinks with the row and keeps the common edge (X78) */
@media (max-width: 600px) { .dash-find { margin-left: 0; width: 100%; flex-wrap: wrap; } .dash-find input { flex: 1 1 180px; width: auto; min-width: 0; }
  .dash-find select { flex: 1 1 140px; min-width: 0; max-width: 100%; } }
/* one mark for experimental parts, wherever they show (UI audit 2026-10-04, R25) */
.badge-exp { background: var(--ai-soft); color: var(--ai); }
/* the interview view without a stored interview: a band, not a whisper (UI audit R20) */
.iv-trial { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 4px 10px; border-radius: 8px;
  background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--fg); }

/* Landing page: citations in the text (APA) and the references below, small and closed as on every page (W104) */
.landing-features .cite { color: var(--accent); }
.landing-references { margin: 8px 0 24px; font-size: 0.75rem; color: var(--muted); }
.landing-references h2 { font-size: 0.85rem; margin: 0 0 6px; color: var(--fg); }
.landing-references ul { list-style: none; margin: 6px 0 0; padding: 8px 12px; display: grid; gap: 4px; }
.landing-references li { padding-left: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }  /* hanging indent, as in APA */
.landing-references li:target { color: var(--fg); background: var(--accent-soft); border-radius: 4px; }

/* Landing page: a screenshot over the page (app.js, carousel); a click anywhere closes it */
.shot-view { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 24px; box-sizing: border-box; border: 0;
  background: transparent; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: zoom-out; }
.shot-view[open] { display: flex; }
.shot-view::backdrop { background: rgba(20, 20, 18, 0.88); }
.shot-view img { max-width: 100%; max-height: calc(100% - 48px); object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); background: #fff; }
.shot-view p { margin: 0; color: #f2f2ee; font-size: 1.05rem; text-align: center; }
.shot-view-close { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 26px; line-height: 1; }
.shot-view-close:hover, .shot-view-close:focus-visible { background: rgba(255, 255, 255, 0.28); }

/* Lernhilfen (app/learning.py, templates/_learn.html): a quiet fold at a decision, a small ? at a statistic */
.learn-why { margin: 4px 0 8px; font-size: 0.85rem; color: var(--muted); }
.learn-why > summary { cursor: pointer; color: var(--accent); font-weight: 600; width: fit-content; }
.learn-why > p { margin: 6px 0 4px; color: var(--fg); max-width: 72ch; }
.learn-sources { margin: 0; padding: 0; list-style: none; font-size: 0.75rem; }
.learn-sources > li { margin: 2px 0; padding-left: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }
.learn-term { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 3px; border-radius: 50%;
  border: 1px solid var(--border-strong); font-size: 0.75rem; font-weight: 600; color: var(--muted); text-decoration: none; vertical-align: 1px; }
.learn-term:hover, .learn-term[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
button.learn-term { padding: 0; background: none; cursor: pointer; line-height: 1; font-family: inherit; }
.learn-pop { position: absolute; z-index: 60; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: 0.85rem; text-align: left; }
.learn-pop p { margin: 4px 0 6px; }
.learn-pop[hidden] { display: none; }
.learn-pop-example { color: var(--muted); }
.learn-hide { margin-top: 4px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.75rem;
  font-weight: 600; cursor: pointer; }
.learn-hide:hover, .learn-hide:focus-visible { color: var(--accent); }
.learn-hidden-note { margin: 4px 0 8px; color: var(--muted); }  /* „Erklärung ausgeblendet · Rückgängig“ (W13) */
.learn-glossary dt { margin-top: 18px; font-size: 1.05rem; }
.learn-glossary dt:first-child { margin-top: 0; }
.learn-glossary dd { margin: 4px 0 0; }
.learn-glossary dd p { margin: 0 0 6px; }

/* the study plan (app/study_plan.py): hypotheses as cards with their fields, the line above questionnaire and results */
.plan-hyps { display: flex; flex-direction: column; gap: 12px; }
.plan-hyps > [data-row-add] { align-self: flex-start; }
.plan-hyp { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); }
.plan-hyp-head { display: flex; align-items: center; gap: 10px; }
.plan-hyp-head > input { flex: 1 1 auto; min-width: 0; }
.plan-hyp-n { font-weight: 700; min-width: 2.2em; }
/* on the phone the sentence of the hypothesis gets a line of its own under "H1 ×" (UI/UX audit 2026-10-09, X9) */
@media (max-width: 600px) {
  .plan-hyp-head { flex-wrap: wrap; }
  .plan-hyp-head > .plan-hyp-n { margin-right: auto; }
  .plan-hyp-head > input { order: 3; flex-basis: 100%; }
}
.plan-hyp-fields { margin-top: 10px; gap: 10px 16px; align-items: flex-start; }
/* wide enough for "TB · Kurzskala Technikbereitschaft" and "Unterschied zwischen Gruppen" (X9): the fields wrap
   into two lines rather than cut the choice */
.plan-hyp-fields > label { flex: 1 1 250px; min-width: 0; }
.plan-hyp-fields select { width: 100%; }
.plan-hyp-fields .hint { display: block; font-weight: 400; }
.plan-hyp-fields > .plan-method { flex: 2 1 260px; }
.plan-hyp-fields > label:first-child { flex-basis: 260px; }  /* "Unterschied zwischen Gruppen" in full (W11, X9) */
.plan-hyp-fields > label[data-plan-dir] { flex: 1 1 150px; }
.plan-hyp-fields > label:has(> span[data-role]) { flex: 2 1 320px; }  /* the names of the scales in full (X9) */
.plan-hyp-fields > .plan-later { flex: 2 1 360px; margin: 0; align-self: center; }  /* wizard before the questionnaire (W4) */
/* the groups of a group comparison, "nur diese Gruppen vergleichen" (W1) */
.plan-groups { flex: 1 1 100%; }
.plan-groups:empty { display: none; }
.plan-group-boxes { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; border: 0; padding: 0; margin: 0; min-width: 0; }
.plan-group-boxes > legend { float: left; width: 100%; margin-bottom: 4px; font-weight: 600; }
.plan-group-boxes > legend .hint { display: inline; }
.plan-groups-note { margin: 6px 0 0; display: flex; gap: 6px; align-items: flex-start; color: var(--warn); }
.plan-error { margin: 8px 0 0; color: var(--danger); font-size: 0.85rem; font-weight: 600; }
.plan-hyp select.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); }
.plan-finder-take { margin-left: 6px; }
/* power analysis of a hypothesis and of the plan (PA1, concept poweranalyse-konzept.md) */
.plan-hyp-power { padding-top: 10px; border-top: 1px dashed var(--border); }
.plan-hyp-power .wide-field { flex: 2 1 320px; }
.plan-hyp-power input.narrow { max-width: 8em; }
.plan-need { flex: 1 1 100%; margin: 0; }
.plan-need .hint { display: inline; }
.plan-power { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.plan-power:empty, .plan-power:not(:has(p)) { display: none; }
.plan-power p { margin: 0; }
.sample-reserve { display: block; margin-top: 2px; font-size: 0.95rem; font-weight: 600; }  /* target apart from the power analysis (X5) */
.plan-power p + p { margin-top: 6px; }
.plan-power [data-plan-take-target] { margin-left: 8px; }
.plan-holm { margin: 4px 0 0; }
.plan-holm .hint { display: block; margin-left: 26px; }
/* the research goals as ticks, several possible (Ralf, 2026-10-06) */
.plan-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 18px; margin: 0; padding: 0; border: 0; }
.plan-goals > legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
/* the element editor: one row per hypothesis with both roles (UI/UX audit 2026-10-05, V3) */
.plan-assign-rows { display: flex; flex-direction: column; gap: 8px; }
.plan-assign-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.plan-assign-text { flex: 1 1 260px; min-width: 0; }
.plan-assign-row .field-error { flex-basis: 100%; color: var(--danger); font-size: 0.85rem; font-weight: 600; }
.plan-deviations ul { margin: 4px 0 0; padding-left: 18px; }
.hyp-vars { overflow-wrap: anywhere; }
/* the data collection against the power analysis (PA4) */
.power-progress { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.power-progress p { margin: 6px 0; }
.power-progress-head { margin-top: 0 !important; }
.power-bar { position: relative; display: flex; height: 16px; margin: 10px 0 6px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.power-bar > span:first-child { border-radius: 8px 0 0 8px; }
.power-bar-usable { background: var(--accent); }
.power-bar-marked { background: var(--warn-bar); }
.power-bar-need { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--fg); }
.power-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.power-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
i.power-key.power-bar-need { position: static; width: 0; height: 12px; border-radius: 0; }
.power-rows { margin: 6px 0; padding-left: 18px; }
/* what the test of a hypothesis could detect (PA2) */
.hyp-sensitivity { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); background: var(--surface-2); }
.hyp-sensitivity.is-short { border-left-color: var(--warn-bar); background: var(--warn-soft); }
.hyp-sensitivity .label-title { margin-right: 4px; }
.plan-line { margin: 0 0 12px; }
.template-list li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
/* the buttons in one column at the right edge, whatever the length of the text (UI/UX audit 2026-10-05, V25) */
.template-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto; align-items: end; gap: 16px; width: 100%; }
.template-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }  /* the title before creating it (W16) */
.template-title input { width: 100%; }
@media (max-width: 700px) { .template-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .template-row > .button { justify-self: start; } }
/* the new questionnaire: three ways to begin (V25) */
.start-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 18px; }
.start-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-panel, 12px); background: var(--surface); color: inherit; font-weight: 400; }
.start-card strong { color: var(--accent); }
.start-card:hover { border-color: var(--accent); }
.start-card.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 700px) { .start-cards { grid-template-columns: minmax(0, 1fr); } }
/* results per hypothesis (app/hypotheses.py) */
.hyp-results { margin: 0; padding: 0; list-style: none; }
.hyp-result + .hyp-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.hyp-result p { margin: 0 0 6px; }
.hyp-verdict { font-weight: 600; }
.hyp-verdict.is-ok { color: var(--ok); }
.hyp-verdict.is-bad { color: var(--caution); }
.hyp-verdict.is-open { color: var(--muted); }
.hyp-apa code { font-family: inherit; background: var(--surface-3); padding: 2px 6px; border-radius: var(--radius-tag); }
/* the pooled analysis for the researchers' own data protection information (surveys/_pool_copy.html) */
.pool-copy { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; }
.pool-copy p { margin: 0 0 6px; }
.pool-copy p:last-child { margin-bottom: 0; }
.pool-copy code { display: block; font-family: inherit; white-space: normal; word-break: normal; overflow-wrap: break-word; background: var(--surface-3); padding: 6px 8px; border-radius: var(--radius-tag); }
.template-text { flex: 1 1 auto; min-width: 0; }
.ainstein-plan-head { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
.ainstein-plan-head label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.ainstein-plan-head .ainstein-wide { grid-column: 1 / -1; }
.ainstein-scale { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ainstein-scale legend { font-weight: 600; padding: 0 6px; }
.ainstein-items td:first-child textarea { min-width: 320px; }
.ainstein-scale-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* AInstein: the part of the page the AI is working on (ainstein.js): a purple glow and a sheen that runs across it,
   like the glint of an AI button (.ai-busy); without motion it only glows */
.is-ai-working { position: relative; border-color: var(--ai-border) !important; border-radius: 12px; cursor: progress;
  box-shadow: 0 0 0 3px var(--ai-soft), 0 0 22px color-mix(in srgb, var(--ai) 22%, transparent); transition: box-shadow 0.3s; }
.is-ai-working::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--ai) 9%, transparent) 42%,
    color-mix(in srgb, var(--ai) 18%, transparent) 50%, color-mix(in srgb, var(--ai) 9%, transparent) 58%, transparent 75%);
  background-size: 250% 100%; animation: ai-sweep 1.8s ease-in-out infinite; }
.is-ai-working > * { transition: opacity 0.3s; }
.is-ai-working > :not(.page-head):not(legend) { opacity: 0.55; }
@keyframes ai-sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .is-ai-working::after { animation: none; background: color-mix(in srgb, var(--ai) 6%, transparent); } }
/* AInstein thinks (ainstein.js): the words shimmer in the colour of the AI, three dots dance; still without motion */
.ainstein-thinking { display: inline-flex; align-items: baseline; gap: 6px; font-style: normal; }
.ainstein-thinking-text { font-weight: 600; color: var(--ai);
  background: linear-gradient(100deg, var(--ai) 30%, color-mix(in srgb, var(--ai) 35%, var(--surface)) 50%, var(--ai) 70%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ai-sweep 1.8s ease-in-out infinite; }
.ainstein-dots { display: inline-flex; gap: 4px; }
.ainstein-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai); opacity: 0.4;
  animation: ainstein-dot 1.2s ease-in-out infinite; }
.ainstein-dots i:nth-child(2) { animation-delay: 0.15s; }
.ainstein-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ainstein-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
.ainstein-msg.is-pending { font-style: normal; }
.ainstein-chat-head .ainstein-sound { color: var(--muted); }
.ainstein-chat-head .ainstein-sound[aria-pressed="true"] { color: var(--ai); }
.ainstein-chat-head .ainstein-sound { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .ainstein-thinking-text { animation: none; -webkit-text-fill-color: var(--ai); background: none; }
  .ainstein-dots i { animation: none; opacity: 0.7; }
}
/* the technical reason of a failed AI request, on hover (AInstein) */
.ai-detail { cursor: help; color: var(--ai); font-size: 0.85rem; font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: 1px dotted currentColor; }
/* HB: the convergence note with the button for a longer run inside it */
.hb-conv-note p { margin: 0; }
.hb-conv-note .res-run-hb { margin: 8px 0 0; }
/* HB block while hb.js sends a button or fetches it anew: as the segments (.lc-busy) */
.hb-part.hb-busy > :not(.res-group-head):not(.lc-loading):not(.hb-status) { opacity: 0.55; pointer-events: none; }

.ainstein-comment { border-left: 3px solid var(--border-strong); padding: 4px 0 4px 12px; margin: 10px 0; }
.ainstein-comment .inline-form { display: inline; margin: 0; }
.ainstein-comment-text { margin: 4px 0 0; white-space: pre-wrap; }
.ainstein-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.ainstein-share .inline-form { margin: 0; }
fieldset.ainstein-plan.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
.ainstein-needs { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--surface-2); }
.ainstein-needs ul { margin: 6px 0 0; padding-left: 18px; }
/* AInstein as a wizard (ainstein/_head.html): the steps under the name, the way on at the end of each step */
.ainstein-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px; }
.ainstein-steps a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); color: var(--fg); text-decoration: none; font-size: 0.95rem; }
.ainstein-steps a[aria-current="step"] { border-color: var(--ai-border); background: var(--ai-soft); color: var(--ai); font-weight: 600; }
.ainstein-steps a[aria-current="step"] .ainstein-num { background: var(--ai); color: #fff; }
.ainstein-step-nav { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.ainstein-step-nav-end { justify-content: flex-end; }
/* the canvas as cards AInstein writes into; a box it just changed lights up and says so for a moment */
.ainstein-box-text { white-space: pre-wrap; font-size: 0.85rem; line-height: 1.45; overflow-wrap: anywhere; }
.ainstein-updated-label { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--ai); opacity: 0; }
.ainstein-box.is-updated { animation: ainstein-updated 5s ease-out; }
.ainstein-box.is-updated .ainstein-updated-label { animation: ainstein-label 5s ease-out; }
@keyframes ainstein-updated {
  /* the whole box turns from purple to white, slowly (Philipp, 2026-10-06) */
  0% { border-color: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft), 0 0 24px color-mix(in srgb, var(--ai) 35%, transparent);
       background: color-mix(in srgb, var(--ai) 28%, var(--surface)); }
  40% { background: color-mix(in srgb, var(--ai) 14%, var(--surface)); }
  70% { box-shadow: 0 0 0 3px var(--ai-soft); }
  100% { box-shadow: none; background: var(--surface); }  /* the frame ends as the box's own (.is-filled) */
}
@keyframes ainstein-label { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ainstein-box.is-updated { animation: none; border-color: var(--ai-border); }
  .ainstein-box.is-updated .ainstein-updated-label { animation: none; opacity: 1; }
}
.ainstein-table td textarea[name$="_spec"] { min-width: 280px; }
/* the chat as tall as the canvas beside it and at least the window; its messages scroll inside */
.ainstein-layout { align-items: stretch; }
.ainstein-messages { flex: 1 1 0; min-height: 0; }
.ainstein-canvas { align-content: start; }
.ainstein-stale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius);
  background: var(--ai-soft); color: var(--fg); margin: 0 0 10px; }
.ainstein-plan-form { margin: 0; }
@media (max-width: 1000px) {
  .ainstein-chat { min-height: 0; }
  .ainstein-messages { flex: none; height: 60vh; }
}

/* end texts in the settings: the standard text as text, with "Anpassen"; an own text with "Standard
   wiederherstellen" (UI/UX audit 2026-10-05, V88) */
.end-text { display: flex; flex-direction: column; gap: 6px; }
.end-text > .label-title { margin: 0; }
.end-text-default { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 6px 6px 6px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); min-height: var(--field-h); font-size: 0.95rem; }
/* folded to one line: heading and text of the standard follow each other */
.end-text-standard { flex: 1 1 300px; min-width: 0; color: var(--fg); }
.end-text-standard > * { display: inline; margin: 0; font-size: inherit; }
.end-text-standard > * + *::before { content: " "; }
.end-text-restore { align-self: flex-start; }

/* loop table: "nur intern" and "Spalte entfernen" on one line under the column name, apart from the × of the rows
   (UI/UX audit 2026-10-05, V93) */
th[data-col-head] > label.check { display: inline-flex; margin-right: 10px; vertical-align: middle; }
th[data-col-head] > [data-remove-col] { vertical-align: middle; font-weight: 400; }

/* the research question of the study plan grows with its text, also on a phone (UI/UX audit 2026-10-05, V100) */
textarea[name="research_question"] { field-sizing: content; min-height: 4.6em; }
.sessions-table td.sessions-end { text-align: right; white-space: nowrap; padding-left: 16px; }
@media (max-width: 600px) {
  .sessions-table, .sessions-table tbody { display: block; }
  .sessions-table thead { display: none; }
  .sessions-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 6px 8px; }
  .sessions-table td { padding: 0 !important; }
  .sessions-table td[data-label] { grid-column: 1; font-size: 0.85rem; color: var(--muted); }
  .sessions-table td[data-label]::before { content: attr(data-label) ": "; }
  .sessions-table td.sessions-end { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
/* the palette: a feedback type that just became possible (app.js) */
.pg-count.pg-count-new { background: var(--ai-soft); color: var(--ai); animation: ai-pulse 1.4s ease-in-out 3; }
.palette-new-badge { margin-left: 4px; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .pg-count.pg-count-new { animation: none; } }

/* UI/UX audit 2026-10-05, package G: the distribution of metric answers under their table (V54), small multiples
   on one axis */
.res-hists { display: grid; gap: 4px; max-width: 600px; margin: 16px auto 0; }  /* room between the table above and the bars (Ralf, 2026-10-06) */
.res-hist { margin: 0; }
.res-hist figcaption { font-size: 0.85rem; margin: 6px 0 0; }
.res-hist svg { display: block; width: 100%; height: auto; }
.res-hist-bar { fill: var(--data-fill); }
.res-hist-axis { stroke: var(--muted); stroke-width: 1; }
.res-hist-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.res-hist-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.res-dates { display: block; width: 100%; max-width: 600px; height: auto; margin-inline: auto; }
/* zero-centred bars (MaxDiff counts, V52): the zero line in the middle, negative to the left in --data-neg */
.res-bar.res-bar-zero { border-left: 0; background: linear-gradient(var(--muted), var(--muted)) 50% 0 / 1px 100% no-repeat; }
.res-bar-zero span.is-pos { border-radius: 0 3px 3px 0; }
.res-bar-zero span.is-neg { background: var(--data-neg); border-radius: 3px 0 0 3px; }
/* the market simulator as a section of its own with a heading (V66) */
.sim-section { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.sim-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 650; }
/* a choice model ordered by the questions of the researchers (UI/UX audit 2026-10-07, S7): under the result and the
   simulator one fold each for the counts, the aggregate logit in detail, the segments and the model quality */
.res-choice-fold { margin: 0; padding: 8px 0 0; border-top: 1px solid var(--border); }
.res-choice-fold + .res-choice-fold, .sim-slot + .res-choice-fold { margin-top: 8px; }
.res-choice-fold[open] { padding-bottom: 8px; }
.res-choice-fold > summary .hint { font-weight: 400; }
.lc-taken { margin-left: 10px; font-size: 0.85rem; }
/* overview of a matrix or loop (V55): one stacked 100-% row per statement or pass */
/* group comparison of a nominal question: per answer one bar per group (Ralf, 2026-10-06) */
.results-page .res-group-bars { max-width: 900px; margin: 4px auto 8px; }
.res-group-bars-head { margin: 10px 0 2px; font-weight: 600; font-size: 0.95rem; }
.res-group-bars-head:first-child { margin-top: 0; }
.res-stacks { max-width: 900px; margin: 4px auto 8px; }
.res-stack-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--muted); margin: 0 0 8px; }
.res-stack-legend li { padding: 0; border: 0; }  /* also inside a group comparison (.res-freq), W63 */
.res-stack-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.res-stack-row { display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 1fr) 64px; gap: 10px; align-items: center; margin: 3px 0; font-size: 0.95rem; }
.res-stack { display: flex; height: 22px; gap: 2px; }
.res-stack > span { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--div-ink); }
.res-stack > span:first-child { border-radius: 3px 0 0 3px; } .res-stack > span:last-child { border-radius: 0 3px 3px 0; }
.res-stack-n { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 640px) { .res-stack-row { grid-template-columns: minmax(0, 1fr) 56px; } .res-stack-label { grid-column: 1 / -1; } }
/* a ranking (V56): mean rank as a dot with its interval */
.res-ranks { display: block; width: 100%; max-width: 680px; height: auto; margin-inline: auto; }
.res-rank-label { fill: var(--fg); font-size: 12.5px; }
.res-rank-value { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.res-rank-ci { stroke: var(--accent); stroke-width: 2; }
.res-rank-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
/* federal states as an outline map without tiles (V58) */
.res-state-map { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; max-width: 900px; margin-inline: auto; }
.res-state-map svg { flex: 0 1 340px; width: 340px; max-width: 100%; height: auto; }
.res-state { fill: var(--surface-3); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.res-state.is-none { fill: var(--surface-3); }
/* beside the map only its colour scale (W67): five steps from the smallest to the largest share */
.res-state-scale { min-width: 180px; align-self: center; }
.res-state-scale p { margin: 0 0 4px; color: var(--muted); }
.res-state-ramp { display: flex; width: 180px; height: 12px; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.res-state-ramp i { flex: 1; }
.res-state-ends { display: flex; justify-content: space-between; width: 180px; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.res-state-scale .res-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--border); }
.res-state-scale .res-swatch.is-none { background: var(--surface-3); }
/* answers to an open question (V61): one per line in a box that scrolls, as pages of a list */
.res-texts.res-texts-free { display: block; max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; }
.res-texts.res-texts-free > li { border: 0; border-radius: 0; padding: 4px 12px; }
.res-texts.res-texts-free > li + li { border-top: 1px solid var(--border); }
/* AInstein step 1: the canvas column as tall as the chat; its boxes scroll, "Neu ableiten" and "Weiter" sit at the bottom,
   level with the chat's lower edge (Philipp, 2026-10-06); one column on narrow screens: everything one after another */
.ainstein-side { position: relative; min-width: 0; }
.ainstein-side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; }
.ainstein-side-inner > .ainstein-canvas { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 6px 4px 4px; }
.ainstein-side-inner > .ainstein-step-nav { margin: 0; }
@media (max-width: 1000px) {
  .ainstein-side-inner { position: static; }
  .ainstein-side-inner > .ainstein-canvas { overflow: visible; }
}
/* AInstein start page: the growing tree and its word count on the left, "Mit AInstein beginnen" right-aligned with
   the idea field */
.ainstein-new-actions { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.ainstein-grow { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.ainstein-tree { width: 120px; height: 80px; flex: none; overflow: visible; }
.ainstein-grow-text { margin: 0 0 4px; font-size: 0.85rem; color: var(--muted); }
.ainstein-grow-text strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.ainstein-grow[data-stage="done"] .ainstein-grow-text [data-grow-hint] { color: var(--ok); font-weight: 600; }
.t-ground { fill: var(--surface-3); }
.t-seed, .t-trunk { fill: color-mix(in srgb, var(--interview) 85%, var(--fg)); }
.t-stem, .t-branch { stroke: color-mix(in srgb, var(--interview) 85%, var(--fg)); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.t-young { fill: color-mix(in srgb, var(--ok) 55%, var(--surface)); }
.t-leaf-1 { fill: color-mix(in srgb, var(--ok) 70%, var(--surface)); }
.t-leaf-2 { fill: color-mix(in srgb, var(--ok) 55%, var(--surface)); }
.t-leaf-3 { fill: color-mix(in srgb, var(--ok) 85%, var(--surface)); }
.t-blossom { fill: color-mix(in srgb, var(--live) 70%, var(--surface)); }
.t-fruit { fill: var(--danger); }
.t-grow { transform-box: view-box; transform-origin: 60px 74px; transition: transform 0.4s ease; }
.t-bird { fill: var(--accent); }
.t-bird .t-eye { fill: var(--surface); }
.t-butterfly { fill: var(--ai); }
.t-squirrel { fill: color-mix(in srgb, var(--caution, var(--interview)) 80%, var(--surface)); }
/* every part grows from its foot when its number of words is reached */
.t-part { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.t-part.is-on { opacity: 1; transform: none; }
.t-bird.is-on { animation: t-hop 2.4s ease-in-out infinite; }
.t-butterfly.is-on { animation: t-flutter 3.2s ease-in-out infinite; }
@keyframes t-hop { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-2px); } }
@keyframes t-flutter { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
@media (prefers-reduced-motion: reduce) {
  .t-part, .t-grow { transition: none; }
  .t-bird.is-on, .t-butterfly.is-on { animation: none; }
}
/* AInstein: how many messages the conversation has, in the head of the chat */
.ainstein-count { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* AInstein start page: the five things a good idea names, ticked as the text seems to name them */
.ainstein-grow-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ainstein-aspects { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.85rem; color: var(--muted); }
.ainstein-aspects li { display: inline-flex; align-items: center; gap: 4px; transition: color 0.3s ease; }
.ainstein-aspects-lead { margin: 2px 0 0; }
/* round dots, not boxes to tick (UI/UX audit 2026-10-09, X15) */
.ainstein-aspect-mark { width: 10px; height: 10px; border: 1.5px solid var(--border-strong); border-radius: 50%; flex: none;
  transition: background-color 0.3s ease, border-color 0.3s ease; }
.ainstein-aspects li.is-on { color: var(--fg); }
.ainstein-aspects li.is-on .ainstein-aspect-mark { background: var(--ok); border-color: var(--ok); }
/* AInstein step 1 on wide screens: the page uses the width, the canvas gets the larger share, larger boxes and text
   (Philipp, 2026-10-06) */
@media (min-width: 1500px) {
  main.ainstein-wide { max-width: min(2200px, 100%); }
  .ainstein-wide .ainstein-layout { grid-template-columns: minmax(440px, 1fr) minmax(0, 1.35fr); gap: 24px; }
  .ainstein-wide .ainstein-canvas { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .ainstein-wide .ainstein-box { padding: 16px; }
  .ainstein-wide .ainstein-box h2 { font-size: 1.05rem; }
  .ainstein-wide .ainstein-box-text { font-size: 0.95rem; }
}
@media (min-width: 2000px) {
  .ainstein-wide .ainstein-canvas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* AInstein: the badge "in Entwicklung" / "in active development" beside the title (X15) */
.ainstein-dev { vertical-align: middle; letter-spacing: 0.04em; }
/* a part of a box with its own small heading (Administration > Datenbank, Schätzungen) */
.panel-sub { margin: 14px 0 6px; font-size: 1.05rem; }
.panel-sub-sep { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
/* structural equation model on the results page (experimental feature "sem", surveys/_sem.html) */
.sem-fit { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.sem-mark { font-weight: 600; margin-left: 2px; }  /* ✓ or ⚠ with the reason: the verdict without colour too (W68) */
.sem-pill { border: 1px solid var(--border); border-radius: var(--radius-tag); padding: 3px 10px; font-size: 0.85rem; background: var(--surface-2); }
.sem-pill.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.sem-pill.is-warn { border-color: var(--warn-border); background: var(--warn-soft); }
.sem-diagram { margin: 12px 0 4px; }
.sem-diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; font-size: 13px; }
.sem-node ellipse, .sem-node rect { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.4; }
.sem-node.is-latent ellipse { fill: var(--accent-soft); stroke: var(--accent); }
/* the diagnosis when there is no solution: values that point to the cause stand out */
.sem-diag .is-warn { color: var(--caution); }
.sem-diag ul.plain li { padding: 2px 0; border-bottom: 0; }
/* a randomisation ("Zuteilung: …"): a dashed frame, it is no question (Ralf, 2026-10-07) */
.sem-node.is-condition rect { fill: var(--surface); stroke-dasharray: 5 4; }
.sem-node-label { fill: var(--fg); }
.sem-node-sub { fill: var(--muted); font-size: 11.5px; }
.sem-edge { stroke: var(--fg); stroke-width: 2.2; }
.sem-edge.is-ns { stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 5 4; }
.sem-arrowhead { fill: var(--fg); }
.sem-edge-label { fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.sem-edge-label.is-sig { fill: var(--fg); font-weight: 650; }
.sem-paths tr.is-sig td:first-child { font-weight: 600; }
.sem-sub { font-size: 1.05rem; margin: 18px 0 4px; }
.sem-boot { margin: 10px 0; }
.sem-boot form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sem-measure .sem-construct td { border-top: 1px solid var(--border-strong); }
.sem-measure .sem-item { padding-left: 22px; color: var(--muted); }
.sem-measure .is-warn { color: var(--warn); font-weight: 600; }

/* Elementtypen (app/element_types.py): one card per type, grouped like docs/elementtypen.md */
.element-type-group h2 { font-size: 1.05rem; margin: 22px 0 10px; }
/* each type folded: name and line in the summary, the fact sheet when opened (UI/UX audit 2026-10-09, X11) */
.element-type > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.element-type > summary::-webkit-details-marker { display: none; }
.element-type-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.05rem; }
.element-type-head::before { content: "▸"; color: var(--muted); width: 1em; }
.element-type[open] .element-type-head::before { content: "▾"; }
.element-type > summary .construct-short { margin: 0 0 0 calc(1em + 8px); color: var(--muted); }
.element-type > summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: 4px; }
.type-points { margin: 0; padding-left: 18px; }  /* own list, not ul.plain: its row rule spreads the points apart */
.type-points li { margin: 0 0 2px; }
.element-type:target { border-color: var(--accent); }

/* element editor: "In anderer Befragung verwenden", one panel for copying and linking (Ralf, 2026-10-08) */
.use-elsewhere form { display: flex; flex-direction: column; gap: 14px; }
.use-elsewhere-head { display: flex; align-items: center; gap: 8px; margin: 0; }
.use-elsewhere-mode { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.use-elsewhere-mode legend { padding: 0; margin-bottom: 4px; }
.use-elsewhere-mode .check { align-items: flex-start; }
.use-elsewhere-name { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.use-elsewhere-name[hidden] { display: none; }
/* the test call of a web service in the flow (flow/_webservice.html) */
.ws-test { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--surface-2); }
.ws-snippet { max-height: 260px; overflow: auto; font-size: 0.75rem; margin: 6px 0 0; white-space: pre; }
/* the result of "Jetzt prüfen" of the seal chain (surveys/_seal_result.html) */
.seal-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.seal-result { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 12px 14px; background: var(--surface-2); }
.seal-result.is-busy { color: var(--muted); }
.seal-badge { display: flex; align-items: center; gap: 12px; }
.seal-badge .seal-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.35rem; }
.seal-badge.is-sealed .seal-icon { background: var(--ok-soft); border: 2px solid var(--ok); }
.seal-badge.is-broken .seal-icon { background: var(--danger-soft); border: 2px solid var(--danger); }
.seal-badge.is-sealed strong { color: var(--ok); }
.seal-badge.is-broken strong { color: var(--danger); }
.seal-badge .seal-when { display: block; font-size: 0.75rem; color: var(--muted); }
.seal-facts { margin: 10px 0 0; padding-left: 1.2em; font-size: 0.85rem; }
.seal-facts li { margin: 3px 0; }
.seal-facts.is-broken { color: var(--danger); }
.seal-head code { overflow-wrap: anywhere; font-size: 0.75rem; }
/* the settings of a block in the editor (name shown, random order, time per page): a fold of its own, closed */
.block-head > .block-form > .block-settings { grid-column: 1 / -1; }
.block-settings > summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; list-style: none; }
.block-settings > summary::-webkit-details-marker { display: none; }
.block-settings > summary > span:first-child::before { content: "▸"; display: inline-block; width: 1.1em; }
.block-settings[open] > summary > span:first-child::before { content: "▾"; }
.block-settings > summary .block-meta { margin-left: auto; white-space: nowrap; }  /* the pages of the block, right */
.block-settings > summary:hover { color: var(--fg); }
.block-settings[open] > summary { margin-bottom: 8px; }

/* the file of a video stimulus in the element editor (items/media/editor.html) */
.media-preview { display: block; width: 100%; max-width: 560px; max-height: 320px; background: #000; border-radius: var(--radius); }
/* the curve "how many saw up to where" of a video / audio stimulus (surveys/_media_results.html), one colour per file */
.media-c0 { stroke: var(--chart-1); background: var(--chart-1); }
.media-c1 { stroke: var(--chart-2); background: var(--chart-2); }
.media-c2 { stroke: var(--chart-3); background: var(--chart-3); }
.media-c3 { stroke: var(--chart-4); background: var(--chart-4); }
.media-c4 { stroke: var(--chart-5); background: var(--chart-5); }
.media-c5 { stroke: var(--chart-6); background: var(--chart-6); }
.media-line { background: none; }
.media-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; }
.media-file + .media-file { border-top: 1px solid var(--border); padding-top: 12px; }
/* the language before signing in (base.html, public.language) */
.lang-pick { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lang-pick button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 600; padding: 4px 8px; cursor: pointer; }
.lang-pick button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.lang-pick button:hover { color: var(--fg); }
.lang-pick button:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }

/* Administration > Server, section "Mailserver": the .env lines to switch mail on (app/mail.py) */
.env-lines { margin: 0.5rem 0; padding: 0.6rem 0.8rem; background: var(--surface-2); border-radius: 6px; overflow-x: auto; font-size: 0.85rem; }
/* the inline code look (padding 2px 6px, own background) only indented the first line in the block (Ralf) */
.env-lines code { padding: 0; background: none; border-radius: 0; font-size: inherit; word-break: normal; }

/* ------------------------------------------------------------------------------------------
   POLLtergeist: the look under polltergeist.de (data-site on <html>, BRANDS, app/brand.py; Ralf 2026-10-09: the name
   plays a part, a poltergeist look that stays serious; the accent clearly apart from the violet of AI). Jade by day,
   a mint "ghost light" by night, a sans-serif throughout, the word mark with "POLL" in bold. The start page's head is
   a night scene in both modes: a faint glow, two slow shadows drifting, the live poll floating above them. Only
   tokens and the start page; a person's own style ("Kontrast", "RWTH") keeps precedence. */
:root[data-site="polltergeist"]:not([data-look="kontrast"]):not([data-look="rwth"]):not([data-theme="dark"]) {
  --bg: #f3f5f4; --surface: #ffffff; --surface-2: #ecf0ee; --surface-3: #dfe6e3;
  --fg: #111716; --muted: #4f5b58; --subtle: #66726f;
  --accent: #0b6e57; --accent-hover: #08533f; --accent-soft: rgba(11, 110, 87, 0.10); --on-accent: #ffffff;
  --border: #d6dedb; --border-strong: #aebbb7;
  --header-bg: rgba(255, 255, 255, 0.92); --footer-bg: rgba(243, 245, 244, 0.95);
  --focus-ring: rgba(11, 110, 87, 0.35);
  --pg-strong: #0b6e57;
}
:root[data-site="polltergeist"]:not([data-look="kontrast"]):not([data-look="rwth"])[data-theme="dark"] {
  --bg: #090d0e; --surface: #111819; --surface-2: #172022; --surface-3: #212d2f;
  --fg: #e8efed; --muted: #a3b2ae; --subtle: #8a9a96;
  --accent: #5fe0bf; --accent-hover: #8ff0d6; --accent-soft: rgba(95, 224, 191, 0.14); --on-accent: #091211;
  --border: #253234; --border-strong: #3d4f51;
  --header-bg: rgba(17, 24, 25, 0.92); --footer-bg: rgba(9, 13, 14, 0.95);
  --focus-ring: rgba(95, 224, 191, 0.4);
  --pg-strong: #5fe0bf;
}
:root[data-site="polltergeist"] { --font-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:root[data-site="polltergeist"] .brand-name { font-weight: 400; letter-spacing: 0.01em; }
.wm-strong { font-weight: 800; letter-spacing: 0.02em; color: var(--pg-strong, var(--accent)); }
:root[data-site="polltergeist"][data-theme="dark"] .wm-strong { text-shadow: 0 0 18px rgba(95, 224, 191, 0.35); }
:root[data-site="polltergeist"] .landing-page h1, :root[data-site="polltergeist"] .landing-page h2 { letter-spacing: -0.015em; }

/* the head of the start page: a night scene in light and dark mode alike, so the colours here are its own */
.pg-hero { position: relative; isolation: isolate; overflow: hidden; margin: 16px 0 56px; padding: 48px 44px;
  border-radius: 20px; color: #e8efed;
  background: radial-gradient(120% 90% at 85% 10%, rgba(95, 224, 191, 0.16), transparent 55%),
              radial-gradient(80% 70% at 0% 100%, rgba(95, 224, 191, 0.08), transparent 60%),
              linear-gradient(160deg, #0d1517 0%, #0a1012 55%, #070b0c 100%);
  box-shadow: 0 20px 50px rgba(7, 11, 12, 0.25); }
.pg-hero .landing-lead { color: #c9d6d2; }
.pg-hero .landing-dev { color: #9fb0ac; }
.pg-hero .wm-strong { color: #5fe0bf; text-shadow: 0 0 22px rgba(95, 224, 191, 0.35); }
.pg-hero .button { background: #5fe0bf; border-color: #5fe0bf; color: #091211 !important; }
.pg-hero .button:hover { background: #8ff0d6; border-color: #8ff0d6; }
.pg-hero .button.button-secondary { background: transparent; border-color: rgba(232, 239, 237, 0.35); color: #e8efed !important; }
.pg-hero .button.button-secondary:hover { background: rgba(232, 239, 237, 0.08); }
/* two blurred shadows drifting slowly behind everything: the "ghost", kept faint */
.pg-shade { position: absolute; z-index: -1; border-radius: 50%; filter: blur(48px); opacity: 0.55; pointer-events: none; }
.pg-shade-1 { width: 340px; height: 260px; right: 6%; top: -60px; background: rgba(95, 224, 191, 0.20); }
.pg-shade-2 { width: 280px; height: 220px; left: 30%; bottom: -120px; background: rgba(160, 200, 255, 0.10); }
.pg-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #9fb0ac; }
.pg-kicker svg { color: #5fe0bf; }
.landing-page h1.pg-wordmark { font-weight: 400; font-size: clamp(2.8rem, 6vw, 4.4rem); letter-spacing: -0.02em; margin: 0 0 14px; color: #f2f7f5; }
/* the live poll as on the big screen: glass over the night, floating a little */
.pg-poll { margin: 0; padding: 22px 24px 18px; border-radius: 16px; color: #e8efed;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(232, 239, 237, 0.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(95, 224, 191, 0.06), 0 0 60px rgba(95, 224, 191, 0.08); }
.pg-poll-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #9fb0ac; }
.pg-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5fe0bf; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fe0bf; box-shadow: 0 0 0 4px rgba(95, 224, 191, 0.18); }
.pg-question { font-size: 1.35rem; font-weight: 600; line-height: 1.35; margin: 12px 0 16px; color: #f2f7f5; }
.pg-bar { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) 3.2rem; gap: 12px; align-items: center; margin: 10px 0; font-size: 0.95rem; }
.pg-track { height: 12px; border-radius: 6px; background: rgba(232, 239, 237, 0.10); overflow: hidden; }
.pg-fill { display: block; height: 100%; width: var(--share); border-radius: 6px; background: linear-gradient(90deg, rgba(95, 224, 191, 0.55), #5fe0bf); }
.pg-top .pg-share { color: #5fe0bf; }
.pg-share { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pg-poll-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(232, 239, 237, 0.12); font-size: 0.85rem; color: #9fb0ac; }
@media (prefers-reduced-motion: no-preference) {
  .pg-fill { animation: pg-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 0.08s); }
  .pg-poll { animation: pg-float 7s ease-in-out infinite; }
  .pg-shade-1 { animation: pg-drift 18s ease-in-out infinite alternate; }
  .pg-shade-2 { animation: pg-drift 23s ease-in-out infinite alternate-reverse; }
  .pg-dot { animation: pg-pulse 2.4s ease-in-out infinite; }
}
@keyframes pg-grow { from { width: 0; } }
@keyframes pg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pg-drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 24px); } }
@keyframes pg-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(95, 224, 191, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(95, 224, 191, 0.06); } }
@media (max-width: 900px) { .pg-hero { padding: 32px 22px; } }
@media (max-width: 600px) { .pg-bar { grid-template-columns: minmax(0, 1fr) 3rem; } .pg-bar .pg-track { grid-column: 1 / -1; grid-row: 2; } }
:root[data-theme="dark"] .pg-hero { border: 1px solid rgba(95, 224, 191, 0.12); }
/* backup codes of the second factor (accounts/twofactor_backup.html): two columns, easy to copy by hand */
.backup-codes { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 32px; }
.backup-codes code { font-size: 1.05rem; letter-spacing: 0.06em; }