/* The Kanban page (DESIGN-AUTOSAVE.md §6.3, package K5): the look of today's page „Meine Planung"
   (planung_seite.html after PR #778), plus the save marks of §7. Loaded after gemeinsam/basis.css.
   Colours are lowercase hex. On narrow screens every form control is at least 16px, so a phone
   does not zoom when she taps one (Iris, 22.09.2026: the filters were 14px at 390px width). */

:root{color-scheme:light;--bg:#f4f3ee;--col:#e9e8e1;--card:#fff;--ink:#1e2530;--ink2:#5b6472;--line:#d6d4cb;--accent:#34506b;--over:#b23d2a;--over-bg:#f8e6e2;--ok:#3c6f55;--ok-bg:#e3efe7;--amber:#7a5a14;--amber-bg:#f4ecd6;--goal:#ebeae4;--drop:#dce6ef;--proj:#e2eaf3;--lead:#f6e4df;--mittel:#2c5282;--mittel-bg:#e3ecf7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#171b21;--col:#1f242c;--card:#272d37;--ink:#e8e6df;--ink2:#a2a8b3;--line:#3a4150;--accent:#8fb0cf;--over:#f08a75;--over-bg:#4a2620;--ok:#8fcaa8;--ok-bg:#20362b;--amber:#e0b866;--amber-bg:#3f341a;--goal:#30363f;--drop:#2b3a4a;--proj:#243242;--lead:#3d2a26;--mittel:#a9c7ea;--mittel-bg:#1d2f45}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#171b21;--col:#1f242c;--card:#272d37;--ink:#e8e6df;--ink2:#a2a8b3;--line:#3a4150;--accent:#8fb0cf;--over:#f08a75;--over-bg:#4a2620;--ok:#8fcaa8;--ok-bg:#20362b;--amber:#e0b866;--amber-bg:#3f341a;--goal:#30363f;--drop:#2b3a4a;--proj:#243242;--lead:#3d2a26;--mittel:#a9c7ea;--mittel-bg:#1d2f45}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;padding-inline:16px;padding-block:20px 48px}
[hidden]{display:none!important}
.wrap{max-width:1600px;margin:0 auto;min-width:0}
.seitenkopf{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
h1{font-size:26px;margin:0 0 4px}
.nc-kopf button{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:6px}
.nc-angemeldet{color:var(--ink2)}
.nc-anmeldung{background:var(--card);border-color:var(--line)}
.nc-anmeldung input{border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.nc-hinweis,.nc-nue-kopf,.nc-leer{color:var(--ink2)}
.sub{color:var(--ink2);margin:0 0 14px}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.bar input,.bar select{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit;max-width:100%}
.bar input{flex:1;min-width:160px}
.bar input::placeholder{color:var(--ink2);opacity:1}
@media (min-width:601px){.bar input#q{min-width:16rem}}
.save{font-size:12px;color:var(--ink2);width:100%}
.save.klickbar{cursor:pointer;text-decoration:underline;text-decoration-style:dotted}
.save.zustand-wartet,.save.zustand-konflikt{color:var(--amber);font-weight:600}
.save.zustand-offline{color:var(--over);font-weight:600}
.treffer{margin:-4px 0 10px;font-size:13px;font-weight:600;color:var(--ink)}
.help{font-size:12px;color:var(--ink2);margin:0 0 12px}
.scroll{overflow-x:auto;padding-bottom:6px;max-width:100%}
.board{display:flex;gap:10px;align-items:stretch;min-width:min-content;height:760px}
.board,.col header{user-select:none;-webkit-user-select:none}
.col{background:var(--col);border-radius:8px;width:290px;flex:none;display:flex;flex-direction:column;min-height:0}
.col.closed{width:48px}
.col.rolle-uebergabe{background:var(--drop)}
.col.rolle-uebergabe.closed{width:64px}
.col header{display:flex;align-items:center;gap:8px;padding:9px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.col header h2{font-size:14px;margin:0;flex:1}
.col header .n{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;color:var(--ink2);font-size:12px}
.col header .tw{color:var(--ink2);transition:transform .15s}
.col:not(.closed) header .tw{transform:rotate(90deg)}
.col.closed header{flex-direction:column;border-bottom:0;height:100%;padding:10px 0}
.col.closed header h2{writing-mode:vertical-rl;flex:none}
.col.closed .list{display:none}
.col.hot{outline:2px dashed var(--accent);outline-offset:-2px}
.col.hot .list{background:var(--drop)}
.list{padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:0;flex:1;border-radius:0 0 8px 8px}
.card{background:var(--card);border-radius:5px;padding:7px 9px;border-left:3px solid transparent;box-shadow:0 1px 0 rgba(0,0,0,.06);cursor:pointer;user-select:none;-webkit-user-select:none}
.card[draggable=true]{cursor:grab}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.card.dragging{opacity:.4}
.card.is-over{border-left-color:var(--over)}
.card.mark-speichert,.card.mark-gespeichert{border-left-color:var(--accent)}
.card.mark-wartet,.card.mark-geaendert,.card.mark-abgelehnt{border-left-color:var(--amber)}
.card .kopf{display:flex;gap:6px;align-items:center;font-size:11px;flex-wrap:wrap}
.card .nr{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:700;color:var(--ink);text-decoration:none}
.card .nr:hover{color:var(--accent);text-decoration:underline}
.card .nm{font-size:13px;overflow-wrap:anywhere}
.m{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;font-size:11px;color:var(--ink2);align-items:center}
.card .m>*{flex:none;max-width:100%}
.chip{border-radius:4px;padding:0 5px;max-width:100%;white-space:nowrap;color:var(--ink)}
.card .m>.chip{white-space:normal;overflow-wrap:anywhere}
.chip.zi{background:var(--goal);color:var(--ink2)}
.chip.pj{background:var(--amber-bg);font-weight:600}
.chip.ld{background:var(--lead)}
.chip.an{background:transparent;border:1px solid var(--line)}
.chip.pr{border-radius:999px;padding:0 6px;background:transparent;color:var(--ink2);border:1px solid var(--line)}
.chip.pr.hoch{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.chip.pr.mittel{background:var(--mittel-bg);color:var(--mittel);border-color:transparent}
.chip.pr.niedrig{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.chip.pr.blocked{background:transparent;color:var(--over);border:1px solid var(--line)}
.col.schluessel-arbeit{border:2px solid var(--ok)}
.col.schluessel-arbeit header h2{color:var(--ok)}
.b{padding:0 6px;border-radius:999px}
.b.over{background:var(--over-bg);color:var(--over)}
.b.due{background:var(--amber-bg);color:var(--amber)}
.b.kom{background:var(--proj);color:var(--ink)}
.b.marke{font-size:11px;font-weight:400}
.b.marke.speichert{background:var(--drop);color:var(--ink2)}
.b.marke.gespeichert{background:var(--ok-bg);color:var(--ok)}
.b.marke.wartet,.b.marke.geaendert,.b.marke.abgelehnt{background:var(--amber-bg);color:var(--amber)}
.ph{flex:none;height:34px;border:2px dashed var(--accent);border-radius:5px;background:var(--drop)}
.empty{margin:6px;font-size:12px;color:var(--ink2);text-align:center}
.foot{color:var(--ink2);font-size:12px;margin-top:14px}
.nc-nicht-uebernommen{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.nc-nicht-uebernommen summary{cursor:pointer;font-weight:600}
.nc-nue-eintrag{background:var(--amber-bg);border-left-color:var(--amber)}
.nc-nue-knoepfe button{font:inherit;padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
dialog#edit{position:fixed;inset:0;margin:auto;height:fit-content;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:0}
dialog#edit::backdrop{background:rgba(0,0,0,.35)}
.ed{padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.ed h3{margin:0;font-size:12px;color:var(--ink2);font-weight:600}
.ed label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink2)}
.ed label.datum{max-width:16rem}
.ed input,.ed select,.ed textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px;max-width:100%}
.ed textarea{min-height:70px;resize:vertical}
.ed textarea#edrumpf,.ed textarea#ednotiz{min-height:0}
.ed details summary{cursor:pointer;font-size:12px;color:var(--ink2);font-weight:600}
.ed details[open] summary{margin-bottom:8px}
.ed details>div{display:flex;flex-direction:column;gap:8px}
.ed .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.ed .row label{flex:1;min-width:140px}
.ed .row.notiz label{flex:1}
.ed .row.notiz button{flex:none}
.ed pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px;font:12px/1.45 ui-monospace,monospace;max-height:160px;overflow:auto;margin:0}
.ed fieldset{border:1px solid var(--line);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:8px;margin:0}
.ed legend{font-size:12px;color:var(--ink2);padding:0 4px}
.ed .felder{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:13px}
.ed .feld{display:contents}
.ed .feldname{color:var(--ink2)}
.ed .feldwert{overflow-wrap:anywhere}
.ed .chat{margin:0;font-size:12px;color:var(--ink2);font-family:ui-monospace,monospace}
.ed .komlink{margin:0}
.ed .komlink a,.ed .who a{color:var(--accent);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700}
.ed .btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between}
.ed .btns>span:last-child{margin-left:auto}
.ed button{font:inherit;padding:7px 12px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.ed input:disabled,.ed textarea:disabled,.ed select:disabled{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink);background:var(--col);border-style:dashed;cursor:not-allowed}
.ed button:disabled{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink);border-style:dashed;cursor:not-allowed}
.ed input[type=date].leer,.ed input[type=date].leer:disabled{color:var(--ink2);-webkit-text-fill-color:var(--ink2)}
.ed input[type=date].leer::-webkit-datetime-edit{color:var(--ink2);-webkit-text-fill-color:var(--ink2)}
.ed input::placeholder,.ed textarea::placeholder,.ed input:disabled::placeholder,.ed textarea:disabled::placeholder{color:var(--ink2);-webkit-text-fill-color:var(--ink2);opacity:1}
.ed button.primary,.ed button.primary:disabled{background:var(--accent);color:var(--bg);-webkit-text-fill-color:var(--bg);border-color:var(--accent)}
.ed .hint{font-size:12px;color:var(--over);margin:0}
.ed #edohne{color:var(--amber)}
.ed .who{margin:0;font-size:13px;font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ed .who #edort{font-weight:400;color:var(--ink2)}
.ed .row.dup label{flex:3}
.ed .row.dup button{flex:none}
@media (max-width:600px){.ed textarea#edrumpf,.ed textarea#ednotiz{overflow:hidden;resize:none}}
/* At phone width „Anhängen" goes under the note, so the field keeps the full width. */
@media (max-width:600px){.ed .row.notiz label{flex-basis:100%}}
@media (max-width:600px){h1{font-size:22px}.col{width:260px}.board{height:calc(100vh - 170px);min-height:440px}.ed pre{max-height:none;overflow:visible}}
/* At phone width every form control is 16px or more: below that iOS zooms in on tap. */
@media (max-width:600px){input,select,textarea,.bar input,.bar select,.ed input,.ed select,.ed textarea,.nc-anmeldung input{font-size:16px}}