/* Wiederverwendbare Bausteine: Karten, Listenzeilen, Pills, Modals, Formulare. */
.card{background:var(--card);border-radius:16px;padding:14px 16px;margin-bottom:12px;
      box-shadow:0 1px 3px rgba(20,40,50,.06)}

.roleSel{background:rgba(255,255,255,.16);color:#fff;border-radius:20px;padding:6px 12px;font-size:12px}

.sec{font-size:13px;color:var(--mut);font-weight:700;margin:6px 4px 8px;text-transform:uppercase;letter-spacing:.4px}
.abs{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.abs:last-child{border-bottom:none}
.abs .nm{font-weight:600} .abs .de{font-size:12px;color:var(--mut)}
.abs .rest{margin-left:auto;font-size:13px;font-weight:600;text-align:right;white-space:nowrap}

.pill{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.o{background:var(--offen-bg);color:var(--offen)}
.pill.g{background:var(--gebucht-bg);color:var(--gebucht)}

.bcast{width:100%;background:var(--brand);color:#fff;border-radius:14px;padding:14px;font-weight:600;font-size:15px}

/* Modals (Erfassungs-Maske + Detail-Ansicht) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:30;padding:24px}
.modal.on{display:flex}
.mbox{background:#fff;width:100%;max-width:380px;border-radius:18px;padding:20px}
.mbox-scroll{max-height:88vh;overflow-y:auto}
.mtitle{font-size:19px;font-weight:700;text-align:center}
.mtext{color:var(--mut);font-size:13px;text-align:center;margin:6px 0 10px}
.mbtns{display:flex;gap:10px}
.mbtns button{flex:1;height:46px;border-radius:12px;font-size:15px;font-weight:600}
.mno{background:#eef1f2;color:#33454c}
.myes{background:var(--brand);color:#fff}
.frm{display:flex;flex-direction:column;font-size:13px;color:var(--mut);margin-bottom:10px;gap:4px}
.frm input,.frm select,.frm textarea{border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;color:var(--ink);background:#fff;resize:none;box-sizing:border-box;width:100%}
.frm.reihe{flex-direction:row;align-items:center;gap:8px}
.frm input.w-auto{width:auto}
.sel{background:var(--brand)!important;color:#fff!important}

.msg-fehler{color:var(--fehler);text-align:center;font-size:13px;min-height:16px}