/* BC-Linn Terminplanung */
:root{
  --bg:#eef2f7; --panel:#ffffff; --ink:#141a24; --muted:#5d6472; --line:#dbe0e8;
  --accent:#1f3fa8; --accent-2:#2747b8; --accent-ink:#ffffff; --need:#d42a2a; --need-bg:#fde8e8; --ok:#1d7a46; --warn:#a16207;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --lw:12px; --tabh:58px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1218; --panel:#181c24; --ink:#e9ebf0; --muted:#9aa1ad; --line:#2a2f3a;
  --accent:#7d9bff; --accent-2:#94adff; --accent-ink:#0b0f1a; --need:#ff6b6b; --need-bg:#3a1a1c; --ok:#4ccf86; --warn:#f0b429; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:48px}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
main{display:flex;flex-direction:column;gap:14px}

/* Kopf */
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:64px;height:auto;display:block}
.bt{display:flex;flex-direction:column;font-family:var(--display);font-weight:700;line-height:.92;letter-spacing:.01em}
.b1{font-size:1.75rem}
.b2{font-size:1.4rem;color:var(--accent)}
.who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Reiter */
.tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;overflow-x:auto}
.tabs button{flex:1;border:0;background:transparent;font-family:var(--display);font-size:1.05rem;font-weight:600;letter-spacing:.03em;padding:8px 10px;border-radius:7px;color:var(--muted);white-space:nowrap}
.tabs button[aria-current=page]{background:var(--accent);color:var(--accent-ink)}
.tabs button:hover:not([aria-current=page]){color:var(--ink);background:var(--bg)}
.tabs .ts{display:none}

/* Bedienelemente */
button,.btn{font:inherit;font-size:.88rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:6px;padding:7px 12px;cursor:pointer;line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
button:hover,.btn:hover{border-color:var(--muted)}
button:disabled,select:disabled,input:disabled{opacity:.55;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.danger{color:var(--need);border-color:var(--need)}
button.small{padding:3px 8px;font-size:.78rem}
button.ghost{border-style:dashed;color:var(--muted)}
button.adminon{border-color:var(--accent)}
select,input{font:inherit}
select{font-size:.86rem;padding:4px 6px;border-radius:5px;border:1px solid var(--line);background:var(--panel);color:var(--ink);max-width:100%}
input[type=search]{padding:7px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);min-width:0;flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap}
.chip.none{color:var(--muted)}
.chip.custom{font-style:italic}
.chip.nocls{font-style:italic;font-size:.82rem}
.chip.out{text-decoration:line-through;text-decoration-color:var(--need);opacity:.8}
.mine{font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--pc,var(--muted))}
.badge{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--accent);color:var(--accent-ink)}
.pill{font-size:.75rem;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid}
.pill.saved{color:var(--ok);border-color:var(--ok)}
.pill.draft{color:var(--warn);border-color:var(--warn)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar:empty{display:none}
.toolbar.admin{padding:8px;border:1px dashed var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.toolbar.admin::before{content:"Admin";font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700;color:var(--accent);margin-right:2px}
.alert{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--need-bg);color:var(--ink);border-left:4px solid var(--need);padding:10px 14px;border-radius:4px}
.alert strong{color:var(--need)}
.hint{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);padding:10px 14px;border-radius:4px;font-size:.9rem}
.hint .grow{flex:1;min-width:180px}
#hint:empty{display:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--muted)}
.legend .chip{color:var(--ink)}
.muted{color:var(--muted)}
.small-t{font-size:.8rem}
.empty{padding:40px 16px;text-align:center;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px}
.foot{display:flex;justify-content:center}
.ver{text-align:center;color:var(--muted);font-size:.72rem}

/* Monat */
.monthnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.monthnav h2{font-family:var(--display);font-size:1.6rem;margin:0 4px;min-width:170px;text-align:center;letter-spacing:.02em}
.monthnav>button:not(.small){font-size:1.2rem;padding:4px 14px}

/* Tabelle */
.tablebox{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%}
th{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:600;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:1}
td{padding:9px 12px;vertical-align:middle;box-shadow:inset 0 -1px 0 var(--line)}
td.date{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86rem;white-space:nowrap}
td.date .tm{color:var(--muted);font-size:.78rem}
td.day{white-space:nowrap}
td.muted{color:var(--muted)}
tr.next td.date{color:var(--accent);font-weight:600}
tr.wed td{background:color-mix(in srgb,var(--bg) 45%,transparent)}
tr.past td{opacity:.6}
tr.mhead td{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--bg);padding:6px 12px}
.label{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:600;padding:1px 6px;border-radius:3px;border:1px solid var(--accent);color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-family:var(--body)}
.cell{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
td.need{background:var(--need-bg)!important;box-shadow:inset 3px 0 0 var(--need),inset 0 -1px 0 var(--line)}
.state{color:var(--need);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
td.need .state::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--need);margin-right:5px;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){td.need .state::before{animation:none}}
.nos{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;color:var(--muted)}
.nos .dot{width:9px;height:9px}
.nobody{color:var(--need);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.why{color:var(--muted);font-size:.72rem;font-style:italic}
td.date .dshort,td.date .mlabel,td.date .madmin{display:none}
/* Abwesenheits-Spalten (Technik) */
th.lanes,td.lanes{padding:0 10px 0 6px;box-shadow:none;border-left:1px solid var(--line);width:1%}
td.lanes{position:relative;min-width:40px}
td.lanes .lanegrid{position:absolute;inset:0 10px 0 6px}
th.lanes{padding-top:8px;padding-bottom:8px}
.lanegrid{display:grid;gap:5px;height:100%}
.lane{position:relative}
.seg{position:absolute;inset:0;background:var(--pc)}
.seg.s{top:6px;border-top-left-radius:6px;border-top-right-radius:6px}
.seg.e{bottom:6px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.seg.off{opacity:.55}
.lanehead{width:var(--lw);height:var(--lw);border-radius:50%;background:var(--pc);margin:auto}
table.stats td,table.stats th{padding:7px 10px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tfoot td{font-weight:700;box-shadow:inset 0 1px 0 var(--line)}

/* Meine Dienste */
.mine-head h2{font-family:var(--display);font-size:1.7rem;margin:0}
.sub{color:var(--muted);font-size:.88rem;margin:2px 0 0}
h3.sect{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:1rem;color:var(--muted);margin:6px 0 -4px}
.cards{display:flex;flex-direction:column;gap:8px}
.card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.card.need{background:var(--need-bg);border-left:4px solid var(--need)}
.cdate{font-family:var(--mono);font-size:.85rem;display:flex;flex-direction:column;min-width:74px}
.cdate span{color:var(--muted);font-size:.78rem}
.ctitle{font-weight:600}
.cmeta{color:var(--muted);font-size:.82rem}
.cbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Dialoge */
.overlay{position:fixed;inset:0;background:rgba(10,12,18,.55);display:flex;align-items:flex-start;justify-content:center;
  padding:max(30px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 16px max(12px,env(safe-area-inset-left,0px));z-index:50;overflow-y:auto}
.modal{background:var(--panel);color:var(--ink);border-radius:10px;width:100%;max-width:480px;padding:20px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);margin-bottom:24px}
.modal.wide{max-width:680px}
.modal h2{font-family:var(--display);font-size:1.5rem;margin:0;letter-spacing:.02em}
.modal h3{font-family:var(--display);font-size:1.05rem;margin:4px 0 0;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.modal p{margin:0;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:.8rem;font-weight:600;color:var(--muted)}
.field input,.field select{padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.field input[type=color]{padding:2px;height:38px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mpick{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}
.actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;align-items:center}
.actions.start{justify-content:flex-start}
.actions.spread{justify-content:space-between}
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:60vh;overflow-y:auto}
.names button{padding:10px 12px;font-weight:600;border-left:4px solid var(--pc);text-align:left}
.err{color:var(--need);font-size:.85rem}
.err:empty{display:none}
.okmsg{color:var(--ok)!important;font-weight:600}
.list{display:flex;flex-direction:column;gap:6px}
.list .item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:.88rem;background:var(--panel);color:var(--ink);text-align:left;flex-wrap:wrap}
.useritem{width:100%}
.useritem .uname{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:.7rem;padding:1px 6px;border-radius:3px;background:var(--bg);border:1px solid var(--line)}
.tag.half{border-color:var(--warn);color:var(--warn)}
.tag.reserve{border-style:dashed;color:var(--muted)}
.tag.admin{border-color:var(--accent);color:var(--accent);font-weight:600}
.choice{flex-direction:column;align-items:flex-start;text-align:left;gap:3px;padding:12px}
.choice span{color:var(--muted);font-size:.82rem}
.checkline{display:flex;gap:8px;align-items:center;font-size:.9rem}
.btnrow{display:flex;gap:6px;flex-wrap:wrap}
.duties{display:flex;flex-direction:column;gap:6px}
.dutyrow{display:grid;grid-template-columns:1fr 80px 110px;gap:8px;align-items:center;font-size:.9rem}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;font-size:.9rem}
.checks label{display:flex;gap:6px;align-items:center}
.mailbox{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px;font-family:var(--mono);font-size:.8rem;word-break:break-all;user-select:all}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:6px;font-size:.88rem;z-index:60;max-width:calc(100% - 32px)}
#print{display:none}

/* Handy */
@media (max-width:640px){
  body{font-size:14px;padding-bottom:calc(var(--tabh) + 24px + env(safe-area-inset-bottom,0px))}
  .hide-s{display:none}
  .brand img{width:50px}
  .b1{font-size:1.45rem}.b2{font-size:1.15rem}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;border-radius:0;border-width:1px 0 0;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));gap:2px;overflow:visible}
  .tabs button{flex:1 1 0;font-size:.74rem;padding:11px 0;letter-spacing:0;min-width:0;justify-content:center}
  .tabs .tl{display:none}.tabs .ts{display:inline}
  .toast{bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px))}
  .row2{grid-template-columns:1fr}
  .monthnav h2{font-size:1.25rem;min-width:0;flex:1;white-space:nowrap}
  th.day,td.day{display:none}
  th,td{padding:8px 6px}
  td.date{font-size:.8rem;line-height:1.3}
  td.date .dlong{display:none}
  td.date .dshort,td.date .mlabel{display:block}
  td.date .dshort b{font-family:var(--body);font-weight:600}
  td.date .madmin{display:flex;gap:4px;margin-top:4px}
  td.date .label{margin:3px 0 0;font-size:.62rem;padding:0 4px;white-space:normal}
  .cell{gap:4px 6px}
  .chip{gap:4px;white-space:normal}
  .dot{width:8px;height:8px}
  td .cell select{font-size:.8rem;padding:3px 2px;width:100%;max-width:150px}
  td.need .state{font-size:.66rem;width:100%}
  td button.small{padding:3px 6px;font-size:.72rem}
  :root{--lw:6px}
  th.lanes,td.lanes{padding:0 4px 0 3px}
  td.lanes .lanegrid{inset:0 4px 0 3px}
  .lanegrid{gap:2px}
  .seg.s{top:4px;border-top-left-radius:3px;border-top-right-radius:3px}
  .seg.e{bottom:4px;border-bottom-left-radius:3px;border-bottom-right-radius:3px}
  .toolbar button{flex:1 1 auto;justify-content:center}
  .card{grid-template-columns:auto 1fr;gap:8px 12px}
  .cbtns{grid-column:1/-1;justify-content:flex-start}
  .dutyrow{grid-template-columns:1fr 70px 100px}
}

/* Drucken / PDF */
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;color:#000;padding:0;font-size:11pt}
  .wrap,#modalRoot,#toastRoot{display:none!important}
  #print{display:block}
  .phead{display:flex;flex-direction:column;align-items:center;gap:6mm;margin-bottom:6mm;padding-bottom:4mm;border-bottom:2px solid #1f3fa8;text-align:center}
  .phead img{width:108mm;max-width:100%;height:auto}
  .ptitle h1{font-family:var(--display);font-size:22pt;margin:0;color:#1f3fa8}
  .ptitle p{margin:2px 0 0;font-size:13pt;font-weight:600}
  #print table{width:100%;border-collapse:collapse}
  #print th{position:static;color:#000;background:#e8edf7;font-size:9.5pt;padding:5px 7px;border:1px solid #9aa6bd}
  #print td{padding:5px 7px;border:1px solid #c4ccd9;box-shadow:none;font-size:10.5pt}
  #print tr{break-inside:avoid}
  .plabel{font-size:8.5pt;font-weight:600;color:#1f3fa8}
  .pfoot{font-size:8pt;color:#555;margin-top:8px}
}
@media (prefers-color-scheme:dark){.brand img{background:#e6ecf5;border-radius:10px;padding:3px 5px}}
.thsub{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:.72rem;font-weight:500;color:var(--muted);margin-top:2px}
td.cancelled{color:var(--muted);font-style:italic;text-align:center;background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--line) 60%,transparent) 8px 9px)}
.grouprow{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr 1fr auto;gap:6px;align-items:end;padding:8px;border:1px solid var(--line);border-radius:6px}
.grouprow input,.grouprow select{padding:6px 8px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%;font-size:.85rem}
.grouprow label{font-size:.7rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:2px}
@media (max-width:640px){.grouprow{grid-template-columns:1fr 1fr}}
td .cell select{max-width:190px}

/* Übersetzung: auf dem Handy unter der Predigt */
.trinline{display:none}
@media (max-width:640px){
  th.col-tr,td.col-tr{display:none}
  .trinline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
  .trinline.need{box-shadow:inset 3px 0 0 var(--need);padding-left:6px;background:var(--need-bg)}
  .trlbl{width:100%;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  .trinline .cell{display:contents}
}