/* =============================================================================
   Kinderabenteuerhof — Components
   -----------------------------------------------------------------------------
   Built strictly on tokens.css (loaded first in base.html). Every value here is a
   var(--…); if you reach for a raw hex or magic px, add a token instead. CSP-safe:
   no inline styles/scripts anywhere — these classes carry all presentation.
   See DESIGN.md for the component contract and /static/styleguide.html to browse.
   ============================================================================= */

/* ── Base / reset ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
}
/* Kinderabenteuerhof aerial photo as a whisper-faint page texture only. The clean
   design wants flat light surfaces, so the overlay is near-opaque (95–99%): the photo
   reads as the faintest wash, never as competing detail behind forms/cards. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(247, 249, 245, 0.955), rgba(247, 249, 245, 0.992)),
    url("/static/img/hof-luftbild.jpg") center center / cover no-repeat;
}
/* Landing page keeps the aerial photo clearly visible (lighter overlay); the opaque nav
   cards and the white chart-island panel sit cleanly on top. Other pages stay near-flat. */
body.landing::before {
  background:
    linear-gradient(rgba(247, 249, 245, 0.60), rgba(247, 249, 245, 0.82)),
    url("/static/img/hof-luftbild.jpg") center center / cover no-repeat fixed;
}

h1 { color: var(--green-dark); font-size: var(--text-2xl); line-height: var(--lh-tight); margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-lg); line-height: var(--lh-tight); }
a { color: var(--green-ink); }
.muted { color: var(--text-muted); }

/* Accessibility: one visible keyboard-focus treatment for EVERY interactive
   element (B-a11y). Inputs additionally get the soft glow below. */
:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
:focus:not(:focus-visible) { outline: none; }

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

/* htmx request indicator (B29): external replacement for htmx's default injected
   inline <style>, which is disabled via the htmx-config meta so style-src stays 'self'. */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* ── Inline SVG icons (currentColor, sized to the font) ─────────────────── */
.icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.25em; height: 1.25em; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.shell { max-width: var(--shell-max); margin: 0 auto; padding: var(--space-10) var(--space-6); }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--space-4) var(--space-6); }
.brand { color: var(--green-dark); font-weight: var(--fw-bold); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-3); }
.brand-logo { height: 38px; width: auto; display: block; }
.brand-text { line-height: 1.15; }
@media (max-width: 560px) { .brand-text { display: none; } }  /* logo-only on small screens */
.userbox { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
/* Mein Profil — classic top-bar avatar pill (photo or initials) */
.profile-pill { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; overflow: hidden; flex: none; text-decoration: none; background: var(--green-tint);
  border: 2px solid var(--line); transition: border-color .15s, transform .12s; }
.profile-pill:hover { border-color: var(--green); transform: translateY(-1px); }
.profile-pill-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-pill-ini { font-size: 14px; font-weight: var(--fw-bold); color: var(--green-dark); }
.profile-pill-ini[data-tone="1"] { color: #3f72a8; } .profile-pill-ini[data-tone="2"] { color: #9a6512; }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs { font-size: var(--text-xs); color: var(--text-faint); margin-bottom: var(--space-2); }
.crumbs a { color: var(--text-faint); }
.crumbs .sep { color: var(--line-strong); }

/* ── Buttons & links ────────────────────────────────────────────────────── */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border: none; border-radius: var(--radius);
  background: var(--green); color: #fff; font-size: var(--text-md); font-weight: var(--fw-bold);
  font-family: inherit; cursor: pointer; text-decoration: none; line-height: 1.1; }
button:hover, .btn:hover { background: var(--green-dark); }

.linkbtn { display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--line); color: var(--text-muted);
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.linkbtn:hover { background: var(--green-tint); color: var(--green-dark); }
.inline { margin: 0; }

.danger { color: var(--danger); border-color: #e7c6bf; background: var(--surface); }
.danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-subtle); }

/* one shared treatment for every text control — radius/border/focus from tokens */
input[type="email"], input[type="text"], input[type="search"], input[type="date"],
input[type="number"], input[type="password"], select, textarea,
.inp, .ta, .sel, .seg-ta, .seg-sel {
  font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus,
.inp:focus, .ta:focus, .sel:focus, .seg-ta:focus, .seg-sel:focus {
  outline: none; border-color: var(--ring-color); box-shadow: var(--ring);
}
textarea { resize: vertical; line-height: var(--lh); }

.stack { display: flex; flex-direction: column; gap: var(--space-3); max-width: 380px; margin: var(--space-4) 0; }
.stack input { padding: var(--space-3); font-size: var(--text-md); }
.hint { font-size: var(--text-xs); color: var(--text-faint); max-width: 380px; }
.error { color: var(--danger); font-weight: var(--fw-semibold); }

/* ── Cards (module / team grid) ─────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }   /* 4 nav cards stretch to fill the row */
.card { display: block; background: var(--surface); border: 1px solid #d7e3b8; border-radius: var(--radius-lg);
  padding: var(--space-5); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-card); }
.card:hover { border-color: var(--green); }
.card-title { font-size: var(--text-lg); font-weight: var(--fw-black); }
.card-desc { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.card-cta { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--green-ink); margin-top: var(--space-4); }
.card-soon { background: var(--surface-sunken); border-style: dashed; border-color: var(--line); }
.card-soon .card-title { color: var(--text-faint); }

/* ── Badges / status pills ──────────────────────────────────────────────── */
.badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  padding: 2px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap;
  color: var(--text-faint); background: var(--surface-sunken); }
.badge.offen   { background: var(--warn-bg); color: var(--warn-ink); }
.badge.erledigt{ background: var(--ok-bg);   color: var(--ok-ink); }
.badge.pill    { border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }

/* ── Data table (protocol "design B"; also verwaltung + audit) ──────────── */
.table-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.head-actions { display: flex; gap: var(--space-2); align-items: center; }
.searchbar { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.searchbar input { flex: 1; max-width: 360px; padding: var(--space-2) var(--space-3); }

.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow-x: auto; box-shadow: var(--shadow-sm); }
.proto { width: 100%; border-collapse: collapse; min-width: 920px; table-layout: fixed; }
/* content-sized variant for non-grid tables (admin matrix, audit log) */
.proto.proto-auto { min-width: 0; table-layout: auto; }
.proto.proto-auto tbody td { font-size: var(--text-sm); }
.proto thead th { background: var(--surface-sunken); text-align: left; font-weight: var(--fw-semibold);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.proto tbody td { padding: 7px var(--space-3); border-top: 1px solid #eef1e8; vertical-align: top;
  font-size: var(--text-sm); word-wrap: break-word; }
.proto tbody tr:hover { background: #f8faf4; }
/* Sortable headers + drag-to-resize columns (progressive enhancement — proto_table.js adds the
   .th-sortable class + .col-resize grips only when JS runs, so no-JS shows neither). */
.proto thead th { position: relative; }                 /* anchor the resize grip */
.proto th.th-sortable { cursor: pointer; user-select: none; }
.proto th.th-sortable::after { content: "⇅"; margin-left: 4px; opacity: .35; font-size: .9em; }
.proto th.th-sortable[aria-sort="ascending"]::after  { content: "▲"; opacity: .85; }
.proto th.th-sortable[aria-sort="descending"]::after { content: "▼"; opacity: .85; }
.proto th.th-sortable:hover { color: var(--ink); }
.proto th.th-sortable:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.col-resize { position: absolute; top: 0; right: -1px; width: 9px; height: 100%; cursor: col-resize;
  touch-action: none; z-index: 1; }
.col-resize:hover { background: var(--green); opacity: .35; }
.proto.is-col-resizing { cursor: col-resize; user-select: none; }
.proto.is-col-resizing tbody tr:hover { background: transparent; }
/* Benutzerverwaltung: keep the column headers (Struktur/Protokolle/Module + team names) in
   sight while scrolling the matrix. The wrap becomes the scroll box; both header rows stick. */
.matrix-wrap { max-height: 78vh; overflow: auto; }
.matrix-wrap .proto thead th { position: sticky; background: var(--surface-sunken); }
.matrix-wrap .proto thead tr:first-child th { top: 0; z-index: 3; }
.matrix-wrap .proto thead tr:last-child th  { top: 30px; z-index: 2; }
.matrix-wrap .proto thead th.group { z-index: 4; }
/* Person column frozen on the left, so horizontal scrolling never loses the row's owner.
   Cells need an opaque background (they slide OVER the value cells); the header corner
   cell sticks on both axes and must beat the group headers (z-index 4). */
.matrix-wrap .proto tbody td.person { position: sticky; left: 0; z-index: 1;
  background: var(--surface); border-right: 1px solid var(--line);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-wrap .proto tbody tr:hover td.person { background: #f8faf4; }
.matrix-wrap .proto thead tr:first-child th:first-child { left: 0; z-index: 5;
  border-right: 1px solid var(--line); }
/* CSS-only row filter (CSP forbids inline scripts): the checkbox lives right before the
   filterbar + table wrap; checked ⇒ rows not on the Personalliste are hidden. */
.flt-input { position: absolute; opacity: 0; pointer-events: none; }
.flt-input:checked ~ .table-wrap .proto tbody tr[data-personal="0"] { display: none; }
.flt-chip { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
  font-size: var(--text-sm); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text-muted); user-select: none; }
.flt-chip svg { opacity: 0; }
.flt-input:checked ~ .filterbar .flt-chip { background: var(--ok-bg); color: var(--ok-ink);
  border-color: transparent; font-weight: var(--fw-semibold); }
.flt-input:checked ~ .filterbar .flt-chip svg { opacity: 1; }
.flt-input:focus-visible ~ .filterbar .flt-chip { outline: 2px solid var(--green); outline-offset: 1px; }
.flt-input:disabled ~ .filterbar .flt-chip { opacity: .5; cursor: not-allowed; }
/* Section divider rows between Bereich groups. The label sticks left so it stays
   readable while the matrix is scrolled horizontally. */
.matrix tr.grp td { background: var(--surface-sunken); border-top: 1px solid var(--line);
  padding: 3px var(--space-2) 2px; font-size: var(--text-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.matrix tr.grp td > span { position: sticky; left: var(--space-2); display: inline-block; }
.matrix-wrap .proto tbody tr.grp:hover td { background: var(--surface-sunken); }
.cell-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-zeit { font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: center; }
.cell-thema { font-weight: var(--fw-semibold); }
.cell-termin { font-variant-numeric: tabular-nums; }
.proto .nw { white-space: nowrap; }
.proto td.c, .proto th.c { text-align: center; }
/* Protocol table: Inhalt/Protokoll (auto) is the reading column and must dominate — every other
   column is squeezed to what its content needs, so Inhalt absorbs the rest. */
.c-datum { width: 76px; } .c-zeit { width: 40px; } .c-thema { width: 100px; }
.c-inhalt { width: auto; } .c-wer { width: 76px; } .c-next { width: 116px; }
.c-termin { width: 58px; } .c-status { width: 72px; } .c-vertr { width: 56px; } .c-act { width: 30px; }
/* narrow columns: let their headers wrap (they're nowrap by default) + tighter side padding so
   the squeezed cells stay legible. Scoped to the protocol table (the only .proto sans .proto-auto). */
.proto:not(.proto-auto) thead th { white-space: normal; }
.proto:not(.proto-auto) thead th, .proto:not(.proto-auto) tbody td {
  padding-left: var(--space-2); padding-right: var(--space-2); }
/* read-only "Vertraulich" indicator in the table; the flag is set in the editor (drawer/form) */
.cell-vertr .vertr-box { width: 16px; height: 16px; accent-color: var(--danger); }
.cell-vertr .vertr-box:disabled { opacity: 1; cursor: not-allowed; }
/* editable confidential checkbox in the entry editor + the "öffentliches Protokoll" export toggle.
   Two classes so it beats the .entryform/.drawer-form `label { flex-direction:column }` field rule. */
.checkrow.vertr-field { flex-direction: row; align-items: flex-start; justify-content: flex-start;
  gap: var(--space-2); margin: var(--space-3) 0; font-weight: var(--fw-normal); }
.checkrow.vertr-field input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px;
  accent-color: var(--danger); flex: none; }

/* segments inside the read cell — colored pill tag + text */
.segs { display: flex; flex-direction: column; gap: 3px; }
.segs .seg { display: flex; gap: 7px; align-items: baseline; line-height: 1.4; }
.segs .tag { flex: none; font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); padding: 1px 5px; border-radius: 3px; color: #fff; margin-top: 1px; }
.tag.seg-ein { background: var(--kah-seg-ein); }   .tag.seg-prot { background: var(--kah-seg-prot); }
.tag.seg-besch { background: var(--kah-seg-besch); } .tag.seg-versch { background: var(--kah-seg-versch); }
.tag.seg-erg { background: var(--kah-seg-erg); }
.segs .txt { color: var(--ink); }
.seg.seg-besch .txt { color: var(--kah-seg-besch); font-weight: var(--fw-semibold); }
.seg.seg-erg .txt { color: #6b6b6b; font-style: italic; }

.row-edit-link { text-align: center; }
.row-edit-link a { color: #b6bda9; font-size: var(--text-md); text-decoration: none; display: inline-flex; }
.proto tbody tr:hover .row-edit-link a { color: var(--green-dark); }

/* ── SEPA-Mandat Status-Log (submissions_list) ──────────────────────────────
   Deliberately styled as an append-only LOG, not as table data: monospace lines,
   terminal-like block, no cell grid — signals "Beweissicherung, kein Exportfeld". */
.statuslog-row td { padding: 0 var(--space-3) 6px; border-top: none; background: transparent; }
.proto tbody tr.statuslog-row:hover { background: transparent; }
.statuslog summary { cursor: pointer; font-size: var(--text-2xs); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 5px; user-select: none;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--fw-semibold); }
.statuslog summary:hover { color: var(--ink); }
.statuslog summary svg { width: 11px; height: 11px; }
.statuslog-lines { margin-top: 5px; padding: var(--space-2) var(--space-3);
  background: #2e332a; color: #cdd6c2; border-radius: var(--radius-sm);
  border-left: 3px solid var(--green); font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-2xs); line-height: 1.7; overflow-x: auto; }
.statuslog-lines span { display: block; white-space: pre; }

/* ── Filter bar + search highlight ──────────────────────────────────────── */
.filterbar { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; flex-wrap: wrap; }
.filterbar input[type="search"] { flex: 1; min-width: 200px; max-width: 340px; padding: var(--space-2) var(--space-3); }
.filterbar input[type="text"], .filterbar input[type="date"], .filterbar select { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.filterbar .bis { color: var(--text-muted); }
mark { background: #fcef9c; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ── Edit drawer (design B) — CSP-safe @keyframes slide-in, no inline JS ──── */
.scrim { position: fixed; inset: 0; background: rgba(38, 42, 33, .34); z-index: var(--z-scrim); animation: scrimIn var(--dur) ease; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 492px; min-width: min(380px, 92vw); max-width: 96vw;
  background: var(--surface-raised); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop);
  z-index: var(--z-drawer); display: flex; flex-direction: column; animation: drawerIn var(--dur-slow) var(--ease); }
/* drag the left edge to widen (stays pinned right); double-click resets — see app.js */
.drawer-resize { position: absolute; top: 0; left: -3px; width: 10px; height: 100%; z-index: 3;
  cursor: ew-resize; touch-action: none; }
.drawer-resize::after { content: ""; position: absolute; left: 3px; top: 0; width: 2px; height: 100%;
  background: transparent; transition: background var(--dur-fast) ease; }
.drawer-resize:hover::after, .drawer.is-resizing .drawer-resize::after { background: var(--green); }
.drawer.is-resizing { user-select: none; animation: none; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.drawer-head { flex: none; padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--line);
  background: var(--surface); display: flex; align-items: flex-start; gap: var(--space-3); }
.drawer-head .eyebrow { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: var(--fw-semibold); }
.drawer-head h2 { font-size: var(--text-md); margin: 3px 0 0; color: var(--green-dark); font-weight: var(--fw-bold); }
.drawer-head .sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.x-btn { flex: none; margin-left: auto; width: 28px; height: 28px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--text-muted); font-size: var(--text-md); line-height: 1; padding: 0; cursor: pointer; }
.x-btn:hover { background: var(--green-tint); color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
/* Autosave: "unsaved draft found" restore bar at the top of the drawer body (app.js). */
.draft-restore { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--green-tint); border: 1px solid var(--green); border-radius: var(--radius-sm); }
.draft-restore-msg { flex: 1; min-width: 60%; font-size: var(--text-sm); color: var(--green-dark); }
.draft-restore .btn-mini { font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  cursor: pointer; border: 1px solid var(--green); background: var(--green); color: #fff;
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); }
.draft-restore .btn-mini:hover { background: var(--green-dark); border-color: var(--green-dark); }
.drawer-foot { flex: none; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line);
  background: var(--surface); display: flex; align-items: center; gap: var(--space-3); }
.drawer-foot .spacer { flex: 1; }
.drawer-err { margin: 0 0 var(--space-3); }

.drawer .field { margin-bottom: var(--space-3); }
.drawer .field > label { display: block; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-bottom: var(--space-1); }
.drawer .grid-3 { display: grid; grid-template-columns: 1fr 86px 1.2fr; gap: 11px; }
.drawer .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.drawer .grid-3 .field, .drawer .grid-2 .field { margin-bottom: 0; }
.inp, .ta, .sel { width: 100%; padding: 7px var(--space-2); }
.ta { min-height: 60px; }
.ta-center { text-align: center; }
.divider { height: 1px; background: var(--line); margin: var(--space-1) 0 var(--space-4); }

.rich-head { display: flex; align-items: baseline; margin-bottom: var(--space-2); }
.rich-head label { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.rich-head .count { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-faint); }
.seg-stack { display: flex; flex-direction: column; gap: 9px; }
.seg-card { border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--surface); padding: 9px; }
.seg-card.k-ein { border-left-color: var(--kah-seg-ein); }   .seg-card.k-prot { border-left-color: var(--kah-seg-prot); }
.seg-card.k-besch { border-left-color: var(--kah-seg-besch); } .seg-card.k-versch { border-left-color: var(--kah-seg-versch); }
.seg-card.k-erg { border-left-color: var(--kah-seg-erg); }
.seg-card-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 7px; }
/* Export + E-Mail-PDF: quick-pick date pills (filled by app.js, progressive). These are the
   primary one-tap shortcut — large and prominent; the Von–Bis range below is the custom fallback. */
.date-pills { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4); }
.date-pills-label { width: 100%; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.date-pill { font: inherit; font-size: var(--text-lg); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; cursor: pointer; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5); line-height: 1.5; transition: all .12s ease; }
.date-pill:hover { border-color: var(--green); background: var(--green-tint); color: var(--green-dark); }
/* the most recent protocol — the likeliest export — reads as the primary CTA (filled) */
.date-pill.latest { border-color: var(--green); background: var(--green); color: #fff; }
.date-pill.latest:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.date-pill:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.seg-sel { width: auto; min-width: 130px; font-size: var(--text-sm); font-weight: var(--fw-semibold); padding: var(--space-1) var(--space-2); }
.seg-del { margin-left: auto; border: none; background: transparent; color: #b3baa6; font-size: var(--text-md);
  line-height: 1; padding: 2px var(--space-1); border-radius: var(--radius); cursor: pointer; }
.seg-del:hover { color: var(--danger); background: var(--danger-bg); }
.seg-ta { width: 100%; font-size: var(--text-sm); line-height: var(--lh); background: #fcfdfa;
  border: 1px solid #e1e6d6; border-radius: var(--radius-sm); padding: 7px var(--space-2); min-height: 52px; }
.add-seg { margin-top: 9px; width: 100%; text-align: center; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--green-dark); background: var(--green-tint); border: 1px dashed #bcd49a; border-radius: var(--radius-sm); padding: 7px; cursor: pointer; }
.add-seg:hover { background: var(--green-tint-2); }

/* ── First-time guidance: "how to write a protocol" help, empty state, drawer disclosure, toast ── */
/* one-line section-type legend in the editor + the help steps */
.seg-hint { max-width: none; margin: 0 0 var(--space-2); color: var(--text-muted); }
.seg-hint .tag, .hilfe-types .tag { vertical-align: middle; }
/* collapsible "So schreibst du ein Protokoll" on every protocol page */
.proto-help { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  margin: var(--space-3) 0; padding: 0 var(--space-3); }
.proto-help > summary { cursor: pointer; list-style: none; padding: var(--space-2) 0; font-weight: var(--fw-semibold);
  color: var(--green-dark); }
.proto-help > summary::before { content: "›"; display: inline-block; margin-right: var(--space-2);
  transition: transform .15s ease; }
.proto-help[open] > summary::before { transform: rotate(90deg); }
.proto-help > summary::-webkit-details-marker { display: none; }
.proto-help[open] { padding-bottom: var(--space-2); }
/* guided empty state (no entries yet) */
.proto-empty { max-width: 560px; margin: var(--space-6) auto; padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); text-align: left; }
.proto-empty h2 { color: var(--green-dark); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.proto-empty .btn { margin-top: var(--space-4); }
/* shared steps */
.hilfe-steps { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column;
  gap: var(--space-2); font-size: var(--text-sm); color: var(--ink); }
.hilfe-types { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: 4px;
  font-size: var(--text-xs); color: var(--text-muted); }
/* drawer "Weitere Angaben (optional)" disclosure */
.drawer-details > summary { cursor: pointer; list-style: none; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); padding: var(--space-1) 0; }
.drawer-details > summary::before { content: "›"; display: inline-block; margin-right: var(--space-2); transition: transform .15s ease; }
.drawer-details[open] > summary::before { transform: rotate(90deg); }
.drawer-details > summary::-webkit-details-marker { display: none; }
/* save confirmation toast */
.toast { position: fixed; left: 50%; bottom: var(--space-6); transform: translate(-50%, 12px);
  background: var(--green-dark); color: #fff; font-weight: var(--fw-semibold); font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 1000; pointer-events: none; }
.toast.toast-in { opacity: 1; transform: translate(-50%, 0); }
/* error variant — failed htmx write / lost connection (role="alert") */
.toast.toast-err { background: var(--danger, #a33); pointer-events: auto; }

.seg-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.seg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.seg-toggle label { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); cursor: pointer; color: var(--text-muted); background: var(--surface);
  user-select: none; margin: 0; border-left: 1px solid var(--line-strong); }
.seg-toggle label:first-of-type { border-left: none; }
.seg-toggle #st-offen:checked + label { background: var(--warn-bg); color: var(--warn-ink); font-weight: var(--fw-semibold); }
.seg-toggle #st-erledigt:checked + label { background: var(--ok-bg); color: var(--ok-ink); font-weight: var(--fw-semibold); }
/* keyboard focus for the visually-hidden radios lands on their label */
.seg-toggle input:focus-visible + label { outline: var(--ring-width) solid var(--ring-color); outline-offset: -2px; }

/* ── Full-page entry form ───────────────────────────────────────────────── */
.entryform .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.entryform label { display: flex; flex-direction: column; gap: var(--space-1); }
.entryform input, .entryform select, .entryform textarea { padding: var(--space-3); font-size: var(--text-base); }
.entryform .full { display: block; margin: var(--space-1) 0; }
.formh2 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-1); }
.segrow { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.formactions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.deleteform { margin-top: var(--space-4); }
.empty-note { margin-top: var(--space-3); }

/* ── Email-a-protocol (versenden) ───────────────────────────────────────── */
.sent-ok { color: var(--ok-ink); font-weight: var(--fw-semibold); background: var(--ok-bg); padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
.radio-cards { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-3); }
.radio-cards .radio-card { display: flex; flex-direction: row; align-items: flex-start; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); cursor: pointer; flex: 1;
  min-width: 220px; background: var(--surface); font-weight: var(--fw-normal); color: var(--ink); }
.radio-cards .radio-card input { margin-top: 2px; }
.radio-cards .radio-card:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.range-inputs { max-width: 420px; }
.recipient-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); }
.recipient-list .checkrow { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); font-weight: var(--fw-normal); }

/* ── Admin: allowlist + per-team matrix ─────────────────────────────────── */
.addform { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.addform input { padding: var(--space-3); font-size: var(--text-base); }
.matrix tbody td { vertical-align: middle; }
.matrix tbody td.c, .matrix thead th.c { text-align: center; }
.matrix thead th.group { border-left: 1px solid var(--line); font-weight: var(--fw-bold);
  color: var(--text-subtle); font-size: var(--text-2xs); }
/* Skip link — visible only on keyboard focus, jumps past the header to #main. */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 2000; background: var(--green-dark);
  color: #fff; padding: 8px 14px; border-radius: var(--radius); font-weight: var(--fw-semibold);
  text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 8px; }
main.shell:focus { outline: none; }

/* Compact permission matrix (Benutzerverwaltung): denser rows so more people fit without
   scrolling. The person cell is one line (name + small e-mail) instead of two. */
.matrix.proto tbody td { padding: 2px var(--space-1); vertical-align: middle; }
.matrix.proto tbody td.person { padding-left: var(--space-2); padding-right: var(--space-2); }
.matrix thead th { padding-top: 4px; padding-bottom: 4px; }
.matrix thead th.c:not(.group) { padding-left: var(--space-1); padding-right: var(--space-1); }
.matrix td.person { line-height: 1.15; }
.matrix td.person strong { font-weight: var(--fw-semibold); }
.matrix td.person .muted { font-size: var(--text-2xs); margin-left: .35em; }
.matrix .cellbtn { width: 22px; height: 22px; }

.cellbtn { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-faint); font-size: var(--text-base); font-weight: var(--fw-black); cursor: pointer; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.cellbtn:hover { border-color: var(--green); color: var(--green-dark); }
.cellbtn.on { background: var(--green); border-color: transparent; color: #fff; }
.cellbtn.on:hover { background: var(--green-dark); color: #fff; }
.cellbtn.remove { color: #b0867f; border-color: #e7d6d0; }
.cellbtn.remove:hover { background: var(--danger-bg); color: var(--danger); border-color: #e7c6bf; }
.basebox { font-size: var(--text-sm); color: var(--text-muted); }
.basebox code { background: var(--surface-sunken); padding: var(--space-2) var(--space-3); border-radius: var(--radius); }
.checkrow { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); }

/* ── Public schema-driven forms (Anmeldungen entry) ─────────────────────── */
.pubform { max-width: 560px; }
.pubform > label { margin-bottom: var(--space-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-err { display: block; color: var(--danger); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.pub-consent { align-items: flex-start; }
.pub-consent span { font-weight: var(--fw-normal); }
.pub-consent.err span { color: var(--danger); }
.pub-help { display: block; color: var(--text-faint); font-size: var(--text-xs); font-weight: var(--fw-normal); margin-top: 2px; }
.pubform .star { color: var(--danger); }
.cards-label { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-subtle); margin-bottom: var(--space-2); }
.pub-cards { flex-direction: column; margin: var(--space-1) 0 var(--space-3); }
.pub-cards .radio-card span b { display: block; }
.pub-note { font-size: var(--text-xs); background: #fff8e6; border: 1px solid #f0e2b8; color: #7a5b00;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); margin: var(--space-1) 0 var(--space-3); }
.mandate-box { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-subtle); }
.mandate-box ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.mandate-box li { margin: 3px 0; }
.pub-footer { text-align: center; }


/* --- People hub: avatars, chips, profiles (reusable; spec §4.5) --- */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  overflow:hidden;flex:none;font-weight:700;line-height:1;text-transform:uppercase}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-sm{width:30px;height:30px;font-size:12px}
.avatar-md{width:44px;height:44px;font-size:16px}
.avatar-lg{width:84px;height:84px;font-size:30px}
.avatar-initials[data-tone="0"]{background:var(--kah-green-100);color:var(--kah-green-700)}
.avatar-initials[data-tone="1"]{background:#eaf1f7;color:#3f72a8}
.avatar-initials[data-tone="2"]{background:#f6ecd9;color:#9a6512}
.avatar-initials[data-tone="3"]{background:var(--kah-green-050);color:var(--kah-green-600)}
.avatar-initials[data-tone="4"]{background:#eef1e6;color:#5b6052}
.avatar-initials[data-tone="5"]{background:#e9eef0;color:#3f6a6a}
.role-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;padding:1px 5px;
  border-radius:5px;vertical-align:middle;color:#fff}
.role-bl{background:#1f6db0}.role-gl{background:#2e7d32}.role-vs{background:#8a5a2b}

/* ── Impressive profile card: hero photo-bg + overlapping 96px avatar + inline pencil edit ── */
.profile-card{max-width:480px;margin:var(--space-4) auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.profile-hero{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(135deg,var(--kah-green-500),var(--kah-green-600))}
.profile-hero.has-bg{background:none}
.profile-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.profile-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(75,140,53,0) 40%,rgba(40,50,30,.42))}
.profile-hero-avatar{position:relative;z-index:2;width:96px;height:96px;margin-bottom:-40px;border-radius:50%;
  border:4px solid #fff;background:var(--green-tint);box-shadow:0 6px 16px rgba(40,50,30,.2);overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;font-size:30px;font-weight:var(--fw-bold);
  color:var(--green-dark);text-transform:uppercase}
.profile-hero-avatar img{width:100%;height:100%;object-fit:cover}
.profile-edit-btn,.profile-close-btn{position:absolute;top:12px;z-index:3;width:32px;height:32px;border-radius:50%;
  border:none;cursor:pointer;font-size:15px;line-height:1;background:rgba(255,255,255,.9);color:var(--ink)}
.profile-edit-btn{left:12px}.profile-close-btn{right:12px;font-size:18px}
.profile-edit-btn:hover,.profile-close-btn:hover{background:#fff;transform:scale(1.05)}
.profile-card-body{padding:50px 24px 24px;text-align:center}
.profile-card-body h2{margin:0 0 2px;font-size:var(--text-xl)}
.profile-card-body .profile-pronoun{font-size:var(--text-sm);color:var(--text-faint)}
.profile-card-body .profile-role{margin:8px 0 2px;font-weight:var(--fw-semibold);color:var(--green-dark)}
.profile-card-body .profile-qual{font-size:var(--text-sm)}
.profile-card-body .profile-bio{margin:14px 0;text-align:left;line-height:1.55}
.profile-card-badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.profile-contact{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.profile-mail{display:inline-flex;gap:6px;align-items:center;font-size:var(--text-sm);color:var(--green-ink);
  font-weight:var(--fw-semibold);text-decoration:none}
.profile-contact .profile-mail:hover{text-decoration:underline}
.profile-orgnodes{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.profile-edit-form{text-align:left;display:flex;flex-direction:column;gap:11px}
.profile-edit-form label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:var(--fw-bold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle)}
.profile-edit-form input,.profile-edit-form textarea{font:inherit;font-size:var(--text-sm);padding:8px 10px;
  border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);background:var(--surface)}
.profile-edit-form input:focus,.profile-edit-form textarea:focus{outline:none;border-color:var(--green);box-shadow:var(--ring)}
/* profile image upload + in-place drag/zoom cropper (avatar + hero banner) */
.profile-photo-tools{display:flex;flex-direction:column;gap:var(--space-4);font-size:var(--text-sm);
  padding:12px;background:var(--surface-sunken);border-radius:var(--radius)}
.pc{display:flex;flex-direction:column;gap:var(--space-2)}
/* [hidden] beats the .btn/.linkbtn display rules (same specificity, author wins over UA) */
.pc [hidden]{display:none}
.pc-label{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle)}
.pc-stage{position:relative;width:100%;overflow:hidden;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line-strong)}
.pc-stage--photo{aspect-ratio:1/1;width:160px;border-radius:50%}
.pc-stage--bg{aspect-ratio:3.2/1}
.pc-current{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);font-size:var(--text-sm)}
.pc-crop{position:absolute;top:0;left:0;max-width:none;-webkit-user-drag:none;user-select:none}
.pc-stage.pc-cropping{cursor:grab;touch-action:none}
.pc-stage.pc-cropping:active{cursor:grabbing}
.pc-bar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.pc-zoom{flex:1 1 110px;max-width:200px;accent-color:var(--green)}
.pc-form{display:flex;gap:var(--space-2);align-items:center}
.pc-removeform{margin-top:calc(-1*var(--space-1))}
.profile-edit-actions{display:flex;gap:10px;align-items:center;margin-top:4px}
.profile-modal-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 24px;overflow-y:auto;background:rgba(38,42,33,.4);animation:scrimIn .18s ease}
.profile-modal-scrim[hidden]{display:none}
.profile-modal-scrim .profile-card{margin:0;width:min(460px, 92vw);animation:popIn .2s ease}
.person-chip{display:inline-flex;align-items:center;gap:9px;padding:7px 10px;border-radius:12px;
  background:#fff;border:1px solid #e6e9dd;text-decoration:none;color:inherit;min-width:0}
a.person-chip:hover{border-color:#c9d3b6;box-shadow:0 2px 8px rgba(40,60,30,.08)}
.person-chip-text{display:flex;flex-direction:column;min-width:0}
.person-chip-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-chip-sub{font-size:11px;color:#8a917d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.leute-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 var(--space-4)}
.leute-toolbar .org-search{flex:0 1 360px;min-width:240px}
.leute-cell{display:contents}
.profile-head{display:flex;gap:18px;align-items:center;margin:8px 0 4px}
.profile-meta h1{margin:0 0 4px}
.profile-role{margin:0 0 4px;font-weight:600;color:#4b6b2f}
.profile-badges{margin:6px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.profile-nodes{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.profile-nodes li{display:flex;align-items:center;gap:8px}


/* --- Organigramm bubble chart --- */
/* ── Organigramm — interactive chart island ─────────────────────────────────── */
.org-app{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 4px 16px rgba(40,50,30,.07);margin:var(--space-6) 0;overflow:hidden}
.org-app-head{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line)}
.org-app-title{margin:0;font-size:var(--text-lg);color:var(--green-dark)}
.org-app-sub{margin:1px 0 0;font-size:var(--text-sm)}
.org-controls{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.org-search{padding:8px 14px;font:inherit;font-size:var(--text-sm);color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);min-width:210px}
.org-search:focus{outline:none;border-color:var(--green);box-shadow:var(--ring)}
.org-chips{display:inline-flex;gap:6px}
.org-chip{padding:7px 13px;font:inherit;font-size:12.5px;font-weight:var(--fw-bold);cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text-muted);border-radius:var(--radius-pill);transition:all .15s}
.org-chip:hover{border-color:var(--green)}
.org-chip.is-active{background:var(--green);border-color:transparent;color:#fff}
.org-seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-sunken);border-radius:8px}
.org-seg-btn{padding:6px 15px;font:inherit;font-size:12.5px;font-weight:var(--fw-bold);cursor:pointer;
  border:none;background:transparent;color:var(--text-muted);border-radius:5px;transition:all .15s}
.org-seg-btn.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(40,50,30,.14)}

.org-body{display:flex;align-items:stretch}
.org-stage{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;
  background:var(--kah-paper);background-image:radial-gradient(rgba(120,150,90,.14) 1px,transparent 1px);background-size:23px 23px}
.org-canvas{position:absolute;top:0;left:0;width:1240px;height:940px;transform-origin:top left;
  transition:transform .3s var(--ease),left .3s var(--ease)}
.org-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.org-link{stroke:#cdd6c0;stroke-width:1.6;transition:stroke .25s,opacity .25s,stroke-width .25s}
.org-link.is-strong{stroke:#5b8bb8;stroke-width:2.4;opacity:.9}
.org-link.is-faint{opacity:.12}
.org-node{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:2px;padding:10px;border:none;cursor:pointer;color:#fff;font:inherit;white-space:pre-line;
  box-shadow:0 8px 20px rgba(40,50,30,.11);
  transition:left .5s var(--ease),top .5s var(--ease),width .45s var(--ease),height .45s var(--ease),
    border-radius .45s var(--ease),opacity .3s,box-shadow .25s,transform .2s}
.org-node--core{background:var(--org-core)}
.org-node--bereich{background:var(--org-bereich);color:var(--org-ink)}
.org-node--gruppe{background:var(--org-gruppe);color:var(--org-ink)}
.org-node-label{font-weight:var(--fw-bold);line-height:1.12;font-size:14px}
.org-node--core .org-node-label{font-size:22px;font-weight:var(--fw-black);color:#fff}
.org-node--gruppe .org-node-label{font-size:12px}
.org-node-lead{font-size:11px;font-weight:var(--fw-semibold);opacity:.86;line-height:1.1}
.org-node--core .org-node-lead{color:#eaf6dc;opacity:1}
.org-node:hover{filter:brightness(.96)}
.org-node.is-dim{opacity:.14}
.org-node.is-lit{box-shadow:0 0 0 3px #f7f9f5,0 0 0 5px rgba(51,53,47,.26),0 12px 24px rgba(40,50,30,.16);transform:scale(1.03);z-index:5}
.org-node.is-selected{box-shadow:0 0 0 3px #f7f9f5,0 0 0 6px rgba(51,53,47,.4),0 14px 28px rgba(40,50,30,.2);transform:scale(1.05);z-index:6}

.org-panel{flex:0 0 332px;max-width:332px;border-left:1px solid var(--line);background:var(--surface-raised);padding:var(--space-5);overflow-y:auto}
.org-panel-empty{padding:var(--space-8) var(--space-4);text-align:center;font-size:var(--text-sm);line-height:1.4}
@media(max-width:820px){.org-body{flex-direction:column}.org-panel{flex-basis:auto;max-width:none;border-left:none;border-top:1px solid var(--line)}}
.org-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.org-tag{display:inline-block;padding:4px 11px;border-radius:var(--radius-pill);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.org-tag--core{background:var(--org-core)}.org-tag--bereich{background:var(--org-bereich);color:var(--org-ink)}.org-tag--gruppe{background:var(--org-gruppe);color:var(--org-ink)}
.org-panel-close{border:none;background:none;color:var(--text-faint);cursor:pointer;font:inherit;font-size:var(--text-sm)}
.org-panel-close:hover{color:var(--ink)}
.org-panel-title{margin:0 0 var(--space-4);font-size:var(--text-xl)}
.org-lead{display:flex;gap:12px;align-items:center;justify-content:flex-start;width:100%;text-align:left;padding:12px;margin-bottom:var(--space-4);background:var(--green-tint);border:1px solid var(--green-tint-2);border-radius:var(--radius);font:inherit;color:inherit}
.org-lead.is-click{cursor:pointer}.org-lead.is-click:hover{background:var(--green-tint-2)}
.org-lead-role{font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
.org-lead-name{font-weight:var(--fw-bold);font-size:var(--text-md)}
.org-lead-sub{font-size:var(--text-sm)}
.org-panel-sub{display:flex;justify-content:space-between;align-items:baseline;font-weight:var(--fw-bold);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:var(--space-2)}
.org-panel-sub .muted{font-weight:var(--fw-normal);letter-spacing:0;text-transform:none;font-size:var(--text-sm)}
.org-member-list{display:flex;flex-direction:column;gap:6px}
.org-member{display:flex;gap:10px;align-items:center;justify-content:flex-start;width:100%;text-align:left;padding:7px 9px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);font:inherit;color:inherit}
.org-member-name{display:inline-flex;align-items:center;gap:6px}
.org-member.is-click{cursor:pointer}.org-member.is-click:hover{border-color:var(--green);background:var(--green-tint)}
.org-member-name{font-weight:var(--fw-semibold);font-size:var(--text-sm)}

.org-modal-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(38,42,33,.4);animation:scrimIn .18s ease}
.org-modal{position:relative;width:420px;max-width:100%;max-height:88vh;overflow-y:auto;padding:var(--space-6);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);animation:popIn .2s ease}
.org-modal-close{position:absolute;top:10px;right:14px;border:none;background:none;font-size:18px;cursor:pointer;color:var(--text-faint);line-height:1}
.org-modal-top{display:flex;gap:14px;align-items:center;margin-bottom:var(--space-3);padding-right:20px}
.org-modal-name{font-size:var(--text-xl);font-weight:var(--fw-bold)}
.org-modal-fn{font-size:var(--text-sm);margin-top:2px}
.org-modal-qual{margin:0 0 var(--space-4);color:var(--text-muted);font-size:var(--text-sm)}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

.org-footer{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-top:1px solid var(--line);background:var(--surface-raised)}
.org-legend{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;font-size:var(--text-sm)}
.org-legend-item{display:inline-flex;gap:6px;align-items:center;font-weight:var(--fw-semibold)}
.org-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.org-dot--core{background:var(--org-core)}.org-dot--bereich{background:var(--org-bereich)}.org-dot--gruppe{background:var(--org-gruppe)}
.org-legend-note{font-size:12px}
.org-principle{max-width:430px;font-size:var(--text-sm);line-height:1.4}
.org-principle strong{display:block;color:var(--green-dark);margin-bottom:2px}
.org-nojs{padding:var(--space-5) var(--space-6)}
.org-nojs-node{padding:10px 0;border-top:1px solid var(--line)}
.org-nojs-node:first-child{border-top:none}
.org-nojs-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.org-nojs-chip{font-size:12px;color:var(--text-muted);background:var(--surface-sunken);padding:2px 8px;border-radius:var(--radius-pill)}
.org-app[data-loading] .org-panel{display:none}
@media(prefers-reduced-motion:reduce){.org-node{transition:opacity .2s,box-shadow .2s!important}.org-canvas{transition:none}}
/* Clean opaque surface panel — content that should sit ON the light bg, not bleed
   through it (Mein Profil, people-hub forms). Matches the design's flat card look. */
.panel{background:var(--surface);border:1px solid #e0e5d6;border-radius:var(--radius-lg);
  padding:var(--space-6);margin:var(--space-4) 0;box-shadow:0 1px 3px rgba(40,50,30,.06)}
.panel > :first-child{margin-top:0}
.panel > :last-child{margin-bottom:0}

/* ── Personalverwaltung: Stellenumfang editor + Stellenbeschreibung document ── */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.subhead { display: block; margin: var(--space-3) 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.su { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-2) 0; }
.su-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface); }
.su-group-head { display: flex; justify-content: space-between; font-weight: var(--fw-semibold); color: var(--green-dark);
  margin-bottom: var(--space-2); }
.su-sum { font-variant-numeric: tabular-nums; }
.su-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.su-item { display: grid; grid-template-columns: 1fr 90px auto; gap: var(--space-2); align-items: center; }
.su-item .su-hours { width: 90px; }
.su-del { border: none; background: none; cursor: pointer; color: #b6bda9; font-size: var(--text-md); line-height: 1; padding: 4px; }
.su-del:hover { color: var(--danger); }
.su-add { margin-top: var(--space-2); }
.su-calc { margin: var(--space-3) 0; }
.su-total { width: 100%; border-collapse: collapse; margin: var(--space-2) 0; }
.su-total td { padding: 5px var(--space-2); border-top: 1px solid #eef1e8; }
.su-total td.num { text-align: right; font-variant-numeric: tabular-nums; width: 110px; }
.su-total .su-final td { border-top: 2px solid var(--green); font-size: var(--text-md); }
/* document / print view */
.stelle-doc { max-width: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-6); box-shadow: var(--shadow-sm); }
.sd-head h2 { color: var(--green-dark); margin: 0 0 2px; font-size: var(--text-lg); }
.sd-head p { color: var(--text-muted); margin: 0 0 var(--space-3); }
.sd-head-2 { margin-top: var(--space-5); border-top: 2px solid var(--green); padding-top: var(--space-3); }
.sd-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-3); padding: 5px 0; border-top: 1px solid #eef1e8; }
.sd-label { color: var(--text-muted); font-size: var(--text-sm); }
.sd-summary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-2) 0; }
.sd-summary b { color: var(--text-muted); font-weight: var(--fw-normal); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); margin-right: 6px; }
.sd-items .sd-grp td { font-weight: var(--fw-semibold); color: var(--green-dark); padding-top: var(--space-2); }
.sd-items .sd-sub td { border-top: 1px solid var(--line); font-weight: var(--fw-semibold); }
.sd-sign { margin-top: var(--space-5); }
.sd-signs { display: flex; justify-content: space-between; margin-top: var(--space-6); color: var(--text-muted); }
.sd-signs span { border-top: 1px solid var(--ink); padding-top: 4px; min-width: 200px; text-align: center; }