/* 10-projekt-material.css · Teil 10 von 19 · Projekt-Material (extern zumieten, Wunschmaterial, Spezialsachen, Materialdeadline), Pikett-Kalender. Reihenfolge der Dateien = Kaskade (index.html), nicht umsortieren. */
/* Material: zwei Spalten + Wunschmaterial */
.mat2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:900px){ .mat2 { grid-template-columns:1fr; } }
.mat-sp { margin:0; }
/* Material extern zumieten — Tabelle nach Kategorie */
.mm-liste { display:grid; grid-template-columns:64px minmax(150px,1.3fr) 150px minmax(120px,1fr) auto;
  column-gap:10px; align-items:baseline; }
.mm-kopf, .mm-z { display:grid; grid-template-columns:subgrid; grid-column:1/-1; align-items:baseline; }
.mm-kopf { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:2px 0 4px; }
.mm-z { padding:4px 0; border-radius:6px; font-size:13px; }
.mm-z + .mm-z { border-top:1px solid #F0F1F5; }
.mm-z:hover { background:#F7F8FB; }
.mm-kat { grid-column:1/-1; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--pink,#E8185A); margin:12px 0 2px; padding-bottom:3px; border-bottom:1px solid #F0F1F5; }
.mm-kat:first-child, .mm-kopf + .mm-kat { margin-top:2px; }
.mm-menge { font-family:"IBM Plex Mono",monospace; font-weight:700; color:var(--navy); }
.mm-bez { font-weight:600; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mm-firma, .mm-notiz { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mm-in { width:100%; padding:2px 6px; border:1px solid var(--border); border-radius:6px; font-family:inherit; font-size:12px; }
.mm-menge-in { text-align:right; }
.mm-akt { text-align:right; }
.mm-x { color:#B4232A; text-decoration:none; font-size:12px; cursor:pointer; }
.mm-x:hover { text-decoration:underline; }
.mm-add { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px;
  border-top:1px solid var(--border); padding-top:10px; }
.mm-add select, .mm-add input { padding:5px 8px; border:1px solid var(--border); border-radius:7px; font-family:inherit; font-size:13px; }
.mm-add #mmBez { flex:1; min-width:150px; }
.mm-add #mmNotiz { flex:1; min-width:120px; }
.mm-add #mmMenge { width:64px; }
@media (max-width:760px){
  .mm-liste { display:block; }
  .mm-kopf { display:none; }
  .mm-z { display:flex; flex-wrap:wrap; gap:4px 8px; padding:6px 0; }
}
@supports not (grid-template-columns: subgrid){
  .mm-liste { display:block; }
  .mm-kopf { display:none; }
  .mm-z { display:flex; flex-wrap:wrap; gap:4px 8px; }
}
/* Wunschmaterial — Spaltenraster, alle Felder gleich breit */
.wm-liste { display:grid; grid-template-columns:48px minmax(130px,1.2fr) 136px minmax(150px,1fr) 120px auto;
  column-gap:10px; align-items:center; }
.wm-kopf, .wm-z { display:grid; grid-template-columns:subgrid; grid-column:1/-1; align-items:center; }
.wm-kopf { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:2px 0 4px; }
.wm-z { padding:4px 0; border-radius:6px; font-size:13px; }
.wm-z + .wm-z { border-top:1px solid #F0F1F5; }
.wm-z:hover { background:#F7F8FB; }
.wm-z.wm-durch .wm-bez { text-decoration:line-through; color:var(--muted); }
.wm-menge { font-family:"IBM Plex Mono",monospace; font-weight:700; color:var(--navy); text-align:right; }
.wm-bez { font-weight:700; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.wm-badge { font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:99px; justify-self:start; }
.wm-offen { background:#EEF0FB; color:#3C3489; }
.wm-pruef { background:#FFF3E0; color:#8A5300; }
.wm-ok { background:#E7F6EF; color:#0A6B49; }
.wm-nok { background:#FDECEE; color:#B4232A; }
.wm-del { background:#ECECEF; color:#6B7280; }
.wm-sel { width:100%; box-sizing:border-box; font-size:11.5px; font-weight:600; font-family:inherit;
  padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:#fff; color:var(--navy); cursor:pointer; }
.wm-sel.wm-pruef { background:#FFF6EC; color:#8A5300; border-color:#E7C48A; }
.wm-sel.wm-ok { background:#F0FAF4; color:#0A6B49; border-color:#9AD3B7; }
.wm-sel.wm-nok { background:#FDF2F3; color:#B4232A; border-color:#EBA9AE; }
.wm-sel.wm-offen { background:#F4F5FB; color:#3C3489; }
.wm-komm { width:100%; box-sizing:border-box; font-size:12px; padding:4px 8px; border:1px solid var(--border);
  border-radius:6px; font-family:inherit; }
.wm-komm:focus, .wm-sel:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(84,104,217,.16); }
.wm-komm-ro { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.wm-von { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.wm-akt { text-align:right; }
.wm-x { color:var(--muted); text-decoration:none; font-size:13px; padding:0 2px; }
.wm-x:hover { color:#B4232A; }
@media (max-width:760px){
  .wm-liste { display:block; }
  .wm-kopf { display:none; }
  .wm-z { display:flex; flex-wrap:wrap; gap:4px 8px; padding:6px 0; align-items:center; }
  .wm-sel, .wm-komm { width:auto; flex:1 1 130px; }
}
@supports not (grid-template-columns: subgrid){
  .wm-liste { display:block; }
  .wm-kopf { display:none; }
  .wm-z { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
  .wm-sel, .wm-komm { width:auto; flex:1 1 130px; }
}
.wm-add { display:flex; gap:6px; align-items:center; margin-top:10px; }
.wm-add input { padding:6px 9px; border:1px solid var(--border); border-radius:7px; font:inherit; font-size:13px; }
.wm-add input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(84,104,217,.16); }
.wm-add input#wmText { flex:1; min-width:110px; }
.wm-menge-in { width:64px; flex:none; }
.wm-nt { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:1px 6px; border-radius:99px; background:#FDECEF; color:#B4232A; vertical-align:1px; }
/* Materialdeadline: Leiste unter den Unterreitern, Zustand als Pille */
.md-leiste { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:9px 14px;
  background:#fff; border:1px solid var(--border); border-left:3px solid var(--cyan); border-radius:10px; font-size:13px; color:#1F2430; }
.md-leiste .psub-i { width:16px; height:16px; color:var(--muted); flex:none; }
.md-leiste .md-t { flex:1 1 260px; min-width:0; }
.md-leiste.md-keine { border-left-color:var(--border); color:var(--muted); }
.md-leiste.md-bald { border-left-color:#D98A00; }
.md-leiste.md-abgelaufen { border-left-color:var(--pink); }
.md-badge { font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; white-space:nowrap; }
.md-badge.md-offen { background:#E6F4EC; color:#0A6B49; }
.md-badge.md-bald { background:#FFF3E0; color:#8A5300; }
.md-badge.md-abgelaufen { background:#FDECEF; color:#B4232A; }
.md-btn { flex:none; }
/* Nach Ablauf statt des Eingabeformulars */
.md-sperre { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:12px 14px;
  background:#FDF4F5; border:1px solid #F3C9D0; border-radius:10px; font-size:13px; line-height:1.45; color:#1F2430; }
.md-sperre > div { flex:1 1 280px; min-width:0; }
.md-sperre .psub-i { width:18px; height:18px; color:#B4232A; flex:none; }
/* Spezialsachen — wie Mietmaterial, ohne Kategorie und Partner */
.sp-liste { display:grid; grid-template-columns:64px minmax(150px,1.3fr) minmax(120px,1fr) auto; column-gap:10px; align-items:baseline; }
.sp-kopf, .sp-z { display:grid; grid-template-columns:subgrid; grid-column:1/-1; align-items:baseline; }
.sp-kopf { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:2px 0 4px; }
.sp-z { padding:4px 0; border-radius:6px; font-size:13px; }
.sp-z + .sp-z { border-top:1px solid #F0F1F5; }
.sp-z:hover { background:#F7F8FB; }
.sp-add { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.sp-add input { padding:5px 8px; border:1px solid var(--border); border-radius:7px; font-family:inherit; font-size:13px; }
.sp-add #spBez { flex:1; min-width:150px; }
.sp-add #spNotiz { flex:1; min-width:120px; }
.sp-add #spMenge { width:64px; }
@media (max-width:760px){
  .sp-liste { display:block; }
  .sp-kopf { display:none; }
  .sp-z { display:flex; flex-wrap:wrap; gap:4px 8px; padding:6px 0; }
}
@supports not (grid-template-columns: subgrid){
  .sp-liste { display:block; }
  .sp-kopf { display:none; }
  .sp-z { display:flex; flex-wrap:wrap; gap:4px 8px; }
}
.tk-ev-ok b { color:#0A6B49; }
.tk-ev-warn b { color:#B4232A; }
.cg-token { background:#FFF8E6; border:1px solid #F0D68A; border-radius:10px; padding:12px; margin-top:8px; }
.cg-code { display:block; font-family:"IBM Plex Mono",monospace; font-size:13px; word-break:break-all; background:#fff; border:1px solid var(--border); border-radius:6px; padding:8px; }
/* Pikett-Kalender */
.pk-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.pk-wt { font-size:12px; font-weight:700; color:var(--muted); text-align:center; padding-bottom:2px; }
.pk-cell { min-height:74px; border:1px solid var(--border); border-radius:8px; padding:5px 6px; background:#fff; }
.pk-cell.pk-we { background:#FAFBFE; }
.pk-cell.pk-leer { background:transparent; border:none; }
.pk-cell.pk-heute { border-color:var(--pink,#E8185A); box-shadow:0 0 0 1px var(--pink,#E8185A) inset; }
.pk-daynum { font-size:12px; color:var(--muted); font-weight:600; }
.pk-name { font-size:13px; font-weight:600; color:var(--navy); margin-top:4px; line-height:1.25; word-break:break-word; }
@media (max-width:720px){ .pk-cell { min-height:58px; } .pk-name { font-size:11px; } }