/* politforum.net — editorial theme. System fonts plus self-hosted fonts (no third-party font requests). */

/* Desktop palette (owner's colour scheme) - edit these to retheme the whole site. */
:root {
  --bg:        #073642;
  --fg:        #c8dbec;
  --base:      #002b36;
  --text:      #c8dbec;
  --accent:    #005270;
  --on-accent: #ffffff;
  --border:    #073642;
  --muted:     #c8dbec;
  --warning:   #938d6d;
  --error:     #268bd2;
  --success:   #5f8e5b; }

/* Theme roles, derived from the palette above. */
:root {
  --paper: var(--base);
  --paper-raised: var(--bg);
  --ink: var(--text);
  --ink-soft: color-mix(in srgb, var(--muted) 90%, var(--base));
  --ink-faint: color-mix(in srgb, var(--muted) 78%, var(--base));
  --rule: color-mix(in srgb, var(--border) 80%, var(--text));
  /* --accent is too dark to read as text on --base; this lighter tint is ~6:1. */
  --accent-text: color-mix(in srgb, var(--accent) 50%, #ffffff);
  --focus: var(--error);

  /* Colour emojis first ("PF Emoji" in static/richtext: device emojis or Twemoji, emoji code points only).
     Otherwise fonts like DejaVu (system-ui on Linux) answer with monochrome emoji glyphs. */
  --emoji: "PF Emoji";
  --serif: var(--emoji), Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --sans: var(--emoji), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 72rem;
  --measure: 40rem;
  --gutter: calc(clamp(1rem, 4vw, 2rem) + 5px);  /* + 5 px: room for the chat dock in the left margin (pf-dock) */
  --gutter-start: var(--gutter);  /* the left margin: the chat dock's width (pf-dock) */
  color-scheme: dark; }

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent-text) 55%, transparent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 0.5rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter-start) var(--gutter); }
/* phones: the chat dock needs 36 px to be tapped - only on pages that have it (templates/base.html) */
@media (max-width: 40rem) { html.has-chat-dock { --gutter-start: 36px; } }
.narrow { max-width: var(--measure); margin-inline: auto; }
.column-wide { max-width: 56rem; margin-inline: auto; }

/* ---------- Masthead ---------- */

.masthead { --mast-gap: 1rem; --mast-ink-top: 0.8px; --mast-ink-bottom: 5.2px; padding-top: 0.75rem; }
.masthead__top {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint);
  letter-spacing: 0.02em; }
.masthead__brand { text-align: center; padding: 0.55rem 0 var(--mast-gap); }
/* Wide screens: date and account links sit in the top corners, so the wordmark can move up - the visible gap from the
   window edge to the letters equals the gap from the tagline to the menu bar (--mast-gap; the paddings make up for the
   empty space above the letters and below the tagline's caps inside their line boxes, measured). */
@media (min-width: 48rem) {
  .masthead { padding-top: 0; }
  .masthead > .wrap { position: relative; }
  .masthead__top { position: absolute; pointer-events: none; }
  .masthead__top > * { pointer-events: auto; }
  .masthead__brand { padding: calc(var(--mast-gap) - var(--mast-ink-top, 0px)) 0 calc(var(--mast-gap) - var(--mast-ink-bottom, 0px)); }
}
.wordmark {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.6rem, 4.7vw, 2.85rem); line-height: 1; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark span { color: var(--accent-text); }
.tagline {
  margin: 0.6rem 0 0; font-family: var(--sans); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); }

.mainnav { border-block: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; }
.mainnav ul {
  list-style: none; margin: 0 auto; padding-block: 0.55rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 2rem; }
.mainnav a { text-decoration: none; }

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

main { padding-block: 0.75rem 3rem; }  /* menu -> content: the same 12 px on every page (as on Start, owner 2026-10-15) */

.kicker {
  margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.kicker .sep { color: var(--ink-faint); margin-inline: 0.35em; }
.kicker .soft { color: var(--ink-faint); }

.section-label {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.5rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; }
.section-label::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.media { display: block; overflow: hidden; background: var(--paper-raised); }
.media img { width: 100%; transition: transform 0.4s ease; }
a.media:hover img { transform: scale(1.02); }

/* ---------- Home: lead story ---------- */

.lead {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; align-items: center;
  padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--rule); }

.home-intro { max-width: var(--measure); margin: 0 auto 3rem; text-align: center; color: var(--ink-soft); font-size: 1.2rem; font-style: italic; }

/* ---------- Cards ---------- */

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2rem; }
.card .media { margin-bottom: 1rem; }
.card__title { font-size: 1.3rem; line-height: 1.22; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.card__title a { text-decoration: none; }
.card__teaser { margin: 0; font-size: 1rem; color: var(--ink-soft); }

.list { display: grid; gap: 2.25rem; }
.row:where(:not(.conversejs *)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.75rem; align-items: start; padding-bottom: 2.25rem; border-bottom: 1px solid var(--rule); }
.row:last-child:where(:not(.conversejs *)) { border-bottom: 0; }
.row .card__title:where(:not(.conversejs *)) { font-size: 1.55rem; }

.page-header { text-align: center; margin-bottom: 3rem; }
.page-header h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
.page-header .intro { color: var(--ink-soft); margin: 0 auto; max-width: var(--measure); }

.pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; font-family: var(--sans); font-size: 0.9rem; }
.pagination a { font-weight: 600; text-decoration: none; }
.pagination .status { color: var(--ink-faint); }

/* ---------- Post ---------- */

.post__header { text-align: center; margin-bottom: 2.25rem; }
.post__title { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.25rem; }
.post__lede { font-size: 1.3rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.post__feature { margin: 0 auto 2.75rem; max-width: 60rem; }
.post__feature figcaption, .prose figcaption { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.6rem; }

.prose > * + * { margin-top: 1.25em; }
.prose p { margin: 0; }
.prose p + p { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { line-height: 1.25; letter-spacing: -0.01em; margin: 2.2em 0 0.6em; }
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.3rem; }
.prose h4 { font-size: 1.1rem; font-family: var(--sans); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 1.1em 0; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--accent-text); }
.prose blockquote {
  margin: 1.8em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 3px solid var(--accent-text);
  font-size: 1.2rem; font-style: italic; color: var(--ink-soft); }
.prose hr { border: 0; text-align: center; margin: 2.5em 0; }
.prose hr::after { content: "\2022\2002\2022\2002\2022"; color: var(--ink-faint); letter-spacing: 0.3em; }
.prose figure { margin: 2em 0; }
.prose iframe, .prose video, .prose embed { max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 0.5em; text-align: left; }

/* Ghost cards kept as raw HTML: neutralise their layout so they sit in the column. */
.prose .kg-card { margin: 2em 0; }
.prose .kg-file-card a { text-decoration: none; }

.download {
  display: flex; align-items: center; gap: 1rem; margin: 1.75em 0 !important;
  padding: 1rem 1.15rem; background: var(--paper-raised); border: 1px solid var(--rule); border-left: 4px solid var(--accent-text);
  font-family: var(--sans); text-decoration: none; border-radius: 2px; }
.download:hover { border-color: var(--accent-text); color: inherit; }
.download__badge {
  flex: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  background: var(--accent); color: var(--on-accent); padding: 0.35rem 0.5rem; border-radius: 2px; }
.download__title { font-weight: 600; font-size: 0.98rem; line-height: 1.35; }
.download__hint { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-faint); }

.post__footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.9rem; color: var(--ink-faint); }
.tags { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags a { display: block; border: 1px solid var(--rule); padding: 0.15rem 0.65rem; border-radius: 4px; font-size: 0.8rem; text-decoration: none; }
.tags a:hover { border-color: var(--accent-text); }

.more-posts { margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid var(--rule); }

/* ---------- Account pages, forms, messages ---------- */

.account-links a { text-decoration: none; color: var(--accent-text); font-weight: 600; }

.account-page main > :not(.messages) { max-width: 30rem; margin-inline: auto; padding-inline: var(--gutter-start) var(--gutter); }
.account-page main h1 { line-height: 1.15; margin: 0 0 1rem; }
.account-page main h2 { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 2rem 0 0.75rem; }
.account-page main p { margin: 0 0 1rem; }
.panel { padding-block: 0.5rem; }
.plain-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }

form:where(:not(.conversejs *)) { font-family: var(--sans); font-size: 0.95rem; }
form p:where(:not(.conversejs *)), form > div:where(:not(.conversejs *)) { margin: 0 0 1rem; }
label:where(:not(.conversejs *)) { display: block; font-weight: 600; margin-bottom: 0.35rem; }
input[type=text]:where(:not(.conversejs *)), input[type=email]:where(:not(.conversejs *)), input[type=password]:where(:not(.conversejs *)), input[type=url]:where(:not(.conversejs *)), input[type=search]:where(:not(.conversejs *)), input[type=number]:where(:not(.conversejs *)), input[type=tel]:where(:not(.conversejs *)), input[type=date]:where(:not(.conversejs *)), select:where(:not(.conversejs *)), textarea:where(:not(.conversejs *)) {
  width: 100%; padding: 0.65rem 0.75rem; font: inherit; color: var(--text);
  background: color-mix(in srgb, var(--paper) 55%, var(--paper-raised)); border: 1px solid var(--rule);
  transition: border-color 0.15s, box-shadow 0.15s; }
input:focus:where(:not(.conversejs *)), select:focus:where(:not(.conversejs *)), textarea:focus:where(:not(.conversejs *)) { outline: none; border-color: var(--c-chat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-chat) 30%, transparent); }
input[type=checkbox]:where(:not(.conversejs *)) { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; vertical-align: -0.2rem; margin-right: 0.4rem; }
label:has(input[type=checkbox]):where(:not(.conversejs *)) { display: inline; font-weight: 400; }
.helptext:where(:not(.conversejs *)), form ul.errorlist + *:where(:not(.conversejs *)), form small:where(:not(.conversejs *)) { display: block; font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.3rem; }
form ul:not(.errorlist):not(.rt ul):where(:not(.conversejs *)) { font-size: 0.8rem; color: var(--ink-faint); margin: 0.4rem 0 0; padding-left: 1.1rem; }
ul.errorlist:where(:not(.conversejs *)) { list-style: none; padding: 0; margin: 0 0 0.4rem; color: var(--error); font-size: 0.85rem; font-weight: 600; }

/* Element rules for forms and buttons end at the chat (.conversejs): Converse builds its own markup, its look comes from
   converse-site.css. :where() keeps their specificity unchanged. */
/* Buttons in the menu-bar look (owner rule: no pills - menu docks with icons and grooves; 8/4 px radii): a short dock
   strip - lines top and bottom, the dock's soft gradient, 4px corners. Main actions keep the accent in text and line,
   .secondary is quieter. Groups of buttons go into a .bar-dock with .bar-item entries. */
button:where(:not(.conversejs *)), .button:where(:not(.conversejs *)) {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font: 600 0.92rem var(--sans);
  cursor: pointer; text-decoration: none; padding: 0.45rem 1rem; border-radius: 4px; line-height: 1.25;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised)));
  color: var(--accent-text, var(--text)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(0 0 0 / 0.3);
  transition: background 0.15s, border-color 0.15s, color 0.15s; }
button:hover:where(:not(.conversejs *)), .button:hover:where(:not(.conversejs *)) { color: var(--text); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--paper-raised)); }
button:focus-visible:where(:not(.conversejs *)), .button:focus-visible:where(:not(.conversejs *)) { outline: 2px solid var(--c-chat); outline-offset: 2px; }
button .icon:where(:not(.conversejs *)), .button .icon:where(:not(.conversejs *)) { width: 1.25rem; height: 1.25rem; }
button.secondary:where(:not(.conversejs *)), .button.secondary:where(:not(.conversejs *)) { color: var(--ink-soft); border-color: color-mix(in srgb, var(--c-chat) 22%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 8%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised))); }
button.secondary:hover:where(:not(.conversejs *)), .button.secondary:hover:where(:not(.conversejs *)) { color: var(--text); border-color: var(--c-chat);
  background: color-mix(in srgb, var(--c-chat) 12%, var(--paper-raised)); }

.messages:where(:not(.conversejs *)) { margin-bottom: 1.5rem; }
.message:where(:not(.conversejs *)) { max-width: 40rem; margin: 0 auto 0.5rem; font: 0.95rem var(--sans); border-left: 4px solid var(--accent-text); }
.message--success { border-left-color: var(--success); }
.message--warning { border-left-color: var(--warning); }
.message--error { border-left-color: var(--error); }

/* ---------- Forum ---------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.forum { font-family: var(--sans); font-size: 1rem; }
.forum h1 { font-family: var(--serif); font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.15; margin: 0 0 0.5rem; }
.forum .meta { color: var(--ink-faint); font-size: 0.88rem; }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--ink-faint); }
.crumbs a { text-decoration: none; color: var(--accent-text); }

.forum-head { margin-bottom: 1rem; }
.forum-head h1, .directory h1, .lexikon h1 { margin-top: 0; }
.forum-head .button { margin-top: 0.75rem; }
.forum-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.5rem; align-items: start; }
/* threads: info boxes left of the posts, the thread fills the rest with the platform's 0.5 rem gaps (owner,
   2026-10-12); a narrow rail on the right holds the editor's emoji column while writing. With the thesaurus open,
   the window minus the panel is the stage. */
:root { --th-w: 0px; }
/* Solarized accents shared by all pages (chat cyan, mail blue, invites green, replies yellow, ratings magenta) */
:root { --c-orange: #cb4b16; --c-chat: #2aa198; --c-mail: #268bd2; --c-invite: #859900; --c-reply: #b58900; --c-rating: #d33682; --c-violet: #6c71c4;
  --radius: 8px; --radius-s: 4px; }
.forum-layout.sidebar-left { width: calc(100vw - var(--th-w) - var(--sbw, 0px)); margin-left: calc(50% - (100vw - var(--th-w) - var(--sbw, 0px)) / 2);
  padding-inline: var(--gutter-start) var(--gutter); grid-template-columns: 17rem minmax(0, 1fr); gap: 0.5rem; justify-content: stretch; }
body.panel-open .forum-layout.sidebar-left { padding-right: 0.5rem; }
/* while writing, a rail on the right holds the emoji column: replying shrinks the posts with the editor (same
   width); the new-thread/edit pages have no boxes on the left, so that column gives up the rail's width and the
   card keeps exactly the width it has in the thread */
.forum-layout.sidebar-left:has(.compose-panel:not([hidden]) .rt-full) { grid-template-columns: 17rem minmax(0, 1fr) 6.5rem; }
.forum-layout.sidebar-left:has(.editor-page .rt-full) { grid-template-columns: 10rem minmax(0, 1fr) 6.5rem; }
.forum-layout.sidebar-left > .sidebar { grid-column: 1; grid-row: 1; text-align: left; justify-items: stretch; }
.forum-layout.sidebar-left > .thread-main, .forum-layout.sidebar-left > :not(.sidebar):not(.mentions-col) { grid-column: 2; grid-row: 1; }
/* @mentions list: its own column between the boxes and the thread */
.forum-layout.sidebar-left.has-mentions { grid-template-columns: 17rem 13rem minmax(0, 1fr); }
.forum-layout.sidebar-left.has-mentions:has(.compose-panel:not([hidden]) .rt-full) { grid-template-columns: 17rem 13rem minmax(0, 1fr) 6.5rem; }
.forum-layout.sidebar-left.has-mentions > .mentions-col { grid-column: 2; grid-row: 1; }
.forum-layout.sidebar-left.has-mentions > .thread-main { grid-column: 3; }
html { overflow-x: clip; }  /* 100vw includes the scrollbar; never let that become a sideways scroll */
@media (max-width: 81rem) { .forum-layout.sidebar-left.has-mentions { grid-template-columns: 15rem 12rem minmax(0, 1fr); }
  .forum-layout.sidebar-left.has-mentions:has(.compose-panel:not([hidden]) .rt-full) { grid-template-columns: 15rem 12rem minmax(0, 1fr) 6.5rem; } }

.topic-list, .thread-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.topic-list li, .thread-list li { display: grid; gap: 0.2rem; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--rule); }
.topic-name, .thread-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.topic-desc { color: var(--ink-soft); font-size: 0.92rem; }
.topic-stats, .thread-meta { color: var(--ink-faint); font-size: 0.82rem; }
.thread-meta a { color: var(--accent-text); }
.thread-list li.is-unread .thread-title::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-text); margin-right: 0.5rem; vertical-align: 0.15rem; }
.new { color: var(--accent-text); font-weight: 600; }
.badge { display: inline-block; font: 600 0.68rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.4rem; border: 1px solid var(--rule); color: var(--ink-faint); vertical-align: 0.15rem; }

.forum-post { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 4px; padding: 1rem 1.25rem; }
.post-item { margin-bottom: 1rem; scroll-margin-top: 1.5rem; }
.post-item:target > .forum-post { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
.forum-post.is-hidden { opacity: 0.6; border-style: dashed; }
/* author left, badge/time/edited right - one line above the post's card */
.post-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
  margin: 0 0.25rem 0.3rem; font-family: var(--sans); font-size: 0.85rem; }
.post-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--ink-soft); }
.post-meta .post-time { color: inherit; text-decoration: none; }
.post-head .author { font-weight: 700; color: var(--text); }
.post-time { color: var(--ink-faint); text-decoration: none; }
.hidden-note { color: var(--warning); font-size: 0.85rem; font-weight: 600; margin: 0 0 0.5rem; }
.post-body { font-family: var(--serif); font-size: 1.05rem; }
.post-body > * + * { margin-top: 0.9em; }
.post-body pre { overflow-x: auto; background: var(--paper); padding: 0.75rem; border-radius: 3px; font-size: 0.9rem; }
.post-body code { font-size: 0.92em; }
.attachments { margin-top: 1rem; display: grid; gap: 0.75rem; }
.att-image img { max-height: 22rem; width: auto; border-radius: 3px; border: 1px solid var(--rule); }
.download.small { margin: 0 !important; padding: 0.55rem 0.8rem; }
.post-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); font-size: 0.85rem; }
.reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.reaction { font: inherit; font-family: var(--emoji), var(--sans); font-size: 1.1rem; padding: 0.2rem 0.6rem; border-radius: 4px;
  border: 1px solid var(--rule); background: transparent; color: var(--text); cursor: pointer; line-height: 1.4;
  transition: transform 160ms cubic-bezier(.34, 1.56, .64, 1), background-color 160ms ease, opacity 160ms ease; }
.reaction:hover, .reaction:focus-visible { transform: scale(1.18) rotate(-4deg); }
.reaction:active { transform: scale(0.9); transition-duration: 60ms; }
.reaction.is-mine { animation: reaction-pop 420ms cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-text) 35%, transparent); }
@keyframes reaction-pop { 35% { transform: scale(1.4) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .reaction, .reaction.is-mine { transition: none; animation: none; } }
.reaction.is-empty { opacity: 0.85; }
.reaction.is-empty:hover { opacity: 1; }
.reaction.is-mine { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 40%, transparent); }
.reaction:hover { filter: none; color: var(--text); }
.reaction span:not(.e3d) { font-size: 0.8rem; color: var(--ink-soft); }

form.inline { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: none; }
.link-button:hover { filter: none; color: var(--text); text-decoration: underline; }
.link-button.danger { color: var(--warning); }
.mini-input { width: 7rem !important; padding: 0.15rem 0.4rem !important; font-size: 0.8rem !important; }
button.small:where(:not(.conversejs *)), .button.small:where(:not(.conversejs *)) { padding: 0.35rem 0.75rem; font-size: 0.82rem; }
.thread-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

.reply-form { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-raised); }
.reply-form h1, .reply-form h2 { font-family: var(--serif); margin: 0 0 1rem; }
.reply-form h2 { font-size: 1.25rem; }
.narrow-form { max-width: 46rem; }
.editor { margin-bottom: 1rem; }
.editor textarea { font-family: var(--sans); line-height: 1.5; resize: vertical; background: var(--paper); }

.preview:not(:empty) { margin-top: 0.75rem; padding: 0.9rem 1rem; border: 1px dashed var(--rule); border-radius: 3px; font-family: var(--serif); }
.file-label { margin-top: 1rem; font-weight: 600; }
.upload-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.upload-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font-size: 0.82rem; }
.upload-list img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 3px; }
.upload-list .link-button { font-size: 1.1rem; line-height: 1; color: var(--warning); }
.upload-hint { margin-top: 0.4rem !important; }
.upload-hint.is-error { color: var(--error) !important; font-weight: 600; }
.notice { margin-top: 2rem; padding: 1rem 1.25rem; border-left: 4px solid var(--accent-text); }

.sidebar { display: grid; gap: 0.5rem; }
.governance { font-size: 0.88rem; background: var(--paper-raised); border: 1px solid var(--rule); padding: 1rem; display: grid; gap: 1.25rem; }
.governance h2 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--ink-soft); }
.governance .who { font-weight: 600; margin-right: 0.4rem; }
.governance li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.governance textarea, .governance input[type=email], .governance select { margin-bottom: 0.6rem; }
.governance label { font-size: 0.82rem; }
.mod-menu { position: relative; }
.mod-menu summary { cursor: pointer; color: var(--warning); list-style: none; }
.mod-menu summary::-webkit-details-marker { display: none; }
.mod-menu form { position: absolute; right: 0; bottom: 1.8rem; z-index: 2; display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; white-space: nowrap; }
.mod-menu .mini-input { width: 12rem !important; }
.apply summary { cursor: pointer; color: var(--accent-text); font-weight: 600; margin-top: 0.5rem; }
.apply form { margin-top: 0.75rem; }

.vote blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--accent-text); color: var(--ink-soft); }
.tally { margin: 1.5rem 0; }
.tally-bar { position: relative; height: 0.75rem; border-radius: 999px; background: var(--paper-raised); border: 1px solid var(--rule); overflow: hidden; }
.tally-bar span { display: block; height: 100%; background: var(--success); }
.tally-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
.vote-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.vote-buttons .is-mine { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.forum-tree, .forum-tree ul { list-style: none; margin: 0; padding: 0; }
.forum-tree > li { border-bottom: 1px solid var(--rule); }
.forum-tree > li:first-child { border-top: 1px solid var(--rule); }
.tree-node > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0.25rem 1rem; padding: 0.75rem 0.25rem; list-style: none; }
.tree-node > summary::-webkit-details-marker { display: none; }
.tree-node > summary { cursor: default; }
.tree-label { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.tree-toggle { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -0.3rem -0.6rem -0.3rem -0.3rem; border-radius: 4px;
  color: var(--accent-text); cursor: pointer; transition: transform 0.15s ease; align-self: center; }
.tree-toggle:hover { background: var(--paper-raised); }
.tree-node[open] > summary .tree-toggle { transform: rotate(90deg); }
.tree-name { color: var(--text); text-decoration: none; }
.tree-name:hover, .tree-name:focus-visible { text-decoration: underline; }
.tree-search-btn { order: 3; margin-left: auto; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--accent-text);
  background: none; border: 1px solid transparent; padding: 0.1rem 0.6rem; cursor: pointer; white-space: nowrap; }
.tree-search-btn:hover, .tree-search-btn:focus-visible, .tree-search-btn[aria-expanded="true"] { border-color: var(--accent-text); }

.tree-right { display: contents; }
.tree-area > summary .tree-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.tree-topic > summary .tree-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; }
.tree-stats { color: var(--ink-faint); order: 2; margin-left: 1rem; }
.tree-name:hover { color: var(--accent-text); }
.tree-desc { margin: -0.4rem 0 0.6rem 1.75rem; color: var(--ink-soft); font-size: 0.9rem; }
.tree-children { margin: 0 0 0.6rem 0.6rem !important; padding-left: 1rem !important; border-left: 1px solid var(--rule); }
.tree-thread { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem 1rem; padding: 0.35rem 0 0.35rem 1.1rem; }
.tree-thread a { text-decoration: none; }
.tree-thread.is-unread > a { font-weight: 700; }
.tree-thread.is-unread > a::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent-text); margin-right: 0.45rem; vertical-align: 0.1rem; }
.tree-topic .tree-topic > summary .tree-name { font-size: 1rem; }
.tree-empty, .tree-more { padding-left: 1.1rem !important; }
.tree-empty { font-size: 0.88rem; padding: 0.4rem 0.25rem; }
.tree-more a { color: var(--accent-text); font-size: 0.85rem; }
.tree-node > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .tree-toggle { transition: none; } }
.drag-handle { display: none; cursor: grab; color: var(--ink-faint); margin-right: 0.35rem; font-size: 1.1rem; line-height: 1; }
.restructuring .drag-handle { display: inline; }
.restructuring summary[data-node] { cursor: grab; border-radius: 3px; }
.restructuring summary[data-node]:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.is-dragging { opacity: 0.4; }
.drop-before { box-shadow: inset 0 3px 0 var(--accent-text); }
.drop-after { box-shadow: inset 0 -3px 0 var(--accent-text); }
.drop-inside { background: color-mix(in srgb, var(--accent) 45%, transparent) !important; outline: 1px dashed var(--accent-text); }
[data-restructure][aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

@media (max-width: 960px) {
  .forum-layout, .forum-layout.sidebar-left, body.panel-open .forum-layout.sidebar-left,
  .forum-layout.sidebar-left:has(.compose-panel:not([hidden]) .rt-full), .forum-layout.sidebar-left:has(.editor-page .rt-full),
  .forum-layout.sidebar-left.has-mentions:has(.compose-panel:not([hidden]) .rt-full) { grid-template-columns: minmax(0, 1fr); }
  .forum-layout.sidebar-left { width: auto; margin-left: 0; padding-inline: 0; }
  .forum-layout.sidebar-left > .sidebar, .forum-layout.sidebar-left > :not(.sidebar), .forum-layout.sidebar-left > :not(.sidebar):not(.mentions-col),
  .forum-layout.sidebar-left.has-mentions > *, .forum-layout.sidebar-left.has-mentions > .thread-main { grid-column: 1; grid-row: auto; }
  .forum-layout.sidebar-left.has-mentions, body.panel-open .forum-layout.sidebar-left.has-mentions { grid-template-columns: minmax(0, 1fr); }
  
  
}

/* ---------- Profiles, friends, notifications ---------- */

.avatar:not(.conversejs .avatar) { display: inline-block; width: var(--size, 40px) !important; height: var(--size, 40px) !important; max-height: none !important; margin: 0 !important; border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle; background: var(--paper-raised); }
.avatar--initials, .avatar--initials:not(.conversejs .avatar) { width: var(--size); height: var(--size); display: inline-grid; place-items: center; font: 700 calc(var(--size) * 0.4) / 1 var(--sans);
  color: #fff; background: hsl(var(--hue) 35% 32%); }
.account-links { display: inline-flex; align-items: center; }
.bell { position: relative; display: inline-flex; color: var(--text) !important; }
.bell-count { position: absolute; top: -0.45rem; right: -0.6rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px;
  background: var(--error); color: #fff; font-size: 0.65rem; font-weight: 700; display: grid; place-items: center; }
.me-link { display: inline-flex; align-items: center; gap: 0.4rem; }

.user-chip { position: relative; display: inline-flex; }
.user-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; font-weight: 600; color: var(--text); }
.user-link:hover { color: var(--accent-text); }
.hovercard { display: none; position: absolute; z-index: 20; left: 0; top: calc(100% + 0.4rem); width: 19rem; padding: 1rem;
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
  font: 400 0.88rem/1.45 var(--sans); color: var(--text); text-align: left; }
.user-chip:hover .hovercard:not(:empty), .user-chip:focus-within .hovercard:not(:empty) { display: block; }
.hovercard::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5rem; height: 0.5rem; } /* keeps hover alive across the gap */
.card-head { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.6rem; }
.card-name { font: 700 1.05rem var(--serif); text-decoration: none; }
.card-head .meta { margin: 0.1rem 0 0; }
.card-about { margin: 0 0 0.75rem; color: var(--ink-soft); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; }
.sub-menu { position: relative; }
.sub-menu > summary { list-style: none; cursor: pointer; }
.sub-menu > summary::-webkit-details-marker { display: none; }
.sub-menu form { position: absolute; z-index: 25; top: calc(100% + 0.3rem); left: 0; width: 16rem; padding: 0.8rem; display: grid; gap: 0.4rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); font-size: 0.85rem; }
.sub-menu form p { margin: 0; }

.profile-page { font-family: var(--sans); }

.profile-id h1 { font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--serif); margin: 0.3rem 0 0.3rem; }
.profile-id p { margin: 0; }
.profile-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.profile-info dl { margin: 0 0 2rem; display: grid; gap: 0.2rem; }
.profile-info dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.7rem; }
.profile-info dd { margin: 0; word-break: break-word; }
.friend-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.wall-form { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--rule); display: grid; gap: 0.6rem; }
.wall-form-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.wall-form-row input[type=url] { flex: 1 1 14rem; }
.file-pick { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; cursor: pointer; color: var(--accent-text); }
.file-pick input { max-width: 12rem; font-size: 0.8rem; }
.wall-post { padding: 1rem 1.25rem; border: 1px solid var(--rule); }
.wall-post > a > img { max-height: 28rem; width: auto; border-radius: 4px; margin-bottom: 0.5rem; }
.wall-link { display: block; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; color: var(--accent-text); word-break: break-all; }

.profile-edit { font-family: var(--sans); max-width: 60rem; }
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.pf-label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.pf-sub { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0.6rem 0 0.25rem; }
.pf-avatar { display: flex; gap: 1rem; align-items: center; }
.pf-vis select { width: 100%; }
.pf-custom { font-size: 0.85rem; }

.pf-save { position: sticky; bottom: 0; padding: 1rem 0; background: var(--paper); }

.friend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.friend-groups { flex-wrap: wrap; gap: 0.75rem !important; font-size: 0.85rem; }
.friend-groups label { font-weight: 400; margin: 0; }
.group-list { display: grid; gap: 0.5rem; margin-bottom: 2rem; }
.group-chip { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.group-chip input[type=text] { width: 16rem; }

@media (max-width: 760px) {
  
  .profile-layout, .pf-row { grid-template-columns: 1fr; }
  .hovercard { width: min(19rem, 85vw); }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--paper-raised); border-top: 1px solid var(--rule); padding-block: 2rem 3rem; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-footer strong { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a { text-decoration: none; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .grid { grid-template-columns: 1fr; }
  .row:where(:not(.conversejs *)) { grid-template-columns: 1fr; gap: 1rem; }
  
  .post__lede { font-size: 1.15rem; }
}

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

/* editing posts and wall entries */
.edit-attachments { margin: 1rem 0; border: 1px solid var(--rule); border-radius: 4px; padding: 0.5rem 1rem; font-family: var(--sans); font-size: 0.9rem; }
.edit-attachments label { display: flex; align-items: center; gap: 0.5rem; }
.edit-attachment-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: 3px; }
.wall-edit-image { display: flex; align-items: center; gap: 1rem; font-family: var(--sans); font-size: 0.9rem; }
.wall-edit-image img { width: 8rem; border-radius: 4px; }
.form-error { color: var(--rt-urgent, #ff6b6b); font-family: var(--sans); }
.forum-post .deleted-note { font-family: var(--sans); font-size: 0.9rem; font-style: italic; color: var(--ink-faint); margin: 0.5rem 0 0; }
.delete-menu summary { color: var(--rt-urgent, #ff6b6b); }

/* deleted content, appeals */
.deleted-box { margin-top: 0.5rem; }
.deleted-content { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--rt-urgent, #ff6b6b); background: color-mix(in srgb, var(--rt-urgent, #ff6b6b) 8%, transparent); }
.deleted-content summary { font-family: var(--sans); font-size: 0.85rem; cursor: pointer; }
.deleted-actions { display: flex; gap: 1rem; align-items: flex-start; font-family: var(--sans); font-size: 0.85rem; }
.deleted-banner { margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--rt-urgent, #ff6b6b); border-radius: 6px;
  background: color-mix(in srgb, var(--rt-urgent, #ff6b6b) 10%, var(--paper-raised)); }
.deleted-banner h1, .deleted-banner h2 { margin-top: 0; color: var(--rt-urgent, #ff6b6b); }
.delete-reason { border: 0; padding: 0; margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.85rem; }
.delete-reason label { display: block; }
.delete-reason textarea, .deleted-actions textarea, .appeal textarea { width: 100%; margin-top: 0.35rem; }
.appeals > li { margin-bottom: 1rem; }
.appeal { padding: 0.6rem 0.9rem; border-radius: 6px; background: var(--paper-raised); border-left: 4px solid var(--rt-warning, #ffd75f); }
.appeal--granted { border-left-color: var(--rt-ok, #6fd08c); }
.appeal--rejected { border-left-color: var(--rule); }
.appeal blockquote { margin: 0.4rem 0; }
button.danger:where(:not(.conversejs *)), .button.danger:where(:not(.conversejs *)) { background: #c62828; border-color: #c62828; color: #fff; }
.vote-banner { border-color: var(--rt-warning, #ffd75f); background: color-mix(in srgb, var(--rt-warning, #ffd75f) 10%, var(--paper-raised)); }
.vote-banner h2 { color: var(--rt-warning, #ffd75f); }
.appeal-form .delete-reason label { margin-bottom: 0.35rem; }

/* sign-up bot protection */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
altcha-widget { display: block; margin: 0.75rem 0 1rem; --altcha-color-base: var(--paper-raised); --altcha-color-text: var(--ink);
  --altcha-color-border: var(--rule); --altcha-border-radius: 6px; --altcha-color-border-focus: var(--focus); }

/* Argumentationslexikon */
.lexikon .lede { font-size: 1.15rem; color: var(--ink-soft); }
.lexikon-search input { width: 100%; max-width: 28rem; }
.lexikon-group { margin-top: 2rem; }
.lexikon-group.depth-1 > h2 { border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; }
.lexikon-group.depth-2 { margin-top: 1.6rem; }
.lexikon-group.depth-3 { margin-top: 1.1rem; padding-left: 0.9rem; border-left: 2px solid var(--rule); }
.lexikon-group.depth-3 > h4 { margin: 0; font-size: 1rem; }
.lexikon-group.depth-3 > .meta { margin: 0.15rem 0 0; font-size: 0.85rem; }
.lexikon-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.5rem 1.25rem; }
.lexikon-list li { display: flex; flex-direction: column; border-left: 3px solid var(--rt-urgent, #ff6b6b); background: var(--paper-raised); }
.lexikon-list li.pol-technik { border-left-color: var(--rt-warning, #ffd75f); }
.lexikon-list li.pol-positiv { border-left-color: var(--rt-ok, #6fd08c); }
.lexikon-list a { font-family: var(--sans); font-weight: 600; text-decoration: none; }
.lexikon-list span { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; }
.lexikon-entry h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.lexikon-related, .lexikon-neighbours, .lexikon-sources { margin-top: 2rem; }
.lexikon-related .lexikon-list { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.neighbour-links { font-family: var(--sans); font-size: 0.92rem; line-height: 1.9; }
.lexikon-sources { border-top: 1px solid var(--rule); padding-top: 1rem; font-family: var(--sans); font-size: 0.9rem; }
.lexikon-sources h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.review-badge { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.55rem; border-radius: 999px; font-weight: 600;
  background: color-mix(in srgb, var(--rt-ok, #6fd08c) 22%, transparent); color: var(--rt-ok, #6fd08c); }
.lexikon-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { font-family: var(--sans); font-size: 0.85rem; padding: 0.2rem 0.75rem; border: 1px solid var(--rule); border-radius: 4px;
  text-decoration: none; color: var(--ink-soft); }
.chip:hover, .chip:focus-visible { color: var(--text); border-color: var(--ink-soft); }
.chip.is-active { color: var(--text); font-weight: 600; }
.chip.pol-fehler.is-active { border-color: var(--rt-urgent, #ff6b6b); }
.chip.pol-technik.is-active { border-color: var(--rt-warning, #ffd75f); }
.chip.pol-positiv.is-active { border-color: var(--rt-ok, #6fd08c); }
.az-index { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 1.5rem; position: sticky; top: 0; z-index: 2; padding-block: 0.5rem;
  background: var(--paper); border-bottom: 1px solid var(--rule); }
.az-index a { font-family: var(--sans); font-weight: 600; min-width: 2rem; text-align: center; padding: 0.2rem 0.4rem; border-radius: 4px; text-decoration: none; }
.az-index a:hover, .az-index a:focus-visible { background: var(--paper-raised); }
.lexikon-group[id^="buchstabe-"] { scroll-margin-top: 3.5rem; }
.lexikon-foot { margin-top: 3rem; }

/* credits */
.credit-balance { font-family: var(--sans); font-size: 1.1rem; }
.credit-balance > span:first-child { font-size: 2.4rem; font-weight: 700; color: var(--rt-ok, #6fd08c); margin-right: 0.25rem; }
.ledger { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.9rem; }
.ledger th, .ledger td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--rule); text-align: left; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger .kind-hold td, .ledger .kind-release td { color: var(--ink-faint); }

/* KI-Überprüfung */
.ai-dialog { font-family: var(--sans, inherit); max-width: min(42rem, 94vw); width: 100%; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-raised);
  color: var(--ink); padding: 1.25rem 1.5rem; box-shadow: 0 24px 64px rgb(0 0 0 / 60%); }
.ai-dialog::backdrop { background: rgb(0 20 26 / 70%); backdrop-filter: blur(2px); }
.ai-dialog h2 { margin-top: 0; font-size: 1.3rem; }
.ai-dialog-body { max-height: 70vh; overflow: auto; }
.ai-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.ai-price strong { color: var(--rt-warning, #ffd75f); font-size: 1.2em; }
.ai-wait { display: flex; align-items: center; gap: 0.75rem; }
.ai-spinner { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--accent-text); animation: ai-spin 0.8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-result h4 { font-family: var(--sans); font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.ai-summary { font-size: 1.05rem; }
.ai-findings { padding-left: 1.4rem; }
.ai-findings li { margin-bottom: 0.9rem; padding-left: 0.5rem; border-left: 3px solid var(--rt-warning, #ffd75f); }
.ai-findings li.sev-3 { border-left-color: var(--rt-urgent, #ff6b6b); }
.ai-findings li.sev-1 { border-left-color: var(--rule); }
.ai-findings blockquote { margin: 0.3rem 0; font-style: italic; }
.ai-better span { font-family: var(--sans); font-weight: 700; color: var(--rt-ok, #6fd08c); }
.ai-clean { color: var(--rt-ok, #6fd08c); font-weight: 600; }
.ai-positives li::marker { content: "✓  "; color: var(--rt-ok, #6fd08c); }
.ai-footer { margin-top: 1rem; font-size: 0.8rem; }

/* Bewertungen: Vergleich KI / Publikum und Equalizer */
:root { --q-ai: #7fb2ff; --q-pub: #c79bff; }
.quality { margin-top: 0.75rem; font-family: var(--sans); }
.q-compare { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; max-width: 34rem; padding: 0.6rem 0.75rem 0.3rem;
  border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }
.q-col { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.q-bars { display: flex; align-items: flex-end; gap: 4px; height: 5.5rem; }
.q-bar { position: relative; width: 0.85rem; height: calc(var(--v) * 10%); min-height: 3px; border-radius: 4px 4px 2px 2px;
  transition: height 500ms cubic-bezier(.2, .9, .3, 1.1); }
.q-bar.q-ai { background: linear-gradient(180deg, #b3d1ff, var(--q-ai)); box-shadow: 0 0 10px color-mix(in srgb, var(--q-ai) 50%, transparent); }
.q-bar.q-pub { background: linear-gradient(180deg, #e5ccff, var(--q-pub)); box-shadow: 0 0 10px color-mix(in srgb, var(--q-pub) 50%, transparent); }
.q-bar.is-empty { background: var(--rule); box-shadow: none; }
.q-bar b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 0.65rem; color: var(--ink-soft); padding-bottom: 2px; }
.q-label { font-size: 0.68rem; color: var(--ink-faint); text-align: center; line-height: 1.1; text-decoration: none; }
a.q-label:hover, a.q-label:focus-visible { color: var(--text); text-decoration: underline; }
.q-legend { font-size: 0.75rem; color: var(--ink-faint); margin: 0.3rem 0 0; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.q-key { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.25rem; vertical-align: middle; }
.q-key.q-ai { background: var(--q-ai); } .q-key.q-pub { background: var(--q-pub); }
.q-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; margin-top: 0.4rem; font-size: 0.85rem; }
.q-ai-details { flex-basis: 100%; }
.q-ai-details summary { cursor: pointer; color: var(--accent-text); }
.q-message { font-size: 0.85rem; color: var(--rt-ok, #6fd08c); }
.q-form { margin-top: 0.75rem; padding: 0.9rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--paper-raised) 85%, #000);
  border: 1px solid var(--rule); max-width: 36rem; }
.q-form[hidden] { display: none; }
.eq { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin: 0.5rem 0 0.9rem; }
.eq-col { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; }
.eq-value { font-size: 1.15rem; font-weight: 700; min-height: 1.5rem; color: var(--ink); }
.eq-value.pop { animation: eq-pop 260ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes eq-pop { 40% { transform: scale(1.35); } }
.eq-slider { writing-mode: vertical-lr; direction: rtl; appearance: none; -webkit-appearance: none; width: 1.6rem; height: 9rem; margin: 0;
  background: transparent; cursor: pointer; --v: 5; }
.eq-slider::-webkit-slider-runnable-track { width: 1.6rem; border-radius: 8px;
  background: linear-gradient(to top, transparent calc(var(--v) * 10%), rgb(0 0 0 / 62%) 0),
              repeating-linear-gradient(to top, transparent 0 calc(10% - 2px), rgb(0 0 0 / 55%) calc(10% - 2px) 10%),
              linear-gradient(to top, #ff6b6b, #ffd75f 50%, #6fd08c);
  box-shadow: inset 0 0 0 1px var(--rule), 0 0 14px color-mix(in srgb, #6fd08c 25%, transparent); }
.eq-slider::-moz-range-track { width: 1.6rem; height: 100%; border-radius: 8px;
  background: linear-gradient(to top, transparent calc(var(--v) * 10%), rgb(0 0 0 / 62%) 0),
              repeating-linear-gradient(to top, transparent 0 calc(10% - 2px), rgb(0 0 0 / 55%) calc(10% - 2px) 10%),
              linear-gradient(to top, #ff6b6b, #ffd75f 50%, #6fd08c); }
.eq-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 2.2rem; height: 0.9rem; border-radius: 6px; background: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgb(255 255 255 / 70%); transition: transform 120ms ease; }
.eq-slider::-moz-range-thumb { width: 2.2rem; height: 0.9rem; border-radius: 6px; background: #fff; border: 0;
  box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgb(255 255 255 / 70%); }
.eq-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.eq-slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.eq-col.is-unset .eq-slider { filter: grayscale(1) brightness(0.7); opacity: 0.55; }
.eq-col.is-unset .eq-value { color: var(--ink-faint); }
.eq-col label { font-size: 0.72rem; text-align: center; line-height: 1.15; color: var(--ink-soft); }
.eq-clear { position: absolute; top: 0; right: 0; background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 0.9rem; padding: 0 0.2rem; }
.eq-col.is-unset .eq-clear { visibility: hidden; }
@media (max-width: 30rem) { .eq-slider { height: 7rem; } .q-label, .eq-col label { font-size: 0.62rem; } }
@media (prefers-reduced-motion: reduce) { .q-bar, .eq-value.pop { transition: none; animation: none; } }
.discussion-profile { margin-top: 1.5rem; font-family: var(--sans); }
.dp-summary { font-size: 1.05rem; font-family: var(--serif); }
.dp-groups { display: flex; gap: 1.25rem; margin: 0.5rem 0 0.75rem; }
.dp-group { display: flex; flex-direction: column; align-items: center; }
.dp-group-value { font-size: 1.8rem; font-weight: 700; color: var(--q-pub); text-shadow: 0 0 12px color-mix(in srgb, var(--q-pub) 45%, transparent); }
.dp-areas { margin-top: 0.75rem; }
.dp-mini { margin: 0.5rem 0; display: grid; gap: 0.2rem; font-family: var(--sans); font-size: 0.72rem; }
.dp-mini-row { display: grid; grid-template-columns: 6.5rem 1fr 2rem; align-items: center; gap: 0.4rem; }
.dp-mini-label { color: var(--ink-faint); }
.dp-mini-track { height: 0.4rem; border-radius: 3px; background: var(--rule); overflow: hidden; }
.dp-mini-track span { display: block; height: 100%; width: calc(var(--v) * 10%); background: linear-gradient(90deg, #ff6b6b, #ffd75f 50%, #6fd08c); }
.dp-mini b { text-align: right; }

/* Fluent Emoji 3D (static/js/emoji3d.js): the glyph stays in the text but is pushed out of a clipped 1.25em box,
   the image fills the box. Colour-font glyphs ignore `color: transparent`, hence text-indent + overflow. */
.e3d { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.36em; overflow: hidden; white-space: nowrap;
  text-indent: 110%; background: var(--e3d) center / contain no-repeat; line-height: 1; }
.e3d::selection { background: transparent; }
.reaction .e3d, .rt-emoji-btn .e3d { width: 1.5em; height: 1.5em; vertical-align: -0.35em; }
.e3d-jumbo .e3d { width: 3.2em; height: 3.2em; vertical-align: middle; background-image: var(--e3d-hd); margin: 0.1em 0.05em; }

/* Thesaurus side panel (forum threads): right third, search pinned on top */
.thesaurus { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(33.333vw, 100vw); min-width: 20rem; max-width: 100vw;
  display: flex; flex-direction: column; background: var(--paper-raised); border-left: 1px solid var(--rule);
  box-shadow: -18px 0 40px rgb(0 0 0 / 35%); animation: th-in 180ms ease-out; }
.thesaurus[hidden] { display: none; }
@keyframes th-in { from { transform: translateX(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .thesaurus { animation: none; } }
.th-head { position: sticky; top: 0; padding: calc(0.9rem + env(safe-area-inset-top, 0px)) 1rem 0.9rem; border-bottom: 1px solid var(--rule);
  background: var(--paper-raised); display: grid; gap: 0.6rem; }
.th-title { display: flex; align-items: center; justify-content: space-between; }
.th-title h2 { margin: 0; font-size: 1.2rem; }
.th-close { font-size: 1.6rem; line-height: 1; background: none; border: 0; color: var(--ink-soft); cursor: pointer; padding: 0.1rem 0.4rem; }
.th-close:hover, .th-close:focus-visible { color: var(--text); }
.th-head input { width: 100%; }
.th-body { flex: 1; overflow-y: auto; padding: 0.75rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.th-count { margin: 0 0 0.5rem; }
.th-letter h3 { font-size: 0.95rem; margin: 1rem 0 0.35rem; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.th-list li { border-left: 3px solid var(--rt-urgent, #ff6b6b); background: var(--paper); border-radius: 0 4px 4px 0; }
.th-list li.pol-technik { border-left-color: var(--rt-warning, #ffd75f); }
.th-list li.pol-positiv { border-left-color: var(--rt-ok, #6fd08c); }
.th-list a { display: grid; gap: 0.1rem; padding: 0.4rem 0.6rem; text-decoration: none; color: var(--text); }
.th-list a:hover, .th-list a:focus-visible { background: color-mix(in srgb, var(--paper-raised) 60%, transparent); }
.th-list strong { font-family: var(--sans); font-size: 0.92rem; }
.th-list span { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-entry h3 { margin: 0.2rem 0 0.3rem; font-size: 1.3rem; }
.th-entry h4 { margin: 1.1rem 0 0.3rem; font-size: 0.95rem; }
.th-entry blockquote { margin: 0; padding-left: 0.8rem; border-left: 3px solid var(--rule); font-style: italic; }
.th-lede { font-size: 1.02rem; color: var(--ink-soft); }
.th-back { margin-bottom: 0.4rem; }
.th-related { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.th-empty { color: var(--ink-soft); }
/* wide screens: the thread moves aside instead of being covered */
@media (min-width: 62rem) { body.panel-open { --th-w: max(33.333vw, 20rem); }
  body.panel-open main, body.panel-open .site-footer { margin-right: var(--th-w); transition: margin-right 180ms ease-out; } }
@media (max-width: 40rem) { .thesaurus { left: 0; width: auto; min-width: 0; } }
.governance select, .governance input { max-width: 100%; }

/* Thesaurus topic filter: every row on one grid - checkbox | ~/&/! switch | name | count */
.th-filters { border: 0; padding: 0; margin: 0.1rem 0 0; min-width: 0; font-family: var(--sans); position: relative; }
.th-filter-head { display: flex; align-items: baseline; gap: 0.75rem; }
.th-filters legend { float: left; padding: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.th-legend { font-size: 0.75rem; color: var(--ink-faint); }
.th-legend b { font-family: var(--mono, ui-monospace, monospace); color: var(--ink-soft); }
.th-reset { font-size: 0.8rem; margin-left: auto; }
.th-roots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.9rem; margin-top: 0.35rem; align-items: start; }
.th-node { min-width: 0; }
.th-node:has(> .th-subs:not([hidden])) { grid-column: 1 / -1; }
.th-row { display: grid; grid-template-columns: 1rem 1.55rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.4rem; min-height: 1.75rem;
  font-size: 0.85rem; line-height: 1.25; }
.th-row input.th-box { margin: 0; width: 1rem; height: 1rem; accent-color: var(--accent-text, #7cc4e4); cursor: pointer; }
.th-op { width: 1.55rem; height: 1.4rem; padding: 0; border-radius: 4px; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink-soft); font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 0.85rem; cursor: pointer; line-height: 1; }
.th-op:hover, .th-op:focus-visible { border-color: var(--ink-soft); color: var(--text); }
.th-op[data-op="and"] { color: var(--rt-ok, #6fd08c); border-color: color-mix(in srgb, var(--rt-ok, #6fd08c) 55%, var(--rule)); }
.th-op[data-op="not"] { color: var(--rt-urgent, #ff6b6b); border-color: color-mix(in srgb, var(--rt-urgent, #ff6b6b) 55%, var(--rule)); }
.th-name { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.th-row-inner .th-name { font-weight: 600; }
.th-subs .th-row-inner .th-name { font-weight: 600; font-size: 0.84rem; }
button.th-name { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 0.35rem; }
button.th-name:hover, button.th-name:focus-visible { text-decoration: underline; }
.th-chev { color: var(--ink-soft); font-size: 0.8rem; }
.th-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 0.78rem; }
.th-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.05rem 0.9rem; margin: 0.15rem 0 0.35rem 0.5rem;
  padding-left: 0.85rem; border-left: 1px solid var(--rule); }
.th-subs[hidden] { display: none; }
.th-balloon { grid-column: 1 / -1; position: relative; margin: 0.45rem 0 0.4rem; padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.85rem;
  background: color-mix(in srgb, var(--rt-warning, #ffd75f) 16%, var(--paper)); border: 1px solid color-mix(in srgb, var(--rt-warning, #ffd75f) 60%, var(--rule)); }
.th-balloon::before { content: ""; position: absolute; top: -7px; left: 1.6rem; width: 12px; height: 12px; transform: rotate(45deg);
  background: inherit; border-left: inherit; border-top: inherit; }
.th-balloon[hidden] { display: none; }
.th-balloon-text { margin: 0 0 0.5rem; }
.th-balloon-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.th-conflict { margin: 0 0 0.5rem; padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.85rem;
  background: color-mix(in srgb, var(--rt-warning, #ffd75f) 14%, transparent); border-left: 3px solid var(--rt-warning, #ffd75f); }

@media (max-width: 26rem) { .th-roots, .th-subs { grid-template-columns: minmax(0, 1fr); } }

.th-search-balloon { margin-top: 0.5rem; }
.th-search-balloon::before { left: 1rem; }
.th-choices { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; margin-top: 0.4rem; }
.th-choice { font-family: var(--mono, ui-monospace, monospace); font-size: 0.85rem; padding: 0.25rem 0.6rem; border-radius: 6px; cursor: pointer;
  background: var(--paper); color: var(--text); border: 1px solid var(--rule); text-align: left; }
.th-choice:hover, .th-choice:focus-visible { border-color: var(--rt-ok, #6fd08c); color: var(--rt-ok, #6fd08c); }
.th-formula { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.th-formula code { font-size: 0.8rem; color: var(--text); overflow-wrap: anywhere; }
.lexikon-ambiguous { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-family: var(--sans); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  background: color-mix(in srgb, var(--rt-warning, #ffd75f) 14%, transparent); border-left: 3px solid var(--rt-warning, #ffd75f); }
.lexikon-ambiguous .chip { font-family: var(--mono, ui-monospace, monospace); }

/* #-picker (static/js/hashtags.js) */
input[data-hashtags] + .pf-hashtags { position: absolute; left: 0; right: 0; z-index: 60; margin-top: 0.35rem; }
form:has(> input[data-hashtags]), .lexikon-search { position: relative; }
.pf-hashtags { max-height: min(60vh, 26rem); overflow-y: auto; padding: 0.6rem 0.75rem; border-radius: 10px; font-family: var(--sans);
  background: var(--paper-raised); border: 1px solid var(--rule); box-shadow: 0 16px 40px rgb(0 0 0 / 45%); animation: pf-pop 140ms ease-out; }
.pf-hashtags[hidden] { display: none; }
@keyframes pf-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pf-hashtags { animation: none; } }
.pf-hashtags-head { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--ink-soft); }
.pf-hashtags ul { list-style: none; margin: 0; padding: 0; }
.pf-hashtags ul ul { margin-left: 0.55rem; padding-left: 0.85rem; border-left: 1px solid var(--rule); }
.pf-hashtags-row { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 2rem minmax(0, 11rem); align-items: center; gap: 0.5rem; min-height: 1.8rem; font-size: 0.88rem; }
.pf-hashtags-row input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--accent-text, #7cc4e4); cursor: pointer; }
.pf-hashtags-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
button.pf-hashtags-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; }
button.pf-hashtags-name:hover, button.pf-hashtags-name:focus-visible { text-decoration: underline; }
.pf-hashtags-chev { color: var(--ink-soft); font-size: 0.8rem; }
.pf-hashtags-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 0.78rem; }
.pf-hashtags-tag { font-size: 0.72rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 30rem) { .pf-hashtags-row { grid-template-columns: 1rem minmax(0, 1fr) 2rem; } .pf-hashtags-tag { display: none; } }
.th-head input[data-hashtags] + .pf-hashtags { position: static; margin: 0.4rem 0 0; box-shadow: none; }  /* the panel head scrolls; keep the picker in its flow */

.lexikon-areas { margin-top: 0.75rem; max-width: 40rem; }
.lexikon-areas > summary { cursor: pointer; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }
.lexikon-areas[open] > summary { margin-bottom: 0.5rem; }
.lexikon-areas .th-filters { padding: 0.75rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-raised); }

.th-node[hidden] { display: none; }
/* while the #-picker is open in the thesaurus it shows the tree; the topic filter (same tree) steps aside */
.search-panel:has(.pf-hashtags:not([hidden])) .th-filter-section { display: none; }
.th-head input[data-hashtags] + .pf-hashtags { max-height: 55vh; overflow-y: auto; }

/* Thesaurus head tools: on/off switches, show/hide icons, close */
.th-tools { display: flex; align-items: center; gap: 0.3rem; }
.th-switch { font-family: var(--sans); font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 4px; cursor: pointer; line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--rt-ok, #6fd08c) 55%, var(--rule)); color: var(--rt-ok, #6fd08c); background: transparent; white-space: nowrap; }
.th-switch[aria-pressed="false"] { border-color: var(--rule); color: var(--ink-faint); text-decoration: line-through; }
.th-switch:hover, .th-switch:focus-visible { background: var(--paper); }
.th-tool { position: relative; width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border-radius: 6px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink-soft); }
.th-tool svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.th-tool[aria-pressed="true"] { color: var(--text); background: var(--paper); border-color: var(--rule); }
.th-tool:hover, .th-tool:focus-visible { color: var(--text); border-color: var(--ink-soft); }
.th-dot { position: absolute; top: 0.2rem; right: 0.2rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rt-warning, #ffd75f);
  box-shadow: 0 0 0 2px var(--paper-raised); }
.th-dot[hidden] { display: none; }
.th-section[hidden] { display: none; }
.th-section.is-off { opacity: 0.45; }
.th-section.is-off::after { content: "ausgesetzt – wirkt gerade nicht"; display: block; font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.2rem; }
.th-filter-section { margin: 0 0 0.9rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule); }
@media (max-width: 26rem) { .th-switch { font-size: 0.7rem; padding: 0.1rem 0.4rem; } .th-tools { gap: 0.15rem; } }

/* forum search results in the panel */
.th-titles { min-width: 0; }
.th-scope { margin: 0; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-scope:empty { display: none; }
.fs-thread { margin: 0 0 1rem; }
.fs-thread h3 { margin: 0; font-size: 1rem; }
.fs-thread h3 a { text-decoration: none; }
.fs-thread > .meta { margin: 0.1rem 0 0.35rem; font-size: 0.78rem; }
.fs-thread .th-list li, .fs-posts li { border-left-color: var(--accent-text); }
.th-tool[hidden], .th-switch[hidden] { display: none; }
/* narrow panels: one row per area instead of two squeezed columns */
.th-filters { container-type: inline-size; }
@container (max-width: 32rem) { .th-roots, .th-subs { grid-template-columns: minmax(0, 1fr); } }

/* @mentions: the name in yellow (apps/richtext/sanitize.py renders them), briefly flashed when jumped to */
.rt .mention { color: var(--rt-warning, #ffd75f); font-weight: 700; }
.rt .mention.is-flash { animation: mention-flash 1.6s ease-out; border-radius: 3px; }
@keyframes mention-flash { 0%, 40% { background: color-mix(in srgb, var(--rt-warning, #ffd75f) 45%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rt .mention.is-flash { animation: none; outline: 2px solid var(--rt-warning, #ffd75f); } }

.mentions-col { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-family: var(--sans);
  padding: 0.9rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-raised); }
.mentions-col h2 { margin: 0 0 0.3rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.mentions-count { display: inline-block; min-width: 1.4rem; text-align: center; border-radius: 999px; padding: 0 0.35rem; margin-left: 0.2rem;
  background: color-mix(in srgb, var(--rt-warning, #ffd75f) 25%, transparent); color: var(--rt-warning, #ffd75f); letter-spacing: 0; }
.mentions-col > .meta { margin: 0 0 0.5rem; font-size: 0.78rem; }
.mention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.mention-list a { display: grid; gap: 0.05rem; padding: 0.35rem 0.5rem; border-radius: 6px; text-decoration: none; border-left: 3px solid var(--rule); }
.mention-list a:hover, .mention-list a:focus-visible, .mention-list a.is-current { background: var(--paper); border-left-color: var(--rt-warning, #ffd75f); }
.mention-list .is-me a { border-left-color: var(--rt-warning, #ffd75f); }
.mention-name { color: var(--rt-warning, #ffd75f); font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.mention-where { color: var(--ink-faint); font-size: 0.75rem; }
.wall-mentions { position: static; max-height: 22rem; margin-bottom: 1.25rem; }

/* @-completion (static/js/mentions.js) */
.pf-names { position: fixed; z-index: 80; list-style: none; margin: 0; padding: 0.3rem; min-width: 14rem; max-width: 18rem; font-family: var(--sans);
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 12px 30px rgb(0 0 0 / 45%); }
.pf-names[hidden] { display: none; }
.pf-names li { display: grid; gap: 0.05rem; padding: 0.35rem 0.55rem; border-radius: 6px; cursor: pointer; }
.pf-names li b { color: var(--rt-warning, #ffd75f); font-size: 0.9rem; }
.pf-names li span { color: var(--ink-faint); font-size: 0.75rem; }
.pf-names li span:empty { display: none; }
.pf-names li.is-active, .pf-names li:hover { background: var(--paper); }

.pf-hashtags-often { margin-left: 0.4rem; font-size: 0.68rem; font-weight: 600; padding: 0 0.4rem; border-radius: 999px; vertical-align: 0.1rem;
  background: color-mix(in srgb, var(--rt-ok, #6fd08c) 22%, transparent); color: var(--rt-ok, #6fd08c); }

/* Gelbe Seiten (member directory) */
.directory-tools { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: center; margin-top: 0.9rem; }
.directory-tools input[type=search] { max-width: 18rem; }
.directory-group { margin-top: 1.5rem; }
.directory-group > h2 { border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; }
.directory-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.4rem 1rem; }
.directory-list li[hidden], .directory-group[hidden] { display: none; }
.directory-entry { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.6rem; cursor: pointer; text-align: left;
  background: var(--paper-raised); border: 1px solid transparent; color: var(--text); font: inherit; }
.directory-entry:hover, .directory-entry:focus-visible { border-color: var(--rt-warning, #ffd75f); }
.directory-name { display: grid; min-width: 0; font-family: var(--sans); }
.directory-name b { overflow-wrap: anywhere; }
.directory-name span, .directory-joined { color: var(--ink-faint); font-size: 0.8rem; }
.directory-joined { margin-left: auto; white-space: nowrap; font-family: var(--sans); }
.directory-dialog { width: min(34rem, 94vw); padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-raised); color: var(--text); }
.directory-dialog::backdrop { background: rgb(0 20 26 / 70%); backdrop-filter: blur(2px); }
.directory-dialog-body { padding: 1.25rem; }
.directory-card-head { display: flex; gap: 0.9rem; align-items: center; }
.directory-card-head h2 { margin: 0; font-size: 1.35rem; }
.directory-card-head h2 a { text-decoration: none; }
.directory-card-head .meta { margin: 0.1rem 0 0; }
.directory-card-head .th-close { margin-left: auto; align-self: flex-start; }
.directory-fields { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 1rem 0; font-family: var(--sans); font-size: 0.92rem; }
.directory-fields > div { display: contents; }
.directory-fields dt { color: var(--ink-soft); }
.directory-fields dd { margin: 0; overflow-wrap: anywhere; }
.directory-card-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.directory-report { flex-basis: 100%; display: grid; gap: 0.4rem; }
.directory-report[hidden] { display: none; }
.danger-outline { border-color: color-mix(in srgb, var(--rt-urgent, #ff6b6b) 60%, var(--rule)) !important; color: var(--rt-urgent, #ff6b6b) !important; }

/* profile sharing: switch "Öffentlich" + "Anpassen" next to every item */
.pf-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pf-vis label.pf-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: var(--sans); font-size: 0.88rem; font-weight: 600; margin: 0; }
.pf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-track { display: inline-block; position: relative; width: 2.6rem; height: 1.45rem; border-radius: 999px; background: var(--rule); transition: background-color 160ms ease; flex: none; }
.pf-track::after { content: ""; position: absolute; top: 0.18rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ink-soft);
  transition: transform 160ms ease, background-color 160ms ease; }
.pf-switch input:checked + .pf-track { background: color-mix(in srgb, var(--rt-ok, #6fd08c) 55%, var(--rule)); }
.pf-switch input:checked + .pf-track::after { transform: translateX(1.1rem); background: #fff; }
.pf-switch input:focus-visible + .pf-track { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pf-track, .pf-track::after { transition: none; } }
.pf-summary { margin: 0.35rem 0 0; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); }
.pf-summary span { color: var(--ink-soft); }
.pf-custom { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: 8px; display: grid; gap: 0.2rem; }
.pf-custom[hidden], .pf-custom-detail[hidden] { display: none; }
.pf-custom label { font-weight: 400; margin: 0; }
.pf-custom-detail { display: grid; gap: 0.2rem; margin: 0.35rem 0 0 1.4rem; }

.profile-edit input[readonly] { opacity: 0.75; cursor: not-allowed; }

.pf-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 90; padding: 0.55rem 1rem; border-radius: 999px;
  font-family: var(--sans); font-size: 0.9rem; background: var(--paper-raised); border: 1px solid var(--rt-ok, #6fd08c); color: var(--text);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%); animation: pf-toast-in 160ms ease-out; }
@keyframes pf-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.profile-edit select[id^="id_birthday_"] { width: auto; display: inline-block; margin-right: 0.4rem; }
.profile-edit input[type=number] { width: 7rem; }

.seen-by { color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; }
.directory-self { margin: 0.75rem 0 0; font-size: 0.85rem; }

/* writing on request: sticky bar on top of the posts, panel opens below the bar or below a post */
.compose-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.6rem 0; margin-bottom: 0.75rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.compose-panel { margin: 0 0 1.25rem; padding: 1rem; border: 1px solid var(--rt-warning, #ffd75f); border-radius: 10px;
  background: var(--paper-raised); box-shadow: 0 10px 30px rgb(0 0 0 / 30%); animation: compose-in 160ms ease-out; }
.compose-panel[hidden] { display: none; }
@keyframes compose-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .compose-panel { animation: none; } }
.compose-panel h2, .compose-panel h3 { margin-top: 0; }
.compose-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.post-item + .compose-panel { margin-top: -0.5rem; }
.mail-form { display: grid; gap: 0.35rem; }
.message-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.75rem; }
.message:where(:not(.conversejs *)) { padding: 0.8rem 1rem; border: 1px solid var(--rule); background: var(--paper-raised); }
.message.is-unread:where(:not(.conversejs *)) { border-left: 3px solid var(--rt-warning, #ffd75f); }
.message header:where(:not(.conversejs *)) { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.message p:where(:not(.conversejs *)) { margin: 0.5rem 0 0; }
.message-actions { position: static; border: 0; padding: 0.3rem 0 0; margin: 0; background: transparent; }

/* Kommunikationszentrale */
.widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); margin-top: 1rem; align-items: start; }
.widget { border: 1px solid var(--rule); min-width: 0; }
.widget > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.widget h2 { margin: 0; }
.widget-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.widget-list a, .widget-row { position: relative; display: grid; gap: 0.1rem; padding: 0.45rem 0.6rem; text-decoration: none; }

.widget-list strong { font-size: 0.92rem; color: var(--text); padding-right: 2rem; overflow-wrap: anywhere; }
.widget-list span { color: var(--ink-soft); overflow-wrap: anywhere; }
.widget-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; font-family: var(--sans); font-size: 0.9rem; }
.widget-badge { position: absolute; top: 0.45rem; right: 0.55rem; min-width: 1.4rem; text-align: center; border-radius: 999px; padding: 0 0.35rem;
  font-family: var(--sans); font-size: 0.75rem; }
label.check { display: flex; gap: 0.4rem; align-items: center; font-weight: 400; font-size: 0.9rem; }

.namecard-pop { position: fixed; z-index: 60; width: min(24rem, calc(100vw - 16px)); max-height: min(70vh, 34rem); overflow: auto;
  background: var(--paper-raised); color: var(--text); border: 1px solid var(--rule); box-shadow: 0 0.6rem 2rem rgb(0 0 0 / 0.35); padding: 1rem; }
.namecard-pop .directory-card-head h2 { font-size: 1.1rem; }
span.mention[data-mention], .mention-name { cursor: pointer; }

/* Kommunikationszentrale: Solarized accents per widget (chat cyan, mail blue, invites green, replies yellow, ratings magenta) */
.comm { --hue-c: var(--c-chat); padding-block: 0.25rem 2.5rem; }
.icon { flex: none; vertical-align: -0.2em; }

/* the chat card */
.comm-chat { position: relative; overflow: hidden; display: grid; gap: 1.25rem; padding: clamp(1.1rem, 3vw, 1.75rem); margin-bottom: 1.25rem; border: 1px solid color-mix(in srgb, var(--c-chat) 40%, transparent);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c-chat) 26%, var(--paper-raised)) 0%, var(--paper-raised) 55%, var(--paper) 100%); }
.comm-chat::before, .comm-chat::after { content: ""; position: absolute; pointer-events: none; border-radius: 28px 28px 28px 6px;
  background: color-mix(in srgb, var(--c-chat) 12%, transparent); }
.comm-chat::before { width: 11rem; height: 7rem; right: -2rem; top: -1.5rem; transform: rotate(-8deg); }
.comm-chat::after { width: 7rem; height: 4.5rem; right: 7.5rem; bottom: -1.75rem; border-radius: 22px 22px 6px 22px; transform: rotate(6deg);
  background: color-mix(in srgb, var(--c-mail) 12%, transparent); }

.comm-chat h2 { margin: 0 0 0.15rem; font-size: 1.5rem; }

.comm-people { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.comm-people a { display: grid; justify-items: center; gap: 0.3rem; width: 4.75rem; padding: 0.5rem 0.25rem; border-radius: 14px; text-decoration: none;
  transition: background 0.15s, transform 0.15s; }
.comm-people .avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px color-mix(in srgb, var(--c-chat) 45%, transparent); transition: box-shadow 0.15s; }
.comm-people span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.75rem var(--sans); color: var(--ink-soft); }
.comm-people a:hover, .comm-people a:focus-visible { background: color-mix(in srgb, var(--c-chat) 14%, transparent); transform: translateY(-2px); }
.comm-people a:hover .avatar { box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--c-chat); }
.comm-people a:hover span { color: var(--text); }

/* the widgets */

.widget { --hue-c: var(--c-chat);  position: relative; overflow: clip; padding: 1.1rem; border-color: color-mix(in srgb, var(--hue-c) 22%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue-c) 9%, var(--paper-raised)), var(--paper-raised) 6rem); }
.widget > header { margin-bottom: 0.75rem; }
.widget h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; }
.widget h2 .icon { box-sizing: content-box; padding: 0.4rem; color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 16%, transparent); }
.widget-count { min-width: 1.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; text-align: center; font: 700 0.75rem var(--sans);
  color: var(--paper); background: var(--hue-c); }
.widget-list a, .widget-row { border-left: 3px solid transparent; background: color-mix(in srgb, var(--paper) 45%, transparent);
  transition: background 0.15s, border-color 0.15s; }
.widget-list a:hover, .widget-list a:focus-visible { border-left-color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 10%, var(--paper)); }
.widget-list .is-unread a { border-left-color: var(--hue-c); }
.widget-badge { background: var(--hue-c); color: var(--paper); }
.widget-score { position: absolute; top: 0.45rem; right: 0.55rem; padding: 0.05rem 0.5rem; border-radius: 999px; font: 700 0.75rem var(--sans);
  color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 16%, transparent); font-variant-numeric: tabular-nums; }
.widget-empty { padding: 1rem; border: 1px dashed color-mix(in srgb, var(--hue-c) 30%, var(--rule)); text-align: center;
  font: 0.85rem var(--sans); color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .comm *, .comm *::before, .comm *::after { transition: none !important; }
  .comm-people a:hover, .comm-chat-open.button:hover { transform: none; }
}

/* Chat button in the Gelbe Seiten popup and on the profile */
.chat-cta { display: inline-flex; align-items: center; gap: 0.35rem; border-color: #2aa198; background: #2aa198; color: var(--paper); }
.chat-cta:hover { color: var(--paper); }
.chat-cta .icon { width: 1rem; height: 1rem; }

/* ==========================================================================
   Design layer (2026-10-12): one look for every page, in the style of the Kommunikationszentrale -
   rounded cards with a soft accent glow, pill buttons, rows that light up, dashed empty states.
   ========================================================================== */

/* headings: calmer sizes, balanced lines */
main h1 { text-wrap: balance; letter-spacing: -0.01em; }
.forum-head h1, .account-page main h1, .wrap.panel > h1, .directory h1, .lexikon h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
main h2 { text-wrap: balance; }
.section-label { color: var(--accent-text); }

/* every boxed thing: one card language */
.wall-post, .wall-form, .notice, .forum-tree > li, .notification-list li, .directory-entry, .lexikon-list li,
.governance, .sidebar-box, .thread-list > li, .ledger-wrap {
  border-radius: var(--radius); }
.wall-post, .wall-form {
  border-color: color-mix(in srgb, var(--c-chat) 18%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 7%, var(--paper-raised)), var(--paper-raised) 5rem); }
.notice { border: 1px solid color-mix(in srgb, var(--c-mail) 35%, var(--rule)); border-left-width: 1px;
  background: color-mix(in srgb, var(--c-mail) 10%, var(--paper-raised)); }

/* forum: every area is a card, threads and topics are rows that light up */
.forum-tree { display: grid; gap: 0.9rem; }
.forum-tree > li, .forum-tree > li:first-child { border: 1px solid color-mix(in srgb, var(--c-chat) 18%, var(--rule)); padding: 0.25rem 1rem 0.5rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 8%, var(--paper-raised)), var(--paper-raised) 4.5rem); }
.tree-node > summary { transition: background 0.15s; }
.tree-topic > summary:hover, .tree-thread:hover { background: color-mix(in srgb, var(--c-chat) 9%, transparent); }
.tree-thread { padding-inline-end: 0.5rem; transition: background 0.15s; }
.tree-children { border-left-color: color-mix(in srgb, var(--c-chat) 25%, var(--rule)); }
.tree-search-btn { border-radius: 4px; }
.tree-empty { color: var(--ink-faint); }

.thread-list { display: grid; gap: 0.5rem; }
.thread-list > li { border: 1px solid var(--rule); background: var(--paper-raised); transition: border-color 0.15s, background 0.15s; }
.thread-list > li:hover { border-color: color-mix(in srgb, var(--c-chat) 45%, var(--rule)); background: color-mix(in srgb, var(--c-chat) 6%, var(--paper-raised)); }

/* notifications: cards, unread ones glow */

.notification-list li.meta, .thread-list > li.meta, li.widget-empty, .tree-empty:only-child {
  padding: 1rem; text-align: center; border: 1px dashed var(--rule); background: transparent; }

/* Gelbe Seiten, lexicon: cards that lift a little */
.directory-entry, .lexikon-list li { transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.directory-entry:hover, .lexikon-list li:hover { transform: translateY(-2px); }
.lexikon-list li { padding: 0.7rem 0.9rem; }

/* tables (Guthaben and others) */
main table:not(.plain) { border-collapse: separate; border-spacing: 0; width: 100%; overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-raised); }
main table:not(.plain) th { background: color-mix(in srgb, var(--c-chat) 10%, var(--paper-raised)); text-align: left; }
main table:not(.plain) th, main table:not(.plain) td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule); }
main table:not(.plain) tr:last-child td { border-bottom: 0; }
main table:not(.plain) tbody tr:hover td { background: color-mix(in srgb, var(--c-chat) 6%, transparent); }

/* Guthaben: the balance as a tile */
.credit-balance { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 1rem 1.4rem; margin: 0.5rem 0 1rem; border: 1px solid color-mix(in srgb, var(--c-invite) 40%, var(--rule));
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-invite) 16%, var(--paper-raised)), var(--paper-raised)); }

/* toggles, chips, small things */
.chip { transition: border-color 0.15s, background 0.15s, color 0.15s; }
.chip:hover { background: color-mix(in srgb, var(--c-chat) 10%, transparent); border-color: var(--c-chat); }
.chip.is-active { border-color: var(--c-chat); background: color-mix(in srgb, var(--c-chat) 16%, var(--paper-raised)); }
.badge { border-radius: 999px; padding-inline: 0.55rem; }

/* Mein Konto: tiles */
.account-page main > .account-hub { max-width: 56rem; }
.account-hub .account-who { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; }
.account-hub .account-who p { margin: 0; }
.account-tiles { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.account-tiles a { --hue-c: var(--c-chat); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.85rem;
  height: 100%; padding: 1rem; text-decoration: none; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--hue-c) 22%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue-c) 9%, var(--paper-raised)), var(--paper-raised) 5rem);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.account-tiles a:hover, .account-tiles a:focus-visible { transform: translateY(-2px); border-color: var(--hue-c); box-shadow: 0 0.5rem 1.4rem rgb(0 0 0 / 0.25); }
.account-tiles .icon { grid-row: span 2; box-sizing: content-box; width: 1.3rem; height: 1.3rem; padding: 0.55rem;
  color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 16%, transparent); }
.account-tiles strong { font: 600 1rem var(--sans); }
.account-tiles span { font: 0.82rem var(--sans); color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  button, .button, .directory-entry, .lexikon-list li, .account-tiles a { transition: none !important; transform: none !important; }
}
.account-page main .widget h2 { margin: 0; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.account-page main > .account-hub .widgets { margin-top: 0; }
/* widgets on other pages: room between stacked cards */

/* Menu bar: a floating dock - one capsule, every entry with its own coloured icon plate (like the widgets) */
.mainnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; padding-block: 0.6rem; border: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }  /* sticks all the way down; text passing under it stays readable */
.mainnav ul.wrap { width: fit-content; max-width: calc(100% - var(--gutter-start) - var(--gutter)); margin-inline: auto; padding: 0.2rem;
  gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  border: 1px solid color-mix(in srgb, var(--c-chat) 22%, var(--paper));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 12%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised)));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mainnav ul.wrap::-webkit-scrollbar { display: none; }
.mainnav li { flex: none; }
.mainnav a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.9rem 0 0.1rem; line-height: 1.2; border-radius: 999px;
  text-transform: none; letter-spacing: 0.01em; font-size: 0.92rem; color: var(--ink-soft); border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.mainnav a .icon { box-sizing: content-box; width: 1.05rem; height: 1.05rem; padding: 0.45rem; border-radius: 50%;
  color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 18%, transparent); transition: transform 0.15s, background 0.15s, color 0.15s; }
.mainnav a:hover { color: var(--text); background: color-mix(in srgb, var(--hue-c) 12%, transparent); }
.mainnav a:hover .icon { transform: scale(1.08); }
.mainnav a[aria-current="page"] { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--hue-c) 20%, transparent); }
.mainnav a[aria-current="page"] .icon { color: var(--paper); background: var(--hue-c); }
@media (max-width: 40rem) { .mainnav a { padding-right: 0.8rem; font-size: 0.85rem; } }

/* top right: CC, Pinnwand, me */
.account-links { gap: 0.5rem; }
.top-link { position: relative; display: inline-flex; align-items: center; border-radius: 999px; font: 600 0.85rem var(--sans); text-decoration: none;
  transition: border-color 0.15s, background 0.15s; }

.top-link.me-link { padding-left: 0.3rem; }
.cc-link .bell-count { top: -0.4rem; right: -0.4rem; }
/* a count without a number (hidden, or emptied by a script) shows no empty bubble - display above beats [hidden] */
.bell-count[hidden], .bell-count:empty { display: none !important; }

/* Profile picture: click opens the uploaded original, at most 1024 px wide (or the screen), height proportional */
img.avatar, converse-avatar { cursor: zoom-in; }
.avatar-dialog { position: fixed; padding: 0; border: 1px solid color-mix(in srgb, var(--c-chat) 35%, var(--rule));
  background: var(--paper-raised); max-width: min(1024px, 94vw); max-height: none; overflow: visible; }
.avatar-dialog::backdrop { background: rgb(0 0 0 / 0.7); backdrop-filter: blur(4px); }
.avatar-dialog img { display: block; width: auto; height: auto; max-width: min(1024px, 94vw); }
.avatar-dialog .th-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%;
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: 1.4rem; line-height: 1; }

/* menu separators: an engraved groove - a dark and a light line side by side, fading out at both ends */
.mainnav li.menu-sep, .account-links .menu-sep { flex: none; align-self: center; width: 3px; height: 22px; margin-inline: 7px;
  border-left: 2px solid rgb(0 0 0 / 0.65); border-right: 1px solid rgb(255 255 255 / 0.17);  /* whole pixels: both look alike */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22.5%, #000 77.5%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22.5%, #000 77.5%, transparent); }

/* top right: the same look as the main menu - a small dock with colour plates and engraved grooves */
.account-links:has(.top-link) { gap: 0.15rem;
  border: 1px solid color-mix(in srgb, var(--c-chat) 22%, var(--paper));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 12%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised))); }
.account-links .menu-sep { height: 20px; margin-inline: 3px; }
.top-link { --hue-c: var(--c-chat); gap: 0.4rem; padding: 0.15rem 0.65rem 0.15rem 0.15rem; font-size: 0.82rem; border: 1px solid transparent;
  color: var(--ink-soft) !important; background: none; }
.top-link .icon { box-sizing: content-box; width: 0.9rem; height: 0.9rem; padding: 0.3rem; border-radius: 50%;
  color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 18%, transparent); }
.top-link:hover, .top-link:focus-visible { color: var(--text) !important; border-color: transparent;
  background: color-mix(in srgb, var(--hue-c) 12%, transparent); }
.top-link .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hue-c) 45%, transparent); }
.top-link[aria-current="page"] { color: var(--text) !important; background: color-mix(in srgb, var(--hue-c) 20%, transparent); }
.top-link[aria-current="page"] .icon { color: var(--paper); background: var(--hue-c); }
.top-link[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--hue-c); }
/* the dock must not run into the centred wordmark: narrower screens show icons (the label stays for screen readers) */
.top-link > span:not(.bell-count) { white-space: nowrap; }
@media (min-width: 48rem) and (max-width: 75rem) {
  .top-link:not(.me-link) > span:not(.bell-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top-link:not(.me-link) { padding-right: 0.15rem; }
}
@media (min-width: 48rem) and (max-width: 62rem) {
  .top-link.me-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top-link.me-link { padding-right: 0.15rem; }
}
/* Fluent 3D icons are pictures: no stroke colour, a little lift */
.icon-3d { object-fit: contain; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); }
.icon-3d { box-sizing: content-box; width: 1.25em; height: 1.25em; }
.mainnav a .icon-3d { width: 1.55rem; height: 1.55rem; padding: 0.1rem; }
.top-link .icon-3d { width: 1.3rem; height: 1.3rem; padding: 0.15rem; }
.account-tiles .icon-3d { width: 1.9rem; height: 1.9rem; padding: 0.3rem; }
.widget h2 .icon-3d { width: 1.4rem; height: 1.4rem; padding: 0.25rem; }

/* Full screen width where it is content (lists, grids, boards); settings and forms keep their narrow column */
.wrap.forum, .wrap.comm, .wrap.directory, .wrap.lexikon:not(.narrow-form), .wrap.profile-page, .wrap.wide { max-width: none; }
.wrap.wide .column-wide { max-width: none; }

/* Header: the dock sits at the right edge, date and time at the left edge - as far from the side as from the top */
@media (min-width: 48rem) {
  .masthead > .wrap { max-width: none; }
  .masthead__top { inset: 0.75rem 0.75rem auto; display: flex; align-items: center; justify-content: space-between; }
}
.masthead-date time { font-variant-numeric: tabular-nums; }
/* Command Central (templates/base.html): top left on wide screens, from the corner down to the menu bar's lower edge and
   up to the wordmark (sizes from the page's script), fading out to the right. For now an invisible frame with the time
   and the date - the date line of the header stays for narrow screens. */
.command-central { display: none; }
@media (min-width: 48rem) {
  .masthead__top .masthead-date { visibility: hidden; }
  .command-central { position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; gap: 0.3rem;
    box-sizing: border-box; width: var(--cc-w, 16rem); height: var(--cc-h, 9rem); padding: 0.75rem 0.75rem 0;
    mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); pointer-events: none; }
  .command-central > * { pointer-events: auto; }
  .command-central__clock { font: 600 2.1rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); }
  .command-central__date { display: flex; flex-direction: column; font: 700 0.68rem/1.4 var(--sans); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-faint); }
  .command-central__date > :first-child { color: var(--accent-text); }
}

/* CC widgets open in an overlay (static/js/widget-overlay.js): the whole top bar is the button, a classic × closes */
.comm header[data-overlay] { cursor: pointer; border-radius: 4px; }
.comm header[data-overlay]::after { content: "›"; margin-left: auto; padding-inline: 0.4rem; font: 600 1.4rem/1 var(--sans); color: var(--ink-faint); }
.comm header[data-overlay]:hover::after, .comm header[data-overlay]:focus-visible::after { color: var(--hue-c, var(--accent-text)); }
.comm header[data-overlay]:hover h2 { color: var(--text); }
.widget-foot { margin: 0.6rem 0 0; font: 0.85rem var(--sans); }
.widget-overlay { width: min(72rem, calc(100vw - 2rem)); height: calc(100dvh - 2rem); max-width: none; max-height: none; padding: 0;
  border: 1px solid rgb(42 161 152 / 0.45); border-radius: 8px; background: var(--paper); color: var(--text); overflow: hidden;
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 0.55); }
.widget-overlay[open] { display: flex; flex-direction: column; }
.widget-overlay::backdrop { background: rgb(0 20 26 / 0.78); }
.widget-overlay__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0.55rem 0.45rem 1rem; border-bottom: 1px solid rgb(255 255 255 / 0.1); background: linear-gradient(180deg, #0b4650, #03303b); }
.widget-overlay__head h2 { margin: 0; font: 600 1rem var(--sans); color: #dbe8f3; }
.widget-overlay__close { flex: none; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: rgb(42 161 152 / 0.22);
  color: #fff; font: 700 1.5rem/1 var(--sans); cursor: pointer; }
.widget-overlay__close:hover { background: rgb(42 161 152 / 0.5); }
.widget-overlay > iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--paper); }
.widget-overlay__widget { flex: 1; min-height: 0; overflow: auto; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; }

/* CC: two columns - Direkt (chat, e-mails, invitations) and Aktivität (notifications, replies, ratings) */
.comm-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); align-items: start; }
.comm-col { display: grid; min-width: 0; }
.comm-chat-widget .comm-people { margin-top: 0.25rem; }

/* Pinnwand: picture (half size) and name (80 % smaller) centred above the info widget; the wall starts right below the menu */
.profile-side { display: grid; gap: 0.9rem; min-width: 0; }
.profile-side .profile-id { display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.profile-side .profile-id .avatar { width: 80px; height: 80px; border: 2px solid var(--rule); }
.profile-side .profile-id .avatar--initials { --size: 80px; }
.profile-side .profile-id h1 { margin: 0; }
.profile-side .profile-actions { justify-content: center; }

/* Blog: a list, picture left (all the same size, as the old start page row) and text right */
.wrap.wide .list.column-wide .row { grid-template-columns: 21rem minmax(0, 1fr); }
.list .row .media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 40rem) { .wrap.wide .list.column-wide .row { grid-template-columns: 1fr; } }

/* Start page: the user's rows of widget tiles */
.start-grid { display: grid; }
.start-row { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
@media (max-width: 64rem) { .start-row { grid-template-columns: repeat(min(var(--cols, 1), 2), minmax(0, 1fr)); } }
@media (max-width: 40rem) { .start-row { grid-template-columns: 1fr; } }
.start-tile .widget-list a.start-person { display: flex; align-items: center; gap: 0.6rem; }
.start-tile .start-text { display: grid; gap: 0.1rem; min-width: 0; }
.start-tile .credit-balance { margin-top: 0; }

/* Start page tiles: every tile the same size - the tile decides, not the content (which scrolls inside) */
.start-row { align-items: stretch; }
.start-tile { height: 22rem; display: flex; flex-direction: column; margin: 0; }
.start-tile > header { flex: none; }
.start-tile .widget-list { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }

/* Start page configurator: matrix (steppers) and the tiles as on the start page, each with a widget menu */
.start-config .widget > header { margin-bottom: 1rem; }
.wizard-button { padding: 0.25rem; border-radius: 50%; background: color-mix(in srgb, var(--hue-c) 16%, transparent); border: 1px solid transparent; }
.wizard-button:hover { border-color: var(--hue-c); }
.wizard-button .icon-3d { width: 1.6rem; height: 1.6rem; padding: 0; }
.wizard-q { margin: 0 0 0.9rem; font: 600 1rem var(--sans); }
.wizard-nav { display: flex; justify-content: flex-end; margin-top: 1rem; }
.cfg-matrix { margin-bottom: 1.5rem; }
.cfg-line { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; font-family: var(--sans); }
.cfg-label { min-width: 9rem; font-weight: 600; }
.cfg-sub { color: var(--ink-soft); font-size: 0.9rem; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--rule); overflow: hidden; }
.stepper input { width: 3.2rem; border: 0; border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stepper-arrows { display: grid; border-left: 1px solid var(--rule); }
.stepper-arrows button { padding: 0 0.55rem; border: 0; border-radius: 0; font-size: 0.65rem; line-height: 1.6; color: var(--text);
  background: color-mix(in srgb, var(--hue-c) 12%, var(--paper-raised)); }
.stepper-arrows button:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--hue-c) 30%, var(--paper-raised)); }
.stepper-arrows button + button { border-top: 1px solid var(--rule); }
.cfg-tile { position: relative; min-width: 0; }
.cfg-tile .start-tile { pointer-events: none; }
.cfg-tile .start-tile > header > a.meta { visibility: hidden; }
.cfg-empty { display: grid; place-items: center; border-style: dashed; color: var(--ink-faint); font: 600 1rem var(--sans); }
.cfg-menu { position: absolute; top: 0.65rem; right: 0.65rem; z-index: 5; }
.cfg-menu > summary { list-style: none; cursor: pointer; }
.cfg-menu > summary::-webkit-details-marker { display: none; }
.cfg-menu-list { position: absolute; right: 0; top: calc(100% + 0.35rem); display: grid; min-width: 15rem; padding: 0.4rem; gap: 0.15rem;
  background: var(--paper-raised); border: 1px solid var(--rule); box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 0.45); }
.cfg-menu-list button { justify-content: flex-start; text-align: left; padding: 0.4rem 0.6rem; border: 0; border-radius: 8px; background: none;
  color: var(--text); font-weight: 500; }
.cfg-menu-list button:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--hue-c) 16%, transparent); }
.cfg-toggle { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem 0.5rem; margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--rule); font: 600 0.85rem var(--sans); }

/* Start page without scrolling: the rows share the screen height below the menu (on wide, tall enough screens) */
@media (min-width: 64rem) and (min-height: 36rem) {
  body.home-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.home-page > main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-block: 0.75rem 1rem; }
  body.home-page > main > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.home-page .start-grid { flex: 1; min-height: 0; grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr)); }
  body.home-page .start-row { min-height: 0; }
  body.home-page .start-tile { height: 100%; min-height: 0; }
  body.home-page .site-footer { display: none; }
}
/* CC without scrolling, like the start page (owner 2026-10-16): the two columns share the screen height below the menu,
   each widget a third of it; what does not fit scrolls inside the widget, its top bar stays */
@media (min-width: 64rem) and (min-height: 36rem) {
  body.comm-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.comm-page > main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-block: 0.75rem 1rem; }
  body.comm-page > main > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
  body.comm-page .comm-columns { flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr);
    align-items: stretch; }
  body.comm-page .comm-col { min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  body.comm-page .comm-col > .widget { min-height: 0; margin: 0; overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--hue-c, #2aa198) 45%, transparent) transparent; }
  body.comm-page .comm-col > .widget > header { position: sticky; top: 0; z-index: 1; background: inherit; }
  body.comm-page .site-footer { display: none; }
}
.mainnav li { display: flex; align-items: center; }

/* Menus without round ends: the lines run straight and, like the background, fade into the page over ~50 px.
   Main menu: both sides. Side menu: fades towards the title and runs to the right edge of the window. */
.mainnav ul.wrap { border-radius: 0; border-inline: 0; box-shadow: none; padding-inline: calc(90px + 0.2rem);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.04) 15px, rgba(0,0,0,0.13) 30px, rgba(0,0,0,0.3) 45px, rgba(0,0,0,0.55) 60px, rgba(0,0,0,0.8) 75px, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,0.8) calc(100% - 75px), rgba(0,0,0,0.55) calc(100% - 60px), rgba(0,0,0,0.3) calc(100% - 45px), rgba(0,0,0,0.13) calc(100% - 30px), rgba(0,0,0,0.04) calc(100% - 15px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.04) 15px, rgba(0,0,0,0.13) 30px, rgba(0,0,0,0.3) 45px, rgba(0,0,0,0.55) 60px, rgba(0,0,0,0.8) 75px, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,0.8) calc(100% - 75px), rgba(0,0,0,0.55) calc(100% - 60px), rgba(0,0,0,0.3) calc(100% - 45px), rgba(0,0,0,0.13) calc(100% - 30px), rgba(0,0,0,0.04) calc(100% - 15px), rgba(0,0,0,0) 100%); }
.account-links:has(.top-link) { border-radius: 0; border-inline: 0; box-shadow: none;
  padding: 0.25rem calc(0.75rem + 0.2rem) 0.25rem calc(90px + 0.2rem); margin-right: -0.75rem;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.04) 15px, rgba(0,0,0,0.13) 30px, rgba(0,0,0,0.3) 45px, rgba(0,0,0,0.55) 60px, rgba(0,0,0,0.8) 75px, #000 90px); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.04) 15px, rgba(0,0,0,0.13) 30px, rgba(0,0,0,0.3) 45px, rgba(0,0,0,0.55) 60px, rgba(0,0,0,0.8) 75px, #000 90px); }
.top-link { padding-block: 0; line-height: 1.2; }
/* the active item: a soft tint, no outline (an outlined pill read as a round end of the bar) */
.mainnav a[aria-current="page"], .top-link[aria-current="page"] { border-color: transparent; box-shadow: none; }

/* Widgets a bit less "widgety": half the gaps, half the rounding, a discreet shadow for depth */
.widgets, .start-grid, .start-row, .comm-col, .account-tiles { gap: 0.5rem; }
.comm-columns { gap: 0.75rem; }
.widget, .account-tiles a { box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 6px 16px rgb(0 0 0 / 0.22); }

.directory-group.widget, .lexikon-group.widget, .profile-edit .widget { margin-bottom: 0.5rem; }

/* ===== Review fixes (2026-10-12) ===== */
/* phones: short date, the side menu shows icons only, the main menu starts at its first item */
.date-short { display: none; }
@media (max-width: 48rem) {
  .date-long { display: none; } .date-short { display: inline; }
  .masthead__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .account-links:has(.top-link) { padding: 0.2rem; margin-right: 0; -webkit-mask-image: none; mask-image: none; border-radius: 999px; }
  .top-link > span:not(.bell-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top-link { padding: 0.1rem; }
  .mainnav ul.wrap { padding-inline: 1.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent); }
}
.mainnav ul.wrap { justify-content: flex-start; }

/* Pinnwand: the username readable, the real name below it smaller */
.profile-side .profile-id h1 { font-size: 1.15rem; font-family: var(--sans); }
.profile-side .profile-id p { font-size: 0.85rem; color: var(--ink-soft); }

/* empty widgets: the note in the middle of the tile, not a lost line at the top */
.start-tile .widget-list:has(> .widget-empty:only-child) { align-content: center; }
.start-tile .widget-empty { border: 0; }

/* type: inside widgets, menus and lists everything is sans, nothing below 13 px; serif stays for titles and long texts */
.widget, .widget-list strong, .widget-list span, .widget-empty, .tree-stats, .forum .meta, .meta { font-family: var(--sans); }
.widget-list span, .tree-stats, .widget-empty { font-size: 0.8125rem; }
.widget h2 { font-family: var(--sans); font-weight: 700; }

/* widget header links all look the same: a small outline pill */
.widget > header > a.meta, .widget > header > a:not(.button) { display: inline-flex; align-items: center; padding: 0.2rem 0.75rem; border: 1px solid var(--rule);
  border-radius: 4px; font: 600 0.8rem var(--sans); color: var(--text); text-decoration: none; }
.widget > header > a.meta:hover, .widget > header > a:not(.button):hover { border-color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 12%, transparent); }

/* chat: a hint while no conversation is open; Converse in the site's type, calm section titles */
.converse-page::before { content: "Wähle links einen Kontakt oder einen Gruppenchat."; position: absolute; inset: 0 0 0 15rem; display: grid; place-items: center;
  color: var(--ink-faint); font: 1rem var(--sans); }
.converse-page .conversejs { font-family: var(--sans); }
.converse-page .conversejs .controlbox-heading, .converse-page .conversejs .controlbox-heading--groupchats,
.converse-page .conversejs .controlbox-heading--contacts { color: var(--ink-soft) !important; font: 700 0.75rem var(--sans); letter-spacing: 0.08em; }

/* the thread is one card: title, actions, posts and the reply at the end */
.thread-card { padding: 1.1rem 1.25rem; border: 1px solid var(--rule); background: var(--paper-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 6px 16px rgb(0 0 0 / 0.22); }
.thread-card > .compose-bar { margin-top: 1rem; }

/* one rounding for every box (8 px), one for the things inside (4 px); buttons and chips stay pills */
.widget, .thread-card, .wall-post, .wall-form, .notice, .forum-tree > li, .lexikon-list li, .directory-entry, .credit-balance,
.account-tiles a, .start-tile, .cfg-empty, .cfg-menu-list, .namecard-pop, .converse-page, .comm-chat, main table:not(.plain), .post, .media,
.start-edit-row, .avatar-dialog, .avatar-dialog img, .message:where(:not(.conversejs *)) { border-radius: 8px; }
.widget-list a, .widget-row, .widget-empty, .tree-node > summary, .tree-thread, .widget h2 .icon, .account-tiles .icon,
input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], input[type=number], input[type=tel], input[type=date],
select, textarea, .stepper { border-radius: 4px; }

/* Blog list: no rules between posts, a third of the space between the pictures (4.5 rem -> 1.5 rem), pictures with a shadow */
.wrap.wide .list.column-wide { gap: 20px; }
.wrap.wide .list.column-wide .row .media { margin-bottom: 0; }  /* the gap alone is the space between pictures */
.wrap.wide .list.column-wide .row { border-bottom: 0; padding-bottom: 0; }
.list .row .media { box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 6px 16px rgb(0 0 0 / 0.22); }
/* Pinnwand: the write button sits on the card itself, without a bar behind it */
.wall.widget > .compose-bar, .wall.widget .compose-bar { position: relative; background: none; border: 0; box-shadow: none; margin: 0 auto 0.75rem; }

/* Button bar under a post (forum + pin wall): the same dock as the main menu - straight lines fading out over
   90 px, items without outline (icon plate + label), engraved grooves between the groups; centred inside the card */
.post-bar { display: flex; justify-content: center; margin-top: 0.9rem; font-family: var(--sans); }
.bar-dock { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: center; max-width: 100%;
  padding: 0.2rem calc(90px + 0.2rem); position: relative; isolation: isolate; }
/* lines, background and fade on a layer of their own, so the mask doesn't clip the delete/moderate popovers */
.bar-dock::before { content: ""; position: absolute; inset: 0; z-index: -1;
  border-block: 1px solid color-mix(in srgb, var(--c-chat) 22%, var(--paper));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 12%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised)));
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.04) 15px, rgba(0,0,0,0.13) 30px, rgba(0,0,0,0.3) 45px, rgba(0,0,0,0.55) 60px, rgba(0,0,0,0.8) 75px, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,0.8) calc(100% - 75px), rgba(0,0,0,0.55) calc(100% - 60px), rgba(0,0,0,0.3) calc(100% - 45px), rgba(0,0,0,0.13) calc(100% - 30px), rgba(0,0,0,0.04) calc(100% - 15px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.04) 15px, rgba(0,0,0,0.13) 30px, rgba(0,0,0,0.3) 45px, rgba(0,0,0,0.55) 60px, rgba(0,0,0,0.8) 75px, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,0.8) calc(100% - 75px), rgba(0,0,0,0.55) calc(100% - 60px), rgba(0,0,0,0.3) calc(100% - 45px), rgba(0,0,0,0.13) calc(100% - 30px), rgba(0,0,0,0.04) calc(100% - 15px), rgba(0,0,0,0) 100%); }
.bar-dock form.inline { margin: 0; }
.bar-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.9rem 0 0.1rem; line-height: 1.2; border-radius: 999px;
  font: inherit; font-size: 0.92rem; letter-spacing: 0.01em; color: var(--ink-soft); background: transparent; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; list-style: none; transition: background 0.15s, color 0.15s; }
.bar-item::-webkit-details-marker { display: none; }
.bar-item .icon { box-sizing: content-box; width: 1.55rem; height: 1.55rem; padding: 0.1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--hue-c) 18%, transparent); transition: transform 0.15s; }
.bar-item:hover, details[open] > .bar-item, .bar-item[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--hue-c) 12%, transparent); filter: none; }
.bar-item:hover .icon { transform: scale(1.08); }
.post-bar .bar-item.danger { background: transparent; color: var(--ink-soft); border-color: transparent; }
.post-bar .bar-item.danger:hover, .post-bar details[open] > .bar-item.danger { color: var(--rt-urgent, #ff6b6b); background: color-mix(in srgb, var(--hue-c) 12%, transparent); }
.post-bar .menu-sep { flex: none; align-self: center; width: 3px; height: 22px; margin-inline: 7px;
  border-left: 2px solid rgb(0 0 0 / 0.65); border-right: 1px solid rgb(255 255 255 / 0.17);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22.5%, #000 77.5%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22.5%, #000 77.5%, transparent); }
.post-bar .mod-menu form { right: auto; left: 50%; transform: translateX(-50%); bottom: 2.6rem; }
.post-actions:has(> :only-child) { justify-content: flex-start; }
.bar-dock > details, .bar-dock > form { display: flex; align-items: center; }
.post-bar .mod-menu summary.bar-item { color: var(--ink-soft); }

/* Every button group looks like the menu bars (owner 2026-10-12): the post bar's dock - straight lines fading out,
   items without outline (icon plate + label), grooves between groups, centred. Primary action = tinted like the
   active menu item. */
.thread-actions, .compose-actions, .compose-bar, .profile-actions {
  display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: center; width: fit-content;
  max-width: 100%; margin-inline: auto; padding: 0.2rem calc(90px + 0.2rem); position: relative; isolation: isolate;
  background: none; border: 0; box-shadow: none; font-family: var(--sans); }
.compose-bar { position: relative; top: auto; }
.thread-actions::before, .compose-actions::before, .compose-bar::before, .profile-actions::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-block: 1px solid color-mix(in srgb, var(--c-chat) 22%, var(--paper));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 12%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised)));
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.04) 15px, rgba(0,0,0,.13) 30px, rgba(0,0,0,.3) 45px, rgba(0,0,0,.55) 60px, rgba(0,0,0,.8) 75px, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,.8) calc(100% - 75px), rgba(0,0,0,.55) calc(100% - 60px), rgba(0,0,0,.3) calc(100% - 45px), rgba(0,0,0,.13) calc(100% - 30px), rgba(0,0,0,.04) calc(100% - 15px), transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.04) 15px, rgba(0,0,0,.13) 30px, rgba(0,0,0,.3) 45px, rgba(0,0,0,.55) 60px, rgba(0,0,0,.8) 75px, #000 90px, #000 calc(100% - 90px), rgba(0,0,0,.8) calc(100% - 75px), rgba(0,0,0,.55) calc(100% - 60px), rgba(0,0,0,.3) calc(100% - 45px), rgba(0,0,0,.13) calc(100% - 30px), rgba(0,0,0,.04) calc(100% - 15px), transparent); }
:is(.thread-actions, .compose-actions, .compose-bar, .profile-actions) > :is(details, form) { display: flex; align-items: center; margin: 0; }
:is(.thread-actions, .compose-actions, .compose-bar, .profile-actions) .menu-sep { flex: none; align-self: center; width: 3px; height: 22px; margin-inline: 7px;
  border-left: 2px solid rgb(0 0 0 / 0.65); border-right: 1px solid rgb(255 255 255 / 0.17);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22.5%, #000 77.5%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22.5%, #000 77.5%, transparent); }
.bar-item { --hue-c: var(--c-chat); }
.bar-item.is-primary { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--hue-c) 20%, transparent); }
.bar-item.danger { background: transparent; border-color: transparent; color: var(--ink-soft); }
.bar-item.danger:hover { color: var(--rt-urgent, #ff6b6b); }
.thread-actions .bar-item[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--hue-c) 20%, transparent); }
.delete-menu > summary.bar-item { color: var(--ink-soft); }
.delete-menu > summary.bar-item:hover, .delete-menu[open] > summary.bar-item { color: var(--rt-urgent, #ff6b6b); }

/* WYSIWYG (owner 2026-10-12): the editor's text box has the size, insets and typography of the post it becomes.
   - content classes: the editor gets "post-body prose" like the shown post (font, size, line height, spacing)
   - box: as wide as a post card (inside a compose panel it reaches out to the panel's edges), padding as the card
   - the emoji column sits outside, right of the box; where there is no free room the column of posts makes room
     while writing, so posts and editor stay the same width */
.rt-full .rt-input { padding: 1rem 1.25rem; min-height: 10rem; }
.rt-input.prose h1, .rt-input.prose h2 { letter-spacing: -0.01em; }
.rt-input.prose h3 { font-family: var(--sans); }
.compose-panel .rt-full { margin-inline: calc(-1rem - 1px); }
.editor-page { display: grid; gap: 0.75rem; }
.editor-page h1 { font-family: var(--serif); margin: 0; }
:is(.thread-card, .wall.widget) .rt-full .rt-main { position: relative; }
:is(.thread-card, .wall.widget) .rt-full .rt-emoji { position: absolute; top: -1px; left: calc(100% + 1px + 1.25rem + 0.5rem);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); box-shadow: 0 6px 16px rgb(0 0 0 / 0.22); }
/* thread pages below ~1300 px and the pin wall have no free column on the right: make room while writing */
.wall.widget:has(.wall-form:not([hidden]) .rt-full) { padding-right: calc(1.25rem + 6.5rem); }
@media (max-width: 960px) {
  :is(.thread-card, .wall.widget) .rt-full .rt-emoji { position: static; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
  .wall.widget:has(.wall-form:not([hidden]) .rt-full) { padding-right: 1.25rem; }
}
.rt-input.post-body { font-size: 1.05rem; }

/* Button bars never wrap (owner, 2026-10-12): 30 px high; every size is in em of the bar's font size, so
   static/js/barfit.js can shrink a bar as a whole (--fit) until it fits on one line. A bar that doesn't fit at
   full size first drops its wide fade padding (data-compact). */
:is(.bar-dock, .thread-actions, .compose-actions, .compose-bar, .profile-actions) {
  flex-wrap: nowrap; font-size: calc(0.92rem * var(--fit, 1)); gap: 0.25em; padding-block: 0.2em; }
:is(.bar-dock, .thread-actions, .compose-actions, .compose-bar, .profile-actions)[data-compact] { padding-inline: 0.75em; }
:is(.bar-dock, .thread-actions, .compose-actions, .compose-bar, .profile-actions) .bar-item {
  font-size: calc(0.92rem * var(--fit, 1)); gap: 0.45em; padding: 0 0.75em 0 0.1em; white-space: nowrap; }  /* not 1em: items inside a form/details must not take that element's font size */
:is(.bar-dock, .thread-actions, .compose-actions, .compose-bar, .profile-actions) .bar-item .icon { width: 1.4em; height: 1.4em; padding: 0.1em; }
:is(.bar-dock, .thread-actions, .compose-actions, .compose-bar, .profile-actions) .menu-sep { height: 1.5em; margin-inline: 0.45em; }

.visibility-select { width: auto; font-family: var(--sans); font-size: 0.9rem; }
.thread-note { text-align: center; margin: 1rem 0 0; }
.forum-head > .thread-actions:first-child { margin-top: 0; margin-bottom: 0.75rem; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.post-actions .thread-status { margin-left: auto; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* CMS pages with a picture (Info): picture 20 % on the left, the text beside it */
.page-media { display: grid; grid-template-columns: 20% minmax(0, 1fr); gap: 0.5rem; align-items: start; max-width: none; }
/* like the rest of the platform: picture and text in widget cards (8 px corners, 4 px inside, discreet shadow) */
.page-media__image { margin: 0; padding: 0.5rem; position: sticky; top: 4.5rem; }
.page-media__image img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }
.page-card { padding: 1.5rem 1.75rem; font-family: var(--serif); }
.page-card > :first-child, .page-card > :first-child > :first-child { margin-top: 0; }
.page-card hr { margin: 2rem 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--c-chat) 25%, var(--rule)); }
.page-card hr::after { content: none; }
/* old imported tables (fixed widths, inline styles): the editor's table look */
.page-card table { width: 100% !important; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule);
  border-radius: var(--radius-s); overflow: hidden; font-family: var(--sans); font-size: 0.9rem; }
.page-card th, .page-card td { padding: 0.5rem 0.85rem !important; width: auto !important; text-align: left; vertical-align: top; }
.page-card th { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); }
.page-card tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-raised) 88%, #fff); }
.page-card td p, .page-card th p { margin: 0; }
@media (max-width: 40rem) and (orientation: portrait) {
  .page-media { grid-template-columns: minmax(0, 1fr); }
  .page-media__image { width: 50%; margin-inline: auto; position: static; }
}
[data-one-line] > li { white-space: nowrap; }
[data-one-line].is-wrapping > li { white-space: normal; }
/* headings in a page card's long text are text headings, not widget titles */
.page-card h2, .page-card h3, .page-card h4 { display: block; font-family: var(--serif); line-height: 1.25; letter-spacing: -0.01em; margin: 2em 0 0.6em; }
.page-card h2 { font-size: 1.6rem; }
.page-card h3 { font-size: 1.25rem; }
.page-card h4 { font-size: 1.1rem; }
.page-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.page-section, .page-card { min-width: 0; }  /* the one-line list must shrink to the column, not widen it */
.page-section__title { margin: 0 0 0.35rem 0.25rem; font-family: var(--serif); font-size: 1.35rem; }

/* blog list and Gelbe Seiten tools in widget cards like the rest of the platform */
.blog-widget { padding: 0.5rem 1rem; }
.blog-widget > .list > .card.row:last-child { border-bottom: 0; }
.blog-widget > .pagination { margin: 0.5rem 0 0; }
.directory-tools { justify-content: space-between; }
.directory-tools .thread-actions { margin: 0; }
:is(.bar-dock, .thread-actions, .compose-actions, .compose-bar, .profile-actions) { position: relative; isolation: isolate; }  /* the fade background must stay inside its own bar */

/* People bar on the own Pinnwand (owner only): docked under the side menu at the right edge, opens downwards
   (animated); while open the Pinnwand makes room for it */
.wall-people { position: absolute; top: 3.6rem; right: 0.75rem; z-index: 30; width: 17rem; font-family: var(--sans); }
.wall-people__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; padding: 0.2rem 0.4rem;
  border-block: 1px solid color-mix(in srgb, var(--c-chat) 22%, var(--paper));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 12%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised)));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem); mask-image: linear-gradient(90deg, transparent, #000 2.5rem); padding-left: 2rem; }
.wall-people__bar .bar-item { font-size: 0.85rem; }
.wall-people__chev { display: inline-block; margin-left: 0.25rem; transition: transform 0.25s ease; }
.wall-people.is-open .wall-people__chev { transform: rotate(180deg); }
.wall-people__body { display: grid; grid-template-rows: 0fr; }
.wall-people.is-ready .wall-people__body { transition: grid-template-rows 0.3s ease; }
.wall-people.is-open .wall-people__body { grid-template-rows: 1fr; }
.wall-people__inner { min-height: 0; overflow: hidden; }
.wall-people.is-open .wall-people__inner { overflow: visible; margin-top: 0.4rem; padding: 0.6rem; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--paper-raised); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 6px 16px rgb(0 0 0 / 0.22);
  max-height: calc(100vh - 6rem); overflow-y: auto; }
.wall-people__filter { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.wall-people__filter label { display: flex; align-items: center; gap: 0.4rem; }
.wall-people__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.wall-people__list > li { position: relative; }
.wall-person { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: var(--radius-s); color: var(--text); text-decoration: none; }
.wall-person:hover, .wall-person:focus-visible { background: color-mix(in srgb, var(--c-chat) 12%, transparent); }
.wall-person__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.875rem; }
.wall-person__pop { position: absolute; right: calc(100% + 0.5rem); top: 0; z-index: 2; display: grid; gap: 0.15rem; padding: 0.4rem;
  min-width: max-content; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.35); }
.wall-person__pop[hidden] { display: none; }
.wall-person__pop .bar-item { font-size: 0.85rem; justify-content: flex-start; }
body.wall-people-open .profile-page { padding-right: calc(17rem + 0.5rem); }
.profile-page { transition: padding-right 0.3s ease; }
/* "view as": the own Pinnwand in a frame */
dialog.view-as { width: min(96vw, 90rem); height: min(92vh, 60rem); padding: 0; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / 0.5); }
dialog.view-as[open] { display: flex; flex-direction: column; }
dialog.view-as::backdrop { background: rgb(0 0 0 / 0.55); }
.view-as__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.view-as__title { font-weight: 700; }
.view-as__frame { flex: 1; width: 100%; border: 0; background: var(--paper); }
/* inside the frame: no header/footer, a note on top, everything only to look at */
body.as-view .masthead, body.as-view .site-footer { display: none; }
body.as-view main { pointer-events: none; }
.as-view__note { margin: 0 0 0.75rem; padding: 0.5rem 1rem; text-align: center; font-family: var(--sans); font-size: 0.9rem;
  background: color-mix(in srgb, var(--c-reply) 18%, var(--paper-raised)); border-radius: var(--radius); }
@media (max-width: 48rem) {
  .wall-people { position: static; width: auto; margin: 0 0 0.5rem; }
  body.wall-people-open .profile-page { padding-right: 0; }
  .wall-person__pop { right: 0; top: 100%; }
}
.wall-people__bar .bar-item { white-space: nowrap; }
.wall-people__filter[hidden] { display: none; }
.wall-people .widget-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--paper); background: var(--c-reply); }
.wall-people__filter-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wall-people__filter-toggle { padding: 0.1rem; }
:root { --wp-w: 19rem; }
.wall-people { width: var(--wp-w); }
.wall-people__bar { padding-left: 1.25rem; }
body.wall-people-open .profile-page { padding-right: calc(var(--wp-w) + 0.5rem); }
@media (max-width: 48rem) { body.wall-people-open .profile-page { padding-right: 0; } .wall-people { width: auto; } }
/* "Pinnwände": half as wide, docked flush under the side menu and to the window's right edge */
:root { --wp-w: 9.5rem; }
.wall-people.is-docked { position: absolute; top: 100%; right: -0.75rem; pointer-events: auto; }
.wall-people__bar { padding: 0.15rem 0.25rem 0.15rem 1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem); mask-image: linear-gradient(90deg, transparent, #000 1rem); }
.wall-people__bar .bar-item { font-size: 0.8125rem; gap: 0.3rem; padding-right: 0.4rem; }
.wall-people__bar .bar-item .icon { width: 1.2rem; height: 1.2rem; }
.wall-people.is-open .wall-people__inner { margin-top: 0; padding: 0.4rem; border-radius: 0 0 0 var(--radius); border-right: 0; }
.wall-person { padding: 0.25rem 0.3rem; gap: 0.35rem; }
.wall-person__name { font-size: 0.8125rem; }
.wall-people__label { margin: 0.5rem 0.3rem 0.2rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.wall-people__filter { display: grid; gap: 0.35rem; font-size: 0.8125rem; }
.wall-people__hint { margin: 0; color: var(--ink-soft); font-size: 0.75rem; line-height: 1.35; }
.wall-people__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.wall-people__rules li { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; }
.wall-people__rules form { margin: 0; }
.wall-people__add { display: grid; gap: 0.3rem; }
.wall-people__add input, .wall-people__add select { width: 100%; font-size: 0.8125rem; padding: 0.25rem 0.4rem; }
.wall-people__add .bar-item { justify-content: center; font-size: 0.8125rem; }
/* posts hidden by the member's content filter */
.post-item.is-filtered > :not(.filtered-note) { display: none; }
.filtered-note { margin: 0; padding: 0.5rem 0.9rem; border: 1px dashed var(--rule); border-radius: var(--radius); font-family: var(--sans);
  font-size: 0.8125rem; color: var(--ink-soft); }
.wall-people__toggle { padding-left: 0.35rem; }
.wall-people__bar { gap: 0; }
.wall-people__bar { padding-left: 0.6rem; }
.wall-people__bar .bar-item { gap: 0.2rem; padding-right: 0.15rem; }
.wall-people__bar .widget-count { min-width: 1.1rem; height: 1.1rem; font-size: 0.6875rem; padding: 0 0.25rem; }
.wall-people__filter-toggle { padding: 0; }
.wall-people__filter-toggle .icon { width: 1.1rem; height: 1.1rem; }
.wall-people__chev { margin-left: 0.1rem; }
/* 20 % wider again (room for a count next to groups too); the header pill starts exactly at the box's left edge and
   the fade reaches out to the left of the box */
:root { --wp-w: 11.4rem; --wp-fade: 1.25rem; }
.wall-people__bar { margin-left: calc(-1 * var(--wp-fade)); padding-left: var(--wp-fade);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wp-fade)); mask-image: linear-gradient(90deg, transparent, #000 var(--wp-fade)); }
.wall-people__toggle { padding-left: 0; }
/* long names are cut off; the count keeps its place */
.wall-person > .avatar, .wall-person > .icon, .wall-person > .widget-count { flex: none; }
.wall-person__name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-people__list { grid-template-columns: minmax(0, 1fr); }
.wall-people__list > li, .wall-person { min-width: 0; }

/* Every main page starts 12 px below the menu (owner 2026-10-15): a page head holding only the hidden heading for
   screen readers takes no room, and the tool bars of Forum and Thesaurus sit in a widget like the Gelbe Seiten one */
main header:not(:has(> :not(.visually-hidden))) { margin: 0; padding: 0; }
.forum-head:has(> .widget) { margin-bottom: 0; }


/* CMS pages written like a forum post (Info): one widget over the full width, the post's own text styles */
.page-post { padding: 1.25rem 1.5rem; }
.page-post .post-bar { margin-top: 1rem; }

/* Info and other pages written like a post: the spacing of an article (as before the editor) - in the page and,
   the same, in its editor (the edit page wraps the editor in .page-post too) */
.page-post .rt :is(p, ul, ol, blockquote, table, .rt-table, h1, h2, h3, h4) + :is(p, ul, ol, blockquote, table, .rt-table, h1, h2, h3, h4) { margin-top: 1.1em; }
.page-post .rt :is(ul, ol) { margin-block: 1.1em; }
.page-post .rt.prose li + li, .page-post .rt-input li + li { margin-top: 0.35em; }
.page-post .rt :is(h1, h2, h3, h4) { margin: 2.2em 0 0.6em; line-height: 1.25; }
.page-post .rt :is(.bx, .bx__content) > :first-child, .page-post .rt > :first-child { margin-top: 0; }
.page-post .rt hr { margin: 2rem 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--c-chat) 25%, var(--rule)); }

/* AB: the member's subscriptions and filters in one place */
.abo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 0.5rem; align-items: start; }
.abo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.abo-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.abo-list li:last-child { border-bottom: 0; }
.abo-list .abo-name { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abo-list form { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.85rem; }
.abo-list label { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; font-weight: 400; }
.abo-add { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.abo-add input { flex: 1 1 10rem; min-width: 0; }
.abo-grid .meta { font-size: 0.85rem; margin: 0 0 0.6rem; }
.abo-list .bar-item, .abo-add .bar-item { font-size: 0.85rem; padding: 0.15rem 0.7rem; }
.abo-add .bar-item .icon { width: 1.3em; height: 1.3em; }

/* The forum's bar floats along under the main menu, like the menu itself (owner 2026-10-15). A sticky bar only
   travels as far as its parent reaches: on the overview the head with the tools widget sticks; on area / topic and
   thread pages the head lets its bar belong to the whole column (display: contents) */

.forum-layout .forum-head { display: contents; }
.forum-layout .forum-head > .thread-actions { position: sticky; top: calc(var(--nav-h, 0px) + 0.25rem); z-index: 30; margin-bottom: 1rem; }

/* A page in one widget (Forum, Gelbe Seiten, Thesaurus - embeddable on the start page): its tool bar is the widget's
   head and floats along under the main menu; the cards inside stay cards */
.page-widget { padding: 0 1.1rem 1.1rem; overflow: clip; }
.page-widget > .forum-head { position: sticky; top: var(--nav-h, 0px); z-index: 30; margin: 0 -1.1rem 0.75rem; padding: 0.6rem 1.1rem;
  background: color-mix(in srgb, var(--hue-c) 8%, var(--paper-raised)); border-bottom: 1px solid color-mix(in srgb, var(--hue-c) 22%, var(--rule)); }
.page-widget > .forum-head .thread-actions { margin: 0 auto; }
.page-widget .lexikon-filter { margin-top: 0.6rem; }
.page-widget .forum-tree { margin-top: 0; }
.page-widget > .forum-head { display: block; }
.page-widget > .forum-head .directory-tools { margin-top: 0; }
.page-widget > .forum-head .directory-tools .thread-actions { margin: 0; }
.page-widget > .forum-head .az-index { position: static; margin-top: 0.5rem; padding-block: 0; }

/* a whole page in a start-page tile (Forum, Gelbe Seiten, Thesaurus): the page's widget in a frame, scrolling inside */
.start-tile .start-frame { flex: 1; min-height: 0; width: calc(100% + 2.2rem); margin: 0 -1.1rem -1.1rem; border: 0; border-top: 1px solid var(--rule); background: transparent; }
body.is-embedded { background: transparent; }
body.is-embedded > main { padding: 0; }
body.is-embedded > main > .wrap { max-width: none; padding: 0; }
body.is-embedded .page-widget { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
body.is-embedded .page-widget > .forum-head { top: 0; }

/* the eye in every password field (static/js/pwtoggle.js): inside the field, at its right end */
.pw-field { position: relative; display: block; }
.pw-field > input { width: 100%; padding-right: 2.75rem; }
.pw-eye { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-soft);
  box-shadow: none; cursor: pointer; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--c-chat) 14%, transparent); transform: translateY(-50%); filter: none; box-shadow: none; }

/* CC chat widget: missed chats (avatar | name over count) and the e-mail switch */
.comm-missed { margin-bottom: 0.6rem; }
.comm-missed a { grid-template-columns: auto 1fr; column-gap: 0.6rem; align-items: center; padding-right: 2.6rem; }
.comm-missed a > .avatar { grid-row: span 2; }
.comm-chat-mail { position: relative; z-index: 1; margin-top: 0.75rem; }
.comm-chat-mail button .icon { margin-right: 0.35rem; vertical-align: -0.2em; }
.comm-chat-mail button[aria-pressed="true"] { border-color: var(--hue-c); color: var(--text); }

/* Chat-Apps (app passwords) */
.chat-apps__login { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0.6rem 0 1rem; }
.chat-apps__login dt { font-weight: 600; }
.chat-apps__login dd { margin: 0; }
.chat-apps__new { margin: 1rem 0; padding: 0.8rem 1rem; border: 1px solid var(--hue-c); border-radius: 8px; background: color-mix(in srgb, var(--hue-c) 10%, transparent); }
.chat-apps__secret { font-size: 1.25rem; letter-spacing: 0.06em; user-select: all; }
.chat-apps__create { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; }
.chat-apps__create input { flex: 1 1 14rem; }

/* A menu entry outside a menu strip would be a lone pill: there it takes the button look (square, dock lines) */
.bar-item:not(:is(.bar-dock, .post-bar, .thread-actions, .compose-bar, .compose-actions, .profile-actions, .wall-people__bar, .account-links, .mainnav) .bar-item) {
  border-radius: 4px; padding: 0.25rem 0.8rem 0.25rem 0.3rem; border: 1px solid color-mix(in srgb, var(--c-chat) 22%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-chat) 8%, var(--paper-raised)), color-mix(in srgb, var(--paper) 70%, var(--paper-raised))); }
.bar-item:not(:is(.bar-dock, .post-bar, .thread-actions, .compose-bar, .compose-actions, .profile-actions, .wall-people__bar, .account-links, .mainnav) .bar-item):hover {
  border-color: var(--hue-c); background: color-mix(in srgb, var(--hue-c) 12%, var(--paper-raised)); }