/* Mister Middle – Web-App
   Farbidee: Zwei gleichwertige Seiten (A = Blau, B = Ocker). Wo sie sich überschneiden,
   entsteht Grün – die Mitte. Grün gehört Mister Middle und dem, was beide bestätigt haben.
   Schrift: Mister Middle und das Gedächtnis sprechen in Literata (ruhig, wie ein gutes Protokoll),
   die Menschen und die Oberfläche in Atkinson Hyperlegible Next (gebaut für Lesbarkeit). */

:root {
  --paper: #f2f4f0;
  --surface: #ffffff;
  --surface-2: #e8ece7;
  --ink: #1c2622;
  --muted: #56645e;
  --line: #d4dcd6;
  --line-strong: #b4c0b9;

  --a: #3d6b9f;
  --a-ink: #2c5381;
  --a-soft: #e4ecf6;
  --a-line: #bccfe6;

  --b: #b5861b;
  --b-ink: #7f5c0a;
  --b-soft: #f7eed8;
  --b-line: #e4d09c;

  --mid: #2f7552;
  --mid-ink: #215b3e;
  --mid-soft: #dfeee5;
  --mid-line: #a8cfb8;

  --danger: #a6402a;
  --danger-soft: #f8e4de;
  --focus: #1f5fa8;
  --on-mid: #ffffff;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;

  --font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voice: "Literata", Georgia, "Times New Roman", serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 1.875rem;
  --step-4: 2.375rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111714;
    --surface: #18201c;
    --surface-2: #212b26;
    --ink: #e6ece8;
    --muted: #9eaca5;
    --line: #2b3631;
    --line-strong: #3d4a44;

    --a: #8db1dc;
    --a-ink: #a9c6ea;
    --a-soft: #1b2836;
    --a-line: #34506f;

    --b: #e0b955;
    --b-ink: #ecca78;
    --b-soft: #2e2615;
    --b-line: #5e4c1f;

    --mid: #6fbf93;
    --mid-ink: #8fd3ad;
    --mid-soft: #16291f;
    --mid-line: #2f5a42;

    --danger: #e58b74;
    --danger-soft: #3a1f19;
    --focus: #8bb8f0;
    --on-mid: #0d1a13;

    color-scheme: dark;
  }
}

/* ---------- Grundlagen ---------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-voice);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-3);
}

h2 {
  font-size: var(--step-1);
}

h3 {
  font-size: var(--step-0);
}

p {
  margin: 0 0 0.8em;
}

a {
  color: var(--mid-ink);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

strong {
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--step--1);
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--radius-s);
}

.skip:focus {
  top: 10px;
}

main:focus {
  outline: none;
}

/* ---------- Bildmarke ---------- */

.mark {
  display: block;
  flex: none;
}

.mark-a {
  fill: var(--a);
}

.mark-b {
  fill: var(--b);
}

.mark-mid {
  fill: var(--mid);
}

.mark-animated .mark-a {
  animation: mark-a 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mark-animated .mark-b {
  animation: mark-b 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mark-animated .mark-mid {
  animation: mark-mid 1.1s ease-out both;
}

/* Mister Middle denkt nach: die beiden Seiten umkreisen sich, die Mitte bleibt –
   mit kurzer Pause nach jeder halben Drehung (Perspektivwechsel) */
.mark-spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.msg-typing .mark-animated .mark-spin {
  animation: mark-orbit 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.msg-typing .mark-animated .mark-a,
.msg-typing .mark-animated .mark-b,
.msg-typing .mark-animated .mark-mid {
  animation: none;
}

@keyframes mark-a {
  from {
    transform: translateX(-9px);
  }
  to {
    transform: none;
  }
}

@keyframes mark-b {
  from {
    transform: translateX(9px);
  }
  to {
    transform: none;
  }
}

@keyframes mark-mid {
  0%,
  55% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mark-orbit {
  0% {
    transform: rotate(0deg);
  }
  42%,
  50% {
    transform: rotate(180deg);
  }
  92%,
  100% {
    transform: rotate(360deg);
  }
}

/* ---------- Rahmen ---------- */

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-voice);
  font-size: 1.15rem;
  font-weight: 600;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: var(--step--1);
}

.topnav a {
  color: var(--ink);
  text-decoration: none;
}

.topnav a:hover {
  text-decoration: underline;
}

.linklike {
  background: none;
  border: 0;
  padding: 0;
  color: var(--mid-ink);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.topnav .linklike {
  color: var(--ink);
  text-decoration: none;
}

.topnav .linklike:hover {
  text-decoration: underline;
}

.lang {
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 560px) {
  .topnav .nav-wide {
    display: none;
  }
  .brand {
    font-size: 1.05rem;
  }
}

main {
  flex: 1;
}

.page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.page.narrow {
  max-width: 640px;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.page-head h1 {
  margin: 0;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

.footer {
  padding: 24px 16px 32px;
  text-align: center;
  color: var(--muted);
  font-size: var(--step--1);
}

.footer p {
  margin: 0 0 6px;
}

.footer a {
  color: var(--muted);
  margin: 0 8px;
}

.beta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--b-soft);
  color: var(--b-ink);
}

/* Beta-Kennzeichen neben dem Namen und auf dem Beta-Hinweis */
.beta-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--b-soft);
  color: var(--b-ink);
  font-family: var(--font-ui, inherit);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.beta-badge-large {
  margin: 0 0 8px;
  font-size: 0.8rem;
  padding: 2px 12px;
}

.beta-gate {
  text-align: left;
}

.beta-gate .auth-mark {
  margin-bottom: 8px;
}

.beta-points {
  margin: 0 0 20px;
  padding-left: 1.2em;
  display: grid;
  gap: 8px;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 16px;
  color: var(--muted);
}

.spinner {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
  flex: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Formulare ---------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label,
fieldset legend {
  font-weight: 700;
  font-size: 0.95rem;
}

.field-optional {
  font-weight: 400;
  color: var(--muted);
}

.field-hint {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

textarea {
  line-height: 1.5;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset: 0;
  border-color: var(--focus);
}

input[type="number"] {
  width: 5.5em;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

fieldset legend {
  padding: 0;
  margin-bottom: 8px;
}

.two-col {
  display: grid;
  gap: 18px;
}

@media (min-width: 640px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
}

.check input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--mid);
}

.error-note {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}

.notice {
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: var(--mid-soft);
  color: var(--mid-ink);
}

.success-line {
  color: var(--mid-ink);
  font-weight: 700;
}

/* FairFix: Was gilt – beim Anlegen und vor dem Beitritt offen sichtbar */
.fairfix-rules {
  padding: 14px 16px;
  border-radius: var(--radius-m);
  border: 1px solid var(--mid-line);
  background: var(--mid-soft);
  color: var(--ink);
}

.fairfix-rules h2 {
  margin: 0 0 8px;
  font-size: var(--step-0);
  color: var(--mid-ink);
}

.fairfix-rules p {
  margin: 0 0 8px;
}

.fairfix-rules ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
}

.join .fairfix-rules {
  margin-bottom: 16px;
}

.party-role {
  margin-left: 4px;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
}

.chip-fairfix {
  background: var(--mid-soft);
  color: var(--mid-ink);
}

/* Auswahl als große Kacheln (Kategorie) */
.choice-grid {
  display: grid;
  gap: 10px;
}

@media (min-width: 560px) {
  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.choice-grid legend {
  grid-column: 1 / -1;
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  cursor: pointer;
}

.choice input,
.segmented input,
.choice-list input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-title {
  font-weight: 700;
}

.choice-hint {
  font-size: var(--step--1);
  color: var(--muted);
}

.choice.selected {
  border-color: var(--mid);
  background: var(--mid-soft);
  box-shadow: inset 0 0 0 1px var(--mid);
}

.choice:has(input:focus-visible),
.segmented label:has(input:focus-visible),
.choice-list label:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Segment-Schalter */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.segmented legend {
  width: 100%;
}

.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.95rem;
}

.segmented label.selected {
  border-color: var(--mid);
  background: var(--mid-soft);
  color: var(--mid-ink);
  font-weight: 700;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.choice-list label {
  position: relative;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
}

.choice-list label.selected {
  border-color: var(--mid);
  background: var(--mid-soft);
  font-weight: 700;
}

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.9rem;
}

.btn-primary {
  background: var(--mid);
  color: var(--on-mid);
}

.btn-primary:hover {
  background: var(--mid-ink);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--surface-2);
}

.btn-ghost {
  background: transparent;
  color: var(--mid-ink);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

.btn-danger {
  background: var(--surface);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-soft);
}

.btn-accept {
  background: var(--mid-soft);
  border-color: var(--mid-line);
  color: var(--mid-ink);
}

.btn-accept:hover {
  border-color: var(--mid);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Bausteine ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 20px;
  margin-bottom: 18px;
}

.panel h2 {
  margin-bottom: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.chip-quiet {
  background: transparent;
  border: 1px solid var(--line-strong);
}

.status-resolved {
  background: var(--mid-soft);
  color: var(--mid-ink);
}

.badge {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.badge-new {
  background: var(--mid);
  color: var(--on-mid);
}

.badge-pending {
  background: var(--b-soft);
  color: var(--b-ink);
  border: 1px solid var(--b-line);
}

.banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background: var(--b-soft);
  border: 1px solid var(--b-line);
  color: var(--ink);
}

.banner p {
  margin-bottom: 8px;
}

.banner-quiet {
  background: var(--surface-2);
  border-color: var(--line);
}

.hint-line {
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
}

/* Parteien: Farbe hängt an der Seite, nicht an "ich" – beide sehen dasselbe Bild */
.side-a {
  --side: var(--a);
  --side-ink: var(--a-ink);
  --side-soft: var(--a-soft);
  --side-line: var(--a-line);
}

.side-b {
  --side: var(--b);
  --side-ink: var(--b-ink);
  --side-soft: var(--b-soft);
  --side-line: var(--b-line);
}

.side-mid {
  --side: var(--mid);
  --side-ink: var(--mid-ink);
  --side-soft: var(--mid-soft);
  --side-line: var(--mid-line);
}

.party-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.party-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--side, var(--line-strong));
  flex: none;
}

.party-me {
  font-weight: 400;
  color: var(--muted);
}

.party-name.not-joined .party-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--side);
}

.party-state {
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}

/* ---------- Anmeldung ---------- */

.auth {
  max-width: 440px;
}

.auth-mark {
  margin-bottom: 16px;
}

.auth .auth-switch {
  margin-top: 22px;
  color: var(--muted);
}

/* ---------- Fallübersicht ---------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  padding: 28px 0;
}

.empty p {
  color: var(--muted);
}

.case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.case-row + .case-row {
  border-top: 1px solid var(--line);
}

.case-row a {
  display: grid;
  gap: 8px 20px;
  padding: 16px 18px;
  color: inherit;
  text-decoration: none;
}

.case-row a:hover {
  background: var(--surface-2);
}

@media (min-width: 760px) {
  .case-row a {
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }
}

.case-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.case-row-title {
  font-family: var(--font-voice);
  font-size: 1.2rem;
  font-weight: 560;
}

.case-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: var(--step--1);
  color: var(--muted);
}

.case-row-parties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.95rem;
}

.case-row-badges {
  display: flex;
  gap: 6px;
  justify-self: start;
}

.status-archived .case-row-title {
  color: var(--muted);
}

/* ---------- Neuer Fall / Einladung ---------- */

.invite {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.invite-link {
  display: flex;
  gap: 8px;
}

.invite-link input {
  font-size: 0.9rem !important;
  color: var(--muted) !important;
}

.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.next {
  margin-top: 28px;
}

.join .mark {
  margin-bottom: 18px;
}

/* ---------- Fall ---------- */

.case {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 0;
}

.case-head {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

@media (min-width: 900px) {
  .case-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .case-head .banner {
    grid-column: 1 / -1;
  }
}

.case-title h1 {
  margin-bottom: 6px;
}

.case-sub {
  display: flex;
  gap: 6px;
  margin: 0;
}

.case-parties {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
}

.case-mediator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mid-soft);
  color: var(--mid-ink);
  font-family: var(--font-voice);
  font-size: 0.95rem;
}

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 8px -16px 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 10px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.tab:hover {
  color: var(--ink);
}

.tab.active {
  color: var(--ink);
  border-bottom-color: var(--mid);
}

.tab-count {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--b);
  color: #1c1405;
  font-size: 0.78rem;
  text-align: center;
}

.case-body.with-side {
  display: grid;
  gap: 24px;
}

@media (min-width: 1100px) {
  .case-body.with-side {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.case-side {
  display: none;
}

@media (min-width: 1100px) {
  .case-side {
    display: block;
    position: sticky;
    top: 76px;
  }
}

.case-main {
  min-width: 0;
  max-width: 820px;
  padding-bottom: 32px;
}

.case-body .case-main {
  max-width: none;
}

/* ---------- Gespräch ---------- */

.thread-more {
  text-align: center;
  margin: 8px 0;
}

/* Kopf des Verlaufs: „Bisher“ und der Knopf für ältere Nachrichten (Sprungziel „nach oben“) */
.thread-head {
  scroll-margin-top: 84px;
}

.sofar {
  margin: 0 0 10px;
  padding: 12px 16px;
  border-radius: var(--radius-m);
  background: var(--mid-soft);
  border: 1px solid var(--mid-line);
}

.sofar summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  cursor: pointer;
  list-style: none;
}

.sofar summary::-webkit-details-marker {
  display: none;
}

.sofar summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--mid-ink);
  border-bottom: 2px solid var(--mid-ink);
  transform: rotate(-135deg);
  transition: transform 0.15s;
}

.sofar:not([open]) summary::after {
  transform: rotate(45deg);
}

.sofar-title {
  font-family: var(--font-voice);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mid-ink);
}

.sofar-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.sofar-body {
  margin-top: 10px;
  font-family: var(--font-voice);
}

.sofar-body > :last-child {
  margin-bottom: 0;
}

.sofar-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.day-sep.new-sep {
  color: var(--mid-ink);
  scroll-margin-top: 84px;
}

.day-sep.new-sep::before,
.day-sep.new-sep::after {
  background: var(--mid-line);
}

/* Sprung-Knöpfe: schweben rechts über dem Eingabefeld */
.jump {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: flex;
  gap: 6px;
  padding-bottom: 2px;
}

.jump-dock {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10;
  height: 0;
}

.jump-dock .jump {
  bottom: 0;
}

.jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(28, 38, 34, 0.55);
}

.jump-btn:hover {
  border-color: var(--mid);
}

.jump-btn.jump-new {
  background: var(--mid);
  border-color: var(--mid);
  color: var(--on-mid);
}

.messages {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.day-sep::before,
.day-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.msg-party {
  display: flex;
}

.msg-party.mine {
  justify-content: flex-end;
}

.msg-party.first {
  margin-top: 10px;
}

.bubble {
  max-width: min(580px, 84%);
  padding: 9px 14px 6px;
  border-radius: 18px;
  background: var(--side-soft);
  border: 1px solid var(--side-line);
  overflow-wrap: anywhere;
}

.mine .bubble {
  border-bottom-right-radius: 6px;
}

.theirs .bubble {
  border-bottom-left-radius: 6px;
}

.bubble p {
  margin: 0;
}

.msg-author {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--side-ink);
  margin-bottom: 2px;
}

.bubble time,
.msg-system time {
  display: block;
  text-align: right;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Mister Middle steht in der Mitte */
.msg-ai {
  align-self: center;
  width: min(660px, 100%);
  margin: 16px 0 12px;
  padding: 14px 18px 12px;
  background: var(--surface);
  border: 1px solid var(--mid-line);
  border-top: 3px solid var(--mid);
  border-radius: var(--radius-m);
}

.msg-ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--mid-ink);
  font-weight: 700;
}

.msg-ai-head time {
  margin-left: auto;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.72rem;
}

.msg-ai-body,
.serif {
  font-family: var(--font-voice);
  font-size: 1.03rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.msg-ai-body p:last-child,
.serif p:last-child {
  margin-bottom: 0;
}

.msg-ai-body ul,
.msg-ai-body ol,
.serif ul,
.serif ol {
  margin: 0 0 0.8em;
  padding-left: 1.3em;
}

.msg-typing {
  border-style: dashed;
  border-top-style: solid;
}

.msg-typing .msg-ai-head {
  margin: 0;
  font-weight: 400;
}

.msg-system {
  align-self: center;
  max-width: 560px;
  margin: 8px 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.msg-system time {
  text-align: center;
}

.msg-proposals {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--mid-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-proposals-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mid-ink);
}

.draft-card {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  background: var(--mid-soft);
}

.draft-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mid-ink);
}

.draft-card blockquote {
  margin: 0 0 10px;
  font-family: var(--font-ui);
}

.private-intro {
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* Eingabe */
.composer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 14px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--paper) 22px);
}

.composer {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 8px 10px 10px;
  box-shadow: 0 8px 28px -16px rgba(28, 38, 34, 0.45);
}

.composer:focus-within {
  border-color: var(--focus);
}

.composer textarea {
  border: 0;
  min-height: 44px;
  padding: 8px 6px;
  background: transparent;
  resize: none;
}

.composer textarea:focus {
  outline: none;
}

.composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.composer-hint {
  margin-right: auto;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .composer-hint {
    display: none;
  }
  .composer-bar .btn-primary {
    margin-left: auto;
  }
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background-color 0.15s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 0.15s ease;
}

.switch input:checked + .switch-track {
  background: var(--mid);
}

.switch input:checked + .switch-track::after {
  transform: translateX(16px);
}

.switch input:focus-visible + .switch-track {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Safe Mode (im Code „ninja“): Schild mit Haken in der Farbe der Mitte */
.ninja-shield {
  fill: var(--mid-soft);
  stroke: var(--mid-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.ninja-check {
  fill: none;
  stroke: var(--mid-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Safe Mode ist im gemeinsamen Gespräch immer an: nur ein Hinweis, kein Schalter */
.ninja-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mid-ink);
  cursor: help;
}

.ninja-panel {
  margin-bottom: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--mid-line);
  border-left: 4px solid var(--mid);
  border-radius: var(--radius-m);
}

/* Gesperrt: Warnfarbe statt Ocker (Ocker gehört der zweiten Partei) */
.ninja-panel.ninja-blocked {
  border-color: var(--danger-soft);
  border-left-color: var(--danger);
}

.ninja-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ninja-reason {
  color: var(--muted);
}

.ninja-suggestion {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: var(--mid-soft);
}

.ninja-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Entwurf: Prüfung war nicht möglich, Nachricht liegt lokal bereit (neutral, keine Parteifarbe) */
.draft-note {
  margin-bottom: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-m);
}

.draft-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 4px;
}

.draft-time {
  font-size: 0.85rem;
  color: var(--muted);
}

.draft-info {
  color: var(--muted);
}

.draft-actions {
  margin-top: 8px;
}

/* ---------- Gedächtnis ---------- */

.side-memory {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.side-memory h2 {
  font-size: 1.1rem;
}

.side-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--b-ink);
  margin-bottom: 6px;
}

.side-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.side-agreements {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-family: var(--font-voice);
  font-size: 0.95rem;
}

.side-agreements li {
  padding: 8px 0 8px 14px;
  border-left: 3px solid var(--mid);
  margin-bottom: 6px;
}

.side-more {
  font-size: 0.9rem;
  font-weight: 700;
}

.today-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: var(--side-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.memory-form textarea {
  margin: 12px 0;
}

.search {
  margin: 8px 0 18px;
}

.memory-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.memory-section > h2 {
  margin-bottom: 2px;
}

details.history > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 0;
}

.entry {
  position: relative;
  padding: 14px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-m);
}

.entry-agreement.entry-active {
  border-left-color: var(--mid);
}

.entry-fact.entry-active {
  border-left-color: var(--a);
}

.entry-proposed {
  border-left-style: dashed;
  border-left-color: var(--mid);
  background: color-mix(in srgb, var(--mid-soft) 45%, var(--surface));
}

.entry-rejected,
.entry-withdrawn,
.entry-superseded,
.entry-revoked {
  opacity: 0.72;
}

.entry-revoked .entry-text,
.entry-superseded .entry-text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.entry-compact {
  padding: 10px 12px;
}

.entry-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.entry-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.entry-kind {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mid-ink);
}

.entry-status {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--b-ink);
}

.entry-target {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.entry-text {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.entry-agreement .entry-text,
.entry-fact .entry-text {
  font-family: var(--font-voice);
  font-size: 1.03rem;
  line-height: 1.55;
}

.entry-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
  justify-content: space-between;
}

.entry-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.entry-votes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}

.vote-open .party-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--side);
}

.vote-reject {
  color: var(--danger);
}

.vote-partly {
  color: var(--b-ink);
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.entry-actions:empty {
  display: none;
}

/* ---------- KI-Kennzeichnung ---------- */

.ai-label {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--mid-line);
  background: var(--surface);
  color: var(--mid-ink);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-decoration: none;
  cursor: help;
}

/* ---------- Verständnisfrage („Stimmt so“ / „Nicht ganz“) ---------- */

.understood {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--mid-line);
}

.understood-states {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
}

.understood-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  font-size: 0.92rem;
  font-weight: 700;
}

.understood-actions {
  display: inline-flex;
  gap: 6px;
}

/* ---------- Themen ---------- */

.msg-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--mid-ink);
  font-weight: 700;
}

.chip-topic {
  background: var(--mid-soft);
  color: var(--mid-ink);
  text-decoration: none;
}

a.chip-topic:hover {
  text-decoration: underline;
}

.topics-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.topics-strip-now {
  color: var(--mid-ink);
}

@media (min-width: 1100px) {
  .topics-strip {
    display: none;
  }
}

.topic-progress p {
  margin: 0 0 6px;
  font-weight: 700;
}

.side-topics {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.side-topic-list {
  list-style: none;
  margin: 12px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
}

.side-topic-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-topic-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.side-topic-status {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.topic-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: transparent;
}

.topic-active .topic-dot {
  border-color: var(--mid);
  box-shadow: 0 0 0 3px var(--mid-soft);
}

.topic-agreed .topic-dot {
  border-color: var(--mid);
  background: var(--mid);
}

.topic-parked .topic-dot {
  border-style: dashed;
}

.topic-agreed .side-topic-title {
  color: var(--muted);
}

.topic-waiting .side-topic-status {
  color: var(--b-ink);
  font-weight: 700;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
}

.inline-form input {
  flex: 1 1 220px;
  width: auto;
}

.topic-form label {
  font-weight: 700;
}

.topic-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topic {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-m);
}

.topic.topic-active {
  border-left-color: var(--mid);
}

.topic.topic-agreed {
  border-left-color: var(--mid);
  background: color-mix(in srgb, var(--mid-soft) 45%, var(--surface));
}

.topic.topic-parked {
  border-left-style: dashed;
}

.topic.topic-waiting {
  border-color: var(--b-line);
  border-left-color: var(--b);
}

.topic-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topic-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-voice);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.topic-active .topic-chip,
.topic-agreed .topic-chip {
  background: var(--mid-soft);
  color: var(--mid-ink);
}

.topic-meta {
  margin: 4px 0 0 20px;
  font-size: 0.8rem;
  color: var(--muted);
}

.topic-ask {
  margin: 8px 0 0 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--b-ink);
}

.topic-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0 20px;
}

.topic-pending {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Verdeckte Ideenrunde ---------- */

.idea-round {
  margin: 8px 0 4px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--mid-line);
  border-left: 4px solid var(--mid);
}

.topics .idea-round {
  margin-top: 0;
}

.idea-round-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--mid-ink);
}

.idea-round-question {
  margin: 0 0 8px;
  font-family: var(--font-voice);
  font-size: 1.05rem;
}

.idea-states {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
}

.idea-form label {
  font-weight: 700;
}

.idea-form textarea {
  margin: 8px 0;
}

.idea-waiting p {
  margin: 0 0 8px;
  color: var(--muted);
}

.round-start h2 {
  margin-bottom: 6px;
}

.round-start .field {
  margin-top: 14px;
}

.msg-ideas {
  align-self: center;
  width: min(660px, 100%);
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px dashed var(--mid-line);
}

.msg-ideas-head {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mid-ink);
}

.msg-ideas-head time {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
}

.msg-ideas-question {
  margin: 4px 0 10px;
  font-family: var(--font-voice);
}

.ideas-grid {
  display: grid;
  gap: 10px;
}

@media (min-width: 640px) {
  .ideas-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ideas-col {
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--side-soft);
  border: 1px solid var(--side-line);
}

.ideas-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--side-ink);
}

.ideas-col ul {
  margin: 0;
  padding-left: 1.2em;
}

.ideas-col li {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

/* ---------- Bilanztermine ---------- */

.entry-review {
  margin: -2px 0 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.entry-review.due {
  color: var(--b-ink);
  font-weight: 700;
}

.entry-review-due {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--b-soft);
  border: 1px solid var(--b-line);
  color: var(--b-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.review-field {
  margin: 0 0 12px;
}

.review-field input {
  max-width: 14em;
}

.badge-review {
  background: var(--mid-soft);
  color: var(--mid-ink);
  border: 1px solid var(--mid-line);
}

.pre-line {
  white-space: pre-line;
}

/* ---------- Pläne ---------- */

.plan-rhythm {
  color: var(--muted);
}

.plan-exceptions {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.92rem;
}

.plan-exceptions li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.plan-notes {
  font-size: 0.92rem;
}

.plan-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.segment-row,
.exception-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.segment-row select {
  width: auto;
  min-width: 10em;
}

.exception-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
}

.exception-row label.grow {
  flex: 1 1 160px;
}

.exception-row input[type="date"] {
  width: auto;
}

.exceptions .field-hint {
  margin-bottom: 10px;
}

.preview-title {
  margin: 0;
}

.calendar {
  margin: 8px 0 12px;
  max-width: 520px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cal-month {
  font-family: var(--font-voice);
  font-weight: 600;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.cal-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 2px;
}

.cal-cell {
  position: relative;
  min-height: 42px;
  padding: 4px 6px;
  border-radius: 8px;
  background: var(--side-soft);
  border: 1px solid var(--side-line);
  font-size: 0.85rem;
}

.cal-cell.blank {
  background: none;
  border: 0;
}

.cal-cell.before-start {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
}

.cal-day {
  font-weight: 700;
  color: var(--side-ink);
}

.cal-cell.today {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.cal-cell.handover {
  border-left: 3px solid var(--side);
}

.cal-flag {
  position: absolute;
  right: 5px;
  bottom: 2px;
  font-size: 0.75rem;
  color: var(--side-ink);
}

.cal-dot {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.cal-dot.inline {
  position: static;
  display: inline-block;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--side-soft);
  border: 1px solid var(--side);
}

/* ---------- Dokumente ---------- */

.upload {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.file-pick {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.file-pick input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-pick:has(input:focus-visible) .btn {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.file-name {
  font-size: 0.9rem;
  color: var(--muted);
}

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.doc-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.doc-summary {
  margin-top: 10px;
}

.doc-summary-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mid-ink);
  margin-bottom: 4px;
}

/* ---------- Einstellungen & Konto ---------- */

.danger-zone {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}

.danger-zone h2 + p {
  color: var(--muted);
}

.danger-zone .btn + h2 {
  margin-top: 22px;
}

.meter {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  background: var(--mid);
  width: 0;
}

.w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; }
.w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; }
.w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; }
.w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; }
.w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }

/* ---------- Hinweise & Dialoge ---------- */

.toasts {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(480px, calc(100% - 32px));
  pointer-events: none;
}

.toast {
  padding: 12px 16px;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.2s ease-out both;
}

.toast-error {
  background: var(--danger);
  color: #fff;
}

.toast-success {
  background: var(--mid-ink);
  color: #fff;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.dialog {
  width: min(480px, calc(100% - 32px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--ink);
}

.dialog::backdrop {
  background: rgba(17, 23, 20, 0.5);
}

.dialog p {
  color: var(--muted);
}

.dialog .field {
  margin-bottom: 12px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* ---------- Protokoll ---------- */

.report {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  font-family: var(--font-voice);
}

.report-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
  font-family: var(--font-ui);
}

.report-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--mid);
  margin-bottom: 20px;
}

.report-kicker {
  margin: 0 0 4px;
  color: var(--mid-ink);
  font-family: var(--font-ui);
  font-weight: 700;
}

.report section {
  margin-bottom: 24px;
  break-inside: avoid-page;
}

.report h2 {
  font-size: 1.2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}

.report-meta {
  color: var(--muted);
  font-size: 0.85rem;
  font-family: var(--font-ui);
}

.report-msg {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.report-ai {
  margin: 10px 0;
  padding-left: 12px;
  border-left: 3px solid var(--mid);
}

.report-ai p,
.report-ai ul,
.report-ai ol {
  margin: 0 0 6px;
}

.report-who {
  margin-bottom: 2px;
}

.report-system {
  color: var(--muted);
  font-style: italic;
}

.report-foot {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.shell-report .footer {
  display: none;
}

/* ---------- Anmeldung per Code ---------- */

.auth-mode {
  margin-bottom: 16px;
}

.code-input {
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
  max-width: 12ch;
}

.dev-code {
  padding: 8px 12px;
  border: 1px dashed var(--b-line);
  border-radius: var(--radius-s);
  background: var(--b-soft);
  color: var(--b-ink);
  font-weight: 700;
}

/* ---------- Stand der Einladung ---------- */

.invite-progress {
  margin: 4px 0 12px;
}

.invite-progress-title {
  font-weight: 700;
  font-size: var(--step--1);
  margin-bottom: 4px;
}

.invite-progress ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.invite-progress li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: var(--step--1);
  color: var(--muted);
}

.invite-progress li.done {
  color: var(--ink);
}

.invite-step-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.invite-progress li.done .invite-step-mark {
  border-color: var(--mid);
  background: var(--mid);
  color: var(--on-mid);
}

.invite-step-at {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Änderung am Fall (Zustimmung aller) ---------- */

.case-change {
  margin-top: 12px;
}

.case-change-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 6px 0 8px;
}

.case-change-list dt {
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--muted);
}

.case-change-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.case-change-text {
  white-space: pre-wrap;
}

@media (max-width: 480px) {
  .case-change-list {
    grid-template-columns: 1fr;
  }
  .case-change-list dd {
    margin-bottom: 4px;
  }
}

/* ---------- Prüfung von Titel und Beschreibung ---------- */

.case-check {
  padding: 14px 16px;
  border: 1px solid var(--b-line);
  border-radius: var(--radius-s);
  background: var(--b-soft);
  color: var(--ink);
}

.case-check p {
  margin: 0 0 8px;
}

.case-check-title {
  font-weight: 700;
  color: var(--b-ink);
}

.case-check-label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--muted);
}

.case-check-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 8px 12px;
  border-left: 3px solid var(--mid);
  background: var(--surface);
  border-radius: var(--radius-s);
}

.case-check .row-actions {
  margin: 4px 0 8px;
}

/* ---------- Admin-Bereich ---------- */

.admin-grid {
  display: grid;
  gap: 0 18px;
}

@media (min-width: 760px) {
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-wide {
    grid-column: 1 / -1;
  }
}

.admin-grid .panel p {
  margin-bottom: 6px;
}

.admin-counts,
.admin-list,
.admin-log,
.admin-parties,
.admin-messages,
.admin-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-counts {
  display: grid;
  gap: 4px 18px;
}

@media (min-width: 640px) {
  .admin-counts {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-counts li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

.admin-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-search,
.admin-filters {
  margin-bottom: 16px;
}

.admin-filters {
  display: grid;
  gap: 0 14px;
}

@media (min-width: 640px) {
  .admin-filters {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-row p {
  margin-bottom: 4px;
  font-size: var(--step--1);
}

.admin-row .row-actions {
  margin-top: 10px;
}

.admin-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 6px;
}

.admin-email {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip-admin {
  background: var(--mid-soft);
  color: var(--mid-ink);
}

.chip-warn {
  background: var(--b-soft);
  color: var(--b-ink);
}

.chip-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.admin-log li {
  display: grid;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}

@media (min-width: 760px) {
  .admin-log li {
    grid-template-columns: 11rem 14rem 1fr;
  }
  .admin-log-detail {
    grid-column: 2 / -1;
  }
}

.admin-log-at {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-log-kind {
  font-weight: 700;
}

.admin-log-kind.kind-login_failed,
.admin-log-kind.kind-code_failed,
.admin-log-kind.kind-account_locked,
.admin-log-kind.kind-rate_limited,
.admin-log-kind.level-error {
  color: var(--danger);
}

.admin-log-kind.kind-admin_view_case,
.admin-log-kind.kind-admin_block,
.admin-log-kind.kind-admin_delete_user,
.admin-log-kind.level-warn {
  color: var(--b-ink);
}

.admin-log-who {
  overflow-wrap: anywhere;
}

.admin-log-detail {
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.admin-parties {
  margin-bottom: 4px;
  font-size: var(--step--1);
}

.admin-messages {
  display: grid;
  gap: 10px;
}

.admin-msg {
  padding: 8px 12px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: var(--radius-s);
}

.admin-msg-ai {
  border-left-color: var(--mid);
}

.admin-msg-system {
  opacity: 0.8;
}

.admin-msg-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.admin-msg-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.admin-entries li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.admin-entries .admin-msg-text {
  margin-top: 4px;
}

@media print {
  :root {
    --paper: #fff;
    --surface: #fff;
  }
  body {
    font-size: 11pt;
  }
  .topbar,
  .footer,
  .toasts,
  .no-print,
  .skip {
    display: none !important;
  }
  .report {
    padding: 0;
    max-width: none;
  }
  .report-plan {
    break-inside: avoid;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.plan.entry-active {
  border-left-color: var(--mid);
}

/* ---------- Geld ---------- */

.money-balance .money-total,
.calc-result .money-total {
  font-family: var(--font-voice);
  font-size: 1.25rem;
  margin: 4px 0 8px;
}

.money-total.side-a {
  color: var(--a-ink);
}

.money-total.side-b {
  color: var(--b-ink);
}

.money-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px 0;
}

.money-form h3,
.calc-round h3 {
  margin: 0;
  font-size: 1.05rem;
}

.money-form.segment-row {
  flex-direction: row;
  align-items: flex-end;
}

.money-form.segment-row select {
  width: auto;
}

.money-months {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: var(--step--1);
}

.money-months th,
.money-months td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.money-months tr.paid td:nth-child(3) {
  color: var(--mid-ink);
  font-weight: 700;
}

.money-rules {
  margin: 8px 0;
  padding-left: 1.2em;
}

.girocode {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
}

.girocode svg {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  flex: none;
}

.girocode figcaption {
  font-size: var(--step--1);
  color: var(--muted);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}

.entry-sign-hint {
  flex-basis: 100%;
}

/* ---------- Unterhaltsrechner ---------- */

.calc-income {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calc-status {
  margin: 6px 0 12px;
  padding-left: 1.2em;
}

.calc-result {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--mid-line);
  border-radius: var(--radius-m);
  background: var(--mid-soft);
}

.calc-steps {
  margin: 8px 0;
  padding-left: 1.4em;
  font-size: var(--step--1);
}

.calc-revealed > summary {
  cursor: pointer;
  font-weight: 700;
}

.calc-source {
  margin-top: 8px;
}

/* ---------- Prüfseite ---------- */

.verify-file {
  display: inline-flex;
  cursor: pointer;
  margin: 8px 0;
}

.verify-result {
  margin: 16px 0;
}

.verify-result.ok {
  border-color: var(--mid-line);
  background: var(--mid-soft);
}

.verify-result.bad {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.verify-result ul {
  padding-left: 1.2em;
}

/* Arbeitsweise: Schlichtung im Kopf des Falls, nicht wählbare Option */
.chip-method {
  background: var(--mid-soft);
  color: var(--mid-ink);
}

.segmented label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.segmented .field-hint {
  width: 100%;
  margin-top: 2px;
}