/* Layout: Notion-artige App-Shell. Feste Sidebar links, zentrierte Seitenspalte (720px),
   Board als horizontal scrollende Fläche, Karten-Detail als Side-Peek von rechts. */
:root{
  --bg:#ffffff; --bg-side:#f8f8f7; --bg-soft:#fbfbfa;
  --fg:#37352f; --fg-2:#5f5e5b; --muted:#787774; --faint:#a19f99;
  --hover:rgba(55,53,47,.06); --press:rgba(55,53,47,.1);
  --line:rgba(55,53,47,.09); --line-2:rgba(55,53,47,.16);
  --card:#ffffff; --card-ring:rgba(15,15,15,.08); --card-sh:0 1px 2px rgba(15,15,15,.05);
  --pop:#ffffff; --pop-sh:0 0 0 1px rgba(15,15,15,.05),0 3px 6px rgba(15,15,15,.08),0 9px 24px rgba(15,15,15,.16);
  --scrim:rgba(15,15,15,.42);
  --accent:#0082c9; --accent-hover:#006da8; --accent-soft:rgba(0,130,201,.1); --on-accent:#ffffff;
  --danger:#d44c47; --danger-soft:rgba(212,76,71,.1); --ok:#448361;
  --t-gray-bg:#e3e2e0; --t-gray-fg:#32302c;
  --t-brown-bg:#eee0da; --t-brown-fg:#442a1e;
  --t-orange-bg:#fadec9; --t-orange-fg:#49290e;
  --t-yellow-bg:#fdecc8; --t-yellow-fg:#402c1b;
  --t-green-bg:#dbeddb; --t-green-fg:#1c3829;
  --t-blue-bg:#d3e5ef; --t-blue-fg:#183347;
  --t-purple-bg:#e8deee; --t-purple-fg:#412454;
  --t-pink-bg:#f5e0e9; --t-pink-fg:#4c2337;
  --t-red-bg:#ffe2dd; --t-red-fg:#5d1715;
  --plan-bg:#e8f1f8; --plan-line:rgba(0,110,180,.18); --col-mix:30%;
  --font-ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --side-w:248px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#191919; --bg-side:#202020; --bg-soft:#1d1d1d;
  --fg:#e6e5e2; --fg-2:#c2c1bd; --muted:#9b9a97; --faint:#6d6c69;
  --hover:rgba(255,255,255,.055); --press:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --card:#252525; --card-ring:rgba(255,255,255,.07); --card-sh:0 1px 2px rgba(0,0,0,.3);
  --pop:#262626; --pop-sh:0 0 0 1px rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.3),0 9px 24px rgba(0,0,0,.45);
  --scrim:rgba(0,0,0,.6);
  --accent:#3ea6e6; --accent-hover:#5bb5ec; --accent-soft:rgba(62,166,230,.16); --on-accent:#0b1b26;
  --danger:#e8716c; --danger-soft:rgba(232,113,108,.14); --ok:#6fb48b;
  --t-gray-bg:#464646; --t-gray-fg:#e6e6e5;
  --t-brown-bg:#5c4033; --t-brown-fg:#f0e2da;
  --t-orange-bg:#76461f; --t-orange-fg:#fbe2cf;
  --t-yellow-bg:#6b5622; --t-yellow-fg:#fbefcf;
  --t-green-bg:#2f5a3f; --t-green-fg:#d9eedc;
  --t-blue-bg:#2a4d70; --t-blue-fg:#d6e8f5;
  --t-purple-bg:#4f3768; --t-purple-fg:#ebe0f3;
  --t-pink-bg:#5e3346; --t-pink-fg:#f6e1ea;
  --t-red-bg:#6e3330; --t-red-fg:#fde3df;
  --plan-bg:#1c2a35; --plan-line:rgba(120,190,240,.16); --col-mix:16%;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#191919; --bg-side:#202020; --bg-soft:#1d1d1d;
  --fg:#e6e5e2; --fg-2:#c2c1bd; --muted:#9b9a97; --faint:#6d6c69;
  --hover:rgba(255,255,255,.055); --press:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --card:#252525; --card-ring:rgba(255,255,255,.07); --card-sh:0 1px 2px rgba(0,0,0,.3);
  --pop:#262626; --pop-sh:0 0 0 1px rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.3),0 9px 24px rgba(0,0,0,.45);
  --scrim:rgba(0,0,0,.6);
  --accent:#3ea6e6; --accent-hover:#5bb5ec; --accent-soft:rgba(62,166,230,.16); --on-accent:#0b1b26;
  --danger:#e8716c; --danger-soft:rgba(232,113,108,.14); --ok:#6fb48b;
  --t-gray-bg:#464646; --t-gray-fg:#e6e6e5;
  --t-brown-bg:#5c4033; --t-brown-fg:#f0e2da;
  --t-orange-bg:#76461f; --t-orange-fg:#fbe2cf;
  --t-yellow-bg:#6b5622; --t-yellow-fg:#fbefcf;
  --t-green-bg:#2f5a3f; --t-green-fg:#d9eedc;
  --t-blue-bg:#2a4d70; --t-blue-fg:#d6e8f5;
  --t-purple-bg:#4f3768; --t-purple-fg:#ebe0f3;
  --t-pink-bg:#5e3346; --t-pink-fg:#f6e1ea;
  --t-red-bg:#6e3330; --t-red-fg:#fde3df;
  --plan-bg:#1c2a35; --plan-line:rgba(120,190,240,.16); --col-mix:16%;
  color-scheme:dark;
}

html,body{height:100%;margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:14px;height:14px}
.i-lg{width:18px;height:18px}
.spacer{flex:1}
kbd{font-family:var(--font-ui);font-size:11px;color:var(--faint);border:1px solid var(--line-2);border-radius:4px;padding:0 4px;line-height:16px}

/* Tags / Pillen */
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:3px;font-size:12px;line-height:20px;white-space:nowrap;background:var(--tb);color:var(--tf)}
.pill{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px 0 7px;border-radius:10px;font-size:12px;white-space:nowrap;background:var(--tb);color:var(--tf)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}
.c-gray{--tb:var(--t-gray-bg);--tf:var(--t-gray-fg)} .c-brown{--tb:var(--t-brown-bg);--tf:var(--t-brown-fg)}
.c-orange{--tb:var(--t-orange-bg);--tf:var(--t-orange-fg)} .c-yellow{--tb:var(--t-yellow-bg);--tf:var(--t-yellow-fg)}
.c-green{--tb:var(--t-green-bg);--tf:var(--t-green-fg)} .c-blue{--tb:var(--t-blue-bg);--tf:var(--t-blue-fg)}
.c-purple{--tb:var(--t-purple-bg);--tf:var(--t-purple-fg)} .c-pink{--tb:var(--t-pink-bg);--tf:var(--t-pink-fg)}
.c-red{--tb:var(--t-red-bg);--tf:var(--t-red-fg)}

.avatar{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--av);color:#fff;font-size:9.5px;font-weight:600;letter-spacing:.02em;flex:none}
.avatar.lg{width:24px;height:24px;font-size:10.5px}
.avatars{display:inline-flex}
.avatars .avatar{box-shadow:0 0 0 2px var(--card)}
.avatars .avatar+.avatar{margin-left:-5px}

.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:5px;font-size:14px;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--hover)}
.btn-primary{background:var(--accent);color:var(--on-accent);font-weight:500}
.btn-primary:hover{background:var(--accent-hover)}
.btn-line{box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-danger{color:var(--danger);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 40%,transparent)}
.btn-danger:hover{background:var(--danger-soft)}
.icon-btn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:5px;color:var(--muted)}
.icon-btn:hover{background:var(--hover);color:var(--fg)}

/* App-Shell */
.app{display:flex;height:100%}
.sidebar{width:var(--side-w);flex:none;background:var(--bg-side);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100%;overflow:hidden;user-select:none}
.ws{display:flex;align-items:center;gap:8px;margin:6px 6px 2px;padding:6px 8px;border-radius:6px;font-weight:600;font-size:14px}
.ws:hover{background:var(--hover)}
.ws .sub{display:block;font-weight:400;font-size:12px;color:var(--muted);line-height:1.2}
.side-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 6px 12px}
.side-item{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;height:28px;padding:0 8px;border-radius:5px;color:var(--fg-2);text-align:left;font-size:14px}
.side-item:hover{background:var(--hover)}
.side-item.active{background:var(--press);color:var(--fg);font-weight:500}
.side-item .i{color:var(--muted)}
.side-item kbd{margin-left:auto}
.side-sec{display:flex;align-items:center;margin:14px 0 2px;padding:0 8px;height:24px;font-size:12px;font-weight:500;color:var(--muted)}
.side-sec .icon-btn{width:22px;height:22px;margin-left:auto;opacity:0}
.side-sec:hover .icon-btn{opacity:1}
.tree-row{display:flex;align-items:center;gap:2px;height:28px;padding-right:4px;border-radius:5px;color:var(--fg-2);cursor:pointer}
.tree-row:hover{background:var(--hover)}
.tree-row.active{background:var(--press);color:var(--fg);font-weight:500}
.tree-row .tw{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:var(--faint);flex:none}
.tree-row .tw:hover{background:var(--press)}
.tree-row .tw .i{transition:transform .12s}
.tree-row.open>.tw .i{transform:rotate(90deg)}
.tree-row .emo{width:20px;text-align:center;flex:none;font-size:15px}
.tree-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:4px}
.tree-row .acts{display:none;gap:1px}
.tree-row:hover .acts{display:flex}
.tree-row .acts .icon-btn{width:22px;height:22px}
.side-foot{border-top:1px solid var(--line);padding:6px}

.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;position:relative}
.topbar{display:flex;align-items:center;gap:6px;height:45px;flex:none;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.crumbs{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden}
.crumb{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.crumb:hover{background:var(--hover)}
.crumb-sep{color:var(--faint)}
.status{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;white-space:nowrap;padding:0 6px}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.status.saving .dot{background:var(--faint);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
#menu-btn{display:none}
.view{flex:1;min-height:0;overflow:auto}

/* Seite */
.cover{height:30vh;max-height:240px;min-height:120px;position:relative}
.cover-plan{background-color:var(--plan-bg);background-image:linear-gradient(var(--plan-line) 1px,transparent 1px),linear-gradient(90deg,var(--plan-line) 1px,transparent 1px),linear-gradient(var(--plan-line) 1px,transparent 1px),linear-gradient(90deg,var(--plan-line) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px}
.cover-plan svg{position:absolute;right:12%;bottom:18%;width:min(340px,50%);height:auto;color:var(--accent);opacity:.55}
.page{max-width:720px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-bottom:30vh;position:relative}
.page-icon{font-size:72px;line-height:1;margin-top:-42px;position:relative;width:max-content;border-radius:6px;padding:2px}
.page-icon:hover{background:var(--hover)}
.page.no-cover .page-icon{margin-top:72px}
.page-tools{display:flex;gap:2px;height:28px;margin:8px 0 2px;opacity:0;transition:opacity .15s}
.page:hover .page-tools{opacity:1}
.page-tools .btn{color:var(--faint);font-size:13px;height:26px;padding:0 6px}
.page-title{font-size:40px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;outline:none;text-wrap:balance}
.page-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:13px;margin-bottom:14px}
.page-meta .path{font-family:var(--font-mono);font-size:12px}

.editor{outline:none;font-size:16px;line-height:1.6;caret-color:var(--fg)}
.editor>*{margin:2px 0;padding:3px 2px;border-radius:3px}
.editor h2{font-size:24px;line-height:1.3;font-weight:600;margin-top:28px;letter-spacing:-.005em}
.editor h3{font-size:19px;line-height:1.3;font-weight:600;margin-top:18px}
.editor p{min-height:1.6em}
.editor p:empty::before,.editor p.ph:only-child::before{content:attr(data-ph);color:var(--faint)}
.editor ul,.editor ol{padding-left:26px}
.editor li{padding:1px 0}
.editor ul.todo{list-style:none;padding-left:2px}
.editor ul.todo li{display:flex;gap:8px;align-items:flex-start}
.cb{flex:none;width:16px;height:16px;margin-top:5px;border:1.5px solid var(--fg-2);border-radius:3px;display:grid;place-items:center;cursor:pointer;user-select:none}
.cb .i{width:12px;height:12px;stroke-width:2.6;opacity:0;color:var(--on-accent)}
li.done .cb,.cb.on{background:var(--accent);border-color:var(--accent)}
li.done .cb .i,.cb.on .i{opacity:1}
li.done>span:last-child{text-decoration:line-through;color:var(--muted)}
.callout{display:flex;gap:10px;background:var(--hover);border-radius:5px;padding:14px 16px 14px 12px!important;margin:8px 0!important}
.callout .ce{font-size:20px;line-height:1.3;user-select:none}
blockquote{border-left:3px solid currentColor;padding-left:14px!important}
.editor hr{border:0;border-top:1px solid var(--line-2);margin:14px 0!important}
.editor pre{background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--font-mono);font-size:13.5px;padding:14px 16px!important;border-radius:5px;overflow-x:auto}
.tbl-wrap{overflow-x:auto}
.editor table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.editor th,.editor td{border:1px solid var(--line-2);padding:6px 9px;text-align:left;vertical-align:top}
.editor th{font-weight:500;color:var(--muted);background:var(--bg-soft)}
.editor td.num{text-align:right}
.img-ph{display:flex;align-items:center;gap:10px;background:var(--hover);color:var(--muted);border-radius:5px;padding:14px 16px!important;font-size:14px;user-select:none}

/* Block-Handles, Slash-Menü, Auswahl-Toolbar */
#blk-handle{position:absolute;display:flex;gap:0;opacity:0;transition:opacity .1s;z-index:5}
#blk-handle.show{opacity:1}
#blk-handle .icon-btn{width:22px;height:24px;color:var(--faint)}
#blk-handle .grip{cursor:grab}
.pop{position:fixed;z-index:60;background:var(--pop);border-radius:8px;box-shadow:var(--pop-sh);padding:6px;min-width:220px;max-height:min(380px,60vh);overflow-y:auto}
.pop-h{font-size:12px;color:var(--muted);padding:6px 8px 4px}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:4px 8px;border-radius:5px;text-align:left;font-size:14px;min-height:30px}
.pop-item:hover,.pop-item.sel{background:var(--hover)}
.pop-item .sw{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:5px;box-shadow:0 0 0 1px var(--line-2);background:var(--bg);font-size:15px;font-weight:600;color:var(--fg-2)}
.pop-item .dsc{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.pop-item .ck{margin-left:auto;color:var(--accent)}
.sel-bar{position:fixed;z-index:55;display:flex;gap:1px;background:var(--pop);box-shadow:var(--pop-sh);border-radius:6px;padding:3px}
.sel-bar button{height:28px;min-width:28px;padding:0 7px;border-radius:4px;font-size:14px}
.sel-bar button:hover{background:var(--hover)}
.sel-bar .sep{width:1px;background:var(--line-2);margin:4px 2px}

/* Verknüpftes Board in der Seite */
.linked{margin:14px 0!important;padding:0!important;user-select:none}
.linked-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:4px 2px 8px;cursor:pointer}
.linked-h:hover span{text-decoration:underline}
.linked-h .src{font-weight:400;font-size:12px;color:var(--muted)}
.mini-board{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;overflow-x:auto}
.mini-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.mini-card{background:var(--card);box-shadow:0 0 0 1px var(--card-ring),var(--card-sh);border-radius:5px;padding:7px 9px;font-size:13px;line-height:1.35;cursor:pointer}
.mini-card:hover{background:var(--bg-soft)}

/* Board */
.db{padding-top:28px}
.db-head{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}
.db-title{display:flex;align-items:center;gap:10px;font-size:32px;line-height:1.2;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.db-sub{color:var(--muted);font-size:13px;margin:0 0 14px}
/* „New“ auf Höhe der Überschrift: spart in der Leiste darunter Platz */
.db-title-row{display:flex;align-items:center;gap:12px}
.db-title-row .db-title{flex:1;min-width:0}
.db-title-row #new-card-btn{flex:none;margin-bottom:4px}
/* Board-Kopf wie eine Notion-Datenbank: Emoji, Titel und Beschreibung direkt bearbeitbar */
.db-tools{display:flex;gap:2px;height:26px;margin:-6px 0 2px;opacity:0;transition:opacity .15s}
.db-head:hover .db-tools,.db-tools:focus-within{opacity:1}
.db-tool{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 6px;border-radius:5px;color:var(--faint);font-size:13px}
.db-tool:hover{background:var(--hover);color:var(--muted)}
.db-emoji{font-size:30px;line-height:1;padding:2px;border-radius:6px}
.db-emoji:not([disabled]):hover{background:var(--hover)}
.db-name{outline:0;min-width:1ch}
.db-name:empty::before,.db-desc:empty::before{content:attr(data-ph);color:var(--faint)}
.db-desc{color:var(--fg);font-size:14px;line-height:1.5;margin:2px 0 6px;outline:0;white-space:pre-wrap;max-width:720px}
.db-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:12px}
.db-tab{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:5px;font-weight:500;position:relative}
.db-tab.on::after{content:"";position:absolute;left:6px;right:6px;bottom:-7px;height:2px;background:var(--fg)}
.db-tab:hover{background:var(--hover)}
.tb{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:5px;color:var(--muted);font-size:14px;white-space:nowrap}
.tb:hover{background:var(--hover);color:var(--fg)}
.tb.on{color:var(--accent);background:var(--accent-soft)}
.tb select{appearance:none;border:0;background:transparent;font-weight:500;color:inherit;cursor:pointer;padding-right:2px}
.tb-search{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:5px;color:var(--muted)}
.tb-search input{border:0;outline:0;background:transparent;width:110px;color:var(--fg)}
.tb-search:focus-within{background:var(--hover)}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);padding:0 8px;white-space:nowrap}
.sync .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}

.canvas{overflow-x:auto;padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px));padding-bottom:48px}
.cols{display:flex;gap:12px;align-items:flex-start;width:max-content}
.col{width:268px;flex:none;border-radius:8px;padding:6px 6px 4px;background:color-mix(in srgb,var(--tb) var(--col-mix),transparent)}
.col-h{display:flex;align-items:center;gap:8px;height:30px;padding:0 4px 0 2px}
.count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.col-h .acts{margin-left:auto;display:flex;opacity:0}
.col:hover .col-h .acts{opacity:1}
.col-h .icon-btn{width:24px;height:24px}
.list{display:flex;flex-direction:column;gap:7px;min-height:36px;padding:2px 0 6px}
.add-card{display:flex;align-items:center;gap:6px;width:100%;height:30px;padding:0 6px;border-radius:5px;color:var(--muted);font-size:14px}
.add-card:hover{background:var(--hover);color:var(--fg)}
.add-group{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:6px;color:var(--muted);white-space:nowrap;margin-top:4px}
.add-group:hover{background:var(--hover)}

.card{background:var(--card);border-radius:6px;box-shadow:0 0 0 1px var(--card-ring),var(--card-sh);cursor:pointer;overflow:hidden;user-select:none}
.card:hover{background:color-mix(in srgb,var(--card) 92%,var(--fg) 4%)}
.card-cover{height:96px}
.cover-tiles{background-color:#d8d3cb;background-image:conic-gradient(#ece8e1 25%,#c9c2b7 0 50%,#ece8e1 0 75%,#c9c2b7 0);background-size:28px 28px}
.card-b{padding:9px 10px 9px}
.card-t{font-weight:500;font-size:14px;line-height:1.35;margin-bottom:6px;overflow-wrap:anywhere}
.card.done .card-t{color:var(--muted)}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.card-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.card-meta .m{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.card-meta .m .i{width:13px;height:13px}
.card-meta .over{color:var(--danger)}
.card-meta .avatars{margin-left:auto}
.prog{display:inline-block;width:34px;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.prog i{display:block;height:100%;background:var(--ok)}
.card-ghost{opacity:.35}
.card-drag{transform:rotate(2deg);box-shadow:var(--pop-sh)!important}

/* Swimlanes */
.lanes{display:grid;gap:0 12px;width:max-content}
.lane-head-row{display:contents}
.lane-col-h{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px}
.lane-h{grid-column:1/-1;display:flex;align-items:center;height:38px;margin-top:10px;border-top:1px solid var(--line)}
.lane-h button{position:sticky;left:0;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 4px;border-radius:5px;font-weight:500}
.lane-h button:hover{background:var(--hover)}
.lane-h .i{transition:transform .12s;color:var(--faint)}
.lane-h.open .i{transform:rotate(90deg)}
.cell{width:268px;border-radius:8px;padding:6px 6px 2px;background:color-mix(in srgb,var(--tb) var(--col-mix),transparent)}
.cell .add-card{height:26px;font-size:13px}
.cell.blocked .list{min-height:24px}

/* Side-Peek */
.peek{position:fixed;z-index:30;top:0;right:0;bottom:0;width:min(600px,100%);background:var(--bg);box-shadow:var(--pop-sh);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:peekIn .18s ease-out}
@keyframes peekIn{from{transform:translateX(24px);opacity:.4}}
.peek.full{left:var(--side-w);width:auto;box-shadow:none;animation:none}
.peek-bar{display:flex;align-items:center;gap:4px;height:45px;flex:none;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 12px}
.peek-bar .btn{color:var(--muted);font-size:13px}
.peek-scroll{flex:1;overflow-y:auto}
.peek-in{max-width:720px;margin:0 auto;padding:18px max(40px,env(safe-area-inset-right,0px)) 80px 40px}
.peek.full .peek-in{padding-top:56px}
.peek-title{font-size:30px;line-height:1.2;font-weight:700;margin:0 0 18px;outline:none;letter-spacing:-.01em;overflow-wrap:anywhere}
.peek-title.done{text-decoration:line-through;text-decoration-color:var(--faint);color:var(--muted)}
.props{display:grid;grid-template-columns:150px minmax(0,1fr);row-gap:2px;font-size:14px;margin-bottom:12px}
.prop-k{display:flex;align-items:center;gap:8px;height:34px;padding:0 6px;color:var(--muted);border-radius:4px}
.prop-v{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:34px;padding:4px 8px;border-radius:4px;text-align:left;width:100%}
.prop-v:hover,.prop-v:focus-within{background:var(--hover)}
.prop-v .empty{color:var(--faint)}
.prop-v input[type=date]{border:0;background:transparent;outline:0;color:var(--fg);padding:0}
.prop-v .person{display:inline-flex;align-items:center;gap:6px;margin-right:8px}
.prop-v .file{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:1px 6px;border-radius:4px;background:var(--hover)}
.cb-input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.peek hr{border:0;border-top:1px solid var(--line);margin:8px 0 16px}
.peek .editor{min-height:120px}
.comments{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.cmt{display:flex;gap:10px;margin-bottom:14px}
.cmt .who{font-weight:500}
.cmt .when{color:var(--faint);font-size:12px;margin-left:6px}
.cmt p{margin:2px 0 0}
.cmt-new{display:flex;gap:10px;align-items:center}
.cmt-new input{flex:1;border:0;outline:0;background:transparent;height:32px;color:var(--fg)}
.cmt-new input::placeholder{color:var(--faint)}

/* Dateien */
.files{max-width:1080px;margin:0 auto;padding:28px max(40px,env(safe-area-inset-right,0px)) 80px max(40px,env(safe-area-inset-left,0px));position:relative;min-height:100%}
.files h1{font-size:32px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.files .db-sub a{color:var(--muted)}
.fbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:6px}
.seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:5px;padding:2px;gap:2px}
.seg button{display:inline-grid;place-items:center;width:28px;height:24px;border-radius:4px;color:var(--muted)}
.seg button.on{background:var(--press);color:var(--fg)}
.ftable-wrap{overflow-x:auto}
.ftable{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.ftable th{font-weight:400;color:var(--muted);font-size:13px;text-align:left;padding:8px 8px;border-bottom:1px solid var(--line)}
.ftable td{padding:0 8px;height:44px;border-bottom:1px solid var(--line);white-space:nowrap}
.ftable tr.row:hover td{background:var(--hover)}
.ftable tr.row{cursor:pointer}
.ftable .nm{display:flex;align-items:center;gap:10px;min-width:0}
.ftable .nm span{overflow:hidden;text-overflow:ellipsis}
.ftable .muted{color:var(--muted);font-variant-numeric:tabular-nums}
.ftable .ra{text-align:right;width:84px}
.ftable .ra .icon-btn{opacity:0}
.ftable tr.row:hover .ra .icon-btn,.ftable .ra .icon-btn.shared{opacity:1}
.ftable .ra .icon-btn.shared{color:var(--accent)}
.ficon{width:28px;height:28px;flex:none;border-radius:4px;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.02em}
.ficon.folder{color:var(--accent)}
.ficon.folder .i{width:22px;height:22px;fill:var(--accent-soft)}
.ficon.pdf{background:var(--t-red-bg);color:var(--t-red-fg)}
.ficon.xlsx{background:var(--t-green-bg);color:var(--t-green-fg)}
.ficon.md{background:var(--t-gray-bg);color:var(--t-gray-fg)}
.ficon.img{overflow:hidden;padding:0}
.ficon.img svg,.thumb svg{width:100%;height:100%;display:block}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding-top:12px}
.tile{border-radius:8px;box-shadow:0 0 0 1px var(--card-ring);overflow:hidden;cursor:pointer;background:var(--card)}
.tile:hover{box-shadow:0 0 0 1px var(--line-2),var(--card-sh)}
.thumb{aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;background:var(--bg-soft)}
.thumb .ficon{width:48px;height:56px;font-size:13px}
.thumb .ficon.folder .i{width:48px;height:48px}
.tile-n{padding:8px 10px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-n small{display:block;color:var(--muted);font-size:12px}
.drop{position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);font-weight:500;font-size:16px;z-index:4;pointer-events:none}

/* Modale, Palette, Toast */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
#side-scrim{z-index:33} /* Handy: hinter der Seitenleiste (35), aber vor Inhalt und Side-Peek (30) */
.modal{position:fixed;z-index:50;left:50%;top:14vh;transform:translateX(-50%);width:min(520px,calc(100% - 32px));background:var(--pop);border-radius:10px;box-shadow:var(--pop-sh);overflow:hidden}
.modal-h{padding:18px 20px 4px}
.modal-h h2{font-size:17px;font-weight:600;margin:0 0 6px;text-wrap:balance}
.modal-h p{margin:0;color:var(--muted)}
.modal-b{padding:12px 20px}
.modal-f{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 20px 18px}
.field{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--bg)}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent}
.field:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.share-row{display:flex;align-items:center;gap:10px;min-height:42px}
.share-row .who{flex:1;min-width:0}
.share-row .who small{display:block;color:var(--muted);font-size:12px;line-height:1.2}
.share-row select{border:0;background:transparent;color:var(--muted);cursor:pointer}
.share-sec{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.switch{position:relative;width:30px;height:18px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:9px;background:var(--line-2);transition:background .15s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(12px)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.opt{display:flex;align-items:center;gap:10px;min-height:34px;flex-wrap:wrap}
.opt label{display:flex;align-items:center;gap:8px;cursor:pointer}
.opt input[type=date],.opt input[type=password]{height:28px;border:0;border-radius:5px;padding:0 8px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--bg);outline:0}
.hint{font-size:12px;color:var(--muted)}

.palette{top:12vh;width:min(620px,calc(100% - 32px))}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;border-bottom:1px solid var(--line)}
.pal-in input{flex:1;border:0;outline:0;background:transparent;font-size:17px;min-width:0}
.pal-list{max-height:min(420px,56vh);overflow-y:auto;padding:6px}
.pal-g{font-size:12px;color:var(--muted);padding:8px 10px 4px}
.pal-item{display:flex;align-items:center;gap:10px;width:100%;padding:0 10px;height:38px;border-radius:6px;text-align:left}
.pal-item.sel{background:var(--hover)}
.pal-item .emo{width:20px;text-align:center;font-size:15px}
.pal-item .where{margin-left:auto;color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.pal-foot{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.pal-empty{padding:28px 16px;text-align:center;color:var(--muted)}

.preview{width:min(760px,calc(100% - 32px));top:8vh}
.preview .pv{background:var(--bg-soft);display:grid;place-items:center;max-height:62vh;overflow:hidden}
.preview .pv svg{width:100%;height:auto;max-height:62vh}
.pdf-page{width:min(360px,80%);aspect-ratio:1/1.414;background:#fff;color:#333;margin:24px auto;box-shadow:0 2px 10px rgba(0,0,0,.18);padding:28px;font-size:9px;line-height:1.6}
.pdf-page b{font-size:13px;display:block;margin-bottom:10px}
.pdf-page i{display:block;height:6px;background:#e4e4e4;margin:7px 0;border-radius:2px}

.toast{position:fixed;z-index:70;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:7px;font-size:14px;box-shadow:var(--pop-sh);display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px)}
.toast .i{color:var(--bg)}

/* Login */
.login{position:fixed;inset:0;z-index:45;background:var(--bg-side);display:grid;place-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow:auto}
.login-box{width:min(380px,100%);text-align:left}
.login-mark{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;margin-bottom:40px}
.login-mark .logo{width:30px;height:30px;border-radius:7px;background:var(--accent);display:grid;place-items:center;color:var(--on-accent)}
.login h1{font-size:30px;line-height:1.2;margin:0 0 10px;letter-spacing:-.01em;text-wrap:balance}
.login p{color:var(--fg-2);margin:0 0 24px;font-size:15px}
.login-label{display:block;font-size:13px;font-weight:500;color:var(--fg-2);margin:0 0 6px}
.login-field{height:40px;margin-bottom:14px}
.login-field .i{color:var(--muted)}
.login .login-hint{font-size:13px;color:var(--muted);margin:-8px 0 18px}
.login .btn-primary{width:100%;justify-content:center;height:40px;font-size:15px;border-radius:7px}
.login .fine{font-size:13px;color:var(--muted);margin-top:22px;display:flex;gap:8px}
.login .fine .i{margin-top:2px}
.wait{display:flex;align-items:center;gap:12px;padding:14px;border-radius:8px;background:var(--accent-soft);margin-bottom:12px}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--accent);border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:820px){
  .sidebar{position:fixed;z-index:35;top:0;bottom:0;left:0;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--pop-sh);padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);width:calc(var(--side-w) + env(safe-area-inset-left,0px))}
  .app.side-open .sidebar{transform:none}
  #menu-btn{display:inline-grid}
  .peek.full{left:0}
  .db-head,.canvas{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .page-title{font-size:32px}
  .page-icon{font-size:56px;margin-top:-30px}
  .peek-in{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .props{grid-template-columns:110px minmax(0,1fr)}
  .files{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .status .txt,.btn .txt{display:none}
  .col,.cell{width:248px}
  .sync{display:none}
  .tb-search input{width:84px}
  .db-bar .spacer{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Startseite (Phase 1) */
.home{max-width:720px;margin:0 auto;padding:72px max(24px,env(safe-area-inset-right,0px)) 80px max(24px,env(safe-area-inset-left,0px))}
.conn{display:grid;grid-template-columns:150px minmax(0,1fr);row-gap:2px;font-size:14px;margin:8px 0 28px}
.conn .v{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 8px;overflow-wrap:anywhere}
.side-empty{padding:2px 8px 4px 30px;font-size:13px;color:var(--faint)}
.side-form{margin:0}
.login .err{color:var(--danger);font-size:14px;margin:0 0 12px}
.side-item:disabled{color:var(--faint);cursor:default;background:none}

/* Phase 2: Seitenbaum, Editor, Speichern */
a.tree-row{text-decoration:none}
.tree-row.drop-into,.side-sec.drop-into{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.status.conflict .dot,.status.error .dot{background:var(--danger)}
.status.conflict,.status.error{color:var(--danger)}
.page-meta a.path{color:var(--muted);text-decoration:none}
.page-meta a.path:hover{text-decoration:underline}
button.page-icon{display:block;cursor:pointer}
.page.no-cover .page-icon{margin-top:56px}
.page.no-cover .page-tools{margin-top:56px}
.page.no-cover .page-icon:not([hidden])+.page-tools{margin-top:8px}
.emoji-grid{display:grid;grid-template-columns:repeat(8,34px);gap:2px;padding:4px}
.emoji{width:34px;height:34px;border-radius:5px;font-size:20px;line-height:34px;text-align:center}
.emoji:hover{background:var(--hover)}
a.pop-item{color:inherit}

/* Milkdown Crepe an die Design-Tokens anbinden */
.milkdown{
  --crepe-color-background:var(--bg); --crepe-color-on-background:var(--fg);
  --crepe-color-surface:var(--pop); --crepe-color-surface-low:var(--bg-soft);
  --crepe-color-on-surface:var(--fg); --crepe-color-on-surface-variant:var(--muted);
  --crepe-color-outline:var(--line-2); --crepe-color-primary:var(--accent);
  --crepe-color-secondary:var(--accent-soft); --crepe-color-on-secondary:var(--fg);
  --crepe-color-inverse:var(--fg); --crepe-color-on-inverse:var(--bg);
  --crepe-color-inline-code:var(--danger); --crepe-color-error:var(--danger);
  --crepe-color-hover:var(--hover); --crepe-color-selected:var(--press); --crepe-color-inline-area:var(--hover);
  --crepe-base-font-size:16px;
  --crepe-font-title:var(--font-ui); --crepe-font-default:var(--font-ui); --crepe-font-code:var(--font-mono);
  --crepe-shadow-1:var(--pop-sh); --crepe-shadow-2:var(--pop-sh);
  font-family:var(--font-ui);color:var(--fg);background:transparent
}
#editor .ProseMirror{outline:none;padding:0 0 30vh;font-size:16px;line-height:1.6}
.editor .ProseMirror>*{margin:2px 0}
.editor h1{font-size:30px;line-height:1.25;font-weight:700;margin-top:32px}
.editor p code,.editor li code{font-family:var(--font-mono);font-size:.88em;background:var(--hover);color:var(--danger);padding:1px 4px;border-radius:3px}
.editor a{color:var(--accent)}
.editor img{max-width:100%}

/* Phase 3: Board */
.avatar{position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek .btn{text-decoration:none}
.peek-desc,#peek-desc .ProseMirror{min-height:120px}
#peek-desc .ProseMirror{outline:none;padding:0 0 40px;font-size:15px;line-height:1.6}
.cmt p{white-space:pre-wrap;overflow-wrap:anywhere}

/* Phase 4: Dateien */
.err{color:var(--danger);font-size:13px;margin:8px 0 0}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:4px;padding:64px 16px;color:var(--muted);text-align:center}
.empty-state p{margin:0}
.ftable th .sort{color:var(--muted);font-size:13px;padding:2px 4px;margin-left:-4px;border-radius:4px}
.ftable th .sort:hover{background:var(--hover)}
.ftable th .sort.on{color:var(--fg)}
.ficon.img img{width:100%;height:100%;object-fit:cover;display:block}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile-n span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview .pv img{max-width:100%;max-height:70vh;display:block;margin:0 auto}
.preview .pv video,.preview .pv audio{display:block;max-height:70vh;background:#000}
.uploads{position:fixed;z-index:65;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(320px,calc(100% - 32px));background:var(--pop);box-shadow:var(--pop-sh);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:8px}
.up{display:flex;flex-direction:column;gap:4px;font-size:13px}
.up-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-bar{height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.up.done .up-bar i{width:100%;background:var(--ok)}
.up.fail{color:var(--danger)}
.up.fail .up-bar i{background:var(--danger)}
#share-results{max-height:200px;overflow-y:auto;margin-top:4px}

/* Titelbild */
#cover{position:relative}
#cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover-actions{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:12px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
#cover:hover .cover-actions,#cover:focus-within .cover-actions{opacity:1}
.cover-actions .btn{background:var(--pop);box-shadow:var(--pop-sh);font-size:13px;height:26px;cursor:pointer}
label.btn{cursor:pointer}

/* Deck-Anhänge im Side-Peek */
.prop-v a.file{color:inherit;text-decoration:none}
.prop-v a.file:hover{background:var(--press)}
.prop-v .file.add{color:var(--muted);cursor:pointer;background:none}
.prop-v .file.add:hover{background:var(--hover);color:var(--fg)}

/* ⌘K-Palette */
.pal-item .pal-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-item .emo .i{color:var(--muted)}
.row.flash td,.tile.flash{background:var(--accent-soft)!important;transition:background 1.5s}

/* Schmale Bildschirme */
@media (max-width:600px){
  .ftable{min-width:0;table-layout:fixed}
  .ftable th:nth-child(3),.ftable td:nth-child(3){display:none}
  .ftable th:nth-child(2),.ftable td:nth-child(2){width:96px}
  .ftable .ra{width:72px}
  .ftable td:first-child .nm span{white-space:nowrap}
  .fbar .hint{display:none}
}

/* Eingebettetes Board in Seiten */
#editor .board-embed-host{margin-top:14px!important;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
#editor .board-embed-host::before{content:"";width:16px;height:16px;flex:none;background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M9 4v16M15 4v10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M9 4v16M15 4v10'/%3E%3C/svg%3E") center/contain no-repeat}
#editor .board-embed-host a{color:var(--fg);text-decoration:none}
#editor .board-embed-host::after{content:"Deck-Board";font-weight:400;font-size:12px;color:var(--muted)}
.board-embed{margin:4px 0 16px;user-select:none;cursor:default}
.board-embed .mini-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:10px;overflow-x:auto;padding-bottom:4px}
.board-embed .mini-col-h{display:flex;align-items:center;gap:6px;margin-bottom:2px}
/* Crepes Reset setzt Buttons im Editor zurück, deshalb hier vollständig */
#editor .board-embed .mini-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;font-size:13px;line-height:1.35;
  background:var(--card);box-shadow:0 0 0 1px var(--card-ring),var(--card-sh);border-radius:5px;padding:7px 9px;margin-top:6px;color:var(--fg);cursor:pointer}
#editor .board-embed .mini-card:hover{background:var(--bg-soft)}
#editor .board-embed .mini-card.done{color:var(--muted)}
.mini-tags{display:flex;flex-wrap:wrap;gap:3px}
#editor .mini-more{font-size:12px;color:var(--muted);text-align:left;padding:4px;margin-top:4px;border-radius:4px;cursor:pointer}
.mini-more:hover{background:var(--hover);color:var(--fg)}
#editor .embed-open{margin-top:8px;color:var(--muted);font-size:13px;height:26px;padding:0 8px;cursor:pointer;display:inline-flex;align-items:center;border-radius:5px}
#editor .embed-open:hover{background:var(--hover);color:var(--fg)}

/* Seitenleiste ein- und Abschnitte zuklappen */
.ws-row{display:flex;align-items:center;gap:2px;margin:6px 6px 2px}
.ws-row .ws{flex:1;min-width:0;margin:0}
#side-collapse{opacity:0;transition:opacity .15s}
#side-collapse .i{transform:rotate(180deg)} /* « einklappen; eingeklappt zeigt er » zum Fixieren */
.sidebar:hover #side-collapse,#side-collapse:focus-visible{opacity:1}
.side-sec[data-sec-toggle]{cursor:pointer;user-select:none;border-radius:5px}
.side-sec[data-sec-toggle]:hover{background:var(--hover)}
.sec-caret{display:inline-grid;place-items:center;width:16px;margin-left:2px;color:var(--faint);opacity:0;transition:transform .12s,opacity .12s}
.side-sec:hover .sec-caret,.side-sec.closed .sec-caret{opacity:1}
.side-sec.closed .sec-caret{transform:rotate(-90deg)}
.side-edge{display:none}
@media (min-width:821px){
  .app.side-collapsed .sidebar{position:fixed;z-index:35;top:8px;bottom:8px;left:0;transform:translateX(calc(-100% - 12px));
    transition:transform .18s ease;border-radius:0 8px 8px 0;box-shadow:var(--pop-sh);border-right:0}
  .app.side-collapsed.side-peek .sidebar{transform:none}
  .app.side-collapsed #menu-btn{display:inline-grid}
  .app.side-collapsed #side-collapse{opacity:1}
  .app.side-collapsed #side-collapse .i{transform:none}
  .app.side-collapsed .side-edge{display:block;position:fixed;z-index:34;left:0;top:0;bottom:0;width:10px}
  .app.side-collapsed .peek.full{left:0}
}
@media (max-width:820px){ #side-collapse{opacity:1} }
@media (prefers-reduced-motion:reduce){ .app.side-collapsed .sidebar{transition:none} }

/* Links auf andere Seiten (relativer Link auf eine .md-Datei) */
#editor a[href$=".md"],#editor a[href^="/p/"],#editor a[href^="/d/"]{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-2);font-weight:500;cursor:pointer}
#editor a[href$=".md"]:hover,#editor a[href^="/p/"]:hover,#editor a[href^="/d/"]:hover{border-bottom-color:var(--fg)}
#editor a[href$=".md"]::before,#editor a[href^="/p/"]::before,#editor a[href^="/d/"]::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:3px;vertical-align:-.1em;background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat}
.page-picker{width:min(360px,calc(100vw - 24px));padding:4px}
.page-picker .pal-in{border-bottom:1px solid var(--line);margin-bottom:4px}
.pl-list{max-height:280px;overflow-y:auto}
.pl-list .pop-item span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Viewer */
.modal.preview.viewer-pdf{top:3vh;width:min(1100px,calc(100% - 32px))}
.viewer-pdf .pv{height:82vh;max-height:none}
.pv-frame{width:100%;height:100%;border:0;display:block;background:#fff}
.viewer-f{justify-content:space-between;align-items:center;flex-wrap:nowrap}
.viewer-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-acts{display:flex;gap:6px;flex:none}
@media (max-width:600px){ .viewer-acts .btn .txt{display:none} .viewer-pdf .pv{height:72vh} }

/* Seitenbaum bündig mit den Überschriften: Der Aufklapp-Pfeil liegt beim Hovern über dem Icon (wie Notion) */
.tree-row{position:relative;gap:6px}
.tree-row .tw{position:absolute;left:var(--ind,6px);top:3px;width:20px;height:22px;opacity:0;z-index:1}
.tree-row:hover .tw:not(:empty){opacity:1}
.tree-row:hover:has(.tw:not(:empty)) .emo{visibility:hidden}
.tree-row .nm{padding-left:0}
.tree-row .tw:empty{pointer-events:none} /* Seite ohne Unterseiten: Klick aufs Icon öffnet die Seite */

/* Auswahl der Swimlanes */
.lanes-pop{min-width:260px}
.lane-opt{cursor:pointer;gap:8px}
.lane-opt .lane-lbl{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden}
.lane-all{display:flex;gap:4px;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.lane-all .btn{font-size:13px;height:26px;color:var(--muted)}
.picker-in{height:40px;padding:0 6px}
.picker-in input{font-size:14px}

/* Erwähnungen und Anhänge in Kommentaren */
.mention{display:inline-block;padding:0 4px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-weight:500}
.cmt a.cmt-att{display:inline-flex;align-items:center;gap:3px;padding:0 6px;border-radius:4px;background:var(--hover);color:inherit;text-decoration:none;font-size:13px}
.cmt a.cmt-att:hover{background:var(--press)}
.cmt-new label.icon-btn{cursor:pointer}

/* Erwähnungen im Editor */
.editor a[href^="mention:"]{display:inline-block;padding:0 4px;border-radius:4px;background:var(--accent-soft);color:var(--accent);text-decoration:none;font-weight:500}
.editor a[href^="date:"]{display:inline-block;padding:0 5px;border-radius:4px;background:var(--hover);color:var(--fg-2);text-decoration:none}
.editor a[href^="date:"]::before{content:"📅 "}

/* „+ Add property“ in der Karte */
.prop-add{grid-column:1/-1}
.prop-add-btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px;border-radius:4px;color:var(--faint);font-size:14px}
.prop-add-btn:hover{background:var(--hover);color:var(--muted)}

/* Kartenvorlagen (wie Notion) */
.tpl-pick{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.tpl-pick .hint{margin:0 0 6px;font-size:14px}
.tpl{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:5px;color:var(--fg-2);font-size:15px}
.tpl:hover{background:var(--hover);color:var(--fg)}
.tpl .i{color:var(--muted)}
.tpl-body{width:100%;border:0;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--bg);color:var(--fg);padding:8px 10px;font-family:var(--font-mono);font-size:13px;resize:vertical;outline:0}
.tpl-body:focus{box-shadow:inset 0 0 0 2px var(--accent)}
/* Teamspaces: Buchstaben-Kachel wie die Teamspace-Icons in Notion */
.tree-row .space-ic{width:18px;height:18px;margin:0 1px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;line-height:18px}
.side-add{display:block;width:100%;box-sizing:border-box;text-align:left;cursor:pointer;border-radius:5px;padding-top:4px;padding-bottom:4px}
.side-add:hover{background:var(--hover);color:var(--muted)}
/* Spalten-Block: nebeneinander, auf dem Handy untereinander; beim Bearbeiten zeigt ein Hauch die Spaltengrenzen */
#editor .cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px;margin:8px 0}
#editor .col{min-width:0;border-radius:4px;transition:box-shadow .15s}
#editor .cols:hover>.col,#editor .col:focus-within{box-shadow:0 0 0 1px var(--line)}
#editor .col>:first-child{margin-top:0}
@media (max-width:640px){#editor .cols{grid-auto-flow:row;gap:8px}}
/* Datenbank: Tabelle wie in Notion, Seite dafür breiter */
.page.wide{max-width:1080px}
.dbv{margin:4px 0 28px}
.dbv-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:6px}
.dbv-tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.dbv-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.dbv-chips:empty{display:none}
.db-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 10px;border-radius:12px;font-size:13px;color:var(--accent);background:var(--accent-soft)}
.db-chip button{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:inherit}
.db-chip button:hover{background:var(--hover)}
.dbv-wrap{overflow-x:auto;margin-top:2px}
.dbv-table{border-collapse:collapse;width:100%;min-width:max-content;font-size:14px}
.dbv-table th{height:34px;padding:0 8px;text-align:left;font-weight:400;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--line);cursor:pointer}
.dbv-table th .i{margin-right:6px;vertical-align:-2px}
.dbv-table th:hover{background:var(--hover)}
.dbv-table th+th,.dbv-table td+td{border-left:1px solid var(--line)}
.dbv-table th.dbv-plus{width:36px;cursor:default}
.dbv-table th.dbv-plus:hover{background:none}
.dbv-table td{height:36px;padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle;max-width:320px}
.dbv-table td.hint{color:var(--faint);border-left:0}
.dbv-table .db-c{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbv-table .db-c:hover{background:var(--hover)}
.dbv-table .db-multi_select{white-space:normal}
.db-c .tag{margin:1px 4px 1px 0}
.db-name{min-width:220px}
.db-name a{display:flex;align-items:center;gap:8px;color:var(--fg);text-decoration:none;font-weight:500}
.db-name a:hover .nm{text-decoration:underline;text-decoration-color:var(--line-2)}
.db-name .emo{width:18px;text-align:center}
.db-name .i{color:var(--muted)}
.db-url{color:var(--fg-2)}
.dbv-add-row{display:flex;align-items:center;gap:6px;width:100%;height:34px;padding:0 8px;color:var(--faint);border-radius:4px}
.dbv-add-row:hover{background:var(--hover);color:var(--muted)}
.db-pop{min-width:260px}
.db-pop-wide{min-width:min(520px,calc(100vw - 24px))}
.db-edit{margin:2px 2px 6px}
.db-sel{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 6px}
.db-opts{max-height:260px;overflow-y:auto}
.db-frow{display:flex;gap:6px;align-items:center;padding:4px}
.db-frow select,.db-frow input{height:30px;border-radius:5px;padding:0 6px;background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2);border:0;min-width:0;flex:1}
.entry-props{display:grid;grid-template-columns:150px minmax(0,1fr);row-gap:2px;font-size:14px;margin:0 0 14px}
.entry-props .prop-v{cursor:pointer}
.entry-props .prop-v:hover{background:var(--hover)}
.entry-props .empty{color:var(--faint)}
@media (max-width:640px){.entry-props{grid-template-columns:110px minmax(0,1fr)}.dbv-bar .tb span{display:none}}
/* „Install app“: rundes Icon rechts neben „Log out“, nur auf dem Handy im Browser */
.side-foot-row{display:flex;align-items:center;gap:6px}
.side-foot-row .side-form{flex:1;min-width:0}
.install-btn{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-right:2px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.install-btn[hidden]{display:none}
.install-btn:active{filter:brightness(.92)}
.install-steps{margin:0;padding-left:20px;line-height:1.6;color:var(--fg-2)}
.install-steps li+li{margin-top:6px}
.install-steps .i{vertical-align:-3px;color:var(--accent)}

/* ===== Handy und Touch =====
   Höhe: 100dvh ist der sichtbare Bereich; 100% schließt auf iOS die Fläche hinter der Safari-Leiste ein.
   Größen: Touch-Ziele 44 px, Text 16 px (kleinere Eingabefelder lassen iOS beim Antippen hineinzoomen). */
@supports (height:100dvh){ html,body{height:100dvh} }

@media (max-width:820px){
  .sidebar{top:0;bottom:auto;height:100dvh;width:min(calc(85vw + env(safe-area-inset-left,0px)),calc(340px + env(safe-area-inset-left,0px)));
    border-right:0;border-radius:0 14px 14px 0;box-shadow:0 0 0 1px var(--line),0 12px 40px rgba(0,0,0,.35)}
  .app.side-open .sidebar{transform:none}
  .side-scroll{padding:6px 10px 16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .ws-row{margin:10px 10px 6px;gap:6px}
  .ws{padding:8px;font-size:16px;gap:12px}
  .ws .sub{font-size:13px;margin-top:2px}
  .ws .avatar.lg{width:36px;height:36px;font-size:14px}
  #side-collapse{width:44px;height:44px;border-radius:10px}
  .side-item{height:44px;padding:0 10px;gap:12px;font-size:16px;border-radius:10px}
  .side-item .i{width:20px;height:20px}
  .side-item kbd{display:none}
  .side-sec{height:36px;margin:18px 0 2px;padding:0 10px;font-size:13px;border-radius:10px}
  .side-sec .icon-btn{opacity:1;width:36px;height:36px;margin-right:-6px}
  .sec-caret{opacity:1}
  .tree-row{height:44px;font-size:16px;border-radius:10px;gap:10px;padding-right:2px}
  .tree-row .emo{width:22px;font-size:18px}
  .tree-row .emo .i{width:20px;height:20px}
  .tree-row .space-ic{width:22px;height:22px;line-height:22px;font-size:12px}
  .side-empty{font-size:14px;padding:4px 10px 6px 42px}
  .side-add{padding-top:8px;padding-bottom:8px}
  .side-foot{padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px));padding-left:calc(10px + env(safe-area-inset-left,0px))}
  .install-btn{width:36px;height:36px;margin-right:4px}
  .install-btn .i{width:18px;height:18px}

  /* Kopfzeile */
  .topbar{height:52px;gap:4px}
  #menu-btn,.topbar .icon-btn{width:40px;height:40px;border-radius:10px}
  .crumb{height:36px;max-width:46vw;font-size:15px}

  /* Eingaben ohne iOS-Zoom */
  input,select,textarea,.tb-search input,.cmt-new input,.field input{font-size:16px}
  .field{height:42px;border-radius:10px}
  .btn{height:38px;padding:0 14px;border-radius:9px;font-size:15px}
  .tb{height:36px;padding:0 10px}

  /* Menüs und Dialoge: größere Zeilen, nie breiter als der Bildschirm */
  .pop{max-width:calc(100vw - 24px);border-radius:12px;padding:6px}
  .pop-item{min-height:44px;font-size:16px;border-radius:8px}
  .modal{top:max(10vh,calc(env(safe-area-inset-top,0px) + 12px));width:calc(100% - 24px);border-radius:14px}
  .modal-f .btn{min-width:96px;justify-content:center}
  .page-picker{width:calc(100vw - 24px)}
  .pl-list{max-height:50vh}
  .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px));font-size:15px}

  /* Inhalt: 16 px Rand, unten Platz für den Home-Indikator */
  .page{padding-bottom:calc(30vh + env(safe-area-inset-bottom,0px))}
  .page-tools{opacity:1}
  .home{padding-top:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .conn{grid-template-columns:110px minmax(0,1fr)}
  .db-title{font-size:28px}
  .db-tools{opacity:1}
  .peek-scroll{padding-bottom:env(safe-area-inset-bottom,0px)}
  /* Board- und Datenbank-Leiste: eine Zeile zum seitlichen Wischen statt umbrechender Knöpfe */
  .db-bar,.dbv-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;padding-bottom:8px}
  .db-bar::-webkit-scrollbar,.dbv-bar::-webkit-scrollbar{display:none}
  .db-bar>*,.dbv-bar>*{flex:none}
  .db-bar .tb select{font-size:15px}
  .tb-search input{width:110px}
}

/* Ohne Maus gibt es kein Hovern: Aufklapp-Pfeil, „+“ und „⋯“ im Seitenbaum sind deshalb immer sichtbar */
@media (hover:none){
  .tree-row .tw{position:static;opacity:1;width:28px;height:28px;margin-left:-6px;margin-right:-8px}
  .tree-row .tw:empty{display:none}
  .tree-row .tw .i{width:16px;height:16px}
  .tree-row:hover:has(.tw:not(:empty)) .emo{visibility:visible}
  .tree-row .acts{display:flex;gap:0}
  .tree-row .acts .icon-btn{width:36px;height:36px;color:var(--faint)}
  .tree-row:hover{background:transparent}
  .tree-row.active{background:var(--press)}
  .tree-row:active{background:var(--hover)}
  .side-item:hover{background:transparent}
  .side-item:active{background:var(--hover)}
  .side-sec .icon-btn{opacity:1}
  #side-collapse{opacity:1}
}