/* ==========================================================================
   Capstone Career · UX-Konzept (Heute, Stellen-Board, Detail, Dialoge).
   Lade-Reihenfolge: fonts.css -> tokens_v1.css -> app.css -> ux.css
   Nur var(--…) aus tokens_v1.css, keine Hex-Werte, kein Inline-CSS (CSP).
   Mobile zuerst; ab 64rem Sidebar-Layout.
   ========================================================================== */

/* ---------- Basis-Helfer ---------- */
.ico { inline-size: 20px; block-size: 20px; flex: none; }
.ico--sm { inline-size: 16px; block-size: 16px; }
.ico--xs { inline-size: 14px; block-size: 14px; }
.serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; }
.xs { font-size: var(--fs-xs); }
.spacer { flex: 1; }
.stack { display: grid; gap: var(--sp-3); }
.hstack { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hstack form { margin: 0; }
.sep::before { content: "·"; margin-inline-end: var(--sp-2); color: var(--text-muted); }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.keyline { inline-size: 40px; block-size: 3px; background: var(--accent); border: 0; margin: var(--sp-4) 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.visually-hidden-mobile { }

/* ---------- Shell ---------- */
.app { min-block-size: 100dvh; }
.side { display: none; }
.main { min-inline-size: 0; display: flex; flex-direction: column; }
.mtop { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-1); block-size: 56px; padding: 0 var(--sp-3); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--border); }
.mtop .brand { margin-inline-end: auto; }
.mtop .brand img { block-size: 30px; }
.icobtn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); color: var(--text-secondary); background: none; border: 0; cursor: pointer; text-decoration: none; }
.icobtn:hover { background: var(--surface-sunken); color: var(--text); }
.icobtn svg { inline-size: 22px; block-size: 22px; }
.dtop { display: none; }
.content { padding: var(--sp-4) var(--sp-4) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-16)); flex: 1; min-inline-size: 0; }
.content > .flash { margin-block-end: var(--sp-4); }

/* globale Suche (mobil per #suche einblendbar) */
.search { display: flex; align-items: center; gap: var(--sp-2); block-size: 40px; padding: 0 var(--sp-3); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo); }
.search input { border: 0; background: transparent; padding: 0; min-block-size: 0; block-size: 38px; flex: 1; font-size: var(--fs-sm); color: var(--text); box-shadow: none; outline: none; min-inline-size: 0; }
.kbd { font-size: 11px; font-weight: 600; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface); }
.msearch { display: none; padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--border); background: var(--bg); }
.msearch:target, .msearch.is-open { display: block; }

/* Avatar-Menü (Theme + Abmelden genau einmal) */
.avatar-menu { position: relative; }
.avatar-menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; inline-size: 44px; block-size: 44px; }
.avatar-menu > summary::-webkit-details-marker { display: none; }
.avatar { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-secondary); font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--border); }
.avatar svg { inline-size: 18px; block-size: 18px; }
.menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 4px); z-index: var(--z-overlay); min-inline-size: 220px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: var(--sp-1); display: grid; }
.menu a, .menu button { display: flex; align-items: center; gap: var(--sp-2); min-block-size: 44px; padding: 0 var(--sp-3); border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; inline-size: 100%; text-align: start; }
.menu a:hover, .menu button:hover { background: var(--surface-sunken); }
.menu form { margin: 0; }
.menu hr { border: 0; border-block-start: 1px solid var(--border); margin: var(--sp-1) 0; }
.menu .menu__h { font-size: var(--fs-xs); color: var(--text-muted); padding: var(--sp-2) var(--sp-3) var(--sp-1); }

/* mobile Tabbar + FAB */
.tabbar2 { position: fixed; inset: auto 0 0 0; z-index: var(--z-nav); block-size: calc(64px + env(safe-area-inset-bottom)); padding-block-end: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(3, 1fr); background: color-mix(in srgb, var(--surface-raised) 92%, transparent); backdrop-filter: blur(12px); border-block-start: 1px solid var(--border); }
.tabbar2 a { display: grid; place-items: center; align-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-decoration: none; position: relative; }
.tabbar2 a svg { inline-size: 24px; block-size: 24px; }
.tabbar2 a[aria-current] { color: var(--text); }
.tabbar2 a[aria-current]::before { content: ""; position: absolute; inset-block-start: 0; inline-size: 28px; block-size: 3px; background: var(--accent); }
.tabbar2 .bub { position: absolute; inset-block-start: 6px; inset-inline-start: calc(50% + 6px); min-inline-size: 18px; block-size: 18px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.fab { position: fixed; inset-inline-end: 16px; inset-block-end: calc(80px + env(safe-area-inset-bottom)); z-index: var(--z-nav); inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: var(--shadow-3); }
.fab svg { inline-size: 26px; block-size: 26px; }

@media (min-width: 64rem) {
  .app { display: grid; grid-template-columns: 236px minmax(0, 1fr); }
  .side { display: flex; flex-direction: column; gap: var(--sp-1); position: sticky; top: 0; block-size: 100dvh; background: var(--surface); border-inline-end: 1px solid var(--border); padding: var(--sp-5) var(--sp-3); }
  .side__logo { padding: 0 var(--sp-2) var(--sp-6); }
  .side__logo img { block-size: 34px; display: block; }
  .side a { display: flex; align-items: center; gap: var(--sp-3); min-block-size: 44px; padding: 0 var(--sp-3); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-weight: 500; position: relative; }
  .side a:hover { background: var(--surface-sunken); }
  .side a[aria-current] { background: var(--selected); color: var(--text); font-weight: 600; }
  .side a[aria-current]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 10px; inline-size: 3px; background: var(--accent); }
  .side .count { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700; min-inline-size: 22px; block-size: 22px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--primary); color: var(--on-primary); padding: 0 6px; }
  .side .count--quiet { background: transparent; color: var(--text-muted); font-weight: 600; }
  .side__add { margin: var(--sp-4) 0 var(--sp-2); justify-content: center; }
  .side a.side__add { color: var(--text); border: 1px solid var(--border-strong); background: var(--surface-raised); justify-content: center; font-weight: 600; }
  .side__foot { margin-block-start: auto; display: grid; gap: var(--sp-1); }
  .mtop, .tabbar2, .fab { display: none; }
  .msearch:target, .msearch.is-open { display: none; }
  .dtop { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-3); block-size: 64px; padding: 0 var(--sp-8); border-block-end: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, var(--surface)); backdrop-filter: blur(8px); }
  .dtop .search { inline-size: 380px; }
  .content { padding: var(--sp-8); }
}

/* ---------- Heute ---------- */
.today { display: grid; gap: var(--sp-6); }
@media (min-width: 72rem) { .today { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.hello { font-family: var(--font-serif); font-weight: 600; font-size: 2rem; line-height: 1.05; margin: var(--sp-2) 0; letter-spacing: -0.015em; }
.hello em { font-style: normal; color: var(--primary); }
@media (min-width: 64rem) { .hello { font-size: 2.75rem; } }
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; }
.strip a { background: var(--surface); padding: var(--sp-3); min-width: 0; text-decoration: none; color: var(--text); display: grid; gap: 2px; }
.strip a:hover { background: var(--surface-raised); }
.strip b { font-family: var(--font-serif); font-size: 1.75rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums; }
.strip span { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; overflow-wrap: anywhere; hyphens: auto; line-height: 1.25; }
@media (max-width: 640px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; } .strip a { padding: var(--sp-2); } .strip b { font-size: 1.4rem; } }
.strip a.hot { background: var(--primary-soft); }
.strip a.hot span { color: var(--primary); }
.qgroup__h { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-2); }
.qgroup__h h2, .qgroup__h h3 { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); font-family: var(--font-sans); }
.qgroup__h .n { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.qlist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); list-style: none; margin: 0; padding: 0; }
.qitem { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--border); min-block-size: 68px; }
.qitem:first-child { border-block-start: 0; }
.qitem__ico { inline-size: 40px; block-size: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-secondary); }
.qitem__ico--lapis { background: var(--primary-soft); color: var(--primary); }
.qitem__ico--copper { background: var(--warning-bg); color: var(--warning); }
.qitem__ico--gold { background: var(--accent-soft); color: var(--accent-text); }
.qitem__t { font-weight: 600; line-height: 1.3; color: var(--text); text-decoration: none; }
a.qitem__t:hover { text-decoration: underline; }
.qitem__m { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: 2px; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.qitem__a { grid-column: 2; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.qitem__a form { margin: 0; }
@media (min-width: 48rem) { .qitem { grid-template-columns: 40px minmax(0, 1fr) auto; } .qitem__a { grid-column: auto; justify-content: flex-end; } }
.next { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: var(--sp-5); position: relative; overflow: hidden; }
.next::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 4px; background: var(--primary); }
.next__kicker { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.next__t { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; line-height: 1.15; margin: var(--sp-2) 0 var(--sp-1); }
.next__t a { color: inherit; text-decoration: none; }
.next__m { color: var(--text-secondary); display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); }
.next__a { display: flex; gap: var(--sp-2); align-items: center; margin-block-start: var(--sp-4); flex-wrap: wrap; }
.next__a form { margin: 0; }
.next__a .details { margin-inline-start: auto; }
.why { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-secondary); }
.why li { display: flex; gap: var(--sp-2); align-items: start; }
.why li svg { color: var(--success); margin-block-start: 2px; inline-size: 16px; block-size: 16px; flex: none; }
.why li.gap svg { color: var(--warning); }
.empty-today { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-secondary); }
.empty-today b { display: block; font-family: var(--font-serif); font-size: 1.5rem; color: var(--text); margin-block-end: var(--sp-2); }

/* Fit-Paar «JR 86 BW 81» */
.fit { display: inline-flex; align-items: center; gap: 6px; block-size: 24px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--success-bg); color: var(--success); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fit small { font-weight: 600; opacity: .8; font-size: 10px; letter-spacing: .04em; }
.fit--mid { background: var(--warning-bg); color: var(--warning); }
.fit--low, .fit--none { background: var(--surface-sunken); color: var(--text-muted); }
.fit .ks { inline-size: 9px; block-size: 7px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 81% 100%, 19% 100%); }

/* rechte Spalte */
.aside { display: grid; gap: var(--sp-4); align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); }
.panel h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); }
.panel--quiet { background: transparent; border-style: dashed; color: var(--text-secondary); font-size: var(--fs-sm); }
.agent-row { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-2); padding: var(--sp-2) 0; border-block-start: 1px solid var(--border); font-size: var(--fs-sm); }
.agent-row:first-of-type { border-block-start: 0; }
.agent-row svg { color: var(--text-muted); margin-block-start: 2px; }
.pulse { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--success); margin-inline-end: 6px; box-shadow: 0 0 0 3px var(--success-bg); }
.pulse--off { background: var(--text-muted); box-shadow: 0 0 0 3px var(--surface-sunken); }
.pulse--warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.wk { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.wk b { display: block; font-family: var(--font-serif); font-size: 2rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums; }
.wk span { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }

/* ---------- Stellen (Board + Liste) ---------- */
.phead { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-4); }
.phead h1 { font-family: var(--font-serif); font-weight: 600; font-size: 2rem; margin: 0; line-height: 1.1; }
.phead .spacer { min-inline-size: 0; }
.fchips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 6px; block-size: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 500; background: var(--surface-raised); color: var(--text); white-space: nowrap; text-decoration: none; }
.fchip:hover { border-color: var(--primary); }
.fchip--on, .fchip[aria-current] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.fchip .n { font-weight: 700; opacity: .75; font-size: var(--fs-xs); }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.seg a { display: inline-flex; align-items: center; gap: 6px; block-size: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); background: var(--surface-raised); text-decoration: none; }
.seg a[aria-current] { background: var(--selected); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.seg svg { inline-size: 16px; block-size: 16px; }
.coltabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-1) var(--sp-4) var(--sp-2); margin: 0 calc(-1 * var(--sp-4)) var(--sp-2); scrollbar-width: none; }
.coltabs .fchip { block-size: 40px; font-size: var(--fs-base); }
.gesture-hint { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); margin-block-end: var(--sp-2); }

.kb { display: grid; gap: var(--sp-3); }
.col { background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); border-radius: var(--radius-md); padding: var(--sp-2); display: none; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.col.is-current { display: flex; }
.col__h { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) 0; }
.col__h b { font-size: var(--fs-sm); font-weight: 700; min-width: 0; }
.col__h .n { margin-inline-start: auto; flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.col__who { font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; padding: 0 var(--sp-2) var(--sp-1); }
.col--you .col__h b::after { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--primary); margin-inline-start: 6px; vertical-align: middle; }
.col--drop { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-soft); }
.col--over { background: color-mix(in srgb, var(--primary-soft) 70%, var(--primary)); }
.col--nodrop { opacity: .45; }
.col__empty { font-size: var(--fs-xs); color: var(--text-muted); padding: var(--sp-2); }
.col__more { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); }
.jc { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); box-shadow: var(--shadow-1); display: grid; gap: 6px; position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.jc, .jc > * { min-inline-size: 0; }
.jc__t { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; color: var(--text); text-decoration: none; padding-inline-end: 32px; display: block; overflow-wrap: anywhere; hyphens: auto; }
.jc__t::after { content: ""; position: absolute; inset: 0; }
.jc__t:focus-visible { outline: none; }
.jc:has(.jc__t:focus-visible) { box-shadow: 0 0 0 3px var(--focus-halo); border-color: var(--focus); }
.jc__c { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.jc__b { display: flex; flex-wrap: wrap; gap: 4px; }
.jc .badge { block-size: 22px; font-size: 11px; padding: 0 6px; }
.jc__a { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 2px; position: relative; z-index: 1; }
.jc__a form { margin: 0; flex: 1 1 84px; min-width: 0; display: flex; }
.jc__a .btn { min-block-size: 32px; font-size: 12px; padding: 0 8px; flex: 1 1 84px; min-width: 0; }
.jc__a form .btn { flex: 1; }
.jc--quiet { opacity: .72; }
.jc--quiet:hover { opacity: 1; }
.jc--lift { transform: rotate(-2deg); box-shadow: var(--shadow-3); border-color: var(--primary); }
.jc.is-dragging { opacity: .35; pointer-events: none; } /* sonst trifft elementFromPoint die gezogene Karte statt der Ziel-Spalte */
.drag-ghost { position: fixed; z-index: var(--z-toast); pointer-events: none; inline-size: 220px; }
.move { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; z-index: 2; }
.move > summary { list-style: none; cursor: pointer; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-muted); }
.move > summary::-webkit-details-marker { display: none; }
.move > summary:hover { background: var(--surface-sunken); color: var(--text); }
.move .menu { min-inline-size: 230px; }
.closedcol { display: grid; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); }
.closedcol a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: 8px 0; border-block-end: 1px solid var(--border); color: var(--text); text-decoration: none; }
.closedcol a:hover { color: var(--primary); }
.closedcol b { font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) {
  .kb { grid-template-columns: repeat(6, minmax(150px, 1fr)) 176px; align-items: start; overflow-x: auto; padding-block-end: var(--sp-2); }
  .col, .col.is-current { display: flex; min-block-size: 60vh; }
  .coltabs, .gesture-hint { display: none; }
}
@media (max-width: 63.99rem) { .fchips--desk, .seg--desk { display: none; } }

/* Liste / Suche */
.jlist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.jlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--border); align-items: center; }
.jlist li:first-child { border-block-start: 0; }
.jlist a { font-weight: 600; color: var(--text); text-decoration: none; }
.jlist a:hover { text-decoration: underline; }
.jlist .m { font-size: var(--fs-sm); color: var(--text-muted); display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; grid-column: 1; }
.jlist .r { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Dialoge (:target ohne JS, .is-open mit JS) ---------- */
.modal { display: none; }
.modal:target, .modal.is-open { display: block; }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-overlay); backdrop-filter: blur(2px); display: block; }
.dlg { position: fixed; z-index: calc(var(--z-overlay) + 1); inset: auto 0 0 0; max-block-size: 92dvh; overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-3); color: var(--text); }
.dlg::before { content: ""; display: block; inline-size: 40px; block-size: 5px; border-radius: 3px; background: var(--border-strong); margin: 8px auto 0; opacity: .6; }
.dlg__b { padding: var(--sp-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); overflow-wrap: anywhere; }
.dlg__f { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; flex-wrap: wrap; padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--border); }
.dlg__f .btn { min-block-size: 44px; }
.dlg h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.6rem; margin: 0; line-height: 1.1; }
.dlg form { margin: 0; }
.dlg .close { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); }
@media (min-width: 48rem) {
  .dlg { inset: 50% auto auto 50%; transform: translate(-50%, -50%); inline-size: min(560px, 92vw); border-radius: var(--radius-lg); max-block-size: 88dvh; }
  .dlg::before { display: none; }
  .dlg__b { padding: var(--sp-6); }
  .dlg__f { padding: var(--sp-4) var(--sp-6); }
}
.pchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
.pchips legend { font-size: var(--fs-sm); font-weight: 600; margin-block-end: 6px; padding: 0; }
.pchip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); background: var(--surface-raised); cursor: pointer; }
.pchip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.pchip:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.pchip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus-halo); }
.lbl { font-size: var(--fs-sm); font-weight: 600; display: block; margin-block-end: 6px; }
.ta { inline-size: 100%; min-block-size: 96px; line-height: 1.45; }
.help { font-size: var(--fs-sm); color: var(--text-muted); display: flex; gap: 6px; align-items: start; margin: 6px 0 0; }
.help svg { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 2px; }
.err-text { color: var(--danger); font-size: var(--fs-sm); margin: 6px 0 0; }
.radios { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- Undo-Toast ---------- */
.undo-region { position: fixed; z-index: var(--z-toast); inset-inline: var(--sp-3); inset-block-end: calc(76px + env(safe-area-inset-bottom)); display: grid; gap: var(--sp-2); justify-items: center; pointer-events: none; }
@media (min-width: 64rem) { .undo-region { inset-inline: auto var(--sp-6); inset-block-end: var(--sp-6); } }
.toast2 { pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); background: var(--text); color: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: var(--fs-sm); inline-size: min(100%, 440px); position: relative; overflow: hidden; }
.toast2 form { margin: 0 0 0 auto; }
.toast2 .btn { --btn-bg: transparent; --btn-fg: var(--surface); --btn-bd: color-mix(in srgb, var(--surface) 40%, transparent); min-block-size: 40px; white-space: nowrap; }
.toast2__msg { flex: 1; min-inline-size: 0; }
.toast2__bar { position: absolute; inset-inline-start: 0; inset-block-end: 0; block-size: 3px; inline-size: 100%; background: var(--accent); transform-origin: left; animation: undo-bar 10s linear forwards; }
.toast2__secs { font-variant-numeric: tabular-nums; opacity: .8; font-size: var(--fs-xs); }
.toast2.is-expired { display: none; }
@keyframes undo-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast2__bar { animation: none; } }

/* ---------- Detail ---------- */
.crumbs { font-size: var(--fs-sm); color: var(--text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--text-secondary); }
.jhead h1 { font-family: var(--font-serif); font-weight: 600; font-size: 2rem; line-height: 1.1; margin: var(--sp-2) 0 var(--sp-2); }
.jhead__m { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--text-secondary); }
.jhead__m b { color: var(--text); }
.actionbar { position: sticky; inset-block-start: 56px; z-index: calc(var(--z-sticky) - 1); display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: var(--surface-raised); border: 1px solid var(--border); border-inline-start: 4px solid var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow-2); margin: var(--sp-4) 0; }
.actionbar--quiet { border-inline-start-color: var(--border-strong); }
.actionbar--done { border-inline-start-color: var(--success); }
.actionbar__t { flex: 1 1 220px; min-inline-size: 0; }
.actionbar__t b { display: block; font-size: var(--fs-md); }
.actionbar__a { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.actionbar__a form { margin: 0; }
.actionbar .move { position: static; }
.actionbar .move > summary { inline-size: 44px; block-size: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
@media (min-width: 64rem) { .actionbar { inset-block-start: 72px; } .jhead h1 { font-size: 2.25rem; } }
.dgrid { display: grid; gap: var(--sp-4); }
@media (min-width: 64rem) { .dgrid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.dcol { display: grid; gap: var(--sp-4); min-inline-size: 0; align-content: start; }
.sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); min-inline-size: 0; }
.sec > h2, .sec > summary > h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-md); font-weight: 650; display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); }
.sec > h2 .t-label, .sec > h2 .right { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sec > h2 svg { inline-size: 18px; block-size: 18px; }
details.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary h2 { margin: 0; }
details.sec > summary::before { content: "›"; font-size: 1.25rem; color: var(--text-muted); transition: transform var(--dur-fast); }
details.sec[open] > summary::before { transform: rotate(90deg); }
details.sec[open] > summary { margin-block-end: var(--sp-4); }
.fitbox { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .fitbox { grid-template-columns: auto minmax(0, 1fr); } }
.rings { display: flex; gap: var(--sp-3); align-items: center; }
.ring { --c: var(--score-good); inline-size: 72px; block-size: 72px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none; background: var(--score-track); }
.ring svg.ring__arc { position: absolute; inset: 0; inline-size: 72px; block-size: 72px; transform: rotate(-90deg); }
.ring__arc circle { fill: none; stroke-width: 6; }
.ring__arc .trk { stroke: var(--score-track); }
.ring__arc .val { stroke: var(--c); stroke-linecap: butt; }
.ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.ring b { position: relative; font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; font-variant-numeric: lining-nums; }
.ring--mid { --c: var(--score-mid); }
.ring--low { --c: var(--score-low); }
.ring--none b { color: var(--text-muted); font-size: 1.25rem; }
.ring__l { display: block; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; margin-block-start: 4px; }
.kv2 { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px var(--sp-3); font-size: var(--fs-sm); margin: 0; }
.kv2 dt { color: var(--text-muted); }
.kv2 dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-end: var(--sp-4); list-style: none; padding: 0; }
.step { padding: var(--sp-2) var(--sp-2) 0 0; border-block-start: 3px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.step b { display: block; font-size: var(--fs-sm); color: var(--text); }
.step--done { border-color: var(--success); }
.step--now { border-color: var(--primary); }
.step--now b { color: var(--primary); }
.doc { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-block-start: 1px solid var(--border); }
.doc:first-of-type { border-block-start: 0; }
.doc__i { inline-size: 36px; block-size: 44px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); }
.doc__i svg { inline-size: 18px; block-size: 18px; }
.doc__a { grid-column: 2; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.doc__a form { margin: 0; }
@media (min-width: 48rem) { .doc { grid-template-columns: 36px minmax(0, 1fr) auto; } .doc__a { grid-column: auto; justify-content: flex-end; } }
.tl { list-style: none; margin: 0; padding: 0; display: grid; }
.tl li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); position: relative; }
.tl li::before { content: ""; position: absolute; inset-inline-start: 10px; inset-block: 30px -6px; inline-size: 1px; background: var(--border); }
.tl li:last-child::before { display: none; }
.tl .d { inline-size: 22px; block-size: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); }
.tl .d svg { inline-size: 12px; block-size: 12px; }
.tl .d--gold { background: var(--accent-soft); color: var(--accent-text); }
.tl .d--rust { background: var(--warning-bg); color: var(--warning); }
.tl .d--lapis { background: var(--primary-soft); color: var(--primary); }
.tl .who { font-weight: 600; }
.tl .when { color: var(--text-muted); font-size: var(--fs-xs); display: block; }
.tl .txt { overflow-wrap: anywhere; }
.notebox { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-3); }
.notebox input { flex: 1; min-inline-size: 0; }
.prose-sm { font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 60vh; overflow-y: auto; }

/* Entwurf prüfen */
.rgrid { display: grid; gap: var(--sp-4); }
@media (min-width: 64rem) { .rgrid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.paper { background: var(--cr-chalk); color: var(--cr-obsidian); border: 1px solid var(--border); box-shadow: var(--shadow-2); padding: var(--sp-6) var(--sp-5); font-size: 13px; line-height: 1.55; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
@media (min-width: 48rem) { .paper { padding: 44px 52px; } }
.paper h1, .paper .doc-h1 { font-family: var(--font-serif); font-weight: 600; font-size: 26px; margin: 0 0 6px; color: var(--cr-obsidian); }
.paper h2, .paper .doc-h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 18px 0 6px; color: var(--cr-lapis-deep); }
.paper p { margin: 0 0 6px; }
.hl { background: var(--warning-bg); box-shadow: inset 0 -2px 0 var(--warning); padding: 0 2px; }
.hl2 { background: var(--success-bg); padding: 0 2px; }
.meter2 { block-size: 8px; background: var(--score-track); border-radius: 4px; position: relative; }
.meter2 i { position: absolute; inset-inline-start: 0; inset-block: 0; border-radius: 4px; background: var(--score-good); }
.tabs2 { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.tabs2 a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); background: var(--surface-raised); text-decoration: none; }
.tabs2 a[aria-current] { background: var(--selected); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tabs2 a .ok { color: var(--success); }
.factlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.factlist li { border-inline-start: 3px solid var(--warning); padding-inline-start: var(--sp-2); }
.rbtns { display: grid; gap: var(--sp-2); }
.rbtns .btn { inline-size: 100%; justify-content: center; }
.rbtns form { margin: 0; }

/* Senden-Vorschau */
.mailprev { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-4); font-size: var(--fs-sm); display: grid; gap: var(--sp-2); }
.mailprev pre { white-space: pre-wrap; font-family: var(--font-sans); margin: 0; max-block-size: 30vh; overflow-y: auto; overflow-wrap: anywhere; }
.attach { display: flex; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.attach .badge { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.attach .badge svg { vertical-align: -2px; }
.attach .badge svg { flex: none; margin-inline-end: 4px; }

/* Auswertung + Einstellungen */
.setnav { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-block-end: var(--sp-4); }
.setgroup { margin-block-start: var(--sp-8); }
.setgroup > h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.6rem; margin: 0 0 var(--sp-3); }
.setgroup .card + .card, .setgroup details + details { margin-block-start: var(--sp-3); }
.adv > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }

@media print { .side, .dtop, .mtop, .tabbar2, .fab, .actionbar, .modal, .undo-region { display: none !important; } }

/* Nachträge Umsetzung */
.meter3 { display: block; inline-size: 100%; block-size: 8px; margin-block: var(--sp-2); }
.meter3 .tr { fill: var(--score-track); }
.meter3 .val { fill: var(--score-good); }
.meter3 .val.low { fill: var(--warning); }
.meter3 .min { fill: var(--text); }
.search { margin-block: var(--sp-3); }
.col--closed { background: transparent; }
.spacer { flex: 1 1 auto; }

/* Review-Seitenleiste: Icon, Titel und Zaehler sauber ausrichten */
.rgrid .sec h3 { display: flex; align-items: center; gap: 8px; }
.rgrid .sec h3 .t-label { margin-inline-start: auto; }
/* Lange Dateinamen (Anhaenge) duerfen auf dem Handy nicht aus der Karte laufen */
.list li, dd .chip, .chip { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }

/* Patch 2: Lohn-Chip auf Karte/Liste («165–215k · geschätzt»), bricht nie innerhalb um */
.salary-chip { gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.salary-chip__v { color: var(--text); }
.salary-chip__m { font-weight: var(--fw-regular, 400); color: var(--text-muted); }
.salary-chip__m::before { content: "·"; margin-inline-end: 4px; color: var(--text-muted); }
.salary-chip__m--est { font-style: italic; }
/* Patch 2: «Von Hand freigeben» auf «Neu»-Karten (dezent, Karte bleibt ruhig) */
.jc__a--manual .btn { flex: 1 1 auto; max-inline-size: 100%; white-space: normal; line-height: 1.2; block-size: auto; padding-block: 4px; gap: 4px; text-align: center; }
.jc__a--manual .btn .ico { flex: 0 0 auto; }
/* Schmale Board-Spalten (Desktop, 8 Spalten): Lohn-Chip darf umbrechen statt über den Kartenrand zu laufen */
.jc .salary-chip { flex: 0 1 auto; max-inline-size: 100%; flex-wrap: wrap; white-space: normal; block-size: auto; min-block-size: 22px; row-gap: 0; padding-block: 2px; }
.jc .salary-chip__v, .jc .salary-chip__m { white-space: nowrap; }
/* Patch 3: «Wartet auf Zweitbewertung» bricht in schmalen Board-Spalten um statt abgeschnitten zu werden */
.jc [data-awaits-fit2] { max-inline-size: 100%; white-space: normal; height: auto; min-height: 24px; padding-block: 2px; line-height: 1.2; }
.approval-note { display: grid; gap: var(--sp-2); }
.approval-note form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.approval-note input[type="text"] { flex: 1 1 220px; min-inline-size: 0; }
.manual-approve { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: 0; }
.manual-approve input[type="text"] { flex: 1 1 200px; min-inline-size: 0; block-size: 40px; }
.toast2__more { font-size: var(--fs-sm); white-space: nowrap; }
@media (max-width: 480px) {
  .manual-approve { inline-size: 100%; }
}

/* Patch 2, Punkt 5: Suchprofil (Abschnitt auf der Profil-Seite) */
.search-profile__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.search-profile__head h2 { margin: 0; }
.search-profile--suggestion { border-color: var(--c-warn, var(--border-strong)); border-style: dashed; }
.search-profile__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3); }
.search-profile__form > p, .search-profile__form > div:last-child, .search-profile__row { grid-column: 1 / -1; }
.search-profile__field { display: grid; gap: var(--sp-1); min-inline-size: 0; }
.search-profile__field .chips { margin: 0; }
.search-profile__field textarea { inline-size: 100%; min-inline-size: 0; }
.search-profile__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--sp-3); }
.search-profile__row input { inline-size: 100%; }
/* Sprungziele (z. B. /profile#suchprofil) nicht unter der fixen Kopfzeile (56px mobil, 64px Desktop) verstecken */
:target { scroll-margin-block-start: calc(64px + var(--sp-4)); }
/* FEAT-08 (Patch 5): Sprache der Stelle, englische Fassung bestaetigen */
.jhead__m .lang { display: inline-flex; align-items: center; gap: 6px; }
.badge svg { inline-size: 14px; block-size: 14px; vertical-align: -2px; }
.langpop { position: relative; display: inline-block; }
.langpop > summary { list-style: none; cursor: pointer; }
.langpop > summary::-webkit-details-marker { display: none; }
.langpop__menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: var(--z-overlay); inline-size: min(300px, 86vw); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-2); border-radius: var(--radius-md); padding: var(--sp-3); font-size: var(--fs-sm); color: var(--text); font-weight: 400; }
.langpop__menu p { margin: 0 0 8px; }
.langpop__menu label { display: flex; gap: 8px; align-items: center; min-block-size: 40px; padding: 0 6px; border-radius: var(--radius-sm); cursor: pointer; }
.langpop__menu label:has(input:checked) { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.langpop__menu .muted { font-size: var(--fs-xs); }
.langpop__menu .btn { margin-block-start: 8px; }
.edbar { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-block: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-raised); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); border-radius: var(--radius-md); }
.edbar .spacer { flex: 1; }
.edbar .small { margin: 0; }
.seg a .cnt { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--warning-bg); color: var(--warning); }
.lockf { background: var(--accent-soft); color: var(--accent-text); border-radius: 2px; padding: 0 3px; white-space: nowrap; }
.lockf svg { inline-size: 11px; block-size: 11px; vertical-align: -1px; margin-inline-end: 2px; stroke: currentColor; fill: none; }
.trlist { display: grid; gap: var(--sp-3); }
.trc { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.trc__h { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--border); }
.trc__h b { font-size: var(--fs-base); }
.trc__h .spacer { flex: 1; }
.trc__b { display: grid; grid-template-columns: 1fr 1fr; }
.trc__c { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.55; min-inline-size: 0; overflow-wrap: anywhere; }
.trc__c + .trc__c { border-inline-start: 1px solid var(--border); background: var(--surface-raised); }
.trc__c .eyebrow { display: block; margin-block-end: 4px; }
.trc__c ul { margin: 0; padding-inline-start: 16px; }
.trc__c p { margin: 0 0 6px; }
.trc__c .fl { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.trc__f { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); border-block-start: 1px solid var(--border); justify-content: flex-end; }
.trc__f .spacer { flex: 1; }
.trc__f form { margin: 0; }
.trc__f .tredit { order: 9; flex-basis: 100%; }
.trc__f .tredit:not([open]) { flex-basis: auto; order: 0; }
.trc__f .tredit > summary { list-style: none; }
.trc__f .tredit > summary::-webkit-details-marker { display: none; }
.trc__f .tredit[open] > summary { margin-block-end: var(--sp-2); }
.trc__warn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--warning); background: var(--warning-bg); }
.trc--done { opacity: .82; }
.trc--done .trc__h { border-block-end: 0; }
.trc--old { border-color: var(--warning); border-inline-start: 3px solid var(--warning); }
del.chg { background: var(--danger-bg); color: var(--danger); text-decoration-thickness: 1px; }
ins.chg { background: var(--success-bg); color: var(--success); text-decoration: none; }
.trsum { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-block-end: var(--sp-4); }
.trsum .spacer { flex: 1; }
.trsum form { margin: 0; }
.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-block: var(--sp-2) var(--sp-4); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 47.99rem) { .trc__b { grid-template-columns: 1fr; } .trc__c + .trc__c { border-inline-start: 0; border-block-start: 1px solid var(--border); } }
.edbar .meter3 { inline-size: 120px; block-size: 8px; }
.edbar.trnote { border-inline-start-color: var(--warning); }
/* Patch 6: Stufen der Faehigkeiten */
.skill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: flex-start; border-block-end: 1px solid var(--border); padding-block: var(--sp-1); }
.skill-row > details.entry { border: 0; margin: 0; flex: 1 1 12rem; min-inline-size: 0; }
.skill-row > .skill-level { flex: 0 1 auto; margin-inline-start: auto; position: relative; }
.skill-level { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: flex-end; }
.skill-level form { margin: 0; }
.skill-level__form { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.skill-level select { min-inline-size: 11rem; }
.skill-level select.is-flagged { border-color: var(--warning); }
.skill-level__hint { flex-basis: 100%; text-align: end; max-inline-size: 22rem; }
.skill-level__hint:empty { display: none; }
.skill-levels-head .skill-levels-open { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-block: var(--sp-2); }
.skill-levels-legend dl { margin: var(--sp-2) 0; } .skill-levels-legend dt { font-weight: 600; } .skill-levels-legend dd { margin: 0 0 var(--sp-1) 0; }
.tip { display: inline-grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; border: 1px solid var(--border); font-size: var(--fs-xs); cursor: help; color: var(--text-muted); }
.tip__body { display: none; position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 30; inline-size: min(22rem, 80vw); padding: var(--sp-2) var(--sp-3); background: var(--surface, #fff); color: var(--text, #111); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: var(--fs-xs); line-height: 1.45; text-align: start; }
.tip:hover .tip__body, .tip:focus .tip__body, .tip:focus-within .tip__body { display: block; }
@media (max-width: 47.99rem) { .skill-row > .skill-level { flex-basis: 100%; justify-content: flex-start; } .skill-level__hint { text-align: start; } }

/* Patch 9: Einstellungen › Texte & Regeln */
.tr-card { max-inline-size: 72rem; }
.tr-card + .tr-card { margin-block-start: var(--sp-4); }
.tr-form { gap: var(--sp-3); }
.tr-group { border: 1px solid var(--border); border-radius: var(--radius-md, 10px); padding: var(--sp-3); margin: 0; display: grid; gap: var(--sp-3); min-inline-size: 0; }
.tr-group legend { font-weight: 600; padding-inline: var(--sp-1); }
.tr-field { display: grid; gap: var(--sp-1); min-inline-size: 0; }
.tr-field > label { font-size: var(--fs-sm); font-weight: 600; }
.tr-num { max-inline-size: 12rem; }
.tr-default { margin: 0; display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); align-items: baseline; }
.tr-default .linkbtn[disabled] { color: var(--text-muted); text-decoration: none; cursor: default; opacity: .6; }
.tr-sentence { margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--surface-sunken); border-radius: 6px; }
.tr-preview { border: 1px dashed var(--border-strong); border-radius: var(--radius-md, 10px); padding: var(--sp-3); background: var(--surface-sunken); display: grid; gap: var(--sp-2); }
.tr-preview p { margin: 0; }
.tr-preview__title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.tr-sample { align-items: center; border-block-end: 0; position: relative; }
.tr-cv { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.tr-cv__h { font-weight: 700; letter-spacing: .08em; font-size: var(--fs-xs); margin-block-end: var(--sp-1) !important; }
.tr-cv__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.tr-dots { letter-spacing: 2px; color: var(--primary); }
.tr-langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--sp-3); }
.tr-letter { background: var(--surface-raised); font-size: var(--fs-sm); }
.tr-letter__date { text-align: end; }
.tr-chiprow { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }
.tr-chiprow .input { flex: 1 1 14rem; max-inline-size: 22rem; }
.tr-chiprow .err-text { flex-basis: 100%; }
.tr-chiprow:has(input[type=checkbox]:checked) .input { text-decoration: line-through; opacity: .6; }
.tr-preview .pchip { cursor: default; }