:root {
  color-scheme: dark;
  --black: #050505;
  --panel: #111;
  --header: #383536;
  --row-a: #242629;
  --row-b: #34373b;
  --line: #050505;
  --white: #f7f7f7;
  --muted: #aaa;
  --yellow: #f4f013;
  --blue: #0e5ea8;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); }
html.is-loading body { visibility: hidden; }
html.page-entered body { animation: public-page-in .32s ease-out both; }
@keyframes public-page-in { from { opacity: 0; } to { opacity: 1; } }
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--black); color: var(--white); user-select: none; }
button, input { font: inherit; }
input { user-select: text; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; padding: 20px clamp(14px, 2.4vw, 46px) 0; background: radial-gradient(circle at 50% 0, #171717 0, #050505 34%); }
.page-header { min-height: 128px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid #282828; padding: 4px 10px 16px; }
.identity { display: flex; align-items: center; gap: 17px; min-width: 0; }
.seal { width: 94px; height: 94px; flex: 0 0 auto; display: block; object-fit: contain; border: 0; border-radius: 50%; background: #000; }
.logo-trigger { display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; padding: 0; background: transparent; }
.logo-trigger:hover, .logo-trigger:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.seal strong { font-size: 1.25rem; letter-spacing: .08em; line-height: 1; }
.seal span { font-size: .43rem; letter-spacing: .08em; }
.seal-stars { margin-bottom: 4px; color: white; }
.kicker { margin: 0 0 3px; color: var(--yellow); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.6rem, 2.25vw, 2.5rem); line-height: 1; letter-spacing: -.035em; }
.subtitle { margin: 5px 0 0; color: #eee; font-size: .98rem; font-weight: 700; font-style: italic; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.search-box { position: relative; }
.search-box svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 15px; fill: none; stroke: #aaa; stroke-width: 2; stroke-linecap: round; }
.search-box input { width: min(260px, 25vw); height: 38px; border: 1px solid #424242; border-radius: 5px; padding: 0 11px 0 35px; color: white; background: #1b1b1b; outline: none; }
.search-box input:focus { border-color: #777; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.refresh-button { height: 38px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #4c4c4c; border-radius: 5px; padding: 0 13px; color: #fff; background: #282828; font-weight: 700; font-size: .78rem; }
.refresh-button:hover { background: #3a3a3a; }
.refresh-button:disabled { opacity: .65; cursor: wait; }
.refresh-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.read-only { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: #ddd; background: #101010; border: 1px solid #333; border-radius: 5px; font-size: .7rem; }
.read-only i { width: 7px; height: 7px; border-radius: 50%; background: #4bd179; box-shadow: 0 0 8px rgba(75,209,121,.65); }
.meta-bar { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 11px; color: #8f8f8f; font-size: .67rem; }

main { min-height: 580px; flex: 1 0 auto; }
.roster-board { display: grid; grid-template-columns: .97fr 1.08fr 1.02fr; gap: 18px; align-items: start; }
.roster-panel { min-width: 0; overflow: hidden; background: #090909; border: 1px solid #292929; border-radius: 5px; box-shadow: 0 14px 32px rgba(0,0,0,.28); }
.total-line { height: 30px; display: flex; align-items: center; margin: 0; padding: 0 10px; color: white; font-size: .75rem; font-weight: 800; }
.total-line strong { margin-left: 4px; color: var(--yellow); }
.roster-panel h2 { margin: 0; height: 44px; display: grid; place-items: center; background: var(--header); border: 1px solid var(--line); color: white; font-size: clamp(1rem, 1.25vw, 1.35rem); line-height: 1; }
.category-button { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; padding: 0 14px; color: white; background: transparent; font-weight: 800; }
.category-button span { color: var(--yellow); font-size: 1.6em; line-height: 0; transition: transform .16s ease; }
.category-button:hover, .category-button:focus-visible { background: #4a4748; outline: 2px solid var(--yellow); outline-offset: -2px; }
.category-button:hover span { transform: translateX(4px); }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 830px; border-collapse: collapse; table-layout: fixed; color: white; font-size: clamp(.64rem, .62vw, .78rem); font-weight: 700; }
.organization-panel table { min-width: 900px; }
th, td { height: 34px; padding: 5px 7px; border: 1px solid var(--line); text-align: center; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th { height: 36px; background: #171819; color: #fff; font-size: .92em; }
tbody tr:nth-child(odd) td { background: var(--row-a); }
tbody tr:nth-child(even) td { background: var(--row-b); }
.interactive-row { cursor: pointer; transition: filter .13s ease, transform .13s ease; animation: public-row-in .2s ease-out both; }
@keyframes public-row-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.interactive-row:hover { filter: brightness(1.25); }
.interactive-row:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--yellow); outline-offset: -3px; }
.interactive-row:active { transform: scale(.997); }
.name-cell { text-align: left; padding-left: 7px; }
.validity-cell { font-size: .92em; white-space: normal; }
.validity-expired { background: #d00000 !important; color: white !important; }
.validity-critical { background: #ff3b00 !important; color: white !important; }
.validity-warning { background: #fff200 !important; color: #111 !important; }
.validity-attention { background: #67d433 !important; color: #071800 !important; }
.validity-good { background: #2f871d !important; color: white !important; }
.expired-person td:not(.validity-cell), .person-card.expired-person { text-decoration: line-through; opacity: .62; }
.lawyers-panel th:nth-child(1) { width: 23%; }
.lawyers-panel th:nth-child(2) { width: 21%; }
.lawyers-panel th:nth-child(3) { width: 13%; }
.lawyers-panel th:nth-child(4) { width: 20%; }
.lawyers-panel th:nth-child(5) { width: 19%; }
.lawyers-panel th:nth-child(6) { width: 15%; }
.organization-panel th:nth-child(1) { width: 20%; }
.organization-panel th:nth-child(2) { width: 19%; }
.organization-panel th:nth-child(3) { width: 14%; }
.organization-panel th:nth-child(4) { width: 20%; }
.organization-panel th:nth-child(5) { width: 19%; }
.organization-panel th:nth-child(6) { width: 14%; }
.justice-panel th:nth-child(1) { width: 21%; }
.justice-panel th:nth-child(2) { width: 24%; }
.justice-panel th:nth-child(3) { width: 13%; }
.justice-panel th:nth-child(4) { width: 19%; }
.justice-panel th:nth-child(5) { width: 19%; }
.justice-panel th:nth-child(6) { width: 18%; }

.state-panel { min-height: 480px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #aaa; font-size: .85rem; }
.spinner { width: 25px; height: 25px; border: 3px solid #333; border-top-color: var(--yellow); border-radius: 50%; animation: spin .8s linear infinite; }
.error-panel { max-width: 600px; min-height: 220px; margin: 90px auto; border: 1px solid #502727; background: #1c1010; border-radius: 6px; padding: 25px; text-align: center; color: #efb5b5; }
.error-panel p { color: #aaa; line-height: 1.5; }
.error-panel button { height: 38px; border: 0; border-radius: 4px; padding: 0 15px; background: #eee; color: #111; font-weight: 800; }
.mobile-cards { display: none; }
footer { min-height: 38px; display: flex; align-items: end; justify-content: space-between; gap: 15px; color: #606060; font-size: .61rem; padding: 10px; }

.detail-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(780px, calc(100vh - 30px)); border: 1px solid #4b4b4b; border-radius: 8px; padding: 0; color: white; background: #151617; box-shadow: 0 28px 90px rgba(0,0,0,.75); }
.detail-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.detail-modal { position: relative; padding: clamp(24px, 4vw, 42px); }
.detail-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #555; border-radius: 50%; color: white; background: #252729; font-size: 1.55rem; line-height: 1; }
.detail-close:hover, .detail-close:focus-visible { border-color: var(--yellow); color: var(--yellow); outline: none; }
.detail-kicker { margin: 0 54px 8px 0; color: var(--yellow); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.detail-modal > h2 { margin: 0; padding-right: 54px; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.05; }
.detail-summary { margin: 10px 0 24px; color: #b8b8b8; line-height: 1.5; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.detail-field { min-width: 0; padding: 13px 15px; border: 1px solid #35383b; border-radius: 5px; background: #202225; }
.detail-field dt { margin-bottom: 7px; color: #969a9e; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.detail-field dd { margin: 0; color: white; font-size: .95rem; font-weight: 800; overflow-wrap: anywhere; }
.detail-field dd.detail-empty { color: #6f7377; font-weight: 500; }
.detail-field dd.detail-validity { display: inline-flex; min-width: 48px; justify-content: center; padding: 5px 9px; border-radius: 3px; }
.copy-phone { border: 0; border-bottom: 1px dashed var(--yellow); padding: 0 0 3px; color: var(--yellow); background: transparent; font-weight: 900; }
.copy-phone:hover, .copy-phone:focus-visible { color: white; border-bottom-color: white; outline: none; }
.category-detail-list { display: grid; gap: 8px; max-height: min(480px, 55vh); overflow-y: auto; padding-right: 3px; }
.category-person { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #36393c; border-radius: 5px; padding: 10px 14px; color: white; background: #202225; text-align: left; }
.category-person > span:first-child { min-width: 0; display: grid; gap: 4px; }
.category-person strong { font-size: .95rem; }
.category-person small { color: #9b9fa3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-person:hover, .category-person:focus-visible { border-color: var(--yellow); background: #2b2e31; outline: none; }
.category-arrow { color: var(--yellow); font-size: 1.6rem; }
.detail-empty-message { margin: 0; padding: 30px; color: #888; text-align: center; border: 1px dashed #3b3b3b; }
.design-credit { min-height: 44px; display: flex; align-items: center; justify-content: center; margin: 32px calc(clamp(14px, 2.4vw, 46px) * -1) 0; padding: 9px 12px; border-top: 1px solid #5b4d22; color: #e0c564; background: linear-gradient(90deg, #050505, #19160d 50%, #050505); box-shadow: 0 -8px 30px rgba(0,0,0,.35); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.design-credit::before { content: "◆"; margin-right: 9px; color: var(--yellow); font-size: .55rem; }
.logo-dialog { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: visible; border: 1px solid #5d5130; border-radius: 18px; padding: 22px; background: radial-gradient(circle, #17140b, #050505 68%); box-shadow: 0 32px 110px rgba(0,0,0,.86); }
.logo-dialog::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(5px); }
.logo-dialog img { width: 100%; max-height: calc(100vh - 76px); display: block; object-fit: contain; }
.logo-dialog-close { position: absolute; z-index: 2; top: 13px; right: 13px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #70633e; border-radius: 50%; color: white; background: #171717; font-size: 1.35rem; }
.logo-dialog-close:hover, .logo-dialog-close:focus-visible { border-color: var(--yellow); color: var(--yellow); outline: none; }

button, input, .roster-panel, .interactive-row, .category-person, .person-card {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease;
}
.detail-dialog[open], .logo-dialog[open] { animation: public-dialog-in .2s cubic-bezier(.2,.75,.25,1); }
.detail-dialog[open]::backdrop, .logo-dialog[open]::backdrop { animation: public-backdrop-in .2s ease-out; }
@keyframes public-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes public-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1500px) {
  .roster-board { grid-template-columns: 1fr; gap: 24px; }
  .justice-panel { grid-column: auto; }
  table, .organization-panel table { min-width: 760px; font-size: .86rem; }
  th, td { height: 40px; padding: 7px 10px; }
  th { height: 42px; }
  .total-line { height: 34px; font-size: .82rem; }
}

@media (max-width: 1100px) {
  .page-header { align-items: flex-start; flex-direction: column; }
  .header-tools { width: 100%; justify-content: flex-start; }
  .search-box { flex: 1; }
  .search-box input { width: 100%; }
  .roster-board { grid-template-columns: 1fr; }
  .justice-panel { grid-column: auto; }
  table { font-size: .8rem; }
}

@media (max-width: 700px) {
  .app-shell { padding: 13px 10px 8px; }
  .page-header { min-height: 0; padding-inline: 3px; }
  .seal { width: 66px; height: 66px; border-width: 3px; outline-width: 2px; }
  .seal strong { font-size: .9rem; }
  .seal span { font-size: .32rem; }
  .kicker { font-size: .52rem; }
  h1 { font-size: 1.45rem; }
  .subtitle { font-size: .72rem; }
  .header-tools { display: grid; grid-template-columns: 1fr auto; }
  .read-only { display: none; }
  .meta-bar { align-items: flex-start; flex-direction: column; padding-block: 8px; }
  .roster-board { grid-template-columns: 1fr; gap: 20px; }
  .justice-panel { grid-column: auto; }
  .table-scroll { display: none; }
  .roster-panel h2 { height: 40px; font-size: 1.15rem; }
  .total-line { height: 26px; }
  .mobile-cards { display: grid; gap: 8px; padding: 9px 0 0; }
  .person-card { border: 1px solid #343434; background: #151515; cursor: pointer; }
  .person-card:hover, .person-card:focus-visible { border-color: var(--yellow); outline: 2px solid var(--yellow); outline-offset: -2px; }
  .person-card h3 { margin: 0; padding: 11px 13px; border-bottom: 1px solid #343434; background: #363636; font-size: .9rem; }
  .person-card dl { margin: 0; }
  .person-card dl div { min-height: 33px; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 12px; padding: 5px 12px; border-bottom: 1px solid #292929; }
  .person-card dl div:last-child { border-bottom: 0; }
  .person-card dt { color: #999; font-size: .62rem; }
  .person-card dd { margin: 0; text-align: right; font-size: .72rem; font-weight: 700; overflow-wrap: anywhere; }
  .validity-badge { justify-self: end; min-width: 42px; padding: 4px 7px; text-align: center; border-radius: 2px; }
  .group-empty { margin: 0; padding: 22px; border: 1px solid #292929; color: #777; text-align: center; font-size: .75rem; }
  footer { flex-direction: column; align-items: flex-start; }
  .detail-modal { padding: 24px 18px 20px; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* Einheitliches Vollbildlayout und ruhige Dialogübergänge */
html { scrollbar-gutter: stable; }
.roster-board { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.roster-panel { width: 100%; }
.roster-panel table, .organization-panel table { width: 100%; min-width: 900px; }
.roster-panel th:nth-child(1) { width: 18%; }
.roster-panel th:nth-child(2) { width: 19%; }
.roster-panel th:nth-child(3) { width: 13%; }
.roster-panel th:nth-child(4) { width: 22%; }
.roster-panel th:nth-child(5) { width: 20%; }
.roster-panel th:nth-child(6) { width: 8%; }
.detail-dialog.is-closing, .logo-dialog.is-closing { animation: public-dialog-out .18s ease-in forwards; }
.detail-dialog.is-closing::backdrop, .logo-dialog.is-closing::backdrop { animation: public-backdrop-out .18s ease-in forwards; }
@keyframes public-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes public-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Moderne Vollansicht: klarere Karten, mehr Tiefe, weiche Bewegung */
.detail-dialog {
  width: min(820px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  overflow: hidden;
  border: 1px solid rgba(244,196,48,.34);
  border-radius: 24px;
  color: white;
  background:
    radial-gradient(circle at 86% -8%, rgba(244,196,48,.18), transparent 32%),
    radial-gradient(circle at 0 100%, rgba(255,255,255,.055), transparent 30%),
    linear-gradient(145deg, #171717, #0b0b0b 74%);
  box-shadow: 0 34px 120px rgba(0,0,0,.86), 0 0 0 8px rgba(244,196,48,.045);
}
.detail-dialog::backdrop {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(7px) saturate(.85);
}
.detail-modal {
  position: relative;
  padding: clamp(26px, 4vw, 46px);
  overflow: hidden;
}
.detail-modal::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -185px;
  top: -205px;
  border: 34px solid rgba(244,196,48,.055);
  border-radius: 50%;
  pointer-events: none;
}
.detail-close {
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(145deg, #2b2b2b, #171717);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.32);
}
.detail-close:hover,
.detail-close:focus-visible {
  border-color: var(--yellow);
  transform: rotate(90deg) scale(1.04);
}
.detail-kicker {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 58px 12px 0;
  border: 1px solid rgba(244,196,48,.34);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--yellow);
  background: rgba(244,196,48,.08);
  box-shadow: 0 0 20px rgba(244,196,48,.06);
  letter-spacing: .14em;
}
.detail-modal > h2 {
  position: relative;
  z-index: 1;
  max-width: 650px;
  padding-right: 58px;
  font-size: clamp(2rem, 5vw, 3.65rem);
  letter-spacing: -.045em;
  text-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.detail-summary {
  position: relative;
  z-index: 1;
  margin: 12px 0 26px;
  color: #d2d2d2;
  font-size: .95rem;
}
.detail-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.detail-field {
  position: relative;
  min-height: 104px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 17px 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.022)),
    rgba(29,31,33,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 35px rgba(0,0,0,.18);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.detail-field:hover {
  border-color: rgba(244,196,48,.55);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.27);
}
.detail-field::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: rgba(244,196,48,.72);
  box-shadow: 0 0 13px rgba(244,196,48,.45);
}
.detail-field dt {
  margin-bottom: 10px;
  color: #9fa3a7;
  font-size: .66rem;
  letter-spacing: .11em;
}
.detail-field dd {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.35;
}
.detail-field dd.detail-empty { color: #777; }
.detail-field dd.detail-validity {
  min-width: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .9rem;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.detail-field-telefon .copy-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(244,196,48,.32);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--yellow);
  background: rgba(244,196,48,.08);
  text-decoration: none;
}
.detail-field-telefon .copy-phone::after {
  content: "kopieren";
  color: #8f8f8f;
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.detail-field-telefon .copy-phone:hover,
.detail-field-telefon .copy-phone:focus-visible {
  border-color: var(--yellow);
  color: #fff;
  background: rgba(244,196,48,.16);
  transform: translateY(-1px);
}
.detail-field-zusatz {
  grid-column: 1 / -1;
}
.category-detail-list {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.025);
}
.category-person {
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
}

@media (max-width: 700px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-field-zusatz { grid-column: auto; }
}

/* Detailfenster-Korrektur: Zusatz bleibt sichtbar und Dialog scrollt sauber im Fenster */
.person-detail-dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  overflow: hidden;
}
.person-detail-dialog .detail-modal {
  max-height: calc(100svh - 28px);
  overflow-y: auto;
  padding: clamp(24px, 3.4vw, 40px);
  scrollbar-gutter: stable;
}
.person-detail-dialog .detail-modal > h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}
.person-detail-dialog .detail-summary {
  margin-bottom: 20px;
}
.person-detail-dialog .detail-grid {
  gap: 12px;
  padding: 2px 4px 4px 0;
}
.person-detail-dialog .detail-field {
  min-height: 92px;
  padding: 15px 17px;
}
.person-detail-dialog .detail-field-zusatz {
  min-height: 82px;
  background:
    linear-gradient(145deg, rgba(244,196,48,.075), rgba(255,255,255,.022)),
    rgba(29,31,33,.92);
}
.person-detail-dialog .detail-field-zusatz dd {
  white-space: pre-wrap;
}
.detail-dialog[open] .detail-field,
.detail-dialog[open] .category-person {
  animation: public-card-in .24s ease-out both;
}
@keyframes public-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Finale Detailfenster-Feinheit: Justiz-Zusatz bleibt direkt sichtbar */
.person-detail-dialog {
  width: min(940px, calc(100vw - 30px));
}
.person-detail-dialog .detail-modal {
  padding: clamp(22px, 2.8vw, 34px);
}
.person-detail-dialog .detail-modal > h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: .98;
}
.person-detail-dialog .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.person-detail-dialog .detail-field {
  min-height: 86px;
  padding: 14px 16px;
}
.person-detail-dialog .detail-field-zusatz {
  grid-column: auto;
  min-height: 86px;
}
.person-detail-dialog .detail-field-zusatz dd {
  max-height: 84px;
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 760px) {
  .person-detail-dialog .detail-grid {
    grid-template-columns: 1fr;
  }
  .person-detail-dialog .detail-field-zusatz {
    grid-column: 1 / -1;
  }
}

/* Finale Tabellen- und Dialog-Anpassungen */
.lawyers-panel th:nth-child(4),
.organization-panel th:nth-child(4),
.justice-panel th:nth-child(4) { width: 16%; }
.lawyers-panel th:nth-child(5),
.organization-panel th:nth-child(5),
.justice-panel th:nth-child(5) { width: 20%; }
.lawyers-panel th:nth-child(6),
.organization-panel th:nth-child(6),
.justice-panel th:nth-child(6) { width: 22%; }
td:nth-child(6) { text-align: left; }
.validity-cell { text-align: center; }

.person-expired-dialog {
  border-color: rgba(224, 27, 24, .62);
  box-shadow: 0 34px 130px rgba(0,0,0,.9), 0 0 0 8px rgba(224,27,24,.08), 0 0 48px rgba(224,27,24,.22);
}
.person-expired-dialog .detail-modal {
  background:
    radial-gradient(circle at 86% 2%, rgba(224,27,24,.22), transparent 32%),
    radial-gradient(circle at 0 100%, rgba(224,27,24,.12), transparent 30%),
    linear-gradient(145deg, rgba(35,10,10,.72), rgba(9,9,9,.92));
}
.person-expired-dialog .detail-kicker {
  border-color: rgba(255,93,85,.5);
  color: #ffb3ad;
  background: rgba(224,27,24,.16);
}
.person-expired-dialog .detail-field {
  border-color: rgba(255,93,85,.2);
  background:
    linear-gradient(145deg, rgba(255,70,60,.08), rgba(255,255,255,.018)),
    rgba(31,25,25,.94);
}
.person-expired-dialog .detail-field::before {
  background: #e01b18;
  box-shadow: 0 0 16px rgba(224,27,24,.62);
}
.person-expired-dialog .detail-summary {
  color: #ffd2ce;
}

.copy-confirm-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 0;
  border-radius: 20px;
  padding: 0;
  color: white;
  background: transparent;
}
.copy-confirm-dialog::backdrop {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}
.copy-confirm-dialog[open] { animation: public-dialog-in .2s cubic-bezier(.2,.75,.25,1); }
.copy-confirm-dialog[open]::backdrop { animation: public-backdrop-in .2s ease-out; }
.copy-confirm-dialog.is-closing { animation: public-dialog-out .18s ease-in forwards; }
.copy-confirm-dialog.is-closing::backdrop { animation: public-backdrop-out .18s ease-in forwards; }
.copy-confirm-card {
  min-height: 225px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(87,210,92,.46);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(70,180,73,.46), #10240f 72%);
  box-shadow: 0 30px 100px rgba(0,0,0,.74), 0 0 0 8px rgba(87,210,92,.08);
}
.copy-confirm-error .copy-confirm-card {
  border-color: rgba(224,27,24,.55);
  background: radial-gradient(circle at 50% 0, rgba(224,27,24,.42), #27100f 72%);
  box-shadow: 0 30px 100px rgba(0,0,0,.74), 0 0 0 8px rgba(224,27,24,.08);
}
.copy-confirm-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #09140a;
  background: #68e05b;
  font-size: 2rem;
  font-weight: 950;
  box-shadow: 0 0 0 10px rgba(104,224,91,.11), 0 0 30px rgba(104,224,91,.42);
}
.copy-confirm-error .copy-confirm-icon {
  color: white;
  background: #e01b18;
  box-shadow: 0 0 0 10px rgba(224,27,24,.12), 0 0 30px rgba(224,27,24,.42);
}
.copy-confirm-kicker {
  margin: 6px 0 0;
  color: var(--yellow);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.copy-confirm-title {
  margin: 0;
  font-size: 1.8rem;
}
.copy-confirm-text {
  margin: 0;
  color: #cdd8ca;
  font-size: .88rem;
}

.logo-dialog {
  width: min(720px, 78vmin);
  max-height: calc(100svh - 28px);
  overflow: visible;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.logo-dialog img {
  width: 100%;
  aspect-ratio: 1;
  max-height: calc(100svh - 38px);
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 32px 110px rgba(0,0,0,.86), 0 0 0 1px rgba(244,196,48,.28), 0 0 45px rgba(244,196,48,.18);
}
.logo-dialog-close {
  top: 8px;
  right: 8px;
}
.design-credit,
.developer-credit-trigger {
  text-transform: none !important;
}

/* Letzter Feinschliff: mehr Platz für Zusatz, runde Logoansicht und klare Detail-/Kopierdialoge */
.roster-panel table,
.organization-panel table,
.justice-panel table {
  table-layout: fixed;
  min-width: 860px;
}
.lawyers-panel :is(th, td):nth-child(1),
.organization-panel :is(th, td):nth-child(1) { width: 18%; }
.lawyers-panel :is(th, td):nth-child(2),
.organization-panel :is(th, td):nth-child(2) { width: 17%; }
.lawyers-panel :is(th, td):nth-child(3),
.organization-panel :is(th, td):nth-child(3) { width: 12%; }
.lawyers-panel :is(th, td):nth-child(4),
.organization-panel :is(th, td):nth-child(4) { width: 14%; }
.lawyers-panel :is(th, td):nth-child(5),
.organization-panel :is(th, td):nth-child(5) { width: 19%; }
.lawyers-panel :is(th, td):nth-child(6),
.organization-panel :is(th, td):nth-child(6) { width: 20%; }
.justice-panel :is(th, td):nth-child(1) { width: 17%; }
.justice-panel :is(th, td):nth-child(2) { width: 18%; }
.justice-panel :is(th, td):nth-child(3) { width: 12%; }
.justice-panel :is(th, td):nth-child(4) { width: 14%; }
.justice-panel :is(th, td):nth-child(5) { width: 19%; }
.justice-panel :is(th, td):nth-child(6) { width: 20%; }
.roster-panel :is(th, td):nth-child(4) {
  font-size: .9em;
}
.roster-panel td:nth-child(6) {
  text-align: left;
  font-size: .96em;
}

.person-detail-dialog .detail-grid {
  align-items: stretch;
}
.person-detail-dialog .detail-field-telefon dt::after {
  content: "";
}
.person-detail-dialog .detail-field-zusatz {
  min-height: 96px;
}
.person-expired-dialog .detail-modal {
  outline: 1px solid rgba(255, 78, 68, .18);
}
.person-expired-dialog .detail-title,
.person-expired-dialog #detail-title {
  text-shadow: 0 0 24px rgba(224, 27, 24, .28);
}
.person-expired-dialog .detail-field-gultigkeit_ablauf dd {
  background: #d40000 !important;
  color: #fff !important;
}

.copy-confirm-dialog {
  z-index: 9999;
}
.copy-confirm-card {
  border-radius: 24px;
}

.logo-dialog {
  width: min(680px, 76vmin);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.logo-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}
.logo-dialog img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50% !important;
  clip-path: circle(49% at 50% 50%);
  object-fit: cover;
}

/* Aktuelle Statuskorrekturen */
.validity-blocked,
.validity-cell.validity-blocked,
.validity-badge.validity-blocked {
  color: #fff !important;
  background: #d40000 !important;
}

.blocked-person td,
.blocked-person dd {
  color: #efefef;
}

.blocked-person .validity-cell {
  font-weight: 950;
}

.person-detail-dialog .detail-field-telefon dt {
  display: none;
}

.person-detail-dialog .detail-field-telefon {
  align-content: center;
}

/* Letzte Zusatz-Korrektur: Zusatzspalte bleibt normal lesbar */
.blocked-person td:nth-child(6) {
  text-decoration: none !important;
  opacity: 1 !important;
  color: #efefef !important;
}

/* Finale Bewegungen und stabile Fensterbreite */
:root {
  --soft-fade-duration: 220ms;
  --soft-fade-ease: cubic-bezier(.22, .75, .24, 1);
}

html:has(dialog[open]),
body:has(dialog[open]) {
  overflow-x: clip !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}

.detail-dialog[open],
.logo-dialog[open],
.copy-confirm-dialog[open],
.developer-dialog[open] {
  animation: soft-dialog-in var(--soft-fade-duration) var(--soft-fade-ease) both !important;
  overscroll-behavior: contain;
}

.detail-dialog.is-closing,
.logo-dialog.is-closing,
.copy-confirm-dialog.is-closing,
.developer-dialog.is-closing {
  animation: soft-dialog-out var(--soft-fade-duration) var(--soft-fade-ease) both !important;
}

.detail-dialog[open]::backdrop,
.logo-dialog[open]::backdrop,
.copy-confirm-dialog[open]::backdrop,
.developer-dialog[open]::backdrop {
  animation: soft-backdrop-in var(--soft-fade-duration) var(--soft-fade-ease) both !important;
}

.detail-dialog.is-closing::backdrop,
.logo-dialog.is-closing::backdrop,
.copy-confirm-dialog.is-closing::backdrop,
.developer-dialog.is-closing::backdrop {
  animation: soft-backdrop-out var(--soft-fade-duration) var(--soft-fade-ease) both !important;
}

@keyframes soft-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes soft-dialog-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.985); }
}

@keyframes soft-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes soft-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Zusatz bleibt auch bei gesperrten Personen normal lesbar */
.blocked-person td:nth-child(6) {
  text-decoration: none !important;
  opacity: 1 !important;
  color: #efefef !important;
}

.logo-dialog-close,
.detail-close {
  transition:
    color var(--soft-fade-duration) var(--soft-fade-ease),
    border-color var(--soft-fade-duration) var(--soft-fade-ease),
    background var(--soft-fade-duration) var(--soft-fade-ease),
    box-shadow var(--soft-fade-duration) var(--soft-fade-ease),
    transform var(--soft-fade-duration) var(--soft-fade-ease) !important;
}

.logo-dialog-close:hover,
.logo-dialog-close:focus-visible,
.detail-close:hover,
.detail-close:focus-visible {
  color: #fff !important;
  border-color: rgba(255,70,62,.95) !important;
  background: linear-gradient(145deg, #c9342d, #64110e) !important;
  box-shadow: 0 0 0 3px rgba(255,70,62,.16), 0 0 22px rgba(255,55,47,.46), inset 0 1px 0 rgba(255,255,255,.18) !important;
  outline: none !important;
  transform: rotate(90deg) scale(1.06) !important;
}

.logo-dialog-close:active,
.detail-close:active {
  transform: rotate(90deg) scale(.96) !important;
}

dialog.logo-dialog:not([open]) {
  display: none !important;
}

/* Aktuelle Abschlusskorrekturen */
dialog.logo-dialog[open] {
  position: fixed !important;
  inset: auto !important;
  left: 50vw !important;
  top: 50svh !important;
  margin: 0 !important;
  translate: -50% -50% !important;
  display: grid !important;
  place-items: center !important;
  width: min(720px, calc(100vw - 32px), calc(100svh - 32px)) !important;
  height: min(720px, calc(100vw - 32px), calc(100svh - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100svh - 32px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

dialog.logo-dialog::backdrop {
  background: rgba(0, 0, 0, .86) !important;
  backdrop-filter: blur(5px) !important;
}

dialog.logo-dialog img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  clip-path: none !important;
  object-fit: contain !important;
  image-rendering: auto;
  filter: drop-shadow(0 34px 76px rgba(0,0,0,.82)) drop-shadow(0 0 28px rgba(244,196,48,.24)) !important;
}

dialog.logo-dialog .logo-dialog-close {
  top: 4% !important;
  right: 4% !important;
}

.copy-confirm-kicker,
.person-detail-dialog .detail-field-telefon dt,
.person-detail-dialog .detail-field-telefon dt::before,
.person-detail-dialog .detail-field-telefon dt::after {
  display: none !important;
  content: none !important;
}

.blocked-person td:not(.validity-cell),
.person-card.blocked-person {
  text-decoration: line-through !important;
  opacity: .62;
}

/* Letzte sichtbare Korrektur: DOJ-Logo immer als zentriertes Modal und Telefon-Text komplett raus */
.logo-dialog[open] {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  display: grid !important;
  place-items: center !important;
  width: min(560px, 54vmin) !important;
  max-width: calc(100vw - 36px) !important;
  height: min(560px, 54vmin) !important;
  max-height: calc(100svh - 36px) !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.logo-dialog img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  clip-path: circle(49.5% at 50% 50%) !important;
  object-fit: cover !important;
  filter: drop-shadow(0 28px 58px rgba(0,0,0,.76)) drop-shadow(0 0 22px rgba(244,196,48,.22));
}

.logo-dialog-close {
  top: 5% !important;
  right: 5% !important;
}

.person-detail-dialog .detail-field-telefon dt,
.person-detail-dialog .detail-field-telefon dt::before,
.person-detail-dialog .detail-field-telefon dt::after {
  display: none !important;
  content: none !important;
}

.person-blocked-dialog .detail-modal {
  border-color: rgba(255, 40, 34, .55);
  box-shadow: 0 42px 140px rgba(0,0,0,.86), 0 0 70px rgba(230,0,0,.16);
}

/* Finale sichtbare Korrekturen */
.person-valid-dialog {
  border-color: rgba(104, 229, 55, .45);
  box-shadow: 0 34px 130px rgba(0,0,0,.9), 0 0 0 8px rgba(104,229,55,.055), 0 0 44px rgba(104,229,55,.16);
}
.person-valid-dialog .detail-modal {
  outline: 1px solid rgba(104, 229, 55, .12);
  background:
    radial-gradient(circle at 86% 3%, rgba(96, 225, 52, .15), transparent 32%),
    radial-gradient(circle at 2% 100%, rgba(96, 225, 52, .08), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(9,9,9,.98)) !important;
}
.person-valid-dialog .detail-kicker {
  border-color: rgba(104,229,55,.48);
  color: #c6ff9b;
  background: rgba(60,190,35,.12);
}
.person-valid-dialog .detail-summary {
  color: #caffad;
  font-weight: 900;
}
.person-valid-dialog .detail-field {
  border-color: rgba(104,229,55,.18);
}
.person-valid-dialog .detail-field::before {
  background: #69e53a;
  box-shadow: 0 0 16px rgba(104,229,55,.5);
}
.person-valid-dialog .detail-field-gultigkeit_ablauf dd {
  background: #63d83c !important;
  color: #061700 !important;
}
.person-detail-dialog .detail-field-telefon dt {
  display: block !important;
}
.person-detail-dialog .detail-field-telefon dt::before {
  content: "";
}
.person-detail-dialog .detail-field-telefon dt {
  font-size: .66rem;
  letter-spacing: .11em;
}
.logo-dialog[open] {
  inset: auto 0 54px 0 !important;
  margin: auto !important;
}
.logo-dialog {
  width: min(600px, 58vmin) !important;
  max-height: min(600px, calc(100svh - 94px)) !important;
}
.design-credit .developer-credit-trigger {
  gap: 10px;
}
.design-credit .developer-credit-logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

/* Finale Korrektur: Logo wieder mittig, Telefon-Label raus, gültig/abgelaufen bleibt lesbar */
.logo-dialog[open] {
  inset: 0 !important;
  margin: auto !important;
}
.logo-dialog {
  width: min(600px, 54vmin) !important;
  max-height: min(600px, calc(100svh - 44px)) !important;
}
.person-detail-dialog .detail-field-telefon dt {
  display: none !important;
}
.person-detail-dialog .detail-field-telefon {
  align-content: center;
}

/* Abschlussfeinschliff: Dialoge ohne Seiten-Sprung, X nur bei Hover rot */
html.dialog-scroll-lock,
html.dialog-scroll-lock:has(dialog[open]) {
  overflow: hidden !important;
  scrollbar-gutter: stable !important;
}

body.dialog-scroll-lock,
body.dialog-scroll-lock:has(dialog[open]) {
  position: fixed !important;
  top: var(--dialog-scroll-top, 0px) !important;
  left: 0 !important;
  right: var(--dialog-scrollbar-width, 0px) !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.dialog-scroll-lock .app-shell {
  min-width: 0 !important;
}

.logo-dialog-close:focus-visible:not(:hover),
.detail-close:focus-visible:not(:hover) {
  color: #fff !important;
  border-color: rgba(244,196,48,.48) !important;
  background: linear-gradient(145deg, #2c2c2c, #1b1b1b) !important;
  box-shadow: 0 0 0 3px rgba(244,196,48,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
  outline: none !important;
  transform: none !important;
}

.logo-dialog-close:hover,
.detail-close:hover {
  color: #fff !important;
  border-color: rgba(255,70,62,.95) !important;
  background: linear-gradient(145deg, #c9342d, #64110e) !important;
  box-shadow: 0 0 0 3px rgba(255,70,62,.16), 0 0 22px rgba(255,55,47,.46), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: rotate(90deg) scale(1.06) !important;
}

.validity-cell.validity-blocked,
.validity-badge.validity-blocked,
.person-blocked-dialog .detail-field-gultigkeit_ablauf dd {
  min-width: 0;
  color: #fff !important;
  background: linear-gradient(135deg, #ec1717, #b60000) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(120,0,0,.24) !important;
}

/* Finale Stabilisierung: Hintergrundtabelle bleibt beim Oeffnen von Details gleich breit */
html,
body {
  scrollbar-gutter: stable !important;
}

html.dialog-scroll-lock,
body.dialog-scroll-lock,
body.dialog-scroll-lock:has(dialog[open]) {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 320px !important;
  overflow: hidden !important;
  scrollbar-gutter: stable !important;
}

.app-shell,
body.dialog-scroll-lock .app-shell {
  width: 100vw !important;
  max-width: 100vw !important;
}

.roster-board,
body.dialog-scroll-lock .roster-board {
  width: 100% !important;
}

/* Letzte Korrektur: Haupttabellen ohne horizontale Scrollleiste */
.table-scroll {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

.table-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* v12 final override: gewinnt gegen alle alten Tabellen- und Reload-Regeln */
.refresh-button .refresh-icon {
  transform: scaleX(-1) !important;
}

.refresh-button.spinning .refresh-icon {
  animation: refresh-spin-mirrored .8s linear infinite !important;
}

.roster-panel tbody tr.public-stripe-a td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.blocked-person td:not(.validity-cell) {
  background: #707377 !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-b td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.blocked-person td:not(.validity-cell) {
  background: #202326 !important;
  opacity: 1 !important;
}

/* v15 final: Haupttabelle zuletzt auf Admin-Grautöne setzen */
:root {
  --row-a: #4a4a4a;
  --row-b: #707070;
}

.roster-panel tbody tr.public-stripe-a td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.blocked-person td:not(.validity-cell) {
  background: #4a4a4a !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-b td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.blocked-person td:not(.validity-cell) {
  background: #707070 !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-a td:nth-child(6),
.roster-panel tbody tr.public-stripe-a.blocked-person td:nth-child(6),
.roster-panel tbody tr.public-stripe-a.expired-person td:nth-child(6) {
  background: #4a4a4a !important;
}

.roster-panel tbody tr.public-stripe-b td:nth-child(6),
.roster-panel tbody tr.public-stripe-b.blocked-person td:nth-child(6),
.roster-panel tbody tr.public-stripe-b.expired-person td:nth-child(6) {
  background: #707070 !important;
}

.roster-panel .validity-cell.validity-blocked {
  min-width: 0 !important;
  padding-inline: 5px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 950 !important;
}

/* v14: Haupttabelle nutzt exakt die Grauwerte der Admin-Tabelle */
:root {
  --row-a: #4a4a4a;
  --row-b: #707070;
}

.roster-panel tbody tr.public-stripe-a td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.blocked-person td:not(.validity-cell) {
  background: #4a4a4a !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-b td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.blocked-person td:not(.validity-cell) {
  background: #707070 !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-a td:nth-child(6),
.roster-panel tbody tr.public-stripe-a.blocked-person td:nth-child(6),
.roster-panel tbody tr.public-stripe-a.expired-person td:nth-child(6) {
  background: #4a4a4a !important;
}

.roster-panel tbody tr.public-stripe-b td:nth-child(6),
.roster-panel tbody tr.public-stripe-b.blocked-person td:nth-child(6),
.roster-panel tbody tr.public-stripe-b.expired-person td:nth-child(6) {
  background: #707070 !important;
}

/* v13: ruhigere Haupttabelle, dunkler Durchstrich und Sperrtext in einer Zeile */
.roster-panel tbody tr.public-stripe-a td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.blocked-person td:not(.validity-cell) {
  background: #55585a !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-b td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.blocked-person td:not(.validity-cell) {
  background: #303335 !important;
  opacity: 1 !important;
}

.expired-person td:not(.validity-cell),
.blocked-person td:not(.validity-cell) {
  text-decoration-color: rgba(0,0,0,.88) !important;
  text-decoration-thickness: 2px !important;
  text-decoration-skip-ink: none !important;
}

.roster-panel .validity-cell.validity-blocked {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  padding-inline: 4px !important;
  font-size: clamp(.62rem, .72vw, .82rem) !important;
  line-height: 1.05 !important;
}

/* v12: klare Hell/Dunkel-Streifen und gespiegeltes Reload-Symbol */
:root {
  --public-row-light: #707377;
  --public-row-dark: #202326;
}

.refresh-button .refresh-icon {
  transform: scaleX(-1) !important;
}

.refresh-button.spinning .refresh-icon {
  animation: refresh-spin-mirrored .8s linear infinite !important;
}

@keyframes refresh-spin-mirrored {
  from { transform: scaleX(-1) rotate(0deg); }
  to { transform: scaleX(-1) rotate(360deg); }
}

.roster-panel tbody tr.public-stripe-a td:not(.validity-cell) {
  background: var(--public-row-light) !important;
}

.roster-panel tbody tr.public-stripe-b td:not(.validity-cell) {
  background: var(--public-row-dark) !important;
}

.expired-person td:not(.validity-cell),
.blocked-person td:not(.validity-cell) {
  opacity: 1 !important;
}

/* Final: neues Refresh-Logo und fortlaufende Tabellenstreifen */
.refresh-button .refresh-icon {
  width: 24px !important;
  height: 24px !important;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.28));
  transform-origin: center;
}

.refresh-button.spinning .refresh-icon {
  animation: spin .8s linear infinite;
}

.refresh-button svg {
  display: none !important;
}

.roster-panel tbody tr.public-stripe-a td:not(.validity-cell) {
  background: var(--row-a) !important;
}

.roster-panel tbody tr.public-stripe-b td:not(.validity-cell) {
  background: var(--row-b) !important;
}

/* Refresh ruhig halten: keine Sprung-Scrollbar, Button moderner */
.roster-board.is-refreshing {
  opacity: .96;
}

.refresh-button {
  min-width: 138px !important;
  gap: 9px !important;
  border-color: rgba(244,196,48,.45) !important;
  border-radius: 6px !important;
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(244,196,48,.16), rgba(255,255,255,.055)),
    #222 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.2) !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.refresh-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255,231,92,.82) !important;
  background:
    linear-gradient(135deg, rgba(255,219,76,.28), rgba(255,255,255,.08)),
    #27230f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(244,196,48,.16) !important;
}

.refresh-button svg {
  width: 22px !important;
  height: 22px !important;
  padding: 4px;
  border-radius: 50%;
  color: #151000;
  background: linear-gradient(135deg, #fff36b, #f4c430);
  stroke-width: 2.4 !important;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.28));
  transform-origin: center;
}

.refresh-button.spinning svg {
  animation: spin .8s linear infinite;
}

.roster-panel table,
.organization-panel table,
.justice-panel table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.roster-panel th,
.roster-panel td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Finale Korrektur: keine untere Seiten-Scrollbar auf der Hauptseite */
html,
body {
  overflow-x: hidden !important;
}

.app-shell,
body.dialog-scroll-lock .app-shell {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

main,
.roster-board,
.roster-panel,
.table-scroll {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.table-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* v12 final override: gewinnt gegen alle alten Tabellen- und Reload-Regeln */
.refresh-button .refresh-icon {
  transform: scaleX(-1) !important;
}

.refresh-button.spinning .refresh-icon {
  animation: refresh-spin-mirrored .8s linear infinite !important;
}

.roster-panel tbody tr.public-stripe-a td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-a.blocked-person td:not(.validity-cell) {
  background: #4a4a4a !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-b td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.expired-person td:not(.validity-cell),
.roster-panel tbody tr.public-stripe-b.blocked-person td:not(.validity-cell) {
  background: #707070 !important;
  opacity: 1 !important;
}

.roster-panel tbody tr.public-stripe-a td:nth-child(6),
.roster-panel tbody tr.public-stripe-a.blocked-person td:nth-child(6),
.roster-panel tbody tr.public-stripe-a.expired-person td:nth-child(6) {
  background: #4a4a4a !important;
}

.roster-panel tbody tr.public-stripe-b td:nth-child(6),
.roster-panel tbody tr.public-stripe-b.blocked-person td:nth-child(6),
.roster-panel tbody tr.public-stripe-b.expired-person td:nth-child(6) {
  background: #707070 !important;
}

.roster-panel .validity-cell {
  font-size: .92em !important;
  line-height: 1.15 !important;
}

.roster-panel .validity-cell.validity-blocked {
  min-width: 0 !important;
  padding-inline: 5px !important;
  color: #fff !important;
  background: #d40000 !important;
  font-size: .92em !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-decoration-color: rgba(0,0,0,.88) !important;
  box-shadow: none !important;
}

/* v17: Sperrtext gleich gross wie die normale Gueltigkeit, Lade-Logo ausblenden */
.state-panel .spinner {
  display: none !important;
}

.roster-panel .validity-cell.validity-blocked,
.roster-panel tbody tr.blocked-person .validity-cell.validity-blocked {
  min-width: 0 !important;
  color: #fff !important;
  background: #d40000 !important;
  border-color: #050505 !important;
  box-shadow: none !important;
  font-size: .92em !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}


/* v18: softer motion and normal-weight validity text */
:root {
  --soft-fade-duration: 280ms;
  --soft-fade-ease: cubic-bezier(.2, .82, .22, 1);
}

html.page-entered body {
  animation: public-page-in var(--soft-fade-duration) var(--soft-fade-ease) both !important;
}

.detail-dialog[open],
.logo-dialog[open],
.copy-confirm-dialog[open],
.developer-dialog[open] {
  animation: soft-dialog-in var(--soft-fade-duration) var(--soft-fade-ease) both !important;
}

.detail-dialog.is-closing,
.logo-dialog.is-closing,
.copy-confirm-dialog.is-closing,
.developer-dialog.is-closing {
  animation: soft-dialog-out var(--soft-fade-duration) var(--soft-fade-ease) both !important;
}

button,
input,
.roster-panel,
.interactive-row,
.category-person,
.person-card,
.detail-field,
.detail-close,
.logo-dialog-close,
.validity-cell,
.validity-badge {
  transition:
    color var(--soft-fade-duration) var(--soft-fade-ease),
    background-color var(--soft-fade-duration) var(--soft-fade-ease),
    border-color var(--soft-fade-duration) var(--soft-fade-ease),
    box-shadow var(--soft-fade-duration) var(--soft-fade-ease),
    opacity var(--soft-fade-duration) var(--soft-fade-ease),
    transform var(--soft-fade-duration) var(--soft-fade-ease),
    filter var(--soft-fade-duration) var(--soft-fade-ease) !important;
}

.roster-panel .validity-cell,
.roster-panel .validity-cell.validity-expired,
.roster-panel .validity-cell.validity-critical,
.roster-panel .validity-cell.validity-warning,
.roster-panel .validity-cell.validity-attention,
.roster-panel .validity-cell.validity-good,
.roster-panel .validity-cell.validity-blocked,
.roster-panel tbody tr.blocked-person .validity-cell.validity-blocked,
.validity-badge,
.validity-badge.validity-blocked,
.detail-field dd.detail-validity,
.person-blocked-dialog .detail-field-gultigkeit_ablauf dd {
  font-weight: 400 !important;
}

/* v24: oeffentlicher Aktualisieren-Button komplett ohne Gelb */
#refresh-button.refresh-button,
#refresh-button.refresh-button:hover,
#refresh-button.refresh-button:focus,
#refresh-button.refresh-button:focus-visible,
#refresh-button.refresh-button:active,
#refresh-button.refresh-button:disabled,
.header-tools #refresh-button.refresh-button,
.header-tools #refresh-button.refresh-button:hover,
.header-tools #refresh-button.refresh-button:focus-visible,
.header-tools #refresh-button.refresh-button:active {
  min-width: 138px !important;
  color: #f4f4f4 !important;
  border-color: #626262 !important;
  background: #202020 !important;
  background-image: linear-gradient(145deg, #2b2b2b, #151515) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.24) !important;
  outline: none !important;
  filter: none !important;
}

#refresh-button.refresh-button:hover,
#refresh-button.refresh-button:focus-visible {
  border-color: #7a7a7a !important;
  background: #262626 !important;
  background-image: linear-gradient(145deg, #333, #1b1b1b) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px rgba(0,0,0,.28) !important;
}

#refresh-button.refresh-button .refresh-icon,
#refresh-button.refresh-button:hover .refresh-icon,
#refresh-button.refresh-button:focus-visible .refresh-icon,
#refresh-button.refresh-button:active .refresh-icon,
#refresh-button.refresh-button svg,
#refresh-button.refresh-button:hover svg,
#refresh-button.refresh-button:focus-visible svg {
  color: #f4f4f4 !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.28)) !important;
}

/* v36: genau eine Seiten-Scrollbar und kein Layoutsprung bei Dialogen */
html {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  scrollbar-gutter: auto !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  scrollbar-gutter: auto !important;
}

html.dialog-scroll-lock,
html.dialog-scroll-lock:has(dialog[open]) {
  position: static !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-gutter: auto !important;
}

body.dialog-scroll-lock,
body.dialog-scroll-lock:has(dialog[open]) {
  position: fixed !important;
  top: var(--dialog-scroll-top, 0px) !important;
  left: 0 !important;
  right: var(--dialog-scrollbar-width, 0px) !important;
  width: auto !important;
  min-width: 320px !important;
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}

body.dialog-scroll-lock .app-shell {
  width: 100% !important;
  max-width: 100% !important;
}

/* Auswahlrahmen bleibt per Maus und normalem Tab-Fokus erhalten */
.interactive-row:focus {
  outline: none !important;
}

.category-button:hover,
.category-button:focus-visible {
  background: #4a4748 !important;
  outline: 3px solid var(--yellow) !important;
  outline-offset: -3px !important;
}

.interactive-row:hover,
.interactive-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--yellow) !important;
  outline-offset: -3px !important;
}

.interactive-row:hover td,
.interactive-row:focus-visible td {
  filter: brightness(1.09);
  box-shadow:
    inset 0 3px 0 var(--yellow),
    inset 0 -3px 0 var(--yellow) !important;
}

.interactive-row:hover td:first-child,
.interactive-row:focus-visible td:first-child {
  box-shadow:
    inset 3px 0 0 var(--yellow),
    inset 0 3px 0 var(--yellow),
    inset 0 -3px 0 var(--yellow) !important;
}

.interactive-row:hover td:last-child,
.interactive-row:focus-visible td:last-child {
  box-shadow:
    inset -3px 0 0 var(--yellow),
    inset 0 3px 0 var(--yellow),
    inset 0 -3px 0 var(--yellow) !important;
}

.roster-panel tbody tr.blocked-person:hover .validity-cell.validity-blocked,
.roster-panel tbody tr.blocked-person:focus-visible .validity-cell.validity-blocked {
  box-shadow:
    inset 0 3px 0 var(--yellow),
    inset 0 -3px 0 var(--yellow) !important;
}

.category-person:focus-visible {
  border-color: var(--yellow) !important;
  background: #2b2e31 !important;
  outline: 3px solid var(--yellow) !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 1px rgba(244,196,48,.18), 0 0 18px rgba(244,196,48,.22) !important;
}

/* v37: Dialog selbst statt Schliessen-X fokussieren, ohne sichtbare Markierung */
.detail-dialog:focus,
.logo-dialog:focus,
.copy-confirm-dialog:focus {
  outline: none !important;
}

/* v44: Der gelbe Zeilenrahmen verschwindet in jeder Zelle gleichzeitig. */
.roster-panel .interactive-row .validity-cell {
  transition:
    color var(--soft-fade-duration) var(--soft-fade-ease),
    background-color var(--soft-fade-duration) var(--soft-fade-ease),
    filter .08s linear !important;
}

/* v40: Beim Oeffnen eines Fensters bleibt der Hintergrund exakt an seiner Position. */
body.dialog-scroll-lock,
body.dialog-scroll-lock:has(dialog[open]) {
  left: var(--dialog-body-left, 0px) !important;
  right: auto !important;
  width: var(--dialog-body-width, 100%) !important;
  max-width: none !important;
}

/* v41: Der Kreis der grossen Siegelansicht folgt dem eigentlichen Siegelrand. */
dialog.logo-dialog[open] {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

dialog.logo-dialog img {
  clip-path: circle(45.5% at 50.2% 48.2%) !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  filter: drop-shadow(0 28px 58px rgba(0,0,0,.78)) drop-shadow(0 0 24px rgba(244,196,48,.22)) !important;
}

dialog.logo-dialog .logo-dialog-close {
  z-index: 5 !important;
}