* { box-sizing: border-box; }
:root {
  --bg: #f4f6f9; --panel: #fff; --ink: #1c2733; --muted: #6b7a8c;
  --line: #dde3ea; --accent: #2E86DE; --accent-ink: #fff;
  --rot: #d64545; --rot-bg: #fbe7e7; --gelb: #b58a00; --gelb-bg: #fdf3d7;
  --gruen: #2e8b57; --gruen-bg: #e4f4ea; --orange: #e07b00; --orange-bg: #fdeedd; --grau: #66717c; --grau-bg: #eef1f4;
}
body { margin: 0; font: 15px/1.45 "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.muted { color: var(--muted); margin-top: 0; }
.layout { display: flex; min-height: 100vh; min-height: calc(100dvh - 2.9rem); }
aside { width: 240px; flex-shrink: 0; background: #14212f; color: #cfd8e3; padding: 1rem .6rem; }
aside nav a { display: block; color: #cfd8e3; padding: .32rem .6rem; border-radius: 6px; font-size: .92rem; }
aside nav a:hover { background: #223349; color: #fff; }
.navgroup { margin: 1rem .6rem .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #7d8fa5; }
.topmenu { display: none; align-items: center; gap: .15rem; background: #14212f; color: #cfd8e3; padding: .3rem .7rem; position: sticky; top: 0; z-index: 45; }
.topmenu .brand { margin: 0 .8rem 0 .2rem; }
.backbtn { border: 1px solid #2c3f56; }
.tm-item { background: none; border: 0; color: #cfd8e3; font: inherit; font-size: .92rem; padding: .45rem .7rem; border-radius: 7px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.tm-item:hover, .menu.open .tm-item { background: #223349; color: #fff; }
.caret { font-size: .7rem; opacity: .7; }
.menu { position: relative; }
.menuitems { display: none; position: absolute; top: calc(100% + 2px); left: 0; min-width: 260px; max-height: 70vh; overflow: auto; background: #1b2a3c; border: 1px solid #2c3f56; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: .35rem; z-index: 60; }
.menu.open .menuitems, .menu:hover .menuitems { display: block; }
.menuitems a { display: block; color: #cfd8e3; padding: .4rem .6rem; border-radius: 7px; font-size: .92rem; text-decoration: none; }
.menuitems a:hover { background: #223349; color: #fff; }
.tm-spacer { flex: 1; }
.tm-doku { font-size: .8rem; padding: .3rem .55rem; opacity: .8; }
.tm-doku:hover { opacity: 1; }
.topmenu .who { font-size: .85rem; color: #9fb2c9; margin-right: .6rem; }
.navacc details.navsec { margin: .15rem 0; }
.navacc details.navsec > summary { cursor: pointer; list-style: none; padding: .5rem .6rem; border-radius: 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #9fb2c9; background: #1b2a3c; }
.navacc details.navsec > summary::-webkit-details-marker { display: none; }
.navacc details.navsec > summary::after { content: '▾'; float: right; transition: transform .15s; }
.navacc details.navsec[open] > summary { color: #fff; }
.navacc details.navsec[open] > summary::after { transform: rotate(180deg); }
.navacc details.navsec a { margin-left: .3rem; }
aside nav a { display: flex; align-items: center; }
aside nav a .navlabel { line-height: 1.25; }
.ico-svg { width: 15px; height: 15px; margin-right: 8px; flex-shrink: 0; color: #9fb2c9; }
.dashgroup { margin: 1.1rem 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.brand { font-weight: 700; font-size: 1.5rem; color: #fff; padding: .4rem .6rem; }
.brand span { display: block; font-size: .85rem; font-weight: 400; color: #9fb2c9; }
.brand.big { font-size: 2rem; }
main { flex: 1; padding: 1.2rem; max-width: none; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.who { font-weight: 600; }
.banner { background: var(--gruen-bg); border: 1px solid var(--gruen); color: #14532d; padding: .5rem .8rem; border-radius: 8px; margin-bottom: 1rem; }
.banner.error { background: var(--rot-bg); border-color: var(--rot); color: #7f1d1d; }

table { border-collapse: collapse; width: 100%; background: var(--panel); border-radius: 8px; font-size: .9rem; }
th, td { border-bottom: 1px solid var(--line); padding: .45rem .6rem; text-align: left; vertical-align: top; }
th { background: #eef2f7; font-weight: 600; white-space: nowrap; }
tr:hover td { background: #f7fafc; }
tbody tr:nth-child(even) { background: #f6f9fc; }
.matrix tbody tr:nth-child(even) { background: #f6f9fc; }
td.right, .right { text-align: right; }
.scrollx { overflow-x: auto; }
table.matrix td:nth-child(n+4) { text-align: center; white-space: nowrap; }
.rotbg { background: var(--rot-bg) !important; color: var(--rot); font-weight: 600; }
.gruenbg { background: var(--gruen-bg); }
td.gelb, .gelbtext { background: var(--gelb-bg); color: var(--gelb); }
.rottext { color: var(--rot); font-weight: 600; }
.orangbg { background: var(--orange-bg) !important; color: var(--orange); font-weight: 600; }
.orangtext { color: var(--orange); font-weight: 600; }
table.matrix .cell { min-width: 92px; }
table.matrix .cell input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
table.matrix .cell input[type=checkbox]:disabled { cursor: not-allowed; opacity: .75; }
.matrix-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.matrix-scroll table.matrix thead tr:first-child th:first-child { border-top-left-radius: 8px; }
table.matrix { border-collapse: separate; border-spacing: 0; min-width: max-content; }
.matrix th, .matrix td { border-bottom: 1px solid var(--line); border-right: 1px solid #e8edf3; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: #eef2f7; }
.matrix thead th:nth-child(even) { background: #dfe8f2; }
.matrix thead th.v { height: 240px; vertical-align: bottom; padding: .4rem .12rem; max-width: 34px; }
.matrix thead th.v span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block;
  max-height: 228px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.matrix td { padding: .3rem .45rem; }
.matrix td.cell { text-align: center; min-width: 62px; white-space: nowrap; }
.matrix td.cell .sm { text-align: center; }
.matrix .fix { position: sticky; z-index: 1; background: #fff; }
.matrix thead .fix { z-index: 3; background: #eef2f7; }
.matrix tbody tr:hover .fix { background: #f7fafc; }
.matrix .c1 { left: 0; width: 200px; min-width: 200px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.matrix .c2 { left: 200px; width: 150px; min-width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.matrix .c3 { left: 350px; width: 95px; min-width: 95px; }
.matrix .c4 { width: 190px; min-width: 190px; }
.matrix .chip { white-space: nowrap; }
table.matrix .sm { font-size: .74rem; }

.dt { font-size: inherit; }
.badge { display: inline-block; padding: .06rem .45rem; border-radius: 999px; font-size: inherit; white-space: nowrap; }
.badge.gruen { background: var(--gruen-bg); color: var(--gruen); }
.badge.gelb { background: var(--gelb-bg); color: var(--gelb); }
.badge.rot { background: var(--rot-bg); color: var(--rot); }
.badge.grau { background: var(--grau-bg); color: var(--grau); }
.badge.blau { background: #1b3a5c; color: #8ec7ff; }
.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; }
.chip.rot { background: var(--rot); color: #fff; }
.chip.gelb { background: var(--gelb-bg); color: var(--gelb); border: 1px solid var(--gelb); }
.chip.blau { background: #e1edfa; color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin: 1rem 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; color: var(--ink); }
.card:hover { border-color: var(--accent); }
.cardname { font-weight: 600; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.cardnum { font-size: 1.6rem; font-weight: 700; margin: .2rem 0; }

.btn { display: inline-block; background: #fff; border: 1px solid var(--line); color: var(--ink); padding: .38rem .8rem; border-radius: 8px; font-size: .88rem; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { background: #fff; border-color: var(--rot); color: var(--rot); }
.btn.small { padding: .16rem .5rem; font-size: .8rem; }
button.link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .9rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; margin: 1rem 0; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.dashbar { justify-content: flex-start; }
.dashbar .filters { margin-left: .4rem; }
.filters input, .filters select, .uploadrow input { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.formgrid { display: block; background: var(--panel); padding: .6rem 1rem; border-radius: 10px; border: 1px solid var(--line); }
.frow { display: grid; grid-template-columns: 220px minmax(280px, 640px); gap: .5rem .8rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; }
.frow:nth-child(even) { background: #f2f6fb; }
.formgrid label { font-size: .85rem; color: var(--muted); }
.formgrid input, .formgrid select, .formgrid textarea { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; width: 100%; font: inherit; }
.formend { grid-column: 2; display: flex; gap: .6rem; margin-top: .6rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.panel.narrow { max-width: 480px; }
.stacked label { display: block; margin-bottom: .7rem; font-size: .85rem; color: var(--muted); }
.stacked input { display: block; width: 100%; margin-top: .2rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 8px; }
.stacked .btn { margin-top: .4rem; }
.userform .userhead { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.userform input[name=name], .userform input[name=username], .userform input[name=password] { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.userform select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.areachips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.chipbox { border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .84rem; background: #fff; }
.chipbox.on { background: #e1edfa; border-color: var(--accent); }
.check { display: inline-flex; gap: .3rem; align-items: center; }
.checkgrid { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.gridlabel { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; width: 100%; margin-bottom: .1rem; }
.tag { font-size: .7rem; background: #e1edfa; color: var(--accent); border-radius: 999px; padding: 0 .4rem; vertical-align: 1px; }
.plistwrap { position: relative; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pchip { display: inline-flex; align-items: center; gap: .35rem; background: #e1edfa; border: 1px solid #c7dcef; color: #1c2733; border-radius: 999px; padding: .12rem .55rem; font-size: .86rem; }
.pdel { border: none; background: none; color: #7f1d1d; font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
.formgrid input[type=hidden] { display: none; }
.stacked-inline { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .4rem; }
.stacked-inline label { display: flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted); }
.stacked-inline input, .stacked-inline select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.stacked-inline .checkgrid { width: 100%; }
.addrow { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.addrow input { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; min-width: 260px; }
.rename { display: flex; gap: .4rem; }
.rename input { flex: 1; min-width: 120px; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; }
.hint { font-size: .8rem; color: var(--muted); max-width: 700px; }
.pictos { white-space: nowrap; }
.pictos img { height: 34px; width: 34px; object-fit: contain; margin-right: 2px; background: #fff; border: 1px solid #eee; border-radius: 3px; }
.autolist { margin: .4rem 0; padding: .8rem 1rem .8rem 2rem; background: #eef4fb; border: 1px solid #c7dcef; border-radius: 8px; }
.autolist li { margin: .2rem 0; }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem; margin-bottom: .6rem; }
details summary { cursor: pointer; font-size: .95rem; }
details form { margin-top: .7rem; }
.uploadrow { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; }
.uploadrow.inline { margin: 0; flex-wrap: nowrap; }
.uploadrow.inline input[type=file] { max-width: 170px; font-size: .78rem; }
table.compact { max-width: 700px; }

.loginbody { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; }
.loginbox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 2rem; width: 340px; box-shadow: 0 10px 40px rgba(20,33,47,.12); }
.loginbox label { display: block; font-size: .82rem; color: var(--muted); margin: .7rem 0 .15rem; }
.loginbox input { width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; }
.loginbox .btn { width: 100%; margin-top: 1.1rem; padding: .6rem; }

.btn.big { font-size: 1rem; padding: .6rem 1.1rem; }
.melform { max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem; }
.melform .btn { margin-top: .6rem; }
.menubtn { display: none; }
.navbackdrop { display: none; }
@media (max-width: 640px) {
  .layout { flex-direction: column; }
  aside { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: min(78vw, 320px);
    z-index: 60; overflow-y: auto; box-shadow: 4px 0 24px rgba(0, 0, 0, .55); }
  body.nav-open aside { display: block; }
  body.nav-open .navbackdrop { display: block; }
  .navbackdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 55; }
  aside nav { display: flex; flex-wrap: wrap; gap: .2rem; }
  .navgroup { width: 100%; }
  .menubtn { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
    background: #14212f; color: #fff; border: 0; border-radius: 8px; padding: .5rem .9rem;
    font: inherit; font-size: .95rem; cursor: pointer; }
  main { padding: .8rem; }
  .frow { grid-template-columns: 1fr; gap: .2rem; }
  .formend { grid-column: 1; }
}

table.postable { font-size: .75rem; min-width: 2200px; }
table.postable td { padding: .2rem .25rem; }
table.postable input, table.postable select { font-size: .72rem; padding: .15rem .2rem; min-width: 60px; }
table.postable .risiko { background: #f1f5f9; text-align: center; font-weight: 700; min-width: 42px; }
.pdel2 { border: none; background: none; color: #7f1d1d; cursor: pointer; font-size: .9rem; }

details.pcard { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; margin-bottom: .45rem; padding: 0; }
details.pcard summary { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; cursor: pointer; list-style: none; }
details.pcard summary::-webkit-details-marker { display: none; }
.pnum { font-weight: 700; color: var(--accent); white-space: nowrap; }
.pttl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.prisk { font-size: .78rem; border-radius: 999px; padding: .05rem .55rem; }
.prisk:not(.rotbg):not(.orangbg):not(.gelb):not(.gruenbg) { display: none; }
.pbtns { display: flex; gap: .25rem; }
.pbtns button { border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: .8rem; line-height: 1; padding: .18rem .4rem; }
.pbtns button.danger { color: #7f1d1d; border-color: #e7bcbc; }
.pcardbody { padding: .3rem .9rem .7rem; border-top: 1px solid var(--line); }
.pgroup { margin-top: .7rem; }
.pgroup > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: block; margin-bottom: .3rem; }
.pf { display: grid; grid-template-columns: 150px 1fr; gap: .5rem; align-items: center; margin: .18rem 0; }
.pf label { font-size: .78rem; color: var(--muted); }
.pf input, .pf select { padding: .28rem .4rem; border: 1px solid var(--line); border-radius: 6px; width: 100%; font: inherit; font-size: .85rem; }
.pf input[readonly] { background: #f1f5f9; font-weight: 700; text-align: center; }
.pf.wide { grid-column: 1 / -1; }
.pgroup { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; align-content: start; }
.pgroup > span { grid-column: 1 / -1; }
.plist-tools { display: flex; gap: .5rem; margin-bottom: .6rem; }

.pgroup.col { display: flex; flex-direction: column; gap: .15rem; }
.pf textarea { padding: .28rem .4rem; border: 1px solid var(--line); border-radius: 6px; width: 100%; font: inherit; font-size: .85rem; resize: vertical; min-height: 2.1em; }

details.pcard.risk-green { background: #f0f9f1; border-left-color: var(--gruen); }
details.pcard.risk-yellow { background: #fdf8e6; border-left-color: var(--gelb); }
details.pcard.risk-red { background: #fdf0f0; border-left-color: var(--rot); }
details.pcard.risk-orange { background: #fdf4ea; border-left-color: var(--orange); }

.pbtns .addbelow { border-color: var(--accent) !important; color: var(--accent); font-weight: 700; }

.riskbox { border: 1px solid var(--line); border-radius: 8px; padding: .2rem .7rem .7rem; margin-top: .5rem; background: #fafcff; }
.riskbox.risk-green { background: #f0f9f1; border-color: #bfe3c8; }
.riskbox.risk-yellow { background: #fdf8e6; border-color: #ecd9a0; }
.riskbox.risk-orange { background: #fdf4ea; border-color: #f3cf9a; }
.riskbox.risk-red { background: #fdf0f0; border-color: #ecc4c4; }

.stufegroup { width: 100%; margin-bottom: .2rem; }
.stufegroup input[type=radio] { accent-color: var(--accent); margin-right: .15rem; }

.attlist { max-width: 260px; word-break: break-all; font-size: .8rem; line-height: 1.5; }
.attlist.wide { max-width: none; }
.attlist img { height: 44px; width: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); margin: 2px 3px 0 0; display: inline-block; }

.invalid, .persinp:hover { }
input.invalid { border-color: var(--rot) !important; background: var(--rot-bg) !important; }

details.gfolding { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .9rem .9rem; margin-bottom: .9rem; }
details.gfolding > summary { font-weight: 700; font-size: 1.02rem; cursor: pointer; padding: .2rem 0 .5rem; }
.chipfold { border: 1px solid var(--line); border-radius: 8px; padding: .25rem .6rem .6rem; margin: .4rem 0; }
.chipfold > summary { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); cursor: pointer; padding: .25rem 0; }
.chipfilter, .listfilter { width: 100%; margin: .25rem 0 .5rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; }
.gnrform input[name=gnr] { max-width: 56px; text-align: center; }

details.rolefold { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: .7rem; }
details.rolefold > summary { cursor: pointer; padding: .6rem .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; list-style: none; }
details.rolefold > summary::-webkit-details-marker { display: none; }
details.rolefold .panel { border: none; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }

/* Zebra-Zeilen + Risiko-Farben mit Vorrang */
.matrix tbody tr:nth-child(odd) td:nth-child(even) { background: #eef3f8; }
.matrix tbody tr:nth-child(even) td { background: #f6f8fb; }
.matrix tbody tr:nth-child(even) td:nth-child(even) { background: #ecf1f8; }
.matrix tbody tr:nth-child(even) .fix { background: #f6f8fb; }
.matrix tbody tr:hover td { background: #eef4fb; }
.matrix tbody tr:hover .fix { background: #e7eff9; }
/* Statuszellen: vier Nuancen je nach Zeilen-/Spalten-Parität */
.matrix td.rotbg { background: #fdefef !important; }
.matrix tbody tr:nth-child(odd) td.rotbg:nth-child(even) { background: #fbe4e4 !important; }
.matrix tbody tr:nth-child(even) td.rotbg { background: #fbe8e8 !important; }
.matrix tbody tr:nth-child(even) td.rotbg:nth-child(even) { background: #f8d8d8 !important; }
.matrix td.gruenbg { background: #eff7f1 !important; }
.matrix tbody tr:nth-child(odd) td.gruenbg:nth-child(even) { background: #e2efe5 !important; }
.matrix tbody tr:nth-child(even) td.gruenbg { background: #e6f2e8 !important; }
.matrix tbody tr:nth-child(even) td.gruenbg:nth-child(even) { background: #d8ecdc !important; }
.matrix td.gelb { background: #fef8e6 !important; }
.matrix tbody tr:nth-child(odd) td.gelb:nth-child(even) { background: #f9eecf !important; }
.matrix tbody tr:nth-child(even) td.gelb { background: #fcf1d4 !important; }
.matrix tbody tr:nth-child(even) td.gelb:nth-child(even) { background: #f7e7bd !important; }

.matrix-tools { display: flex; gap: .5rem; align-items: center; margin: .3rem 0 .5rem; flex-wrap: wrap; }
.mtx-filter { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .85rem; }
input#fPerson { min-width: 240px; }

.menubtn:active { opacity: .8; }

.readonlybox { padding: .3rem .5rem; background: #f1f5f9; border: 1px solid var(--line); border-radius: 6px; font-size: .88rem; min-height: 2.2em; display:flex; align-items:center; }

th.pfh { font-size: .72rem; }
td.pfc { white-space: nowrap; font-size: .82rem; text-align: center; }
td.pfc.cellrot { background: var(--rot-bg); color: var(--rot); font-weight: 700; }
td.pfc.cellgelb { background: var(--gelb-bg); color: var(--gelb); font-weight: 600; }

.lblrow { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; flex-wrap: wrap; }
.lblimg { border-radius: 6px; }
.lbl { position: relative; display: inline-block; }
.lblstrike::after { content: ""; position: absolute; left: -4px; right: -4px; top: 47%; height: 4px; background: var(--rot); border-radius: 2px; transform: rotate(-7deg); }
.chip.rot { background: var(--rot); color: #fff; }

.lblcell { white-space: nowrap; display: flex; align-items: center; gap: 6px; justify-content: center; min-width: 150px; }
.lblcell img { height: 40px !important; }

.rowgrau td { opacity: .5; }

.rowzurueck td { opacity: .45; }
.rowzurueck td .chip.artrot,
.rowzurueck td .chip.artblau,
.rowzurueck td .chip.artgruen,
.rowzurueck td .chip.artgelb,
.rowzurueck td .chip.artdunkel { filter: saturate(0.35) brightness(1.1); opacity: .7; }

.radiogroup { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

.ktbox { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .35rem; }
.ktbox img { width: 500px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

.leds { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .2rem; }
.led { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 2px rgba(0,0,0,.4); }
.led.g { background: #16a34a; } .led.y { background: #eab308; } .led.r { background: #dc2626; }
.ledtext { margin-right: .3rem; }
.bulletlist { margin: .2rem 0 0; padding-left: 1.15rem; }
.bulletlist li { margin: .12rem 0; font-size: .85rem; }

.cellstack { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cellstack > input, .cellstack > select { width: 100%; }

.card.cardrot { background: #fde8e8; border-color: #f5b5b5; }
.card.cardgelb { background: #fdf6dd; border-color: #ecd98a; }
.card.cardblau { background: #e7f0fb; border-color: #b6cdea; }

.cardtotal { font-size: .68rem; color: var(--muted); font-weight: 400; }

.lblcell.inline { margin-left: .4rem; }
.lblcell.inline img { vertical-align: middle; }
@media (min-width: 641px) {
  .topmenu { display: flex; }
  .layout { min-height: calc(100dvh - 3.1rem); }
  .layout { display: block; }
  aside, .navbackdrop, .menubtn { display: none !important; }
  main { padding: 1rem 1.2rem 1.2rem; }
}

.matrix-legend { margin: -.2rem 0 .8rem; }

.mobilebar { display: flex; gap: .5rem; margin-bottom: .6rem; }
@media (min-width: 641px) { .mobilebar { display: none; } }

.msel { position: relative; display: inline-block; }
.msel > button { cursor: pointer; }
.ms-panel { display: none; position: absolute; top: calc(100% + 3px); left: 0; z-index: 50; background: #fff;
  color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 26px rgba(20,33,47,.18);
  padding: .5rem; max-height: 320px; overflow: auto; min-width: 220px; }
.msel.open .ms-panel { display: flex; flex-direction: column; gap: .15rem; }

.ms-quick { font-size: .78rem; color: var(--muted); border-bottom: 1px dashed var(--line); padding-bottom: .3rem; margin-bottom: .3rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ms-site { font-weight: 600; cursor: pointer; }

a.badge { text-decoration: none; }
a.badge:hover { filter: brightness(.96); }

.userfold { margin-bottom: .5rem; }
.usersummary { cursor: pointer; padding: .5rem .3rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.userfold[open] > .usersummary { border-bottom: 1px solid var(--line); margin-bottom: .5rem; }

.who-btn { color: #9fb2c9; font-size: .85rem; text-decoration: none; }
.who-btn:hover { color: #fff; }

.ist-disabled { opacity: .55; background: #eef2f7 !important; cursor: not-allowed; }

.plislocked { pointer-events: none; opacity: .75; }

.stufepic { vertical-align: middle; border-radius: 3px; }

.subline { font-size: .72rem; color: var(--muted); font-weight: 400; margin-top: .1rem; }

.rowmeta { grid-column: 1 / -1; font-size: .78rem; }

.frow-full { grid-column: 1 / -1; }
.history summary { cursor: pointer; font-weight: 600; margin-bottom: .3rem; }

.pre { white-space: pre-wrap; display: inline-block; max-width: 40ch; }

.imggrid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .5rem 0 1rem; }
.imggrid img { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; }
.checkgrid .pre { max-width: 60ch; }

.artorange { color: #b45309; background: #fef0d9; }
.artrot { color: #a12a2a; background: #fbe7e7; }
.artblau { color: #1d5b9e; background: #e4eefb; }
.artviolett { color: #6b2fa0; background: #f1ebfa; }
.artgruen { color: #1f6e3d; background: #e4f4e9; }
.artgelb { color: #8a6d00; background: #fdf6dc; }
.chip.artorange { background: #f97316; color: #fff; }
.chip.artrot { background: #dc2626; color: #fff; }
.chip.artblau { background: #2563eb; color: #fff; }
.chip.artviolett { background: #7c3aed; color: #fff; }
.chip.artgruen { background: #059669; color: #fff; }
.chip.artgelb { background: #d4a017; color: #fff; }
.chip.artorange, .chip.artrot, .chip.artblau, .chip.artviolett, .chip.artgruen, .chip.artgelb { border-radius: 6px; padding: .12rem .55rem; border: none; font-weight: 600; }

.ba-brow { display: grid; grid-template-columns: 220px minmax(160px, 240px) 34px 1fr 34px; gap: .4rem; align-items: start; padding: .35rem .3rem; border-radius: 8px; }
.ba-brow:nth-child(even) { background: #f2f6fb; }
.ba-brow select, .ba-brow textarea { font: inherit; font-size: .85rem; }
.ba-prev { width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 640px) { .ba-brow { grid-template-columns: 1fr; } }

.ba-body { display: grid; gap: .4rem; padding: .5rem .3rem .3rem; }
.ba-body .ba-icon[disabled] { opacity: .45; }
.ba-tools { display: flex; gap: .4rem; align-items: center; }

.ba-mv { margin-left: auto; display: inline-flex; gap: .25rem; flex-shrink: 0; }
details.ba-block > summary { display: flex; align-items: center; gap: .35rem; }
details.ba-block > summary .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.success { background: #16a34a; color: #fff; border: 0; border-radius: 8px; padding: .4rem .8rem; cursor: pointer; }

.clp-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; margin: .4rem 0; background: #fff; }
.clp-grp > summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.clp-grp table td { font-size: .82rem; }

.gslocked { border: 1px dashed var(--line); border-radius: 10px; padding: .5rem .7rem; margin: .6rem 0; background: #f8fafc; }
.gslocked .gsrow { display: flex; gap: .2rem; align-items: center; padding: .18rem 0; border-bottom: 1px solid #eef2f7; font-size: .88rem; }
.gslocked .gsrow em { margin-left: auto; font-size: .72rem; }

.frow.wide { grid-template-columns: 220px minmax(320px, 1fr); }
.frow.wide .clp-scroll, .frow.wide #ghsPick { width: 100%; max-width: 100%; }
.ghsbox { padding: .25rem; }
.ghsline { display: flex; gap: .5rem; flex-wrap: wrap; padding-bottom: .4rem; border-bottom: 1px solid #e2e8f0; margin-bottom: .3rem; }

.clpcell { white-space: nowrap; vertical-align: top; padding-top: .3rem !important; }
.clpcell input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); vertical-align: -2px; }

.signalwort { margin-left: .8rem; font-size: 1.1rem; text-transform: uppercase; }

.wfbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 1rem; padding: .6rem .7rem; background: #f0f4f8; border-radius: 10px; }
.wf-step { display: inline-flex; gap: .4rem; align-items: center; }
.wf-step input { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }

.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-left: 4px solid #2e9e5b; border-radius: 10px; padding: .7rem 1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); display: flex; align-items: center; gap: .7rem;
  font-size: .9rem; max-width: 320px; animation: toastin .25s ease; }
.toast button { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0 .2rem; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .toast { left: 1rem; right: 1rem; max-width: none; bottom: 4.6rem; } }