/* Küchenkompane Planner · Prototyp v2 */
:root{--ink:#23201a;--text:#2a2721;--muted:#6f695b;--faint:#9a9384;--ground:#f4f2ec;--paper:#fff;--soft:#f7f5f0;--line:#e3dfd5;--line-strong:#cfc9bb;
--yellow:#f2c21c;--yellow-soft:#fff5cc;--yellow-ink:#5c4a05;--violet:#9d85ce;--violet-soft:#f1ecfa;--violet-ink:#5a4489;--green:#8fbc74;--green-soft:#eaf4e4;--green-ink:#3f6a2c;--red:#b0473a;--red-soft:#f8ebe8;--red-ink:#8d3328;
--blue:#7ea4c9;--blue-soft:#e8f0f8;--blue-ink:#2a4d6e;--orange:#e39a4a;--orange-soft:#fdeedd;--orange-ink:#7a4a12;--pink:#d98ab0;--pink-soft:#fbe9f1;--pink-ink:#7b2f55;--grey:#b3ad9f;--grey-soft:#eeece6;--grey-ink:#4f4a40;
--shadow:0 12px 30px rgba(35,32,26,.07);--display:"Space Grotesk",Inter,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--display);font-size:14px;line-height:1.45}
body.dragging{user-select:none;cursor:grabbing}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--yellow);outline-offset:1px}
.hidden{display:none!important}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.button{border:1px solid transparent;border-radius:9px;padding:9px 13px;font-weight:600;background:#fff;border-color:var(--line);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.button.primary:hover{background:#3c382e}
.button.small{padding:6px 10px;font-size:12.5px}
.button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.button.ghost:hover{background:var(--soft);color:var(--ink)}
.button.danger{color:var(--red-ink);border-color:#ead4cf;background:#fff}
.empty{color:var(--muted);font-size:12.5px;padding:8px 4px}
.note{background:var(--soft);border-left:3px solid var(--yellow);border-radius:0 9px 9px 0;padding:10px 14px;font-size:12.5px;color:var(--muted);max-width:70ch}
.note b{color:var(--ink)}

/* Labels (Farbfamilien) */
.lbl{font:10px var(--mono);letter-spacing:.04em;padding:2px 7px;border-radius:5px;white-space:nowrap;border:1px solid transparent}
.lbl-yellow{background:var(--yellow-soft);color:var(--yellow-ink)}.lbl-violet{background:var(--violet-soft);color:var(--violet-ink)}.lbl-green{background:var(--green-soft);color:var(--green-ink)}.lbl-red{background:var(--red-soft);color:var(--red-ink)}
.lbl-blue{background:var(--blue-soft);color:var(--blue-ink)}.lbl-orange{background:var(--orange-soft);color:var(--orange-ink)}.lbl-pink{background:var(--pink-soft);color:var(--pink-ink)}.lbl-grey{background:var(--grey-soft);color:var(--grey-ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle}
.dot-yellow{background:var(--yellow)}.dot-violet{background:var(--violet)}.dot-green{background:var(--green)}.dot-red{background:var(--red)}.dot-blue{background:var(--blue)}.dot-orange{background:var(--orange)}.dot-pink{background:var(--pink)}.dot-grey{background:var(--grey)}
.swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;display:inline-block}
.swatch.sel{border-color:var(--ink)}
.sw-yellow{background:var(--yellow)}.sw-violet{background:var(--violet)}.sw-green{background:var(--green)}.sw-red{background:var(--red)}.sw-blue{background:var(--blue)}.sw-orange{background:var(--orange)}.sw-pink{background:var(--pink)}.sw-grey{background:var(--grey)}

/* Shell */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:64px minmax(0,1fr);height:100vh}
.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);gap:16px;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{font-size:16px;display:block;line-height:1.1}
.brand small{display:block;color:var(--muted);font:10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.tiles{display:flex;gap:3px}.tiles i{width:16px;height:16px;display:block}
.tiles i:nth-child(1){background:var(--yellow);border-radius:0 8px 8px 8px}.tiles i:nth-child(2){background:var(--violet);border-radius:8px 0 8px 8px}.tiles i:nth-child(3){background:var(--green);border-radius:8px 8px 0 8px}
.topsearch{flex:1;max-width:520px;position:relative}.topsearch input{width:100%}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(35,32,26,.18);padding:6px;max-height:60vh;overflow:auto;z-index:40}
.search-results button{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px}
.search-results button:hover{background:var(--soft)}
.search-results .kind{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft);border-radius:5px;padding:3px 6px}
.search-results .t{font-weight:600;color:var(--ink)}.search-results .t small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.topright{display:flex;align-items:center;gap:10px}
.proto-pill{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--violet-soft);color:var(--violet-ink);border-radius:999px;padding:5px 10px;white-space:nowrap}
.viewas{display:flex;align-items:center;gap:6px;font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.viewas select{padding:6px 8px;font-size:12.5px;font-family:var(--display);text-transform:none;letter-spacing:0}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--yellow);color:#23201a;display:inline-grid;place-items:center;font:600 11px var(--mono);flex:0 0 auto}
.avatar.v{background:var(--violet);color:#fff}.avatar.g{background:var(--green);color:#1f3a14}.avatar.i{background:var(--ink);color:#fff}.avatar.r{background:#e7a89f;color:#5a1f16}.avatar.m{background:#cbc4b3;color:#2a2721}
.avatar.sm{width:22px;height:22px;font-size:9.5px}

.sidenav{border-right:1px solid var(--line);background:var(--soft);padding:16px 12px;display:flex;flex-direction:column;gap:18px;overflow:auto}
.nav-section small{display:block;font:10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 8px 6px}
.nav-section button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:8px;color:var(--text);font-weight:500}
.nav-section button:hover{background:#fff}
.nav-section button.active{background:#fff;color:var(--ink);box-shadow:inset 3px 0 0 var(--yellow)}
.nav-section button b{font:500 10.5px var(--mono);color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.nav-section button.active b{background:var(--yellow-soft);border-color:transparent;color:var(--yellow-ink)}
.nav-section button .dot{margin-right:8px;flex:0 0 auto}
.nav-section button span{flex:1;display:flex;align-items:center}
.nav-section button.locked{color:var(--faint)}
.nav-foot{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.nav-foot i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(143,188,116,.2)}
.nav-foot strong{display:block;font-size:12.5px}.nav-foot small{color:var(--muted);font-size:11px}

main{overflow:auto;padding:26px 28px 40px;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.page-head h1{font-size:28px;letter-spacing:-.03em;line-height:1.05;margin:6px 0 4px;color:var(--ink)}
.page-head p{margin:0;color:var(--muted);max-width:62ch}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tools select{padding:8px 10px}
.switch{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;padding:0 4px}
.view-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.view-tabs button{border:0;background:transparent;padding:9px 12px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.view-tabs button.active{color:var(--ink);border-bottom-color:var(--yellow)}
.view-tabs button b{font:500 10.5px var(--mono);color:var(--faint);margin-left:6px}

/* Board */
.board{display:flex;gap:12px;align-items:flex-start;min-height:60vh;padding-bottom:8px}
.col{flex:0 0 268px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:180px;transition:background .12s,border-color .12s}
.col.drag-over{background:var(--yellow-soft);border-color:var(--yellow)}
.col>header{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 6px;gap:6px}
.col>header .col-handle{cursor:grab;color:var(--faint);font-size:14px;padding:0 4px;line-height:1;border:0;background:transparent}
.col>header .col-name{flex:1;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:text;padding:2px 4px;border-radius:5px}
.col>header .col-name:hover{background:#fff}
.col>header input.col-name{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border:1px solid var(--yellow);background:#fff}
.col>header b{font:500 11px var(--mono);color:var(--faint)}
.col>header .col-kind{font:9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.col>header .col-kind.done{border-color:var(--green);color:var(--green-ink)}.col>header .col-kind.review{border-color:var(--violet);color:var(--violet-ink)}
.col>header .col-menu{border:0;background:transparent;color:var(--faint);font-size:16px;line-height:1;padding:0 4px;border-radius:5px}
.col>header .col-menu:hover{background:#fff;color:var(--ink)}
.col-body{display:flex;flex-direction:column;gap:8px;min-height:40px;flex:1}
.col .add{border:1px dashed var(--line-strong);background:transparent;border-radius:8px;padding:8px;color:var(--muted);font-size:12.5px}
.col .add:hover{background:#fff;color:var(--ink)}
.add-col{flex:0 0 220px;border:1px dashed var(--line-strong);border-radius:12px;padding:14px;color:var(--muted);background:transparent;text-align:left;font-weight:600}
.add-col:hover{background:#fff;color:var(--ink)}
.card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 12px;box-shadow:0 1px 2px rgba(35,32,26,.05);cursor:grab;position:relative;touch-action:pan-y}
.card:hover{border-color:var(--line-strong);box-shadow:0 4px 12px rgba(35,32,26,.08)}
.card.blocked{border-left:3px solid var(--red)}
.card.today{border-left:3px solid var(--yellow)}
.card.overdue{border-left:3px solid var(--red)}
.card .t{font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ink);margin-bottom:8px}
.card .thumb{width:100%;height:96px;object-fit:cover;border-radius:6px;margin-bottom:8px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.chip{font:10px var(--mono);letter-spacing:.04em;padding:2px 7px;border-radius:5px;background:var(--soft);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.mkt{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.chip.drive{background:var(--green-soft);color:var(--green-ink);border-color:transparent}
.chip.src{background:var(--violet-soft);color:var(--violet-ink);border-color:transparent}
.chip.blk{background:var(--red-soft);color:var(--red-ink);border-color:transparent}
.chip.pr-ASAP{background:var(--red-soft);color:var(--red-ink);border-color:transparent}
.chip.pr-HIGH{background:var(--yellow-soft);color:var(--yellow-ink);border-color:transparent}
.chip.prod{background:var(--blue-soft);color:var(--blue-ink);border-color:transparent}
.card footer{display:flex;justify-content:space-between;align-items:center;font:10.5px var(--mono);color:var(--muted);gap:8px}
.card footer .meta{display:flex;gap:9px;align-items:center}
.due.today{color:var(--yellow-ink);font-weight:600}.due.overdue{color:var(--red-ink);font-weight:600}
.card .bar{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin:-4px 0 8px}
.card .bar i{display:block;height:100%;background:var(--green)}

/* Drag */
.drag-ghost{position:fixed;z-index:100;pointer-events:none;opacity:.92;transform:rotate(1.5deg);box-shadow:0 18px 40px rgba(35,32,26,.28)!important;cursor:grabbing}
.drag-src{opacity:.25}
.drag-ph{border:2px dashed var(--yellow);border-radius:9px;background:var(--yellow-soft);flex:0 0 auto}
.board>.drag-ph{align-self:stretch;min-width:120px}

/* Liste */
.list table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--soft)}
.list td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.list tr:last-child td{border-bottom:0}
.list tr[data-ticket]:hover td,.list tr[data-product]:hover td{background:#fbfaf7;cursor:pointer}
.list .t{font-weight:600;color:var(--ink)}
.list .stat{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.list td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.list th.num{text-align:right}

/* Meine Aufgaben */
.mine-group{margin-bottom:22px}
.mine-group h2{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;display:flex;gap:10px;align-items:center}
.mine-group h2 i{flex:1;height:1px;background:var(--line)}
.mine-list{display:grid;gap:6px}
.mine-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer}
.mine-row:hover{border-color:var(--line-strong)}
.mine-row .team{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft);border-radius:5px;padding:3px 7px;white-space:nowrap}
.mine-row .t{font-weight:600;color:var(--ink)}
.mine-row .t small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.mine-row .due{font:11px var(--mono);color:var(--muted)}

/* Seiten */
.pages{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
.tree{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px;position:sticky;top:0}
.tree small{display:block;font:10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:8px 8px 6px}
.tree button{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;background:transparent;padding:6px 9px;border-radius:7px;font-size:13px;color:var(--text)}
.tree button:hover{background:#fff}
.tree button.active{background:#fff;color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--yellow)}
.tree button.lvl2{padding-left:26px;font-size:12.5px}
.tree .newpage{margin-top:10px;width:100%;justify-content:center}
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 34px 60px;max-width:900px;min-height:60vh}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:6px}
.doc-head .meta{font:11px var(--mono);color:var(--muted);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}
.doc-head .saved{color:var(--green-ink)}
.doc-title{display:flex;gap:10px;align-items:center}
.doc-title .icon{font-size:30px;border:0;background:transparent;padding:0 4px;border-radius:8px;line-height:1}
.doc-title .icon:hover{background:var(--soft)}
.doc-title h1{margin:0;font-size:30px;letter-spacing:-.025em;color:var(--ink);line-height:1.15;outline:none;min-width:120px}
.doc-title h1:empty:before{content:"Unbenannte Seite";color:var(--faint)}
.doc .doc-body{margin-top:14px}

/* Block-Editor */
.ed{position:relative;line-height:1.6;color:var(--text)}
.ed-blocks{display:flex;flex-direction:column}
.blk{position:relative;display:flex;gap:0;padding:2px 0;border-radius:6px}
.blk-tools{position:absolute;left:-56px;top:2px;display:flex;gap:2px;opacity:0;transition:opacity .1s}
.blk:hover .blk-tools,.blk:focus-within .blk-tools{opacity:1}
.blk-tools button{width:22px;height:24px;border:0;background:transparent;color:var(--faint);border-radius:5px;font-size:13px;line-height:1;padding:0}
.blk-tools button:hover{background:var(--soft);color:var(--ink)}
.blk-handle{cursor:grab;font-size:11px!important;letter-spacing:-2px}
.blk-body{flex:1;min-width:0;display:flex;gap:8px;align-items:flex-start}
.blk-content{flex:1;min-width:0;outline:none;padding:3px 4px;border-radius:4px;word-wrap:break-word}
.blk-content:empty:before,.blk-caption:empty:before{content:attr(data-placeholder);color:var(--faint);pointer-events:none}
.blk-p .blk-content:not(:focus):empty:before{content:""}
.blk-h1 .blk-content{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:14px}
.blk-h2 .blk-content{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-top:12px}
.blk-h3 .blk-content{font-size:16px;font-weight:700;color:var(--ink);margin-top:8px}
.blk-bullet .blk-body:before{content:"•";color:var(--ink);padding:3px 0 0 10px;font-weight:700}
.blk-num{padding:3px 0 0 6px;color:var(--ink);font-variant-numeric:tabular-nums;min-width:22px;text-align:right}
.blk-todo input{margin:8px 0 0 8px}
.blk-todo.done .blk-content{color:var(--muted);text-decoration:line-through}
.blk-quote .blk-body{border-left:3px solid var(--ink);padding-left:12px;margin:4px 0}
.blk-quote .blk-content{font-style:italic;color:var(--ink)}
.blk-callout .blk-body{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0;align-items:flex-start}
.blk-icon{border:0;background:transparent;font-size:18px;line-height:1;padding:2px 2px 0 0;cursor:pointer}
.blk-code .blk-content{font-family:var(--mono);font-size:12.5px;background:#23201a;color:#efe9da;border-radius:8px;padding:12px 14px;margin:6px 0;white-space:pre-wrap;word-break:break-word}
.blk-divider .blk-body{padding:8px 0}.blk-divider hr{border:0;border-top:1px solid var(--line-strong);width:100%;margin:0}
.blk-tgl{border:0;background:transparent;font-size:14px;color:var(--ink);padding:4px 4px 0 6px;transition:transform .12s;cursor:pointer}
.blk-toggle.open .blk-tgl{transform:rotate(90deg)}
.blk-tglwrap{flex:1;min-width:0}
.blk-tglbody{display:none;margin-left:6px;padding-left:10px;border-left:2px solid var(--line);color:var(--text);font-size:13.5px}
.blk-toggle.open .blk-tglbody{display:block}
.blk-img{margin:8px 0;flex:1;min-width:0}
.blk-img figure{margin:0;display:inline-block;max-width:100%;position:relative}
.blk-img img{display:block;border-radius:10px;max-width:100%;height:auto;border:1px solid var(--line)}
.blk-img.size-s img{max-width:280px}.blk-img.size-m img{max-width:520px}.blk-img.size-l img{max-width:100%}
.blk-img .img-bar{position:absolute;top:8px;right:8px;display:flex;gap:2px;background:rgba(35,32,26,.85);border-radius:7px;padding:3px;opacity:0;transition:opacity .1s}
.blk-img figure:hover .img-bar{opacity:1}
.blk-img .img-bar button{border:0;background:transparent;color:#fff;font:600 10.5px var(--mono);padding:3px 7px;border-radius:5px}
.blk-img .img-bar button.active,.blk-img .img-bar button:hover{background:rgba(255,255,255,.2)}
.blk-caption{display:block;font-size:12px;color:var(--muted);padding:6px 2px 0;outline:none}
.img-empty{border:1px dashed var(--line-strong);border-radius:10px;padding:16px;background:var(--soft);display:grid;gap:8px}
.img-empty strong{color:var(--ink)}
.img-empty .img-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.img-empty .img-actions input[type=url]{flex:1;min-width:180px}
.img-empty small{color:var(--muted)}
.blk-table{flex:1;min-width:0;margin:6px 0;overflow-x:auto}
.blk-table table{border-collapse:collapse;width:100%;font-size:13px}
.blk-table th,.blk-table td{border:1px solid var(--line);padding:0;vertical-align:top;min-width:90px}
.blk-table th{background:var(--soft)}
.blk-table .cell{padding:7px 9px;outline:none;min-height:32px}
.blk-table th .cell{font-weight:600;color:var(--ink)}
.tbl-bar{display:flex;gap:6px;margin-top:6px;opacity:0;transition:opacity .1s}
.blk-table:hover .tbl-bar{opacity:1}
.tbl-bar button{border:1px solid var(--line);background:#fff;border-radius:6px;font:500 11px var(--mono);padding:3px 7px;color:var(--muted)}
.ed-tail{min-height:26px;color:var(--faint);font-size:12px;padding:6px 4px;cursor:text}
.ed.ed-dropping{outline:2px dashed var(--yellow);outline-offset:6px;border-radius:8px}
.ed-ro .blk-content{cursor:default}
.ed a{color:var(--violet-ink)}
.ed code{font-family:var(--mono);font-size:12px;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.ed-toolbar{position:absolute;z-index:120;background:var(--ink);border-radius:8px;padding:3px;display:flex;gap:2px;box-shadow:0 10px 30px rgba(35,32,26,.3)}
.ed-toolbar button{border:0;background:transparent;color:#fff;padding:5px 9px;border-radius:5px;font-size:12.5px}
.ed-toolbar button:hover{background:rgba(255,255,255,.18)}
.ed-slash,.ed-menu{position:absolute;z-index:130;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(35,32,26,.2);padding:6px;width:280px;max-height:320px;overflow:auto}
.ed-slash small,.ed-menu small{display:block;font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:6px 8px}
.ed-slash button,.ed-menu>button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:8px;font-size:13px}
.ed-slash button.active,.ed-slash button:hover,.ed-menu>button:hover{background:var(--soft)}
.ed-slash .ic{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;font:600 11px var(--mono);background:#fff;flex:0 0 auto}
.ed-slash b{display:block;color:var(--ink)}.ed-slash button small{padding:0;text-transform:none;letter-spacing:0;font-family:var(--display);font-size:11.5px;color:var(--muted)}
.ed-menu{width:220px}
.ed-menu-types{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 8px}
.ed-menu-types button{width:34px;height:30px;border:1px solid var(--line);border-radius:6px;background:#fff;font:600 11px var(--mono)}
.ed-menu-types button.active{background:var(--yellow-soft);border-color:var(--yellow)}
.ed-menu .danger{color:var(--red-ink)}
/* statische Vorschau */
.st p{margin:6px 0}.st .st-li{margin:3px 0 3px 4px}.st blockquote{margin:8px 0;padding-left:10px;border-left:3px solid var(--ink);font-style:italic}
.st .st-callout{background:var(--soft);border-radius:8px;padding:8px 10px;margin:6px 0}
.st pre{background:#23201a;color:#efe9da;padding:10px;border-radius:8px;font-size:12px;white-space:pre-wrap}
.st figure{margin:8px 0}.st img{max-width:100%;border-radius:8px;display:block}.st .size-s img{max-width:240px}.st .size-m img{max-width:460px}
.st figcaption{font-size:11.5px;color:var(--muted);margin-top:4px}
.st table{border-collapse:collapse;font-size:12.5px;margin:6px 0}.st th,.st td{border:1px solid var(--line);padding:5px 8px}.st th{background:var(--soft)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(35,32,26,.5);backdrop-filter:blur(2px);z-index:60;display:grid;place-items:start center;padding:40px 16px;overflow:auto}
.modal{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(35,32,26,.35);width:min(1040px,100%);max-height:calc(100vh - 80px);display:flex;flex-direction:column;animation:pop .16s ease-out}
.modal.narrow{width:min(560px,100%)}
@keyframes pop{from{transform:translateY(8px) scale(.99);opacity:0}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.modal-head .crumbs{display:flex;gap:8px;align-items:center;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.modal-head .crumbs select{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;color:var(--ink)}
.modal-head .actions{display:flex;gap:6px;align-items:center}
.modal-body{overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px}
.modal-main{padding:22px 24px 30px;min-width:0;border-right:1px solid var(--line)}
.modal-side{padding:20px 20px 30px;background:var(--soft);display:grid;gap:14px;align-content:start}
.modal.narrow .modal-body{grid-template-columns:1fr}.modal.narrow .modal-main{border-right:0;padding:20px 22px 24px}
.t-title{font-size:22px;line-height:1.3;letter-spacing:-.015em;font-weight:700;color:var(--ink);outline:none;margin:0 0 6px;padding:4px 0;border-bottom:1px dashed transparent}
.t-title:hover,.t-title:focus{border-bottom-color:var(--line-strong)}
.t-title:empty:before{content:"Titel";color:var(--faint)}
.source-box{background:var(--violet-soft);border-radius:9px;padding:10px 12px;font-size:12.5px;color:var(--violet-ink);margin:10px 0 14px}
.source-box b{display:block;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.source-box code{font:11px var(--mono)}
.t-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.t-section h3{margin:0 0 8px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.t-section h3 span{font-weight:400;text-transform:none;letter-spacing:0}
.t-desc{min-height:70px;padding-left:56px;margin-left:-56px}
.links{display:grid;gap:6px}
.link-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.link-row .ico{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font:600 9.5px var(--mono);flex:0 0 auto}
.link-row .ico.drive{background:var(--green-soft);color:var(--green-ink)}
.link-row .ico.web{background:var(--soft);border:1px solid var(--line);color:var(--muted)}
.link-row .ico.gv{background:var(--yellow-soft);color:var(--yellow-ink)}
.link-row a{color:var(--ink);text-decoration:none;font-weight:500;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-row small{color:var(--muted);font:10.5px var(--mono);white-space:nowrap}
.link-row button{border:0;background:transparent;color:var(--faint);font-size:16px;padding:0 2px}
.link-row button:hover{color:var(--red)}
.add-row{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-top:8px}
.checklist{display:grid;gap:4px}
.checklist label{display:flex;gap:9px;align-items:flex-start;padding:5px 6px;border-radius:6px;font-size:13px}
.checklist label:hover{background:var(--soft)}
.checklist input{margin-top:3px}
.checklist label.done span{color:var(--muted);text-decoration:line-through}
.add-check{display:flex;gap:6px;margin-top:6px}.add-check input{flex:1}
.comments{display:grid;gap:8px}
.comment{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start}
.comment .body{background:var(--soft);border-radius:9px;padding:8px 11px;font-size:13px}
.comment .body small{display:block;color:var(--faint);font:10px var(--mono);margin-top:4px}
.comment-form{display:flex;gap:6px;margin-top:6px}.comment-form input{flex:1}
.activity{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.activity li{font:11px var(--mono);color:var(--muted);display:grid;grid-template-columns:auto 1fr;gap:8px}
.activity li i{font-style:normal;color:var(--faint)}
.field{display:grid;gap:5px}
.field label{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field select,.field input{width:100%}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-grid .full{grid-column:1/-1}
.label-pick{display:flex;flex-wrap:wrap;gap:5px}
.label-pick button{border:1px solid transparent;background:var(--grey-soft);color:var(--grey-ink);opacity:.55}
.label-pick button.on{opacity:1;border-color:currentColor}
.label-pick .manage{border:1px dashed var(--line-strong);background:transparent;color:var(--muted);opacity:1}
.tiny-slack{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff;font-size:12px;color:var(--muted)}
.tiny-slack b{color:var(--ink)}
.side-prod{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:8px;background:#fff;cursor:pointer}
.side-prod img{width:44px;height:30px;object-fit:cover;border-radius:5px}
.side-prod b{display:block;font-size:12.5px;color:var(--ink)}.side-prod small{font:10.5px var(--mono);color:var(--muted)}
.label-mgr{display:grid;gap:8px}
.label-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.label-row .sw{display:flex;gap:4px}
.ro-hint{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink);background:var(--red-soft);border-radius:6px;padding:4px 8px}

/* Toasts */
.toasts{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:150}
.toast{background:var(--ink);color:#fff;border-radius:10px;padding:11px 14px;min-width:300px;max-width:380px;box-shadow:0 14px 34px rgba(35,32,26,.3);display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;animation:in .18s ease-out}
.toast .sl{width:26px;height:26px;border-radius:6px;background:#4a154b;display:grid;place-items:center;font:700 11px var(--mono);color:#fff}
.toast small{display:block;font:10.5px var(--mono);color:#cfc8b8;margin-bottom:2px}
.toast span{font-size:12.5px;line-height:1.4}
@keyframes in{from{transform:translateY(8px);opacity:0}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* Start */
.home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px;min-width:0}
.panel h2{font-size:16px;margin:0 0 12px;letter-spacing:-.01em;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel h2 small{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.panel .link{border:0;background:transparent;color:var(--violet-ink);font-weight:600;font-size:12.5px;padding:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.kpi small{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.kpi strong{display:block;font:600 20px var(--mono);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:4px}
.kpi.good strong{color:var(--green-ink)}.kpi.bad strong{color:var(--red-ink)}
.locked{border:1px dashed var(--line-strong);border-radius:12px;padding:22px;text-align:center;color:var(--muted);background:var(--soft)}
.locked strong{display:block;color:var(--ink);margin-bottom:4px}
.rows{display:grid;gap:6px}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#fff}
.row:hover{border-color:var(--line-strong)}
.row .t{font-weight:600;color:var(--ink);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.row .r{font:11px var(--mono);color:var(--muted);white-space:nowrap}
.greet h1{font-size:30px;letter-spacing:-.03em;margin:4px 0 4px}
.greet p{color:var(--muted);margin:0 0 18px}

/* Kalender */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cal-head h2{margin:0;font-size:18px;letter-spacing:-.01em}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal .dow{background:var(--soft);padding:6px 8px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cal .day{background:#fff;min-height:104px;padding:6px 6px 8px;position:relative;display:flex;flex-direction:column;gap:3px}
.cal .day.other{background:#fbfaf7;color:var(--faint)}
.cal .day .n{font:500 11px var(--mono);color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.cal .day.today .n b{background:var(--ink);color:#fff;border-radius:999px;padding:1px 6px}
.cal .day .n button{border:0;background:transparent;color:var(--faint);opacity:0;padding:0 3px;border-radius:4px}
.cal .day:hover .n button{opacity:1}
.cal .ev{display:flex;gap:5px;align-items:center;font-size:11.5px;padding:2px 6px;border-radius:5px;background:var(--soft);border:1px solid var(--line);cursor:pointer;min-width:0}
.cal .ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev:hover{border-color:var(--line-strong)}
.cal .ev.overdue{border-color:#ead4cf;background:var(--red-soft)}
.cal .more{font:10.5px var(--mono);color:var(--muted);padding:0 4px}

/* Produkte */
.prod-tools{display:grid;grid-template-columns:minmax(200px,1fr) auto auto auto;gap:8px;margin-bottom:14px;align-items:center}
.prod-tools input{width:100%}
.prod-img{width:56px;height:36px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.status-pill{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:2px 7px;white-space:nowrap}
.status-pill.active{background:var(--green-soft);color:var(--green-ink)}.status-pill.cost_gap{background:var(--red-soft);color:var(--red-ink)}.status-pill.inactive{background:var(--grey-soft);color:var(--grey-ink)}
.cost-src{font:10px var(--mono);letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:2px 6px;background:var(--soft);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.cost-src.pnl{background:var(--yellow-soft);color:var(--yellow-ink);border-color:transparent}.cost-src.landed{background:var(--blue-soft);color:var(--blue-ink);border-color:transparent}.cost-src.shopify{background:var(--green-soft);color:var(--green-ink);border-color:transparent}.cost-src.none{background:var(--red-soft);color:var(--red-ink);border-color:transparent}
.prod-detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.prod-hero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
.prod-hero img{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.gallery{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.gallery img{width:64px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.gallery label{width:64px;height:40px;border:1px dashed var(--line-strong);border-radius:6px;display:grid;place-items:center;font-size:16px;color:var(--muted);cursor:pointer}
.prod-hero h1{margin:4px 0 6px;font-size:26px;letter-spacing:-.025em;color:var(--ink)}
.prod-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.price-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px}
.price-panel h2{margin:0;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.price-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:13px}
.price-row small{display:block;color:var(--muted);font-size:11px}
.price-row b{font:600 16px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.price-row .inp{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.price-row .inp input{width:96px;border:0;padding:7px 8px;text-align:right;font-family:var(--mono)}
.price-row .inp span{padding-right:8px;color:var(--muted);font:11px var(--mono)}
.margin-bar{height:8px;background:var(--line);border-radius:8px;overflow:hidden}
.margin-bar i{display:block;height:100%;background:var(--green)}
.margin-bar.bad i{background:var(--red)}
.src-opts{display:grid;gap:6px}
.src-opts label{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;cursor:pointer}
.src-opts label.sel{border-color:var(--yellow);background:var(--yellow-soft)}
.src-opts label b{font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.src-opts label small{color:var(--muted);font-size:11px;display:block}
.prod-tabs{margin-top:18px}
.spec-table{width:100%;border-collapse:collapse;font-size:13px}
.spec-table td,.spec-table th{border:1px solid var(--line);padding:7px 10px;text-align:left}
.spec-table th{background:var(--soft);font-weight:600}

/* Personen */
.matrix td .ok{color:var(--green-ink);font-weight:700}.matrix td .no{color:var(--faint)}
.role-pill{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:2px 7px;background:var(--soft);border:1px solid var(--line);color:var(--muted)}
.role-pill.admin{background:var(--yellow-soft);color:var(--yellow-ink);border-color:transparent}.role-pill.viewer{background:var(--grey-soft);color:var(--grey-ink);border-color:transparent}

@media (max-width:1100px){.app{grid-template-columns:200px minmax(0,1fr)}.home{grid-template-columns:1fr}.prod-detail{grid-template-columns:1fr}.modal-body{grid-template-columns:1fr}.modal-main{border-right:0}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:64px auto minmax(0,1fr)}.sidenav{flex-direction:row;gap:12px;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}.nav-section{display:flex;gap:4px}.nav-section small{display:none}.nav-foot{display:none}.pages{grid-template-columns:1fr}.tree{position:static}.prod-hero{grid-template-columns:1fr}.blk-tools{left:-30px}.t-desc{padding-left:30px;margin-left:-30px}.modal-backdrop{padding:12px}.modal{max-height:calc(100vh - 24px)}}

/* ---------- Anmeldung / Einladung ---------- */
.auth-body{display:grid;place-items:center;min-height:100vh;background:var(--ground)}
.auth{width:min(440px,92vw);display:grid;gap:18px;padding:32px 0}
.auth .brand{justify-content:center}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;display:grid;gap:14px;box-shadow:var(--shadow)}
.auth-card h1{margin:2px 0 4px;font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.auth-lead{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.auth-card .button.primary{justify-content:center;padding:11px 14px}
.auth-error{background:var(--red-soft);color:var(--red-ink);border-radius:9px;padding:9px 12px;font-size:13px}
.auth-note{background:var(--soft);border-left:3px solid var(--yellow);border-radius:0 9px 9px 0;padding:9px 12px;font-size:13px;color:var(--text)}
.avatar[id=meAvatar]{border:0;cursor:pointer}
.nav-section button.muted{color:var(--faint);font-weight:500}
.checklist label .x{margin-left:auto;border:0;background:transparent;color:var(--faint);font-size:15px;padding:0 4px;opacity:0}
.checklist label:hover .x{opacity:1}
.checklist label .x:hover{color:var(--red)}
.toast.error{background:var(--red)}
.toast.error .sl{background:rgba(255,255,255,.2)}
.cal .ev.evt{background:var(--yellow-soft);border-color:transparent}
.cal .ev.evt.private{background:var(--grey-soft)}
.list tr.inactive td{opacity:.55}
.sw{display:flex;gap:6px;flex-wrap:wrap}
textarea{width:100%;resize:vertical;line-height:1.5}

/* ---------- Kalender: Wochenzeilen und durchgehende Terminbalken ---------- */
.cal{display:block;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal .dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}
.cal .week{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;margin-top:1px}
.cal .day .lanes{width:100%}
.bar-ev{position:absolute;height:20px;border-radius:6px;background:var(--yellow-soft);color:var(--yellow-ink);font-size:11.5px;line-height:20px;padding:0 8px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid transparent;z-index:2}
.bar-ev:hover{filter:brightness(.96)}
.bar-ev.private{background:var(--grey-soft);color:var(--grey-ink)}
.bar-ev.cont-left{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-3px;padding-left:11px}
.bar-ev.cont-right{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-3px}
.bar-ev.tone-violet{background:var(--violet-soft);color:var(--violet-ink)}.bar-ev.tone-green{background:var(--green-soft);color:var(--green-ink)}.bar-ev.tone-red{background:var(--red-soft);color:var(--red-ink)}.bar-ev.tone-blue{background:var(--blue-soft);color:var(--blue-ink)}.bar-ev.tone-orange{background:var(--orange-soft);color:var(--orange-ink)}.bar-ev.tone-pink{background:var(--pink-soft);color:var(--pink-ink)}.bar-ev.tone-grey{background:var(--grey-soft);color:var(--grey-ink)}
.bar-ev.private.tone-yellow,.bar-ev.private{background:var(--grey-soft);color:var(--grey-ink)}
.auth .logo{display:block;width:180px;max-width:70%;height:auto;margin:0 auto 6px}
.brand .logo-small{height:28px;width:auto;display:block}

/* ---------- Bekara-Fußzeilen ---------- */
.auth-foot{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.auth-foot img{width:22px;height:22px;border-radius:6px}
.auth-foot b{color:var(--ink);font-family:var(--display);font-size:13px;letter-spacing:0;text-transform:none}
.nav-foot img{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
.nav-foot i{display:none}