:root{
  --ink:#1f2937; --muted:#5b6670;
  --line:#9aa3ad; --line-soft:#c9cfd6;
  --tint:#f2f4f6; --tint2:#e8ebef;
  --accent:#2b4a63; --ok:#2f7a52; --warn:#a15c1b; --bad:#a12b2b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#eceef1; color:var(--ink);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
button,input,select{font:inherit}
.wp-sprite-holder{display:none}

/* ---------------- Kontomenue (dialog) ---------------- */
.acct-dialog{border:0; border-radius:12px; padding:0; max-width:420px; width:92%; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.acct-dialog .acct-body{padding:20px 22px; font-size:14px; line-height:1.6}
.acct-dialog h2{margin:0 0 2px; font-size:17px; color:var(--accent)}
.acct-dialog .acct-who{margin:0 0 14px; color:var(--muted); font-size:13px}
.acct-dialog .acct-actions{display:flex; flex-direction:column; gap:8px}
.acct-dialog .acct-out{margin-top:12px; font-size:13px; color:var(--ok)}
.acct-dialog .acct-foot{text-align:right; margin-top:16px}

/* ---------------- Anmeldeseite ---------------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.auth-card{background:#fff; border-radius:14px; box-shadow:0 6px 28px rgba(0,0,0,.12); padding:26px 28px; width:100%; max-width:420px}
.auth-card h1{margin:0 0 4px; font-size:21px; color:var(--accent)}
.auth-card p.lead{margin:0 0 18px; color:var(--muted); font-size:14px}
.auth-card label{display:block; font-size:13px; color:var(--muted); margin:12px 0 4px}
.auth-card input{width:100%; padding:9px 11px; border:1px solid #c3c9d0; border-radius:8px}
.auth-card .btn{width:100%; margin-top:18px; padding:10px}
.tabs{display:flex; gap:6px; margin-bottom:6px}
.tabs.tabs-mode{margin-top:16px}
.upper{text-transform:uppercase}
.tabs button{flex:1; padding:8px; border:1px solid #c3c9d0; background:#f7f8fa; border-radius:8px; cursor:pointer; font-size:13px}
.tabs button[aria-selected=true]{background:var(--accent); border-color:var(--accent); color:#fff}
.msg{margin-top:14px; font-size:13px; padding:9px 11px; border-radius:8px; display:none}
.msg.err{display:block; background:#fdecec; color:var(--bad)}
.msg.ok{display:block; background:#eaf6ef; color:var(--ok)}
.switch-hint{margin-top:14px; font-size:12.5px; color:var(--muted); text-align:center}

/* ---------------- Werkzeugleiste ---------------- */
.toolbar{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #d7dbe0; padding:9px 14px; box-shadow:0 1px 6px rgba(0,0,0,.06)}
.tb-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tb-row+.tb-row{margin-top:8px}
.btn{font-size:13px; padding:6px 11px; border-radius:7px; border:1px solid #c3c9d0; background:#fff; color:var(--ink); cursor:pointer}
.btn:hover{background:#f4f6f8}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.small{padding:4px 8px; font-size:12px}
.tb-label{font-size:12px; color:var(--muted)}
.sep{width:1px; align-self:stretch; background:#dfe3e8; margin:0 3px}
.grow{flex:1}
input[type=date],select{padding:5px 7px; border:1px solid #c3c9d0; border-radius:7px; font-size:13px}
.status{font-size:12.5px; color:var(--muted); min-width:150px}
.status.saving{color:var(--warn)} .status.saved{color:var(--ok)} .status.error{color:var(--bad)}
.banner{display:none; margin:8px 14px 0; padding:9px 12px; border-radius:8px; font-size:13px; background:#fdf3e3; color:var(--warn); border:1px solid #f0dcbb}
.banner.show{display:block}

/* ---------------- Piktogramm-Palette ---------------- */
.palette{display:flex; flex-wrap:wrap; gap:5px}
.pgroup{display:flex; flex-wrap:wrap; gap:4px; align-items:center; border:1px solid #e2e6ea; border-radius:9px; padding:4px 7px; background:#fafbfc}
.pgroup>b{font-size:10px; font-weight:600; color:#7a848d; text-transform:uppercase; letter-spacing:.04em; margin-right:2px}
.pbtn{display:inline-flex; flex-direction:column; align-items:center; gap:2px; width:52px; padding:5px 2px 4px; border:1px solid transparent; border-radius:8px; background:transparent; cursor:pointer; color:var(--ink)}
.pbtn:hover{background:#e9eef3; border-color:#cdd6de}
.pbtn svg{width:19px; height:19px}
.pbtn span{font-size:9px; line-height:1.1; text-align:center; color:#4a545d}

/* ---------------- A4-Blatt ---------------- */
.stage{padding:16px 0 40px; display:flex; justify-content:center}
.sheet{width:281mm; min-height:194mm; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.14); transform-origin:top center; display:flex; flex-direction:column}
.head{display:flex; align-items:flex-end; gap:10mm; padding:0 0 2.5mm; border-bottom:1.6pt solid var(--accent)}
.head h1{font-size:19pt; margin:0; font-weight:700; color:var(--accent)}
.head .sub{font-size:8.5pt; color:var(--muted); margin-top:1mm}
.head .meta{margin-left:auto; text-align:right; font-size:9pt; line-height:1.5}
.head .meta .kw{font-size:13pt; font-weight:700; color:var(--accent)}
.motto{flex:1; border-bottom:1px dotted var(--line-soft); align-self:flex-end; min-height:6mm; padding:0 2mm 1mm; font-size:9pt}

table{width:100%; border-collapse:collapse; table-layout:fixed; margin-top:3mm; flex:1}
col.lbl{width:26mm}
th,td{border:.6pt solid var(--line-soft); vertical-align:top; padding:0}
thead th{border-color:var(--line); background:var(--tint2); font-size:9pt; height:8mm; text-align:center; padding:1mm 0 0}
thead th .dw{display:block; font-weight:700}
thead th .dt{display:block; font-size:7pt; font-weight:400; color:var(--muted); margin-top:.3mm}
thead th.corner{background:var(--accent); color:#fff; font-size:8pt}
th.we{background:#dde2e7}
td.lbl{background:var(--tint); border-right:1pt solid var(--line); font-size:10pt; font-weight:700; padding:1.5mm 2mm; position:relative; overflow:hidden}
td.lbl .cell{height:auto; padding:0; display:block}
td.lbl .role{font-size:7pt; font-weight:400; color:#6b757e; margin-top:.5mm}
tr.person td{height:23mm}
tr.shared td{height:15mm}
tr.shared td.lbl{font-size:9pt}
tr.first-shared td{border-top:1.4pt solid var(--line)}
td.we{background:#fafbfc}
.cell{height:100%; width:100%; padding:1.2mm 1.5mm; font-size:8pt; line-height:1.45; outline:none; overflow:hidden; word-break:break-word}
.cell:focus{background:#eef5fb; box-shadow:inset 0 0 0 1.5pt #7ea8c9}
.cell:empty::before{content:attr(data-ph); color:#c8cfd6; font-size:7.5pt}
.ic{display:inline-block; vertical-align:-2px; line-height:0; margin-right:.6mm}
.ic svg{width:3.6mm; height:3.6mm}
.cell .ic:hover{background:#ffe9c9; border-radius:2px}
.rowtool{display:none; position:absolute; right:1mm; top:1mm; font-size:10px; color:#9aa3ad; cursor:pointer; background:#fff; border:1px solid #dfe3e8; border-radius:4px; padding:0 4px; line-height:15px}
td.lbl:hover .rowtool{display:block}

.foot{display:flex; gap:4mm; margin-top:3mm; align-items:stretch}
.legend{flex:1; border:.6pt solid var(--line-soft); border-radius:1.5mm; padding:1.5mm 2mm}
.legend h2,.notes h2{font-size:7.5pt; margin:0 0 1mm; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.legend .items{display:grid; grid-template-columns:repeat(8,1fr); gap:.6mm 2mm}
.legend .it{display:flex; align-items:center; gap:1mm; font-size:6.6pt; color:#3d474f}
.legend .it svg{width:3mm; height:3mm; flex:none}
.notes{width:78mm; border:.6pt solid var(--line-soft); border-radius:1.5mm; padding:1.5mm 2mm; display:flex; flex-direction:column}
.notes .cell{padding:0; font-size:8pt; flex:1}

/* ---------------- Tagesansicht (Handy) ---------------- */
.dayview{display:none; padding:10px 10px 60px; max-width:760px; margin:0 auto}
.daynav{display:flex; gap:6px; overflow-x:auto; padding:4px 0 10px; position:sticky; top:0; background:#eceef1; z-index:10}
.daynav button{flex:0 0 auto; min-width:60px; padding:7px 10px; border:1px solid #ccd3da; background:#fff; border-radius:9px; cursor:pointer; font-size:13px; text-align:center; line-height:1.25}
.daynav button small{display:block; font-size:10.5px; color:var(--muted)}
.daynav button[aria-current=true]{background:var(--accent); border-color:var(--accent); color:#fff}
.daynav button[aria-current=true] small{color:#dbe6ee}
.daycard{background:#fff; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); margin-bottom:10px; overflow:hidden}
.daycard h3{margin:0; padding:9px 12px; font-size:14px; background:var(--tint); border-bottom:1px solid #e3e7eb}
.daycard h3 span{font-weight:400; color:var(--muted); font-size:12px; display:block}
.dayrow{display:flex; gap:10px; padding:9px 12px; border-bottom:1px solid #eef1f4}
.dayrow:last-child{border-bottom:0}
.dayrow .who{flex:0 0 92px; font-size:13px; font-weight:600; color:#3d474f; padding-top:2px}
.dayrow .who small{display:block; font-weight:400; color:var(--muted); font-size:11px}
.dayrow .cell{flex:1; min-height:34px; font-size:14px; line-height:1.5; padding:4px 6px; border:1px dashed #dde2e7; border-radius:7px; height:auto}
.dayrow .cell:empty::before{font-size:13px; content:"–"; color:#c8cfd6}
.dayview .ic svg{width:16px; height:16px}
.dayview .ic{vertical-align:-3px; margin-right:3px}
.dayview .notes-card .cell{min-height:60px}

body.view-day .stage{display:none}
body.view-day .dayview{display:block}
/* In der Tagesansicht liegt die Palette unten und ist eingeklappt,
   damit der Tag selbst den Bildschirm bekommt. */
body.view-day .palette-wrap{
  position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #d7dbe0;
  z-index:60; box-shadow:0 -2px 10px rgba(0,0,0,.08);
  max-height:0; padding:0; overflow:hidden; margin:0;
}
body.view-day.palette-open .palette-wrap{max-height:46vh; padding:6px; overflow:auto}
body.view-day.palette-open .dayview{padding-bottom:48vh}
.only-day{display:none}
body.view-day .only-day{display:inline-block}

@media (max-width:900px){
  .toolbar{padding:8px}
  .hide-sm{display:none !important}
}

/* ---------------- Druck ---------------- */
@page{ size:A4 landscape; margin:8mm; }
@media print{
  body{background:#fff}
  .toolbar,.banner,.dayview,.palette-wrap{display:none !important}
  .stage{display:block !important; padding:0}
  .sheet{width:auto; min-height:0; box-shadow:none; transform:none !important; height:194mm}
  .cell:focus{background:transparent; box-shadow:none}
  .cell:empty::before{content:""}
  .rowtool{display:none !important}
}