/* Cyber//Web – gemeinsame Gestaltung der Weboberfläche (Designwerte nach tokens/design.css des Kits, Spezifikation 01 und 05).
   Grundsätze: keine Rundungen, keine Kachelwände (Listen mit dünnen Trennlinien), keine Inline-Stile, Schriften nur lokal (/fonts).
   Grün (#88D88E) bedeutet AUSSCHLIESSLICH einen echten gewählten/eingeschalteten Zustand und hängt allein an
   aria-current / aria-selected / aria-pressed / aria-checked / :checked / data-state="selected" – nie an :hover, :focus oder :active. */

@font-face { font-family: "Play"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Play-Regular.ttf") format("truetype"); }
@font-face { font-family: "Play"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Play-Bold.ttf") format("truetype"); }
@font-face { font-family: "Tektur"; font-style: normal; font-weight: 400 900; font-stretch: 75% 100%; font-display: swap; src: url("/fonts/Tektur.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --bg: #0d151a;
  --surface: #121b20;
  --raised: #1b2227;
  --text: #d7e0e4;
  --muted: #9ba8b0;
  /* Neon-Palette aus dem Logo (Cyan #00d8ff / Rot #d2052d), auf Wunsch des Betreibers knalliger als die Kit-Werte (#76dde6 / #f07870).
     Grün für den gewählten Zustand bleibt unverändert. Kontrast der Textfarben zu --bg: Cyan 11,6:1, Rot 5,7:1. */
  --red: #ff4d6d;
  --cyan: #19e1ff;
  --cyan-hi: #7df4ff;
  --selected: #88d88e;
  --selected-bg: #14241d;
  --rule: #4d3047;
  --header-rule: #9a3350;
  --red-line: #e0103a;
  --red-dim: #8a2347;
  --text-hi: #e8f4f6;
  --nav-text: #b7c4ca;
  --input-border: #657b83;
  --hover-bg: #1b272e;
  --press-bg: #10191f;
  --disabled: #7e8a92;
  --disabled-border: #3b4a53;
  --font-body: "Play", system-ui, "Segoe UI", sans-serif;
  --font-heading: "Tektur", "Play", system-ui, sans-serif;
  --content-max: 1184px;
  --shell-max: 1260px;
  --header-h: 68px;
  --profile-max: 1080px;
  --target: 32px;
  --field-h: 36px;
  --duration: 140ms;
  /* Leuchten (Neon): drei Schichten, innen hell und scharf, außen weich. Nur für Überschriften, Namen und Bedienelemente – nie für Fließtext. */
  --glow-cyan: 0 0 3px rgb(25 225 255 / 0.9), 0 0 12px rgb(25 225 255 / 0.55), 0 0 30px rgb(25 225 255 / 0.3);
  --glow-red: 0 0 3px rgb(255 77 109 / 0.9), 0 0 12px rgb(255 42 85 / 0.55), 0 0 30px rgb(255 42 85 / 0.3);
  --glow-cyan-soft: 0 0 8px rgb(25 225 255 / 0.5);
  --glow-red-soft: 0 0 8px rgb(255 77 109 / 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 80% 38% at 50% -8%, rgb(255 42 85 / 0.3), transparent 72%),
    radial-gradient(ellipse 32% 80% at -6% 44%, rgb(25 225 255 / 0.17), transparent 72%),
    radial-gradient(ellipse 32% 80% at 106% 44%, rgb(255 42 85 / 0.17), transparent 72%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text); font: 400 16px/1.5 var(--font-body);
}
/* Schwaches Stadtbild im Hintergrund (selbst berechnet, Werkzeuge/make_background.py): trägt keine Information, liegt hinter dem Inhalt und blendet nach unten aus. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/img/city.webp") center top / cover no-repeat;
  opacity: 0.3; transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) 60%, transparent 100%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
img { max-width: 100%; }

/* ----- Text ----- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
h1 { font: 400 24px/30px var(--font-heading); font-variation-settings: "wdth" 85; color: var(--red); margin: 0 0 12px; }
h1[tabindex="-1"]:focus { outline: none; }
h2 { display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 400 16px/22px var(--font-heading); font-variation-settings: "wdth" 85; letter-spacing: 0.05em; text-transform: uppercase; color: var(--red); margin: 40px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--red-dim); }
h3 { font-size: 18px; margin: 24px 0 8px; color: var(--text); }
h4 { font-size: 14px; color: var(--muted); margin: 16px 0 6px; }
p { margin: 8px 0; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 0.92em; background: var(--surface); border: 1px solid var(--rule); padding: 0 4px; overflow-wrap: anywhere; }
blockquote { margin: 12px 0; padding: 4px 16px; border-left: 1px solid var(--red); color: var(--muted); }
ul, ol { padding-left: 1.4rem; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain > li { padding: 6px 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dim, .meta { color: var(--muted); }
.small, .meta { font-size: 13px; }
.warn { color: var(--red); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: 8px; top: -64px; z-index: 100; background: var(--surface); border: 1px solid var(--cyan); padding: 6px 14px; }
.skip:focus { top: 8px; }

/* ----- Rahmen: Kopf, Inhalt, Fuß ----- */
.icon { display: inline-block; flex: none; vertical-align: -0.2em; }
.site-header {
  flex: none; min-height: var(--header-h); position: relative; z-index: 20;
  background: rgb(9 14 18 / 0.5);
  border-bottom: 1px solid var(--red-line);
}
.header-inner, .footer-inner { max-width: var(--shell-max); width: calc(100% - 64px); margin: 0 auto; display: flex; align-items: center; gap: 48px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.brand img { display: block; height: 52px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.brand:hover { text-decoration: none; }
.brand:hover img { filter: brightness(1.15); }
.primary-nav { display: flex; gap: 36px; align-items: stretch; align-self: stretch; }
.navlink { position: relative; display: inline-flex; align-items: center; color: var(--nav-text); font-size: 15px; white-space: nowrap; border: 0; background: none; padding: 0; min-height: var(--target); cursor: pointer; }
.primary-nav .navlink { padding: 24px 0; }
.navlink:hover { color: var(--text-hi); text-decoration: none; }
.navlink[aria-current="page"], .navlink[aria-pressed="true"] { color: var(--selected); }
.primary-nav .navlink[aria-current="page"] { color: var(--text-hi); }
.primary-nav .navlink[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--selected); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 14px; }
.icon-link { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; color: var(--nav-text); }
.icon-link .icon { width: 22px; height: 22px; }
.bell { position: absolute; top: 3px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; background: var(--red-line); color: #fff; font: 700 10px/16px var(--font-body); text-align: center; }
.bell:empty { display: none; }
.tool-sep { width: 1px; height: 24px; margin: 0 14px 0 10px; background: var(--header-rule); }
.menu-wrap { position: relative; }
.navlink.acct { gap: 8px; padding: 0 2px; color: var(--cyan); font-size: 15px; }
.navlink.acct:hover { color: var(--text-hi); }
.acct .chev { width: 16px; height: 16px; }
.acct[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acct-name { display: inline-block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface); border: 1px solid var(--header-rule); border-top: 2px solid var(--red-line); padding: 6px 0; z-index: 30; box-shadow: 0 10px 30px rgb(0 0 0 / 0.55); }
.menu a, .menu button { display: flex; width: 100%; align-items: center; min-height: 36px; padding: 6px 16px; border: 0; background: none; color: var(--text); text-align: left; font-size: 14px; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--hover-bg); text-decoration: none; }
.menu hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 0; }
.menu .who { padding: 6px 16px 8px; font-size: 13px; color: var(--muted); }
.btn.mobile-toggle { display: none; }
.mobile-nav { display: none; }

.page { width: min(var(--content-max), calc(100% - 64px)); margin: 56px auto 80px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.page:focus { outline: none; }
.page.narrow { max-width: 760px; }

.site-footer { flex: none; margin-top: auto; font-size: 13px; color: var(--muted); }
.footer-inner { border-top: 1px solid var(--rule); gap: 4px 14px; flex-wrap: wrap; padding-block: 12px; min-height: 64px; }
.site-footer a, .footer-action { color: var(--muted); }
.footer-action { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-size: 13px; padding: 5px 0; min-height: var(--target); cursor: pointer; }
.footer-action .chev { width: 14px; height: 14px; }
.footer-action .icon { width: 18px; height: 18px; pointer-events: none; }
.footer-action:hover, .site-footer a:hover { color: var(--text); text-decoration: none; }
.footer-action[aria-pressed="true"] { color: var(--selected); }
.footer-sep { color: var(--muted); font-size: 11px; }

/* ----- Schaltflächen ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--target); padding: 5px 12px; background: transparent; color: var(--cyan);
  border: 1px solid var(--cyan); border-radius: 0; font: 400 14px/20px var(--font-body); text-decoration: none; cursor: pointer;
  transition: color var(--duration), border-color var(--duration), background-color var(--duration);
}
.btn.ghost, .btn.quiet { color: var(--text); border-color: var(--input-border); }
.btn.link { border-color: transparent; padding-inline: 4px; }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.tool { min-width: var(--target); padding-inline: 8px; }
/* Ruhige Textschaltfläche: Nebenaktionen (Beitrag, Moderation) ohne Rahmen – der Rahmen bleibt den Hauptaktionen */
.btn.text { border-color: transparent; color: var(--muted); padding-inline: 10px; }
.btn.text.danger { color: var(--red); }
.btn.icon-btn { padding: 0; min-width: var(--target); border-color: transparent; color: var(--muted); }
.btn.icon-btn .icon { width: 18px; height: 18px; }
.btn.small { min-height: var(--target); padding-block: 4px; font-size: 13px; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { background-color: var(--hover-bg); border-color: var(--red); text-decoration: none; }
  .btn.text:hover:not(:disabled) { background: none; border-color: transparent; color: var(--text-hi); text-decoration: underline; text-underline-offset: 4px; }
  .btn.text.danger:hover:not(:disabled) { color: var(--red); }
  .btn.icon-btn:hover:not(:disabled) { color: var(--text-hi); }
}
.btn:active:not(:disabled) { background-color: var(--press-bg); transform: translateY(1px); }
.btn:is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [aria-current="page"], [data-state="selected"]) { color: var(--selected); border-color: var(--selected); background-color: var(--selected-bg); }
.btn:is(:disabled, [aria-disabled="true"], [aria-busy="true"]) { color: var(--disabled); border-color: var(--disabled-border); background: transparent; transform: none; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; } .btn:active:not(:disabled) { transform: none; } }

/* Eingaben */
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="url"], select, textarea {
  width: 100%; max-width: 100%; min-height: var(--field-h); padding: 6px 10px; background: var(--bg); color: var(--text);
  border: 1px solid var(--input-border); border-radius: 0;
}
select { width: auto; max-width: 100%; }
textarea { resize: vertical; line-height: 1.5; min-height: 96px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
input:disabled, select:disabled, textarea:disabled { color: var(--disabled); border-color: var(--disabled-border); cursor: not-allowed; }
input[type="file"] { max-width: 100%; font: inherit; font-size: 14px; color: var(--muted); }
input[type="file"]::file-selector-button { font: inherit; font-size: 14px; min-height: 32px; margin-right: 12px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--text); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--cyan); }
.page form:not(.search):not(.row) { margin-bottom: 24px; }
dialog form { margin-bottom: 0; }
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 0;
  background: var(--bg); border: 1px solid var(--input-border); border-radius: 0; vertical-align: middle; cursor: pointer;
}
input[type="checkbox"]::before, input[type="radio"]::before { content: ""; width: 8px; height: 8px; background: var(--selected); transform: scale(0); transition: transform var(--duration); }
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--selected); background: var(--selected-bg); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--disabled-border); cursor: not-allowed; }
input[type="checkbox"]:disabled:checked::before, input[type="radio"]:disabled:checked::before { background: var(--disabled); }
input[type="range"] { accent-color: var(--cyan); width: 100%; min-height: var(--field-h); padding: 0; background: none; border: 0; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"]::before, input[type="radio"]::before { transition: none; } }
@media (forced-colors: active) { input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: Highlight; } input[type="checkbox"]::before, input[type="radio"]::before { background: Highlight; } }
.field { display: grid; gap: 6px; margin: 0 0 20px; max-width: 740px; }
.field > label, .field > .label { font-size: 14px; color: var(--muted); }
.field .hint { margin: 0; font-size: 13px; color: var(--muted); }
.field-error { color: var(--red); font-size: 14px; margin: 4px 0 0; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); cursor: pointer; }
.check:has(input:checked) { color: var(--selected); }
fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
legend { padding: 0; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
form.search { display: flex; gap: 12px; align-items: center; max-width: 640px; margin: 0 0 20px; }
form.search input { flex: 1; min-width: 0; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.row.between { justify-content: space-between; }
.row > .field { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }

/* ----- Bausteine: Abschnitt, Zeilen, Hinweise ----- */
section { margin: 0 0 40px; }
.card { margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 4px; border-bottom: 1px solid var(--red-dim); }
.section-head h2 { flex: 1; margin: 0; border: 0; }
.more-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 10px; color: var(--red); font-size: 14px; white-space: nowrap; }
.more-link:hover { color: var(--text-hi); text-decoration: none; }
.crumbs, .breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.crumbs a, .breadcrumb a { color: var(--muted); }
.rows { margin: 0; padding: 0; list-style: none; }
.rows > li, .rows > .rowitem { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rows > li:first-child { border-top: 1px solid var(--rule); }
.tag, .badge { display: inline-block; border: 1px solid #3d3037; color: var(--muted); font-size: 12px; line-height: 18px; padding: 0 7px; margin-right: 6px; vertical-align: middle; background: transparent; }
.badge.new { color: var(--red); border: 0; padding: 0; margin-right: 10px; font-weight: 700; }
.badge.ic { color: var(--cyan); border-color: #405a61; }
.unread-dot { display: inline-block; width: 5px; height: 5px; background: var(--red); border-radius: 0; margin-right: 8px; vertical-align: middle; }
.unread-mark { display: block; width: 8px; height: 8px; margin-top: 8px; background: var(--red-line); }
.unread-mark.none { background: none; }
.is-unread .title a { font-weight: 700; color: var(--text-hi); }
.meta-line { display: flex; flex-wrap: wrap; gap: 0 14px; }

.notice { display: flex; gap: 8px; align-items: baseline; margin: 16px 0; padding: 8px 0 8px 16px; border-left: 2px solid var(--muted); font-size: 14px; color: var(--muted); }
.notice.error, .notice.warn { border-left-color: var(--red); color: var(--text); }
.notice.ok, .notice.info { border-left-color: var(--cyan); }
.mark { font-weight: 700; }
.notice.error .mark, .notice.warn .mark, .toast.error .mark, .toast.warn .mark { color: var(--red); }
.notice.ok .mark, .notice.info .mark, .toast.ok .mark { color: var(--cyan); }
.empty { color: var(--muted); padding: 24px 0; }
.busy { color: var(--muted); font-size: 14px; }

.toasts { position: fixed; right: 32px; bottom: 82px; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 32px)); z-index: 60; }
.toast { display: flex; gap: 8px; padding: 12px 18px; background: #1b252b; border: 1px solid #405a61; color: var(--text); font-size: 14px; }
.toast.error, .toast.warn { border-color: var(--red); }

dialog.modal { background: var(--surface); color: var(--text); border: 1px solid var(--header-rule); border-radius: 0; padding: 20px 24px; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.modal::backdrop { background: rgb(5 9 12 / 0.78); }
dialog.modal h2 { margin-top: 0; }

/* Tabellen */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 400; font-size: 13px; }
table.facts th { width: 40%; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll:focus-visible { outline: 2px solid var(--cyan); }
td input, td select { min-width: 0; }

/* Datenbankseite der Projektleitung (ACP › Datenbank): schmale Tabellen, Werte als Text, Leerwert und Maskierung sichtbar abgesetzt */
.db-table { table-layout: auto; }
.db-table td, .db-table th { padding-right: 16px; }
.db-cell { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-null { color: var(--muted); font-style: italic; }
.db-form { display: grid; gap: 4px; margin: 16px 0; }
.db-field { max-width: 100%; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--rule); }
.db-field textarea { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 13px; min-height: 96px; }
.db-meta { gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }

/* Tabs und Umschalter (Zustand aus aria-selected bzw. aria-current) */
.tabbar, .tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 32px; border-bottom: 1px solid var(--red-dim); }
.tabbar > a, .tabbar > button, .tab { padding: 12px 14px 13px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--nav-text); font: 400 15px/20px var(--font-body); min-height: var(--target); cursor: pointer; }
.tabbar > a:hover, .tabbar > button:hover, .tab:hover { color: var(--text-hi); text-decoration: none; }
.tabbar > :is([aria-selected="true"], [aria-current="page"]), .tab:is([aria-selected="true"], [aria-current="page"]) { color: var(--text-hi); border-bottom-color: var(--selected); }
.pager { display: flex; align-items: center; gap: 16px; margin: 20px 0; font-size: 14px; color: var(--muted); }

/* Auswahlzeilen (Sprache, Figur): gewählt = Radio :checked */
.choose-wrap { max-width: 560px; margin: 32px auto 80px; }
.choose-wrap.language-wrap { max-width: 420px; }
.choose-wrap .intro { color: var(--muted); margin: 0 0 24px; }
.choose-list { margin: 0 0 24px; padding: 0; border: 0; }
.choice { display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 10px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; color: var(--text); }
.choice:first-of-type { border-top: 1px solid var(--rule); }
@media (hover: hover) { .choice:hover { background: var(--hover-bg); } }
.choice:has(input:checked) { color: var(--selected); background: rgb(136 216 142 / 0.05); border-left: 2px solid var(--selected); padding-left: 10px; }
.choice:has(input:disabled) { color: var(--disabled); cursor: not-allowed; }
.choice:focus-within { outline: 2px solid var(--cyan); outline-offset: 3px; }
.choice .caption { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; }
.choice:has(input:checked) .caption { color: var(--selected); }
.initials { width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none; border: 1px solid #405a61; background: #132128; color: var(--cyan); font: 400 16px var(--font-heading); }
.avatar { width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none; border: 1px solid #405a61; background: #132128; color: var(--cyan); font: 400 16px var(--font-heading); object-fit: cover; overflow: hidden; border-radius: 0; }
img.avatar { display: block; }
.avatar.large { width: 80px; height: 80px; font-size: 26px; }
.avatar.small { width: 28px; height: 28px; font-size: 12px; }
.context-line { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 0 0 32px; padding: 4px 0 4px 16px; border-left: 1px solid var(--cyan); font-size: 14px; color: var(--cyan); }
.context-line .who { color: var(--text); }

/* Start / Foren */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: start; margin-top: 36px; }
.home-grid h2:first-child { margin-top: 0; }
.news-item { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.news-item h3 { margin: 0 0 4px; font: 700 18px/26px var(--font-body); }
.news-item .meta { margin: 0; }
.news-text { max-width: 66ch; margin: 10px 0 0; color: var(--nav-text); }
ul.plain > li.topic-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 2px 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.topic-row .topic-meta { grid-column: 1; grid-row: 2; font-size: 13px; }
.topic-row .count { grid-column: 2; grid-row: 1; text-align: right; }
.topic-title { font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.count { text-align: right; font-size: 13px; color: var(--muted); }

/* Forenindex: Kategorie als flaches Band mit Spaltenköpfen, darunter schlanke Zeilen (Spaltenbreiten gelten für Band und Zeilen gleich) */
.cat-block + .cat-block { margin-top: 40px; }
.cat-head, .forum-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 84px 84px 270px; column-gap: 20px; padding-inline: 14px; }
.cat-head { align-items: center; padding-block: 10px; background: var(--surface); border-top: 1px solid var(--red-dim); }
.cat-head .cat-title { display: block; grid-column: 1 / 3; margin: 0; padding: 0; border: 0; font: 400 17px/24px var(--font-heading); font-variation-settings: "wdth" 85; letter-spacing: 0; text-transform: none; color: var(--text-hi); }
.col { grid-row: 1; font-size: 12px; color: var(--muted); text-align: right; }
.c-threads { grid-column: 3; }
.c-posts { grid-column: 4; }
.c-last { grid-column: 5; text-align: left; }
.cat-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; cursor: pointer; }
.cat-toggle .chev { width: 16px; height: 16px; color: var(--muted); transition: transform var(--duration); }
.cat-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.forum-row { align-items: start; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.forum-row .unread-mark { margin-top: 8px; }
.forum-main { min-width: 0; }
.forum-row .title { font-size: 16px; }
.forum-row p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.stats { display: contents; }
.stat { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.stat .w { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.last-post { font-size: 13px; color: var(--muted); min-width: 0; }
.last-post a { display: block; margin-bottom: 2px; font-size: 14px; overflow-wrap: anywhere; }
.cat-block .sub-forum { margin-left: 24px; }

/* Themenliste eines Bereichs */
ul.plain > li.rowitem { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rowitem .title { font-size: 16px; }
.rowitem p { margin: 6px 0 0; max-width: 72ch; color: var(--nav-text); }
.area-tools .spacer { flex: 1; }
.area-tools { margin: 16px 0 28px; }
.thread-grid, ul.plain > li.thread-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 84px 200px; column-gap: 20px; padding-inline: 14px; }
.list-head { align-items: center; padding-block: 10px; background: var(--surface); border-top: 1px solid var(--red-dim); }
.list-head .c-replies { grid-column: 3; }
.list-head .c-last { grid-column: 4; }
ul.plain > li.thread-row { align-items: start; padding-block: 15px; border-bottom: 1px solid var(--rule); }
.thread-row .unread-mark { margin-top: 8px; }
.thread-main { min-width: 0; }
.thread-row .title { font-size: 16px; }
.thread-row .meta { margin-top: 3px; }
.thread-row .count { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

@media (hover: hover) {
  .forum-row:hover, ul.plain > li.thread-row:hover, ul.plain > li.topic-row:hover, .activity-row:hover { background: rgb(118 221 230 / 0.035); }
}

/* Beiträge */
.post { display: grid; grid-template-columns: 150px minmax(0, 760px); gap: 32px; padding: 24px 0; border-top: 1px solid var(--rule); margin: 0; scroll-margin-top: 24px; }
.post:target { border-top-color: var(--cyan); }
.post-author { font-size: 14px; display: grid; gap: 6px; align-content: start; justify-items: start; }
.post-author .name { color: var(--cyan); overflow-wrap: anywhere; }
.post-author .avatar, .post-author .initials { width: 56px; height: 56px; font-size: 20px; }
.post-main { min-width: 0; }
.post-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.post-body, .cpmd { max-width: 72ch; font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.post-body p, .cpmd p { margin: 0 0 16px; }
.plain-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.quote { color: var(--muted); }
.quote-pending { margin: 8px 0; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 14px; }
.react { min-height: var(--target); padding: 2px 12px; font-size: 13px; }
.react.zero { color: var(--muted); border-color: transparent; }
.post-actions { gap: 0 2px; margin-top: 10px; align-items: center; }
.mod-group { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--red-dim); }
/* Nebenaktionen eines Beitrags (Bearbeiten, Verlauf, Melden, Moderation, leere Reaktionen) blenden sich erst ein, wenn die Maus über dem Beitrag steht oder der Fokus darin liegt;
   mit Touch (kein Hover) bleiben sie immer sichtbar. Sie bleiben dabei im Layout und für Hilfstechnik erreichbar. */
.post-actions, .mod-group, .react.zero { transition: opacity var(--duration); }
@media (hover: hover) {
  .post:not(:hover):not(:focus-within) :is(.post-actions, .mod-group, .react.zero) { opacity: 0; }
}
.attachments { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.attachment { margin: 0; }
.att-img { max-width: min(100%, 24rem); max-height: 20rem; border: 1px solid var(--rule); }
.poll { margin: 24px 0; padding: 12px 0; border-block: 1px solid var(--rule); }
.poll-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: var(--target); }
progress { width: 8rem; height: 8px; margin-left: 8px; accent-color: var(--cyan); }
meter { width: 10rem; }
.composer .toolbar, .toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 8px; }
.toolbar button { border: 0; background: none; color: var(--muted); min-height: var(--target); min-width: var(--target); padding: 0 8px; font: 400 14px var(--font-body); cursor: pointer; }
.toolbar button:hover { color: var(--text); }
.toolbar button[aria-pressed="true"], .toolbar button[aria-selected="true"] { color: var(--selected); }
.preview { min-height: 120px; padding: 8px 16px; border: 1px dashed var(--input-border); }
.editor { max-width: 932px; margin-top: 40px; }
.files { list-style: none; padding: 0; }
.history { padding-left: 1.4rem; }
.thread-flags { margin: 2px 0 10px; }
.thread-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 6px 0 24px; }
.thread-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--muted); }
.modbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0 0 0 auto; padding: 0 0 0 14px; border: 0; border-left: 2px solid var(--red-line); }
.modbar-label { margin-right: 10px; font-size: 13px; color: var(--muted); }

/* Profil */
.profile { max-width: var(--profile-max); margin-inline: auto; }
.profile-cover { aspect-ratio: 5 / 1; width: 100%; max-height: 237px; background: linear-gradient(135deg, #1a2830, #2a1a22); border-bottom: 1px solid var(--red-line); overflow: hidden; position: relative; }
.profile-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner-edit { position: absolute; top: 12px; right: 12px; background: rgb(10 14 18 / 0.62); color: var(--red); border-color: transparent; }
.profile-identity { position: relative; display: flex; gap: 28px; align-items: flex-start; margin: 0 20px; }
.avatar-frame { position: relative; flex: none; width: 132px; height: 132px; padding: 6px; margin-top: -48px; background: rgb(8 13 17 / 0.9); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.avatar-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 0 0 / 18px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 0 / 2px 18px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 0 / 18px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 0 / 2px 18px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 100% / 18px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 100% / 2px 18px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 8px), var(--cyan) calc(50% - 8px) 50%, transparent 50%) 100% 100% / 22px 22px no-repeat;
}
.avatar-frame .avatar { width: 120px; height: 120px; border: 0; font-size: 40px; }
.profile-main { min-width: 0; flex: 1; padding-top: 14px; }
.name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.profile-name { font: 400 38px/44px var(--font-heading); font-variation-settings: "wdth" 85; margin: 0; color: var(--cyan); }
/* Rang: Standard ist Rot; die Verwaltung kann je Rolle eine Farbe oder einen Verlauf setzen (Klasse rk-…, setzt nur --rk-a und --rk-b; siehe js/rankstyle.js). Rahmen und Text laufen
   von --rk-a nach --rk-b; bei einer Farbe sind beide gleich. */
:where(.badge.rank) { --rk-a: var(--red); --rk-b: var(--red); } /* ohne Gewicht, damit die Klasse rk-… (eine Klasse) die Standardfarbe überstimmt */
.badge.rank {
  color: var(--rk-a); border: 1px solid var(--rk-a); border-image: linear-gradient(90deg, var(--rk-a), var(--rk-b)) 1; padding: 3px 14px; font-size: 13px; line-height: 18px; margin: 0;
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  background:
    linear-gradient(135deg, transparent 5px, var(--rk-a) 5px, var(--rk-a) 6.4px, transparent 6.4px) 0 0 / 9px 9px no-repeat,
    linear-gradient(135deg, transparent 6.4px, var(--rk-b) 6.4px, var(--rk-b) 7.8px, transparent 7.8px) 100% 100% / 9px 9px no-repeat;
  background-origin: border-box;
}
.badge.rank .rk-text { background: linear-gradient(90deg, var(--rk-a), var(--rk-b)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* Abzeichen („1 Jahr Mitglied“): Sechseck mit Bildzeichen, keine Beschriftung; Stufe = Farbe und Punkte, Name als Hinweis bei Hover/Fokus (Label für Hilfstechnik) */
.awards { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.award { --aw: #7f98a0; position: relative; display: inline-flex; flex: none; width: 38px; height: 43px; cursor: default; }
.award.tier-2 { --aw: #8fb4ff; }
.award.tier-3 { --aw: var(--cyan); }
.award.tier-4 { --aw: #c3a6ff; }
.award.tier-5 { --aw: #f6c177; }
.award .emblem { display: block; width: 100%; height: 100%; overflow: visible; }
.emblem .hex-out { fill: var(--aw); fill-opacity: 0.14; stroke: var(--aw); stroke-width: 2; stroke-linejoin: miter; }
.emblem .hex-in { fill: none; stroke: var(--aw); stroke-opacity: 0.4; stroke-width: 1; }
.emblem .glyph { fill: none; stroke: var(--aw); stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.emblem .pip { fill: var(--aw); }
.award .tip { display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; white-space: nowrap; pointer-events: none; padding: 4px 10px; font-size: 13px; line-height: 18px; color: var(--text); background: var(--surface); border: 1px solid var(--header-rule); border-top: 2px solid var(--aw); box-shadow: 0 6px 18px rgb(0 0 0 / 0.55); }
.award:hover .tip, .award:focus .tip { display: block; }
.award:hover .emblem .hex-out, .award:focus .emblem .hex-out { fill-opacity: 0.24; }
.award-row .award { width: 48px; height: 54px; }
.award-row .awards { gap: 8px; }
.award-row { margin: 8px 0 0; }
.award-row:empty { display: none; }
.uid-row { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.uid { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.profile-main .uid { color: var(--cyan); font-size: 16px; }
.uid-row .since { margin-left: 8px; }
.profile-bio { margin: 6px 0 0; color: var(--muted); max-width: 72ch; white-space: pre-wrap; }
.profile-actions { flex: none; padding-top: 18px; }
.profile-actions:empty { display: none; }
.profile .tabbar { margin-top: 24px; }
.profile-about { max-width: 72ch; margin: 0 0 16px; color: var(--text); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
.profile-grid h2 { margin-top: 0; }
.profile-grid section { margin-bottom: 36px; }
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 9.6rem minmax(0, 1fr); align-items: center; gap: 12px; min-height: 40px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.facts dd.uid { color: var(--text); }
/* Rollen im Profil: eigene Zeile über die ganze Breite (Beschriftung oben), die Marken („DE Admin“, „FR User“) laufen in Reihen um */
.facts > .roles-row { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px 0 12px; }
.facts > .roles-row dd { display: block; }
.rank-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.rank-list .badge { margin: 0; white-space: nowrap; }
.character-row { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.character-row .name { color: var(--cyan); }
.team-group + .team-group { margin-top: 40px; }
.directory { max-width: none; }
.activity-list { margin: 0; }
.activity-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.activity-row .row-icon { color: var(--muted); display: inline-grid; place-items: center; }
.activity-row .row-icon .icon { width: 26px; height: 26px; }
.activity-row .row-main a { font-size: 16px; overflow-wrap: anywhere; }
.activity-row .row-main p { margin: 6px 0 0; max-width: 72ch; }
.crumb-line { margin-top: 2px; }
.crumb-line .sep { margin: 0 8px; }
.row-date { text-align: right; }
/* Aktivität: Flächendiagramm (js/chart.js); Farben nur hier, die Füllung läuft von Cyan nach durchsichtig. */
.chart-wrap { margin-top: 18px; }
.chart { min-width: 0; padding: 8px 6px 0; border: 1px solid var(--rule); background: rgb(11 18 23 / 0.55); }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--rule); stroke-width: 1; }
.chart-axis { stroke: var(--input-border); stroke-width: 1; }
.chart-label { fill: var(--muted); font: 400 12px var(--font-body); }
.chart-stop-a { stop-color: var(--cyan); stop-opacity: 0.4; }
.chart-stop-b { stop-color: var(--cyan); stop-opacity: 0.02; }
.chart-line { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linejoin: miter; }
.chart-dot { fill: var(--cyan); opacity: 0; }
.chart-dot:hover { opacity: 1; }
.ban-list { margin: 0; padding: 0; display: grid; gap: 14px; }
.ban-row { display: grid; justify-items: start; gap: 4px; }
.ban-server { color: var(--red); border-color: var(--red-dim); }
.ban-reason { overflow-wrap: anywhere; }
.chart-range { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.chart-range button { min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); background: none; color: var(--muted); font: 400 14px/20px var(--font-body); cursor: pointer; }
.chart-range button:hover { color: var(--text); border-color: var(--muted); }
.chart-range button[aria-pressed="true"] { color: var(--text-hi); border-color: var(--selected); }

/* Teamseite: Karten mit dem Profilbanner als Kopf (drei je Zeile); Banner im 5:1-Ausschnitt, ohne Banner die ruhige Standardfläche */
ul.plain.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; margin-top: 20px; }
ul.plain > li.team-card { display: block; padding: 0; border: 1px solid var(--rule); background: rgb(11 18 23 / 0.6); }
ul.plain > li.team-card:hover { border-color: var(--header-rule); }
.team-cover { position: relative; aspect-ratio: 5 / 1; overflow: hidden; background: linear-gradient(135deg, #1a2830, #2a1a22); border-bottom: 1px solid var(--red-dim); }
.team-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 45%, rgb(11 18 23 / 0.7)); }
.team-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 14px; padding: 0 16px 12px; }
.team-body .avatar { grid-row: 1 / 3; width: 64px; height: 64px; margin-top: -32px; font-size: 22px; position: relative; z-index: 1; background-color: #132128; }
.team-name { display: inline-flex; align-items: center; justify-self: start; min-height: var(--target); margin-top: 4px; font-size: 17px; overflow-wrap: anywhere; }
.team-body .role { grid-column: 2; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team-body .role:empty { display: none; }
.team-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 14px; }
.team-foot .contact { display: inline-flex; align-items: center; min-height: var(--target); }
/* Verwaltung: Rangfarbe (zwei Farbfelder, je mit „Keine“, und die Vorschau der Marke) */
.rank-edit { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 9rem; }
.admin-roles td:first-child { min-width: 7rem; }
.admin-roles td.nowrap { white-space: nowrap; }
.admin-roles td input[type="number"] { width: 4rem; }
.admin-roles td input[type="text"] { min-width: 9rem; }
.color-choice { display: inline-flex; align-items: center; gap: 6px; }
.color-choice input[type="color"] { width: 44px; height: var(--field-h, 36px); min-height: 0; padding: 2px; background: transparent; border: 1px solid var(--input-border); border-radius: 0; cursor: pointer; }
.color-choice input[type="color"].unset { opacity: 0.4; border-style: dashed; }
.color-choice input[type="color"]:disabled { cursor: not-allowed; opacity: 0.25; }
.rank-preview { display: inline-flex; min-width: 7rem; }
.tabbar.filter { margin-top: 20px; }
.label { font-size: 14px; color: var(--muted); }
.current-value { color: var(--muted); }

/* Zuschnitt und Bildabschnitte */
.crop { display: grid; gap: 12px; max-width: 520px; }
.crop canvas { display: block; width: 100%; height: auto; background: var(--bg); border: 1px solid var(--input-border); touch-action: none; cursor: grab; }
.crop canvas:active { cursor: grabbing; }
.crop canvas:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.crop canvas.crop-preview { width: auto; max-width: 100%; cursor: default; margin-top: 6px; }
.crop-help { font-size: 13px; color: var(--muted); margin: 0; }
.crop-zoom { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
output.crop-help { display: block; }
.media-section { margin: 0 0 32px; }
.media-preview { margin: 12px 0; }
.media-preview.wide { max-width: 640px; }
.media-preview.wide .profile-cover { max-height: 128px; }
.media-admin { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 32px; align-items: start; margin: 16px 0; }
.media-admin h3 { margin-top: 0; }

/* Verwaltung */
.admin-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
.admin-main { min-width: 0; }
.admin-main > h1 { margin-top: 28px; }
.acp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.acp-top .acp-search { flex: 1 1 320px; margin: 0; }
.acp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; font-size: 14px; }
.acp-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); color: var(--muted); }
.acp-tabs a:hover { color: var(--text); text-decoration: none; border-color: var(--muted); }
.acp-tabs a[aria-current="page"] { color: var(--text-hi); border-color: var(--selected); }
.acp-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 56px; margin-top: 16px; }
.acp-area { min-width: 0; }
.acp-area > p { margin: 0 0 8px; }
.acp-area ul.plain { display: flex; flex-direction: column; gap: 4px; }
ul.acp-recent { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.member-row { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.member-row .role { flex: 1; }
.member-row .uid { color: var(--muted); font-size: 14px; }
.admin-user { display: flex; align-items: center; gap: 20px; margin: 8px 0 16px; }
h2.plain-h { display: block; font: 400 20px/26px var(--font-heading); font-variation-settings: "wdth" 85; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0 0 4px; padding: 0; border: 0; }
.acp-search { position: relative; max-width: 640px; margin: 0; }
.acp-search form.search { margin: 0; }
.acp-results { margin: 6px 0 0; padding: 0; border-top: 1px solid var(--rule); background: var(--surface); }
.acp-results > li { padding: 0; }
.acp-results .acp-hit { padding: 10px 12px; }
td.indent { white-space: nowrap; }
.side-nav { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; font-size: 16px; }
.side-nav a { color: var(--muted); padding: 8px 14px; border-left: 2px solid transparent; }
.side-nav a:hover { color: var(--text); text-decoration: none; }
.side-nav a[aria-current="page"] { color: var(--selected); border-left-color: var(--selected); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); max-width: 760px; font-size: 14px; }
.setting-row .name { color: var(--text); }
.setting-row .help { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.setting-row input[type="number"] { max-width: 120px; }
.toggle { min-width: 56px; }
.setting-row .row { margin: 0; }
.acp-hit { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--text); }
.acp-hit .path { display: block; font-size: 13px; color: var(--muted); }
.acp-hit:hover { text-decoration: none; background: var(--hover-bg); }
.moderation-row { display: grid; grid-template-columns: 1fr 160px 120px; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.secret { font-size: 1.15rem; letter-spacing: 0.08em; user-select: all; }

/* ----- Sicherheit: Kennzahlen, Wiederherstellungscodes, Filterzeile ----- */
.sec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 20px; }
.sec-stat { border: 1px solid var(--rule); background: var(--surface); padding: 10px 12px; }
.sec-stat dt { color: var(--muted); font-size: 13px; }
.sec-stat dd { margin: 4px 0 0; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--text); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0; }
.codes li { margin: 0; }
.codes code { display: block; padding: 8px 10px; font-size: 1.05rem; letter-spacing: 0.06em; user-select: all; }
.recovery .check { display: block; margin: 12px 0; }
.filters { align-items: center; margin: 16px 0; }
.filters input[type="search"] { min-width: 220px; }

/* ----- Responsiv ----- */
@media (max-width: 1100px) {
  .header-inner { gap: 28px; }
  .primary-nav { gap: 20px; }
  .home-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .profile-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; }
  .admin-grid { gap: 32px; }
}
@media (max-width: 899px) {
  .primary-nav, .header-tools .tool-link { display: none; }
  .btn.mobile-toggle { display: inline-flex; }
  .tool-sep { display: none; }
  .mobile-nav { flex-direction: column; border-top: 1px solid var(--rule); width: calc(100% - 64px); margin: 0 auto; padding-bottom: 8px; }
  .mobile-nav.open { display: flex; }
  .mobile-nav .navlink { min-height: 44px; border-bottom: 1px solid var(--rule); }
  .mobile-nav .bell { position: static; margin-left: 10px; }
  .home-grid, .profile-grid { grid-template-columns: 1fr; gap: 48px; }
  .home-grid aside, .profile-grid aside { max-width: 420px; }
  .cat-head, .forum-row { grid-template-columns: 8px minmax(0, 1fr) 64px 64px 190px; column-gap: 16px; }
  .admin-grid { grid-template-columns: 160px 1fr; gap: 24px; }
  .thread-grid, ul.plain > li.thread-row { grid-template-columns: 8px minmax(0, 1fr) 64px 160px; column-gap: 16px; }
  .post { grid-template-columns: 110px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .header-inner, .footer-inner { width: calc(100% - 32px); gap: 16px; }
  .site-header, .header-inner { min-height: 60px; }
  .mobile-nav { width: calc(100% - 32px); }
  .header-tools { gap: 10px; }
  .acct-name { max-width: 12ch; }
  .media-admin { grid-template-columns: 1fr; gap: 16px; }
  .admin-user { align-items: flex-start; }
  .page { width: calc(100% - 32px); margin: 32px auto 56px; }
  .cat-head, .forum-row, .thread-grid, ul.plain > li.thread-row { grid-template-columns: 8px minmax(0, 1fr); column-gap: 14px; padding-inline: 8px; }
  .cat-head .col, .list-head { display: none; }
  .cat-head .cat-title { grid-column: 1 / -1; }
  .area-tools { flex-direction: column; align-items: flex-start; gap: 4px; }
  .area-tools .spacer { display: none; }
  .area-tools .btn.text { padding-inline: 0; }
  .forum-row .stats { display: flex; flex-wrap: wrap; gap: 0 16px; grid-column: 2; margin-top: 6px; }
  .stat .n, .thread-row .count > span:first-child { display: none; }
  .stat .w, .thread-row .count .sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: 13px; color: var(--muted); }
  .forum-row .last-post, .thread-row .last-post, .thread-row .count { grid-column: 2; margin-top: 6px; text-align: left; }
  .thread-row .last-post br { display: none; }
  .thread-row .last-post { display: flex; gap: 0 12px; flex-wrap: wrap; }
  .post { grid-template-columns: 1fr; gap: 12px; }
  .post-author { display: flex; align-items: center; gap: 12px; }
  .post-body, .cpmd { font-size: 16px; }
  .choose-wrap { margin: 24px auto 56px; }
  .choice { min-height: 52px; }
  .choice .caption { max-width: 110px; }
  .profile-identity { flex-wrap: wrap; margin: 0 12px; gap: 12px 16px; }
  .avatar-frame { width: 96px; height: 96px; padding: 5px; margin-top: -36px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
  .avatar-frame .avatar { width: 86px; height: 86px; font-size: 30px; }
  .profile-main { flex-basis: 12rem; padding-top: 8px; }
  .profile-actions { width: 100%; padding-top: 0; }
  .banner-edit { top: 6px; right: 6px; }
  .avatar.large { width: 64px; height: 64px; font-size: 22px; }
  .profile-name { font-size: 28px; line-height: 34px; }
  .facts > div { grid-template-columns: 8rem minmax(0, 1fr); }
  .activity-row { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; }
  .activity-row .row-icon .icon { width: 22px; height: 22px; }
  .activity-row .row-date { grid-column: 2; text-align: left; }
  .brand img { height: 36px; }
  .mod-group { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
  .tabbar, .tabs { gap: 22px; margin: 20px 0 28px; }
  .tabbar > a, .tabbar > button, .tab { min-height: 44px; }
  .chart-range button { min-height: 44px; }
  .admin-grid { grid-template-columns: 1fr; }
  .side-nav { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .setting-row { align-items: flex-start; flex-wrap: wrap; }
  .footer-inner { padding-block: 16px; }
  .footer-action, .site-footer a.footer-link { min-height: 44px; display: inline-flex; align-items: center; }
  .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .moderation-row { grid-template-columns: 1fr; }
  h2 { gap: 12px; }
}
@media (pointer: coarse) {
  .btn, input[type="text"], input[type="search"], input[type="number"], select, .toolbar button, .footer-action, .navlink { min-height: 44px; }
  .btn.small { min-height: 44px; }
  .toolbar button, .btn.tool { min-width: 44px; }
  .menu a, .menu button, .cat-toggle { min-height: 44px; }
}
@media (forced-colors: active) {
  .btn, .badge, .tag, .toast { border: 1px solid CanvasText; }
  .badge.rank { border-image: none; background: none; }
  .badge.rank .rk-text { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
  .emblem .hex-out, .emblem .hex-in, .emblem .glyph { stroke: CanvasText; }
  .emblem .hex-out { fill: Canvas; }
  .emblem .pip { fill: CanvasText; }
  .choice:has(input:checked) { outline: 2px solid Highlight; }
}

/* ----- Neon: Leuchten, Lichtlinie, bewegter Hintergrund (Betreiberwunsch; Farben und Leuchten nach dem Logo) -----
   Regeln: Leuchten nur für Überschriften, Namen, Links und Bedienelemente (Links in Fließtext nur ganz schwach), nie für normalen Text; alles Bewegte steht unter prefers-reduced-motion still
   (der Hintergrund-Regen in js/backdrop.js zeichnet dann nur ein Standbild) und lässt sich im Fuß ausschalten. Grün bleibt dem gewählten Zustand vorbehalten. */

/* Der bewegte Hintergrund (Leinwand, von js/backdrop.js angelegt) liegt hinter dem Inhalt und vor dem Stadtbild. */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Stadtbild atmet ganz langsam (Tiefenwirkung hinter dem Regen). */
body::before { animation: cw-city 70s ease-in-out infinite alternate; }
@keyframes cw-city { from { transform: scale(1.03) translate3d(-0.8%, 0, 0); } to { transform: scale(1.09) translate3d(0.8%, -1.2%, 0); } }

/* Kopf: rote Neonlinie mit weichem Schein und einer wandernden hellen Stelle. */
.site-header { box-shadow: 0 1px 16px rgb(255 42 85 / 0.38); }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, transparent 38%, var(--cyan-hi) 50%, transparent 62%, transparent 100%) 0 0 / 250% 100% no-repeat;
  box-shadow: 0 0 10px rgb(25 225 255 / 0.55);
  animation: cw-sweep 9s linear infinite;
}
@keyframes cw-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.site-footer .footer-inner { border-top-color: var(--header-rule); box-shadow: 0 -1px 14px rgb(255 42 85 / 0.16); }

/* Logo */
.brand img { filter: drop-shadow(0 0 7px rgb(25 225 255 / 0.5)); animation: cw-logo 6s ease-in-out infinite alternate; }
.brand:hover img { animation: none; filter: brightness(1.18) drop-shadow(0 0 12px rgb(25 225 255 / 0.8)); }
@keyframes cw-logo { from { filter: drop-shadow(0 0 4px rgb(25 225 255 / 0.35)); } to { filter: drop-shadow(0 0 11px rgb(25 225 255 / 0.7)); } }

/* Überschriften: Titel rot, Abschnitte rot (weicher), Profilname cyan. Der Titel atmet und flackert ganz leicht wie eine Neonröhre. */
h1 { text-shadow: var(--glow-red); animation: cw-neon-red 5.5s ease-in-out infinite alternate, cw-flicker 11s linear infinite; }
h2 { text-shadow: 0 0 4px rgb(255 77 109 / 0.7), 0 0 14px rgb(255 42 85 / 0.42); }
.profile-name { text-shadow: var(--glow-cyan); }
@keyframes cw-neon-red {
  from { text-shadow: 0 0 3px rgb(255 77 109 / 0.8), 0 0 9px rgb(255 42 85 / 0.4), 0 0 22px rgb(255 42 85 / 0.2); }
  to { text-shadow: 0 0 3px rgb(255 77 109 / 0.95), 0 0 14px rgb(255 42 85 / 0.65), 0 0 36px rgb(255 42 85 / 0.38); }
}
@keyframes cw-flicker { 0%, 90%, 93%, 96%, 100% { opacity: 1; } 91.5% { opacity: 0.8; } 94.5% { opacity: 0.88; } }

/* Namen, Kennungen und Kontext in Cyan */
.navlink.acct, .post-author .name, .character-row .name, .profile-main .uid, .context-line { text-shadow: var(--glow-cyan-soft); }
.badge.ic, .initials { text-shadow: var(--glow-cyan-soft); }
.badge.new, .more-link, .warn, .field-error { text-shadow: var(--glow-red-soft); }
a { text-shadow: 0 0 7px rgb(25 225 255 / 0.32); }
a:hover, .navlink:hover { text-shadow: var(--glow-cyan-soft); }
.primary-nav .navlink[aria-current="page"] { text-shadow: var(--glow-cyan-soft); }
.primary-nav .navlink[aria-current="page"]::after { box-shadow: 0 0 10px rgb(136 216 142 / 0.75); }

/* Rang: Text und Verlauf leuchten in den eigenen Rangfarben (Filter statt Textschatten, weil der Text per Verlauf gefüllt wird; der Rahmen ist abgeschnitten und leuchtet nicht mit). */
.badge.rank .rk-text { filter: drop-shadow(0 0 3px var(--rk-a)) drop-shadow(0 0 9px var(--rk-b)); }

/* Schaltflächen: Rand und Schrift leuchten; ruhige Varianten (Text, Symbol, Link, ghost) und gesperrte bleiben still. */
.btn:where(:not(.ghost, .quiet, .text, .link, .icon-btn, :disabled, [aria-disabled="true"], [aria-busy="true"])) {
  box-shadow: 0 0 8px rgb(25 225 255 / 0.32), inset 0 0 8px rgb(25 225 255 / 0.1); text-shadow: var(--glow-cyan-soft);
}
.btn.danger:not(:disabled) { box-shadow: 0 0 8px rgb(255 77 109 / 0.32), inset 0 0 8px rgb(255 77 109 / 0.1); text-shadow: var(--glow-red-soft); }
.btn:is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [aria-current="page"], [data-state="selected"]) { box-shadow: 0 0 10px rgb(136 216 142 / 0.35), inset 0 0 8px rgb(136 216 142 / 0.12); text-shadow: none; }
@media (hover: hover) {
  .btn:hover:where(:not(.ghost, .quiet, .text, .link, .icon-btn, :disabled)) { box-shadow: 0 0 16px rgb(255 77 109 / 0.55), inset 0 0 10px rgb(255 77 109 / 0.16); text-shadow: var(--glow-red-soft); }
}
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 12px rgb(25 225 255 / 0.4); }
.footer-action[aria-pressed="true"] { text-shadow: 0 0 8px rgb(136 216 142 / 0.55); }

@media (prefers-reduced-motion: reduce) {
  body::before, .site-header::after, .brand img, h1 { animation: none; }
  h1 { text-shadow: var(--glow-red); }
  .brand img { filter: drop-shadow(0 0 7px rgb(25 225 255 / 0.5)); }
}
@media (forced-colors: active) {
  .backdrop { display: none; }
  .site-header::after { display: none; }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; filter: none !important; animation: none !important; }
}

/* ----- Shop (Laden, Warenkorb, Kasse, Bestellungen, Verwaltung) -----
   Pakete stehen als Liste mit dünnen Trennlinien (keine Kachelwand): links Name, Beschreibung und Eckdaten, rechts Preis und Kauf. Grün erscheint hier nicht – gewählte
   Zahlungsart und Zustimmung nutzen die gemeinsamen Auswahlelemente (:checked). */
.shop-nav { margin: 4px 0 24px; }
.shop-lead { max-width: 70ch; color: var(--text-hi); }
.shop-cat { margin: 0 0 8px; }
.shop-list { margin-bottom: 8px; }
.shop-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: start; }
.shop-info h3 { margin: 0 0 4px; font: 400 18px/24px var(--font-heading); font-variation-settings: "wdth" 90; color: var(--text-hi); }
.shop-info p { margin: 0 0 8px; max-width: 64ch; }
.shop-facts { display: flex; flex-wrap: wrap; gap: 6px 0; }
.shop-side { display: grid; justify-items: end; gap: 10px; min-width: 190px; }
.shop-price { margin: 0; font: 400 24px/28px var(--font-heading); font-variation-settings: "wdth" 85; color: var(--cyan-hi); text-shadow: var(--glow-cyan-soft); white-space: nowrap; }
.shop-buy { display: flex; gap: 8px; align-items: center; }
.shop-buy select { width: 64px; }
.shop-table .num, .shop-table th.num { text-align: right; white-space: nowrap; }
.shop-issue { color: var(--red); font-size: 13px; }
.shop-sums { max-width: 440px; margin: 20px 0; }
.sum-row { display: flex; justify-content: space-between; gap: 24px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.sum-row.total { padding-top: 12px; border-bottom: 0; border-top: 1px solid var(--red-dim); font-size: 18px; color: var(--text-hi); }
.shop-promo form { max-width: 560px; }
.shop-promo input[type="text"] { flex: 1; min-width: 180px; }
.shop-consent { align-items: flex-start; max-width: 70ch; margin: 12px 0 0; }
.shop-consent input { margin-top: 3px; }
.shop-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; }
.shop-actions { margin: 0; gap: 6px; }
.code-list code { display: inline-block; margin: 2px 0; padding: 6px 10px; font-size: 18px; letter-spacing: 0.08em; color: var(--text-hi); }
.legal-text p { max-width: 70ch; white-space: pre-line; }
.setting-row.wide { display: block; max-width: 760px; }
.setting-row.wide textarea { width: 100%; margin-top: 8px; font-size: 14px; }
@media (max-width: 640px) {
  .shop-item { grid-template-columns: minmax(0, 1fr); }
  .shop-side { justify-items: start; min-width: 0; }
}

/* ----- Rollen und Rechte (ACP) -----
   Zwei Ebenen: die Übersicht (.roles-overview) und der Editor einer Rolle (.role-editor) mit senkrechter Bereichsnavigation (Darstellung, Berechtigungen, Mitglieder) und dem Inhalt
   nur eines Bereichs. Eckig, keine Inline-Stile: Farben kommen über die Klasse rk-… (js/rankstyle.js), die nur --rk-a und --rk-b setzt. Grün bleibt dem gewählten Zustand vorbehalten
   (gewählter Bereich, gewähltes Farbfeld, „Erlauben“ gewählt); Verweigern ist rot. */
.role-dot { flex: none; width: 10px; height: 10px; background: var(--rk-a, var(--muted)); }
.role-dot.big { width: 14px; height: 14px; }

/* Übersicht */
.roles-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 20px 0 18px; max-width: 880px; }
.roles-toolbar form.search { flex: 1 1 260px; max-width: 420px; margin: 0; }
.roles-toolbar .btn { flex: none; }
.roles-toolbar .btn .icon { width: 16px; height: 16px; }
.role-rows { list-style: none; margin: 0; padding: 0; max-width: 880px; border-top: 1px solid var(--rule); }
.role-rows > li { padding: 0; }
.role-order-hint { margin: 0 0 4px; max-width: 880px; }
.role-filter-note { margin: -6px 0 12px; max-width: 880px; }
.role-line { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); background: transparent; }
.role-line.has-lead { grid-template-columns: 44px minmax(0, 1fr); }
.role-grip, .role-grip-slot { display: grid; place-items: center; width: 44px; min-height: 64px; padding: 0; border: 0; background: none; color: var(--muted); }
.role-grip { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.role-grip .icon, .role-grip-slot .icon { width: 20px; height: 20px; }
.role-grip:focus-visible { outline-offset: -3px; }
.role-grip:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) { .role-grip:hover:not(:disabled) { color: var(--cyan); } }
/* Verschieben: angehobene Zeile (Cyan, kein Grün), Einfügemarke zwischen den Zeilen; die mitgehende Zeile bekommt ihre Verschiebung per CSSOM-Regel (.role-follow) */
.role-rows.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.role-li.lifted { background: rgb(0 0 0 / 0.28); }
.role-li.lifted > .role-line { position: relative; z-index: 4; background: var(--surface); outline: 2px solid var(--cyan); outline-offset: -2px; box-shadow: 0 10px 24px rgb(0 0 0 / 0.6); }
.role-li.lifted .role-grip { cursor: grabbing; color: var(--cyan); }
.role-rows > li.role-marker { position: relative; z-index: 5; height: 0; padding: 0; margin: 0; }
.role-marker::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--cyan); box-shadow: 0 0 10px rgb(25 225 255 / 0.65); }
.roles-overview .role-savebar { max-width: 880px; }
.role-row { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 64px; padding: 12px 40px 12px 12px; color: var(--text); text-decoration: none; }
.role-row::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
.role-row:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .role-row:hover { background: var(--hover-bg); text-decoration: none; } .role-row:hover::after { border-color: var(--text-hi); } }
.role-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-hi); font-size: 16px; }
.role-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.role-public { margin: 0 0 0 8px; }
.role-row-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; min-width: 0; }
.role-mark { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.role-row-count { min-width: 7em; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.roles-overview .empty { max-width: 880px; }

/* Editor: Kopf */
.role-editor { margin-top: 4px; }
.role-editor-top { display: grid; gap: 10px; margin-bottom: 22px; }
.role-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.role-head h2.plain-h { flex: 0 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.role-back .icon { width: 16px; height: 16px; transform: scaleX(-1); }
.role-editor-top .notice { margin: 0; }

/* Editor: Bereichsnavigation links (wie die ACP-Seitenleiste), Inhalt rechts */
.role-editor-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.role-nav { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; font-size: 14px; position: sticky; top: 16px; }
.role-nav a { display: flex; align-items: center; min-height: var(--target); padding: 4px 12px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.role-nav a:hover { color: var(--text); text-decoration: none; }
.role-nav a[aria-current="page"] { color: var(--selected); border-left-color: var(--selected); }
.role-nav .nav-short { display: none; }
.role-area { min-width: 0; }

/* Darstellung: ruhige Abschnitte */
.role-section { max-width: 640px; margin: 0 0 28px; padding: 0 0 26px; border-bottom: 1px solid var(--rule); }
.role-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.role-section > h3 { margin: 0 0 14px; font-size: 16px; line-height: 22px; color: var(--text-hi); }
.role-section .field { max-width: none; margin-bottom: 18px; }
.role-section .field > p { margin: 0; }
.role-section > .field-error { margin: -12px 0 12px; }
.role-section > p.dim { margin: -10px 0 18px; }
.role-section > p.dim:empty { display: none; }

/* Farbfelder: ein Feld je Farbe (Radio), gewählt = grüner Rahmen mit Haken, „Keine Farbe“ als Feld mit durchgestrichenem Zeichen */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; cursor: pointer; }
.swatch > input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch-chip { display: grid; place-items: center; width: 100%; height: 100%; background: var(--rk-a, transparent); border: 2px solid transparent; color: #0d151a; font: 700 18px/1 var(--font-body); }
.swatch.none .swatch-chip { border-color: var(--input-border); color: var(--muted); font-weight: 400; }
.swatch:has(input:checked) .swatch-chip { border-color: var(--selected); box-shadow: inset 0 0 0 2px var(--bg); }
.swatch:has(input:checked) .swatch-chip::after { content: "✓"; position: absolute; font-size: 16px; color: #0d151a; }
.swatch.none:has(input:checked) .swatch-chip { color: var(--selected); }
.swatch.none:has(input:checked) .swatch-chip::after { content: none; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.swatch:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.swatches + p.dim { margin: 10px 0 0; }
.role-preview { display: grid; gap: 10px; padding: 12px 16px; border: 1px solid var(--rule); background: var(--surface); }
.pv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 30px; }
.pv-label { flex: none; width: 56px; color: var(--muted); font-size: 13px; }
.pv-name { color: var(--cyan); }
.pv-rank { color: var(--text-hi); font-weight: 700; }
.pv-rank::after { content: " |"; color: var(--muted); font-weight: 400; }

/* Berechtigungen: schmaler Kopf, Suche, einklappbare Gruppen */
.perm-head { display: grid; gap: 8px; margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--rule); background: var(--surface); }
.perm-head-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.perm-rank { display: flex; align-items: center; gap: 10px; }
.perm-rank label { font-size: 14px; color: var(--muted); }
.perm-q { font-size: 14px; }
.perm-total { margin: 0 0 0 auto; font-size: 14px; color: var(--text); }
.perm-help { max-width: 70ch; padding: 4px 0 6px; font-size: 13px; color: var(--muted); }
.perm-help p { margin: 0 0 6px; }
.perm-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.perm-tools form.search { flex: 1 1 260px; margin: 0; }
.perm-tools .row { margin: 0; }
.perm-group { margin: 0 0 8px; border: 1px solid var(--rule); background: var(--surface); }
.perm-group > summary { display: flex; align-items: center; gap: 12px; min-height: var(--target); padding: 8px 12px; cursor: pointer; list-style: none; }
.perm-group > summary::-webkit-details-marker { display: none; }
.perm-group > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform var(--duration); }
.perm-group[open] > summary::before { transform: rotate(45deg); }
.perm-group > summary:focus-visible { outline-offset: -2px; }
.perm-group-title { flex: 1; min-width: 0; color: var(--text-hi); }
.perm-extra-hint { margin: 0; padding: 0 12px 8px; }
.perm-list { border-top: 1px solid var(--rule); }
.perm-list > li.perm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.perm-list > li.perm-row:last-child { border-bottom: 0; }
.perm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-info > code.perm-text { align-self: flex-start; }
.perm-text { font-size: 14px; overflow-wrap: anywhere; }
.perm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; color: var(--muted); }
.perm-meta code { font-size: 12px; }
.perm-meta .tag { margin: 0; }
.tag.sens { color: var(--red); border-color: var(--red-dim); }
.perm-state { display: inline-flex; flex: none; border: 1px solid var(--input-border); }
.ps { position: relative; display: inline-grid; place-items: center; width: 40px; min-height: var(--target); border-left: 1px solid var(--input-border); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.ps:first-child { border-left: 0; }
.ps > input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ps:has(input:checked) { color: var(--text-hi); background: var(--press-bg); }
.ps.allow:has(input:checked) { color: var(--selected); background: var(--selected-bg); }
.ps.deny:has(input:checked) { color: var(--red); background: rgb(255 77 109 / 0.12); }
.ps:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: -2px; z-index: 1; }
.ps:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
@media (hover: hover) { .ps:hover:not(:has(input:checked)):not(:has(input:disabled)) { color: var(--text-hi); background: var(--hover-bg); } }

/* Mitglieder: Liste oben, „+ Mitglied hinzufügen“ klappt das Formular erst auf */
.member-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.member-head h3 { margin: 0; font-size: 16px; line-height: 22px; color: var(--text-hi); }
.member-head .btn .icon { width: 16px; height: 16px; }
.member-list { margin: 0 0 8px; }
.member-list > li.member-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.member-list > li.member-line:first-child { border-top: 1px solid var(--rule); }
.member-main { min-width: 0; }
.member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.member-meta .tag { margin: 0; color: var(--cyan); border-color: #405a61; }
.member-add { max-width: 640px; margin: 0 0 24px; padding: 16px 16px 4px; border: 1px solid var(--rule); background: var(--surface); }
.member-add[hidden] { display: none; }
.member-add .field { max-width: none; margin-bottom: 16px; }
.member-add .field > p, .member-add .server-pick > p { margin: 0; }
.member-add .server-pick > p { margin-top: 6px; }
.member-add .server-pick { margin: 0 0 16px; padding: 0; border: 0; }
.member-results { margin: -8px 0 16px; }
.member-results .choose-list { margin: 0; }
.member-results .choice { min-height: 48px; }
.member-chosen { margin: 0; }
.server-pick { max-width: none; }
.server-grid { display: flex; flex-wrap: wrap; gap: 0 22px; }
.member-add .row { margin-bottom: 12px; }
.member-add .stack { gap: 4px; }
input[type="date"] { width: auto; max-width: 100%; min-height: var(--field-h); padding: 6px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 0; }
input[type="date"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Leiste unten: bleibt am unteren Rand des Fensters sichtbar, solange etwas ungespeichert ist (gilt für Darstellung und Berechtigungen) */
.role-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 24px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--header-rule); border-top: 2px solid var(--red-line); }
.role-savebar[hidden] { display: none; }
.role-savebar-main { flex: 1 1 260px; min-width: 0; }
.role-status { margin: 0; font-size: 14px; color: var(--text); }
.role-status:empty { display: none; }
.role-conflict .notice { margin: 4px 0 8px; }
.role-savebar .row { margin: 0; }

@media (max-width: 1100px) {
  .role-editor-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
  .role-row { grid-template-columns: 12px minmax(0, 1fr); padding-right: 36px; }
  .role-row-meta { grid-column: 2; justify-content: flex-start; }
  .role-row-count { min-width: 0; text-align: left; }
  .roles-toolbar form.search { max-width: none; }
  /* Bereichsnavigation wird zu einer Reihe über dem Inhalt (eine Zeile, kürzere Beschriftung, notfalls waagerecht verschiebbar) */
  .role-editor-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .role-nav { position: static; flex-direction: row; gap: 0; padding: 0; overflow-x: auto; border-bottom: 1px solid var(--rule); }
  .role-nav a { flex: 1 0 auto; justify-content: center; min-height: 44px; padding: 8px 12px; border-left: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .role-nav a[aria-current="page"] { border-bottom-color: var(--selected); }
  .role-nav .nav-long { display: none; }
  .role-nav .nav-short { display: inline; }
  .perm-list > li.perm-row { grid-template-columns: minmax(0, 1fr); }
  .perm-state { justify-self: start; }
  .perm-total { margin-left: 0; width: 100%; }
  .member-list > li.member-line { grid-template-columns: 40px minmax(0, 1fr); }
  .member-list > li.member-line > .btn { grid-column: 2; justify-self: start; }
  .member-add { padding-inline: 12px; }
  .pv-label { width: 100%; }
  .role-savebar { margin-inline: -4px; }
}
@media (pointer: coarse) {
  .ps { width: 48px; min-height: 44px; }
  .swatch { width: 44px; height: 44px; }
  .perm-group > summary { min-height: 44px; }
  .role-nav a { min-height: 44px; }
  .server-grid .check { min-height: 44px; }
}
@media (forced-colors: active) {
  .role-nav a[aria-current="page"] { outline: 2px solid Highlight; }
  .swatch:has(input:checked) .swatch-chip, .ps:has(input:checked) { outline: 2px solid Highlight; }
}