/* ===== Club77 — Verwaltung ============================================ */
:root{
  --bg:#0f0e13; --panel:#151419; --panel-2:#1b1a21; --panel-3:#232129;
  --line:#2a2833; --line-soft:#211f29;
  --text:#e8e6ef; --muted:#8d889c; --muted-2:#66617a;
  --accent:#8b5cf6; --accent-2:#a78bfa; --accent-soft:rgba(139,92,246,.14);
  --blue:#3f6d8c; --blue-2:#7fb0cd;
  --red:#9b2c2c; --red-2:#cf6a6a; --green:#4a8b57; --green-2:#7bb489; --amber:#b1801f; --amber-2:#d3a248;
  --radius:6px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); font-size:14px; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
h1,h2,h3{margin:0; font-weight:600}
.muted{color:var(--muted); font-size:13px; margin:3px 0 0}
.small{font-size:12px}
.right{text-align:right}
a{color:var(--accent-2)}
a:hover{color:var(--text)}
a.btn{text-decoration:none; display:inline-flex; align-items:center}

/* ---------- Monogramm ---------- */
.mark{
  width:52px; height:52px; margin:0 auto 16px; display:grid; place-items:center;
  font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:1px; color:var(--accent-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
}
.mark.small{width:34px; height:34px; font-size:13px; margin:0}

/* ---------- Login ---------- */
.login-screen{min-height:100dvh; display:grid; place-items:center; padding:24px}
.login-card{
  width:100%; max-width:360px; padding:32px 28px 26px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
}
.login-card h1{font-family:var(--serif); font-size:24px; letter-spacing:.4px}
.login-card .sub{color:var(--muted); font-size:12px; margin:6px 0 24px}
.login-card label,.modal label{display:block; text-align:left; font-size:12.5px; color:var(--muted); margin-bottom:14px}
.login-card input{margin-top:6px}

/* ---------- Formularelemente ---------- */
input,select,textarea,.input{
  width:100%; padding:9px 11px; font:inherit; font-size:14px; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  outline:none; transition:border-color .12s;
}
textarea{resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%238b857a' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6); cursor:pointer}
::placeholder{color:var(--muted-2)}

.btn{
  padding:9px 14px; font:inherit; font-size:13.5px; font-weight:500; border-radius:var(--radius);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  cursor:pointer; transition:background .12s, border-color .12s; white-space:nowrap;
}
.btn:hover{background:var(--panel-3); border-color:#38352f}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#191400; font-weight:600}
.btn-accent:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-red{background:var(--red); border-color:var(--red); color:#fff}
.btn-red:hover{background:#b13434; border-color:#b13434}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--panel-2)}
.btn-sm{padding:5px 10px; font-size:12.5px}
.btn-quiet{background:transparent; color:var(--muted)}
.btn-quiet:hover{background:transparent; border-color:var(--red); color:var(--red-2)}
.btn-block{width:100%; margin-top:4px; padding:10px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.icon-btn{background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; padding:3px 7px; border-radius:4px; line-height:1}
.icon-btn:hover{color:var(--text)}
.link-btn{background:none; border:none; color:var(--muted); font:inherit; font-size:13px; text-align:left;
  padding:6px 2px; cursor:pointer}
.link-btn:hover{color:var(--text)}
.link-btn.danger:hover{color:var(--red-2)}
.form-error{background:rgba(155,44,44,.12); border:1px solid rgba(207,106,106,.35); color:#e5a3a3;
  padding:9px 11px; border-radius:var(--radius); font-size:13px; margin-bottom:14px}

/* ---------- Layout ---------- */
.app{display:flex; min-height:100dvh}
.sidebar{
  width:212px; flex:0 0 212px; padding:18px 12px; display:flex; flex-direction:column;
  background:var(--panel); border-right:1px solid var(--line); position:sticky; top:0; height:100dvh;
}
.brand{display:flex; align-items:center; gap:10px; padding:2px 6px 20px}
.brand-name{font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:.3px; line-height:1.2}
.brand-sub{font-size:11px; color:var(--muted); margin-top:2px}

.nav{display:flex; flex-direction:column; gap:1px; flex:1}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  background:none; border:none; border-left:2px solid transparent; border-radius:0 var(--radius) var(--radius) 0;
  color:var(--muted); font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
  transition:color .12s, background .12s;
}
.nav-item svg{width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor;
  stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round}
.nav-item:hover{color:var(--text); background:var(--panel-2)}
.nav-item.active{color:var(--text); background:var(--panel-2); border-left-color:var(--accent)}
.nav-item.active svg{stroke:var(--accent-2)}
.nav-count{margin-left:auto; font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums}

.sidebar-foot{display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--line-soft); padding-top:12px}
.user-chip{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text); padding:2px 2px 8px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--green-2)}
.burger{display:none; position:fixed; top:12px; left:12px; z-index:40; background:var(--panel);
  border:1px solid var(--line); color:var(--text); font-size:15px; padding:6px 10px; border-radius:var(--radius); cursor:pointer}

.main{flex:1; padding:26px 30px 60px; min-width:0}
.view-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line-soft)}
.view-head h2{font-size:19px; letter-spacing:.2px}
/* Der Textblock darf schrumpfen, damit die Knöpfe rechts bleiben und der Text umbricht */
.view-head > div:first-child{flex:1 1 320px; min-width:0}
.view-head .muted{max-width:760px}
.view-head .set-title,.att-foot .set-title{margin-bottom:2px}
.date-step{display:inline-flex; align-items:center; gap:6px}
.date-nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.date-nav .input{width:auto}

/* ---------- Kennzahlen ---------- */
.stat-row{display:flex; flex-wrap:wrap; gap:26px; padding:0 0 18px; margin-bottom:0}
.stat{min-width:74px}
.stat-val{font-size:19px; font-weight:600; font-variant-numeric:tabular-nums}
.stat-lbl{font-size:12px; color:var(--muted); margin-top:1px}
.stat.green .stat-val{color:var(--green-2)}
.stat.red .stat-val{color:var(--red-2)}
.stat.amber .stat-val{color:var(--amber-2)}

/* ---------- Toolbar ---------- */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar input[type=search]{flex:1; min-width:190px; max-width:340px}
.toolbar select{width:auto; min-width:140px}
.bulk{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.save-area{margin-left:auto; display:flex; align-items:center; gap:12px}
.chip{padding:6px 11px; font:inherit; font-size:12.5px; border-radius:var(--radius); cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted); transition:color .12s, border-color .12s}
.chip:hover{color:var(--text); border-color:#38352f}
.chip-green:hover{color:var(--green-2)}
.chip-amber:hover{color:var(--amber-2)}
.chip-red:hover{color:var(--red-2)}

/* ---------- Tabellen ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.table-wrap{overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px}
.table th{
  text-align:left; padding:10px 14px; font-size:12px; font-weight:500; color:var(--muted);
  background:var(--panel-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td{padding:10px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
/* Zahlen und Kaestchen stehen mittig unter ihrer Spaltenueberschrift */
.table th.mid,.table td.mid{text-align:center}
.table th.right{text-align:right}
.table td.mid{font-variant-numeric:tabular-nums}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--panel-2)}
.name-main{font-weight:500}
.name-sub{font-size:12px; color:var(--muted-2); margin-top:2px; max-width:300px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.empty{padding:36px 20px; text-align:center; color:var(--muted); font-size:13.5px}
.row-actions{display:flex; gap:6px; justify-content:flex-end}

/* Rang */
.rank{display:inline-block; padding:2px 8px; border-radius:3px; font-size:12.5px; white-space:nowrap;
  background:var(--panel-3); border:1px solid var(--line); color:var(--muted)}
.rank.t1{border-color:rgba(139,92,246,.5); color:var(--accent-2); background:var(--accent-soft)}
.rank.t2{border-color:rgba(139,92,246,.28); color:#bda468}
.rank.t3{border-color:rgba(155,44,44,.4); color:#c98d8d}
.rank.t4{color:#9a938a}

.badge{display:inline-block; padding:2px 8px; border-radius:3px; font-size:12.5px; border:1px solid var(--line); color:var(--muted)}
.badge.ok{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.badge.off{color:var(--muted)}
.badge.warn{color:var(--amber-2); border-color:rgba(177,128,31,.45)}
.badge.eye{color:var(--red-2); border-color:rgba(155,44,44,.5)}

/* Anwesenheits-Auswahl */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.seg button{padding:5px 11px; font:inherit; font-size:12.5px; border:none; border-right:1px solid var(--line);
  background:var(--bg); color:var(--muted); cursor:pointer; white-space:nowrap; transition:background .12s, color .12s}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--text); background:var(--panel-3)}
.seg button.on[data-s=anwesend]{background:rgba(74,139,87,.2); color:var(--green-2)}
.seg button.on[data-s=abgemeldet]{background:rgba(177,128,31,.2); color:var(--amber-2)}
.seg button.on[data-s=unabgemeldet]{background:rgba(155,44,44,.25); color:var(--red-2)}
.note-input{background:transparent; border-color:transparent; padding:6px 8px; font-size:13px}
.note-input:hover{border-color:var(--line)}

.bar{height:5px; background:var(--panel-3); border-radius:2px; overflow:hidden; min-width:80px}
.bar span{display:block; height:100%; background:var(--green)}
.quote{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-variant-numeric:tabular-nums}

/* ---------- Modal ---------- */
.modal-back{position:fixed; inset:0; background:rgba(0,0,0,.62); display:grid; place-items:center; padding:20px; z-index:50}
.modal{width:100%; max-width:520px; max-height:calc(100vh - 40px); overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px}
.modal.small{max-width:380px}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15px; font-weight:600}
.modal form,.modal-body{padding:20px}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); margin:20px -20px -20px}
.modal-body + .modal-foot{margin:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.grid2 .full{grid-column:1/-1}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:99;
  background:var(--panel-3); border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:var(--radius); font-size:13.5px}
.toast.err{border-color:var(--red); color:#e5a3a3}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .sidebar{position:fixed; z-index:35; left:0; top:0; transform:translateX(-100%); transition:transform .18s ease}
  .sidebar.open{transform:none}
  .burger{display:block}
  .main{padding:56px 14px 50px}
  .grid2{grid-template-columns:1fr}
  .date-nav .btn-accent{width:100%; order:-1}
  .save-area{margin-left:0; width:100%; justify-content:flex-end}
  .stat-row{gap:18px}
}

/* ---------- Passwortfelder ---------- */
.pw-field{position:relative; margin-top:6px}
.pw-field .input{padding-right:78px}
.pw-toggle{position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); font:inherit; font-size:12.5px;
  padding:4px 7px; border-radius:4px; cursor:pointer}
.pw-toggle:hover{color:var(--text)}
.pw-field .input[type=text]{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:.3px}
.pw-tools{display:flex; gap:6px; margin:-6px 0 14px}

/* ---------- Sanktionsliste ---------- */
.rule-section{background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:14px; overflow:hidden}
.rule-head{display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.rule-sec-no{font-family:var(--serif); font-size:15px; color:var(--accent-2); white-space:nowrap}
.rule-sec-title{font-weight:500; flex:1; min-width:0}
.rule-head .row-actions{flex:0 0 auto}
.rule-row{display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--line-soft)}
.rule-row:last-child{border-bottom:none}
.rule-row:hover{background:var(--panel-2)}
.rule-no{color:var(--muted); font-size:13px; white-space:nowrap; min-width:52px}
.rule-text{flex:1; min-width:0}
.rule-amount{font-variant-numeric:tabular-nums; color:var(--accent-2); white-space:nowrap}
.rule-amount.none{color:var(--muted-2)}
.rule-foot{padding:9px 14px; border-top:1px solid var(--line-soft)}
.rule-empty{padding:14px; color:var(--muted); font-size:13px}

/* ---------- Einweisung ---------- */
.ob-layout{display:grid; grid-template-columns:272px minmax(0,1fr); gap:18px; align-items:start}
.ob-side{position:sticky; top:18px}

/* Zusammenfassung links */
.ob-summary{padding:22px 18px 14px; display:flex; flex-direction:column; align-items:center; gap:14px;
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 62%)}
.ob-ring-wrap{position:relative; width:136px; height:136px}
.ob-ring{width:100%; height:100%; transform:rotate(-90deg)}
.ob-ring circle{fill:none; stroke-width:7}
.ob-ring-bg{stroke:var(--panel-3)}
.ob-ring-fg{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .5s cubic-bezier(.22,.8,.3,1), stroke .3s}
.ob-summary.complete .ob-ring-fg{stroke:var(--green-2)}
.ob-ring-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px}
.ob-ring-pct{font-family:var(--serif); font-size:30px; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:.5px}
.ob-ring-pct small{font-size:14px; color:var(--muted); margin-left:1px}
.ob-ring-sub{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

.ob-status{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);
  padding:5px 11px; border:1px solid var(--line); border-radius:99px; background:var(--panel)}
.ob-status-dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2)}
.ob-status.active{color:var(--accent-2); border-color:rgba(139,92,246,.4); background:var(--accent-soft)}
.ob-status.active .ob-status-dot{background:var(--accent-2); box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.ob-status.complete{color:var(--green-2); border-color:rgba(74,139,87,.45); background:rgba(74,139,87,.12)}
.ob-status.complete .ob-status-dot{background:var(--green-2); box-shadow:0 0 0 3px rgba(74,139,87,.2)}

.ob-legend{width:100%; display:flex; flex-direction:column; gap:9px; padding-top:14px; border-top:1px solid var(--line-soft)}
.ob-legend-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:12px}
.ob-legend-name{color:var(--muted); white-space:nowrap; min-width:104px}
.ob-legend-bar{height:4px; background:var(--panel-3); border-radius:2px; overflow:hidden}
.ob-legend-bar span{display:block; height:100%; width:0; background:var(--accent); border-radius:2px; transition:width .4s ease}
.ob-legend-val{color:var(--muted-2); font-variant-numeric:tabular-nums; min-width:26px; text-align:right}
.ob-side-foot{width:100%; padding-top:12px; border-top:1px solid var(--line-soft); display:flex}
.ob-reset{flex:1; font-size:12.5px; color:var(--muted)}
.ob-reset:hover{color:var(--red-2)}

/* Gruppen rechts */
.ob-main{display:flex; flex-direction:column; gap:14px; min-width:0}
.ob-group{transition:border-color .25s}
.ob-group.complete{border-color:rgba(74,139,87,.4)}
.ob-group-head{display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.ob-group-no{font-family:var(--serif); font-size:15px; color:var(--accent-2); width:30px; height:30px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft); border:1px solid rgba(139,92,246,.28); flex:0 0 auto}
.ob-group.complete .ob-group-no{color:var(--green-2); background:rgba(74,139,87,.12); border-color:rgba(74,139,87,.4)}
.ob-group-title{flex:1; min-width:0}
.ob-group-title h3{font-size:14px; font-weight:600; letter-spacing:.2px}
.ob-group-title .muted{margin-top:1px; font-size:12px}
.ob-group-count{font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums; white-space:nowrap;
  padding:3px 9px; border:1px solid var(--line); border-radius:99px}
.ob-group.complete .ob-group-count{color:var(--green-2); border-color:rgba(74,139,87,.45)}

.ob-list{list-style:none; margin:0; padding:0}
.ob-list li{border-bottom:1px solid var(--line-soft)}
.ob-list li:last-child{border-bottom:none}
.ob-item{position:relative; display:flex; align-items:center; gap:14px; padding:13px 16px; cursor:pointer; user-select:none;
  transition:background .12s}
.ob-item:hover{background:var(--panel-2)}
.ob-item input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.ob-box{flex:0 0 auto; width:22px; height:22px; border:1.5px solid var(--line); border-radius:6px; background:var(--panel-3);
  display:inline-flex; align-items:center; justify-content:center; transition:background .18s, border-color .18s, box-shadow .18s}
.ob-box svg{width:14px; height:14px; fill:none; stroke:#191400; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:16; stroke-dashoffset:16; transition:stroke-dashoffset .22s ease .05s}
.ob-item:hover .ob-box{border-color:var(--accent)}
.ob-item input:focus-visible ~ .ob-box{outline:2px solid var(--accent); outline-offset:2px}
.ob-item.done .ob-box{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px rgba(139,92,246,.16)}
.ob-item.done .ob-box svg{stroke-dashoffset:0}
.ob-ico{flex:0 0 auto; width:32px; height:32px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--line-soft); transition:all .18s}
.ob-ico svg{width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:stroke .18s}
.ob-item:hover .ob-ico svg{stroke:var(--text)}
.ob-item.done .ob-ico{background:var(--accent-soft); border-color:rgba(139,92,246,.28)}
.ob-item.done .ob-ico svg{stroke:var(--accent-2)}
.ob-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ob-title{font-size:14px; font-weight:500; transition:color .18s}
.ob-hint{font-size:12px; color:var(--muted); transition:color .18s}
.ob-item.done .ob-title{color:var(--muted)}
.ob-item.done .ob-hint{color:var(--muted-2)}
.ob-amt{font-weight:600; color:var(--accent-2); font-variant-numeric:tabular-nums}
.ob-item.done .ob-amt{color:var(--accent)}
.ob-step{font-family:var(--serif); font-size:12.5px; color:var(--muted-2); font-variant-numeric:tabular-nums; letter-spacing:.5px; flex:0 0 auto}
.ob-item.done .ob-step{color:var(--accent-2)}
.nav-count.complete{color:var(--green-2)}

@media (max-width:900px){
  .ob-layout{grid-template-columns:1fr}
  .ob-side{position:static}
  .ob-summary{flex-direction:row; flex-wrap:wrap; justify-content:center; padding:16px}
  .ob-legend{padding-top:12px}
}
@media (max-width:600px){
  .ob-item{gap:11px; padding:12px 13px}
  .ob-ico{display:none}
  .ob-step{display:none}
}

/* ---------- Sanktionen ---------- */
.money{font-variant-numeric:tabular-nums; white-space:nowrap}
.src{font-size:11.5px; color:var(--muted-2)}
.status-sel{width:auto; padding:5px 26px 5px 10px; font-size:12.5px}
.badge.auto{color:var(--amber-2); border-color:rgba(177,128,31,.45)}
.wh-ok{color:var(--green-2); font-size:12.5px}
.wh-err{color:var(--red-2); font-size:12.5px}
.wh-off{color:var(--muted-2); font-size:12.5px}

pre{margin:0; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:12.5px; line-height:1.6;
  color:var(--text); white-space:pre-wrap; word-break:break-word; overflow-x:auto}
.preview-box{margin:4px 0 14px}
.preview-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.check{display:flex !important; align-items:center; gap:8px; font-size:13px; color:var(--text) !important; margin-bottom:14px}
.check input{width:auto; margin:0}

/* ---------- Urlaub & Dauerabmeldung ---------- */

.badge.vac{color:var(--blue-2); border-color:rgba(63,109,140,.5)}
.badge.perm{color:#a99ad0; border-color:rgba(122,104,176,.5)}
.away-badge{margin-left:6px}

tr.row-away{background:rgba(63,109,140,.05)}
.away-note{color:var(--blue-2); opacity:.85; max-width:none}

.seg button.on[data-s=urlaub]{background:rgba(63,109,140,.22); color:var(--blue-2)}
.seg button.on[data-s=dauerabgemeldet]{background:rgba(122,104,176,.2); color:#a99ad0}
.seg button.away{font-weight:600}
.seg-wide{max-width:100%}

/* Abwesenheitsblock im Mitglieder-Modal */
.absence-box{
  grid-column:1/-1; margin:2px 0 14px; padding:13px 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
}
.absence-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:9px}
.absence-head b{font-size:13.5px}
.absence-head .muted{display:block}

.absence-list{display:flex; flex-direction:column; gap:5px; margin-bottom:11px}
.absence-item{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:6px 9px; background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--radius);
}
.absence-item.now{border-color:rgba(63,109,140,.45)}
.absence-item .ab-time{font-size:13px; font-variant-numeric:tabular-nums}
.absence-item .ab-reason{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0}
.absence-item .ab-state{margin:0}
.absence-item .btn{margin-left:auto}

.absence-add{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  grid-template-areas:"type weekday weekday" "reason reason reason" "from to add";
  gap:8px; align-items:center; min-width:0}
.absence-add .input{width:100%; min-width:0}
.absence-add label.mini .input{flex:1 1 0; min-width:0}
.absence-add #ab-type{grid-area:type}
.absence-add #ab-weekday{grid-area:weekday}
.absence-add #ab-weekday:disabled{opacity:.45}
.absence-item .ab-rhythm{font-size:12px; color:var(--blue-2); font-weight:600; margin:0}
.absence-add .ab-from-l{grid-area:from}
.absence-add .ab-to-l{grid-area:to}
.absence-add #ab-add{grid-area:add; justify-self:end}
.absence-add label.mini{display:flex; align-items:center; gap:5px; margin:0; font-size:12px; color:var(--muted)}
.absence-add #ab-reason{grid-area:reason; min-width:0; width:100%}
.absence-box p.muted{margin-top:9px}
@media (max-width:600px){
  .absence-add{grid-template-columns:minmax(0,1fr); grid-template-areas:"type" "weekday" "reason" "from" "to" "add"}
  .absence-add #ab-add{justify-self:stretch}
  .absence-item .ab-reason{flex-basis:100%; white-space:normal}
}

/* ---------- Auswertung: Wochen- / Monatssicht ---------- */
.stats-nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.seg-switch{display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.seg-switch button{
  padding:7px 13px; font:inherit; font-size:13px; border:none; border-right:1px solid var(--line);
  background:var(--panel-2); color:var(--muted); cursor:pointer;
}
.seg-switch button:last-child{border-right:none}
.seg-switch button:hover{color:var(--text); background:var(--panel-3)}
.seg-switch button.on{background:var(--accent-soft); color:var(--accent-2)}
.period-label{display:inline-flex; align-items:baseline; gap:8px; min-width:210px; justify-content:center; font-size:14px}
.period-label .muted{font-size:12.5px; margin:0}

.bar.good span{background:var(--green)}
.bar.mid span{background:var(--amber)}
.bar.bad span{background:var(--red)}
.bad-num{color:var(--red-2)}
tr.row-none{opacity:.5}

/* ---------- Wochenabgaben ---------- */
.dues-progress{display:flex; align-items:center; gap:12px; margin:0 0 16px}
.dues-progress .bar{flex:1; height:6px; max-width:520px}
.dues-progress .bar span{background:linear-gradient(90deg,var(--green),var(--green-2)); transition:width .25s}

.dues-table{min-width:1080px}
.dues-table td{padding:8px 14px}
.dues-table tr.is-paid{background:rgba(74,139,87,.055)}
.dues-table tr.is-paid:hover{background:rgba(74,139,87,.1)}
.dues-table tr.is-away{background:rgba(90,130,160,.06)}
.dues-table tr.is-exempt td:not(:first-child){opacity:.55}

/* Haken zum Abhaken - steht mittig unter der Spaltenüberschrift */
.table td.mid .tick{margin:0 auto}
.tick{
  width:26px; height:26px; display:grid; place-items:center; cursor:pointer; font-size:14px; line-height:1;
  border:1px solid var(--line); border-radius:5px; background:var(--bg); color:transparent;
  transition:border-color .12s, background .12s, color .12s;
}
.tick:hover{border-color:var(--green); color:rgba(123,180,137,.45)}
.tick.on{background:rgba(74,139,87,.22); border-color:rgba(74,139,87,.65); color:var(--green-2)}
.tick[disabled]{cursor:not-allowed; opacity:.35}
.tick[disabled]:hover{border-color:var(--line); color:transparent}

/* Pflicht */
.duty{
  font:inherit; font-size:12.5px; padding:3px 24px 3px 9px; border-radius:3px; cursor:pointer;
  background:var(--panel-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b857a' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 8px center/9px;
  border:1px solid var(--line); color:var(--muted); appearance:none;
}
.duty:hover{color:var(--text); border-color:#38352f}
.duty.d-muss{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.duty.d-leaderschaft{color:var(--accent-2); border-color:rgba(139,92,246,.45); background-color:var(--accent-soft)}
.duty.d-befreit{color:var(--red-2); border-color:rgba(155,44,44,.45)}

/* Abgabepflicht, die nur für eine einzelne Woche abweicht */
.duty-cell{white-space:nowrap}
.duty-week{display:block; margin:4px auto 0; padding:1px 7px; font:inherit; font-size:10.5px;
  letter-spacing:.3px; cursor:pointer; border-radius:3px; white-space:nowrap;
  color:var(--accent-2); background:var(--accent-soft); border:1px solid rgba(139,92,246,.45)}
.duty-week:hover{background:rgba(139,92,246,.22); color:var(--text)}
.duty-ask{display:flex; align-items:center; justify-content:center; gap:4px; margin-top:4px;
  font-size:10.5px; color:var(--muted)}
.duty-ask button{padding:2px 8px; font:inherit; font-size:10.5px; cursor:pointer; border-radius:3px;
  color:var(--text); background:var(--panel-3); border:1px solid var(--line); white-space:nowrap}
.duty-ask button:hover{border-color:var(--accent); color:var(--accent-2)}
.duty-ask button[data-scope="week"]{border-color:rgba(139,92,246,.5); color:var(--accent-2)}

/* schlanke Zellen-Eingaben */
.cell-input{
  background:transparent; border:1px solid transparent; border-radius:var(--radius); color:var(--text);
  font:inherit; font-size:13px; padding:5px 8px; width:100%; transition:border-color .12s, background .12s;
}
.cell-input:hover{border-color:var(--line)}
.cell-input:focus{outline:none; border-color:var(--accent); background:var(--panel-2)}
.cell-input::placeholder{color:var(--muted-2)}
.cell-input[disabled]{color:var(--muted-2)}
.cell-money{text-align:center; font-variant-numeric:tabular-nums; width:104px}
.cell-date{width:140px; color-scheme:dark; text-align:center}
.cell-sel{width:104px; appearance:none; cursor:pointer; text-align:center; text-align-last:center}
/* Steht jemand als Bestätiger drin, ist die Zelle nicht mehr blass */
.cell-sel.is-set{color:var(--text)}
.cell-sel:disabled{cursor:default; opacity:.45}
.cell-note{min-width:150px}
.cell-date.is-empty{opacity:.4}
.cell-date.is-empty:hover,.cell-date:focus{opacity:1}
.dues-table td:first-child{min-width:196px}
.dues-table .name-main{display:flex; align-items:center; gap:6px; white-space:nowrap}

/* Verlauf der letzten Wochen */
.hist{display:inline-flex; gap:3px; align-items:center}
.hist i{width:9px; height:9px; border-radius:2px; background:var(--panel-3); border:1px solid var(--line)}
.hist i.on{background:rgba(74,139,87,.55); border-color:rgba(74,139,87,.8)}
.hist i.now{box-shadow:0 0 0 1px rgba(139,92,246,.75)}

.dues-legend{display:flex; align-items:center; gap:7px; margin-top:12px; flex-wrap:wrap}
.dot-legend{width:9px; height:9px; border-radius:2px; display:inline-block; border:1px solid var(--line)}
.dot-legend.paid{background:rgba(74,139,87,.55); border-color:rgba(74,139,87,.8)}
.dot-legend.open{background:var(--panel-3)}
.dot-legend.exempt{background:rgba(90,130,160,.35); border-color:rgba(90,130,160,.5)}
.dot-legend + span, .dues-legend .dot-legend:not(:first-child){margin-left:8px}

.stat.blue .stat-val{color:var(--blue-2)}
.stat.gold .stat-val{color:var(--accent-2)}

/* Offene Abgaben: Kalenderwochen als anklickbare Marken */
.kw-list{display:inline-flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:center; max-width:420px}
.kw-chip{
  font:inherit; font-size:12px; font-variant-numeric:tabular-nums; line-height:1;
  padding:4px 8px; border-radius:4px; cursor:pointer;
  background:var(--panel-2); border:1px solid rgba(155,44,44,.45); color:var(--red-2);
  transition:background .12s, border-color .12s, color .12s}
.kw-chip:hover{background:rgba(74,139,87,.2); border-color:rgba(74,139,87,.7); color:var(--green-2)}
.kw-chip.is-sanctioned{background:rgba(155,44,44,.22); border-color:rgba(155,44,44,.7); color:#e08d8d}
.kw-chip.is-sanctioned:hover{background:rgba(74,139,87,.2); border-color:rgba(74,139,87,.7); color:var(--green-2)}
.kw-chip.is-current{box-shadow:0 0 0 1px rgba(139,92,246,.6)}

.away-pill{font-size:11.5px; color:#7ea6c4; border:1px solid rgba(90,130,160,.4); border-radius:3px; padding:1px 6px; margin-left:6px}

/* Einstellungen */
.set-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; align-items:start}
.set-card{padding:18px 20px 6px}
.set-title{font-family:var(--serif); font-size:15px; color:var(--accent-2); margin:0 0 14px; font-weight:600}
.set-card label{display:block; text-align:left; font-size:12.5px; color:var(--muted); margin-bottom:14px}
.set-card .muted.small{margin:-8px 0 14px}
.set-actions{display:flex; gap:8px; margin:4px 0 16px}
.set-hooks{margin-top:26px}
.set-hooks .view-head{border-bottom:none; padding-bottom:10px; margin-bottom:8px}

.rem-preview{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.rem-item{border:1px solid var(--line); border-radius:var(--radius); padding:9px 12px; background:var(--bg)}
.rem-item.is-idle{opacity:.5}
.rem-head{display:flex; justify-content:space-between; align-items:center; font-size:13px}
.rem-count{font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent-2)}
.rem-sample{font-size:12px; color:var(--muted); margin-top:5px; white-space:pre-wrap; line-height:1.45}
/* die negative Marge der Karten-Hinweise darf hier nicht greifen */
.rem-item .muted.small{margin:6px 0 0}

.hook-table{min-width:900px}
.hook-table tr.is-off td{opacity:.5}
.ev-list{display:flex; flex-wrap:wrap; gap:5px}
.ev-pill{font-size:11.5px; padding:2px 8px; border-radius:3px; white-space:nowrap;
  background:var(--accent-soft); border:1px solid rgba(139,92,246,.4); color:var(--accent-2)}

/* Logs */
.log-table{min-width:1000px}
.log-table td{padding:9px 14px; vertical-align:top}
.log-when{white-space:nowrap}
.log-when .name-sub{font-variant-numeric:tabular-nums}
.log-detail{font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:2px}
.log-detail div{white-space:pre-wrap}
.log-date{width:150px; color-scheme:dark; text-align:center}
.log-more{display:flex; align-items:center; gap:12px; margin-top:12px}

.area-pill{display:inline-block; padding:2px 8px; border-radius:3px; font-size:12px; white-space:nowrap;
  background:var(--panel-3); border:1px solid var(--line); color:var(--muted)}
.area-pill.a-member{color:var(--accent-2); border-color:rgba(139,92,246,.4)}
.area-pill.a-att{color:#7ea6c4; border-color:rgba(90,130,160,.4)}
.area-pill.a-dues{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.area-pill.a-san{color:var(--red-2); border-color:rgba(155,44,44,.5)}
.area-pill.a-rules{color:#bda468; border-color:rgba(139,92,246,.28)}
.area-pill.a-user{color:var(--amber-2); border-color:rgba(177,128,31,.45)}
.area-pill.a-set{color:var(--muted); border-color:var(--line)}

/* Einstellungen: Gruppen */
.set-sep{height:1px; background:var(--line); margin:18px 0 16px}
.set-group{font-size:12px; color:var(--accent-2); letter-spacing:.4px; text-transform:uppercase; margin:0 0 12px}

@media(max-width:760px){
  .dues-progress .bar{max-width:none}
}

/* --------------------------------------------------------- Aufstellung --- */
.lu-card{padding:18px 20px; margin-bottom:18px}
.lu-card .empty{padding:22px 4px}
.lu-head{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap}
.lu-when{font-family:var(--serif); font-size:17px; letter-spacing:.2px}
.lu-sub{color:var(--muted); font-size:12.5px; margin-top:5px}
.lu-note{color:var(--muted-2); font-style:italic}
.lu-actions{display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end}
.lu-actions .btn{white-space:nowrap}
.lu-section{margin-top:28px}
.lu-section .view-head{margin-bottom:14px}

.lu-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:6px}
.lu-col{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:13px 16px 15px}
.lu-col.ja{border-color:rgba(74,139,87,.45)}
.lu-col.nein{border-color:rgba(155,44,44,.45)}
.lu-col.keine{border-color:rgba(177,128,31,.45)}
.lu-col-head{display:flex; align-items:center; gap:8px; margin-bottom:11px}
.lu-col-emoji{font-size:15px; line-height:1}
.lu-col-name{font-size:12.5px; color:var(--muted)}
.lu-col-num{margin-left:auto; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums}
.lu-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
         font-size:13px; max-height:260px; overflow:auto}
.lu-list li{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.lu-none{color:var(--muted-2); font-size:12.5px}
.lu-flag{font-size:11px; padding:1px 6px; border-radius:3px; border:1px solid var(--line); color:var(--muted-2)}
.lu-flag.warn{color:var(--amber-2); border-color:rgba(177,128,31,.45)}
.good-num{color:var(--green-2)}
.lu-table tr.is-off td,.lu-cand-table tr.is-off td,.lu-link-table tr.is-off td{opacity:.5}
.lu-link-table select{min-width:180px; padding:5px 8px; font-size:13px}
.lu-link-table td{vertical-align:middle}
.lu-cand-table input[type=checkbox]{width:15px; height:15px; accent-color:var(--accent)}

.lu-days{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
.lu-day{min-width:38px; text-align:center}
.lu-day.on{background:var(--accent-soft); border-color:rgba(139,92,246,.5); color:var(--accent-2)}
.lu-emoji-grid{display:grid; grid-template-columns:72px 1fr; gap:8px 10px; margin-bottom:18px; align-items:center}
.lu-emoji-grid input{padding:6px 9px; font-size:13px}
.lu-test{margin-top:16px; background:var(--panel); border:1px solid var(--line); border-radius:8px;
         padding:14px 18px; font-size:13px}
.lu-test > div{display:flex; gap:9px; padding:3px 0; align-items:baseline; flex-wrap:wrap}
.lu-ok{color:var(--green-2)}
.lu-bad{color:var(--red-2)}

@media(max-width:760px){
  .lu-actions{justify-content:flex-start}
  .lu-emoji-grid{grid-template-columns:60px 1fr}
}
.lu-picker-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 16px}
.lu-picker-foot .muted{margin:0}
.seg-react button{padding:5px 12px; font-size:13px; line-height:1}
.seg-react button.on[data-r="1"]{background:rgba(74,139,87,.22); color:var(--green-2)}
.seg-react button.on[data-r="0"]{background:rgba(155,44,44,.25); color:var(--red-2)}

/* Zwischenüberschrift je Rang in den Tabellen */
.group-row td{
  background:var(--panel-2); border-bottom:1px solid var(--line);
  font-family:var(--serif); font-size:12.5px; letter-spacing:.5px;
  color:var(--accent-2); padding:7px 14px;
}
.group-row .group-count{color:var(--muted-2); font-family:var(--font); font-size:11.5px; margin-left:8px}

/* Fuß der Anwesenheitsansicht: Sanktionen auswerten */
.att-foot{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:22px; padding:18px 20px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px;
}
.att-foot .muted{max-width:640px}
.modal-wide{max-width:640px}
.eval-list{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:8px}
.eval-list li{display:flex; flex-direction:column; gap:3px;
  padding:9px 12px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px}
.eval-zeile{display:flex; align-items:baseline; gap:12px}
.eval-name{font-weight:500}
.eval-grund{color:var(--muted); font-size:12.5px}
.eval-hinweis{color:var(--amber-2); font-size:12px}
.eval-betrag{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--red-2); font-weight:600;
  white-space:nowrap}
.eval-summe{display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:14px}
.eval-summe b{color:var(--red-2); font-variant-numeric:tabular-nums}

/* Uhrzeit der Reaktion, direkt unter den Haken in der Anwesenheitsliste */
.react-when{margin-top:3px; font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums;
  white-space:nowrap; cursor:help}
.react-when.is-late{color:var(--amber-2); font-weight:600}

/* Auswertung: Einzelauswahl und Nachzuegler */
.eval-pick{width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex:none;
  align-self:center}
.eval-list li.is-late{border-color:rgba(177,128,31,.5); background:rgba(177,128,31,.08)}
.eval-spaet{color:var(--amber-2); font-size:12px; line-height:1.45}
.eval-check{margin:0 0 14px; padding:10px 12px; border-radius:6px; font-size:12.5px; line-height:1.5;
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted);
  display:flex; flex-direction:column; gap:3px}
.eval-check.is-late{border-color:rgba(177,128,31,.5); background:rgba(177,128,31,.08); color:var(--text)}
.eval-check.is-bad{border-color:rgba(155,44,44,.5); background:rgba(155,44,44,.1); color:var(--red-2)}
.eval-block{margin-bottom:18px}
.eval-block h4{font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--accent-2); margin:0 0 8px; font-weight:600}

/* Sofort-Speichern: kurze Rückmeldung und Hinweis auf fremde Änderungen */
.hint-ok{color:var(--green-2)}
.hint-bad{color:var(--red-2)}
@keyframes frischGesetzt{ from{background:rgba(139,92,246,.18)} to{background:transparent} }
.row-fresh td{animation:frischGesetzt 2.5s ease-out}

/* Urlaub/Dauerabmeldung als Schildchen neben dem Namen - eine Zeile, gleiche Zeilenhoehe */
.name-line{display:flex; align-items:baseline; gap:7px; min-width:0}
.away-tag{font-size:11.5px; padding:1px 7px; flex:0 0 auto}
.away-span{color:var(--muted-2); font-size:12px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0}

/* --------------------------------------------------------------- Tresor --- */
.vault-head{display:flex; align-items:center; gap:30px; flex-wrap:wrap; padding:18px 22px; margin-bottom:16px}
.vault-soll{min-width:230px; padding-right:30px; border-right:1px solid var(--line)}
.vault-soll-lbl{font-size:11.5px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase}
.vault-soll-val{font-family:var(--serif); font-size:29px; font-weight:700; color:var(--accent-2);
  font-variant-numeric:tabular-nums; line-height:1.2; margin:5px 0 3px}
.vault-soll-val.bad-num{color:var(--red-2)}
.vault-soll .muted{max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vault-head .stat-row{padding:0; flex:1}

.vault-table{min-width:1060px}
.vault-table td{padding:8px 14px}
.vault-table tr.is-unchecked td{background:rgba(177,128,31,.055)}
.vault-table .money.is-in{color:var(--green-2)}
.vault-table .money.is-out{color:var(--red-2)}
.vault-run{font-weight:500}
.muted-2{color:var(--muted-2)}

.kind-pill{display:inline-block; padding:2px 9px; border-radius:3px; font-size:12px; white-space:nowrap;
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted)}
.kind-pill.k-zugang{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.kind-pill.k-abgang{color:var(--red-2); border-color:rgba(155,44,44,.5)}
.sign-pill{display:inline-block; padding:2px 9px; border-radius:3px; font-size:12px; letter-spacing:.4px;
  background:var(--panel-3); border:1px solid var(--line); color:var(--muted)}

/* Zugang oder Abgang im Buchungsfenster */
.seg-kind{display:flex; width:100%; margin-bottom:18px}
.seg-kind button{flex:1; text-align:center; padding:9px 13px}
.seg-kind button[data-kind="zugang"].on{background:rgba(74,139,87,.18); color:var(--green-2)}
.seg-kind button[data-kind="abgang"].on{background:rgba(155,44,44,.18); color:var(--red-2)}

.area-pill.a-vault{color:var(--accent-2); border-color:rgba(139,92,246,.4)}

@media(max-width:860px){
  .vault-head{gap:16px}
  .vault-soll{width:100%; padding:0 0 14px; border-right:none; border-bottom:1px solid var(--line)}
}

/* Teile eines Sanktionsgrundes im Formular (mehrere Paragraphen) */
.san-parts{display:flex; flex-wrap:wrap; gap:6px; margin:-6px 0 0}
.san-rule-hint{margin:-6px 0 0}
.san-rule-hint:empty{display:none}
.san-part{display:inline-flex; align-items:center; gap:4px; padding:4px 4px 4px 9px; border:1px solid var(--line);
  border-radius:6px; font-size:12.5px; background:var(--panel-2); max-width:100%}
.san-part b{color:var(--accent-2); font-weight:600; margin-left:4px}
.san-part.is-free{border-style:dashed}
.san-part .icon-btn{font-size:12px; padding:2px 5px}
.san-part .icon-btn:hover{color:var(--red-2)}

/* ------------------------------------------------------ Ansprechpartner --- */
.ct-layout{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr); gap:22px; align-items:start}
.ct-table td{padding:8px 14px; vertical-align:middle}
.ct-table .input{width:100%; min-width:180px}
.ct-rank{font-weight:500; white-space:nowrap}
.ct-rank .muted{display:block; margin:2px 0 0; font-size:11.5px; white-space:nowrap}
.ct-foot{display:flex; justify-content:flex-end; align-items:center; gap:14px; padding:12px 14px; border-top:1px solid var(--line)}
.ct-note{margin:10px 2px 18px}
.ct-right .set-title{margin-bottom:10px}
.ct-right .muted.small{margin-top:10px}
.ct-unlinked{color:var(--muted-2)}

/* Vorschau im Discord-Look, damit klar ist, was im Channel ankommt */
.dc-msg{background:#313338; border:1px solid #3f4147; border-radius:8px; padding:14px 16px; color:#dbdee1;
  font-family:"gg sans","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px; line-height:1.375}
.dc-author{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.dc-avatar{width:34px; height:34px; border-radius:50%; background:var(--accent); color:#191400; display:inline-flex;
  align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:14px; flex:0 0 auto}
.dc-name{font-weight:600; color:#f2f3f5}
.dc-bot{display:inline-block; margin-left:6px; padding:0 5px; border-radius:3px; background:#5865f2; color:#fff; font-size:10px;
  font-weight:600; line-height:16px; vertical-align:1px}
.dc-time{color:#949ba4; font-size:12px; margin-left:6px}
.dc-embed{max-width:520px; background:#2b2d31; border-left:4px solid var(--accent); border-radius:4px; padding:10px 14px 12px}
.dc-title{font-weight:600; color:#f2f3f5; font-size:15px; margin-bottom:6px}
.dc-desc{color:#dbdee1; margin-bottom:10px}
.dc-field{margin-top:9px}
.dc-field-name{font-weight:600; color:#f2f3f5; margin-bottom:2px}
.dc-field-val{color:#dbdee1; white-space:pre-line}
.dc-mention{display:inline-block; padding:0 3px; border-radius:3px; background:rgba(88,101,242,.3); color:#c9cdfb; font-weight:500}
.dc-footer{margin-top:10px; font-size:12px; color:#949ba4}

@media(max-width:1100px){ .ct-layout{grid-template-columns:1fr} .ct-right{order:-1} }

/* ------------------------------------------------------ Routenkontrolle --- */
.rt-grid{display:grid; grid-template-columns:minmax(300px,2fr) minmax(0,3fr); gap:16px; align-items:start; margin-bottom:16px}
@media(max-width:1180px){ .rt-grid{grid-template-columns:1fr} }
.rt-table th.mid,.rt-table td.mid{white-space:nowrap}
.rt-table .row-actions{flex-wrap:nowrap}
.rt-table .icon-btn{font-size:13px; border:1px solid var(--line); border-radius:4px; padding:3px 7px}
.rt-table .icon-btn:hover{color:var(--text); border-color:var(--accent)}
.rt-table .icon-btn[disabled]{opacity:.3; cursor:default}
.rt-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:16px 18px 0}
.rt-card-head .set-title{margin-bottom:10px}
.rt-table{min-width:0}
.rt-table td{padding:8px 14px}
.rt-add{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line)}
.rt-add .input{flex:1}
.rt-list{margin-bottom:16px}
.rt-place-name{font-weight:500}
.rt-place-name.is-off{color:var(--muted); text-decoration:line-through}
.rt-place-edit{width:100%; min-width:140px}
.badge.clean{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.badge.dirty{color:var(--red-2); border-color:rgba(155,44,44,.5)}
.rt-note{max-width:320px; white-space:pre-wrap; color:var(--muted); font-size:12.5px}
.stat.red .stat-val{color:var(--red-2)}
.stat.green .stat-val{color:var(--green-2)}
.area-pill.a-route{color:#7ea6c4; border-color:rgba(90,130,160,.4)}

/* ------------------------------------------------------ Terminplaner --- */
.kind-pill.k-besprechung{color:var(--accent-2); border-color:rgba(139,92,246,.4)}
.kind-pill.k-forderung{color:var(--red-2); border-color:rgba(155,44,44,.5)}
.kind-pill.k-sonstiges{color:var(--blue-2); border-color:rgba(63,109,140,.5)}
.area-pill.a-termin{color:var(--blue-2); border-color:rgba(63,109,140,.5)}
.tp-list{margin-bottom:16px}
.tp-table{min-width:960px}
.tp-table tr.is-past td{opacity:.6}
.tp-table tr.is-cancelled .name-main{text-decoration:line-through; color:var(--muted)}
.tp-table .row-actions{flex-wrap:nowrap}
.tp-parts-cell{max-width:240px; font-size:13px}
.rem-pill{display:inline-block; margin:0 4px 3px 0; padding:1px 7px; border-radius:3px; font-size:11.5px; white-space:nowrap;
  border:1px solid var(--line); color:var(--muted); background:var(--panel-2)}
.rem-pill.is-open{color:var(--text)}
.rem-pill.is-sent{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.rem-pill.is-skipped{color:var(--muted-2); text-decoration:line-through}
.rem-pill.is-failed{color:var(--red-2); border-color:rgba(155,44,44,.5)}
#termin-modal .modal{max-width:640px}
.tp-chips{margin:0 0 14px}
.tp-rem-block{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px 4px; margin-bottom:14px}
.tp-rem-title{font-size:12px; color:var(--accent-2); letter-spacing:.4px; text-transform:uppercase; margin:0 0 10px}
.tp-rem-block .check{margin-bottom:8px}
.tp-rem-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 12px}
.tp-rem-add input{width:90px}
.tp-rem-add select{width:auto; min-width:120px}

/* ======================================================= Club77 ===== */
.dot-live{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green-2);
          box-shadow:0 0 0 0 rgba(123,180,137,.6); animation:pulse 1.6s infinite; margin-right:7px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,180,137,.55)} 70%{box-shadow:0 0 0 7px rgba(123,180,137,0)} 100%{box-shadow:0 0 0 0 rgba(123,180,137,0)}}
.dur{font-variant-numeric:tabular-nums; white-space:nowrap}
.src{display:inline-block; padding:2px 8px; border-radius:3px; font-size:12px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.src.button{color:var(--accent-2); border-color:rgba(139,92,246,.45)}
.src.command{color:var(--blue-2); border-color:rgba(63,109,140,.5)}
.src.web{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.src.auto{color:var(--amber-2); border-color:rgba(177,128,31,.45)}
.src.admin{color:var(--red-2); border-color:rgba(155,44,44,.5)}
tr.row-open td{background:rgba(74,139,87,.05)}
tr.row-warned td{background:rgba(177,128,31,.07)}
.warn-badge{color:var(--amber-2); font-size:12px; margin-left:6px}
.dash-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px}
.dash-card{padding:16px 20px}
.dash-card h3{font-family:var(--serif); font-size:15px; color:var(--accent-2); margin:0 0 12px; font-weight:600}
.duty-list{list-style:none; margin:0; padding:0}
.duty-list li{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft)}
.duty-list li:last-child{border-bottom:none}
.duty-list .duty-name{flex:1; font-weight:500}
.duty-list .duty-since{color:var(--muted); font-size:12.5px}
.duty-list .dur{color:var(--green-2); font-weight:600}
.top-list{list-style:none; margin:0; padding:0; counter-reset:top}
.top-list li{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-soft)}
.top-list li:last-child{border-bottom:none}
.top-list .top-rank{width:24px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right}
.top-list .top-name{flex:1}
.top-list .top-bar{flex:1; height:6px; background:var(--panel-3); border-radius:3px; overflow:hidden}
.top-list .top-bar span{display:block; height:100%; background:var(--accent)}
.top-list .top-val{min-width:70px; text-align:right; font-variant-numeric:tabular-nums; color:var(--text)}
.copy-row{display:flex; gap:8px; align-items:center}
.copy-row .input{flex:1; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
.set-hint{background:var(--accent-soft); border:1px solid rgba(139,92,246,.35); border-radius:var(--radius); padding:10px 12px; font-size:12.5px; color:var(--text); margin-bottom:14px}
.set-hint b{color:var(--accent-2)}
.set-problem{background:rgba(155,44,44,.12); border:1px solid rgba(155,44,44,.45); border-radius:var(--radius); padding:10px 12px; font-size:13px; color:var(--red-2); margin-bottom:14px}
.set-actions{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 14px}
.totals-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.total-item{display:flex; justify-content:space-between; align-items:baseline; padding:8px 12px; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:var(--radius)}
.total-item .muted{font-size:12px}
.total-item b{font-variant-numeric:tabular-nums}
.area-pill.a-stempel{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.area-pill.a-discord{color:var(--accent-2); border-color:rgba(139,92,246,.4)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}