:root{color-scheme:dark;--bg0:#0a0a0b;--panel:#0e0e10;--card:#111113;--hv:#18181b;--sel:#1b1b1f;--tx:#ececee;--mu:#85858d;--ln:#1f1f23;--ln2:#2b2b31;--ac:#e5534b;--dg:#f0675f;--ok:#3fb86f;--sh:0 12px 32px rgba(0,0,0,.55);--bg3:#232327;--bd3:#3b3b42;--bd4:#34343b;--mu2:#45454c;--pri:#f1f1f3;--pri-tx:#0b0b0c;--tx2:#d8d8dd}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--bg0:#f4f4f6;--panel:#ffffff;--card:#ffffff;--hv:#f1f1f4;--sel:#e8e8ee;--tx:#161618;--mu:#6b6b74;--ln:#e5e5ea;--ln2:#d3d3da;--ac:#d9453d;--dg:#cf352d;--ok:#23915a;--sh:0 12px 32px rgba(20,20,40,.14);--bg3:#e8e8ed;--bd3:#b9b9c4;--bd4:#c8c8d1;--mu2:#a8a8b3;--pri:#141416;--pri-tx:#ffffff;--tx2:#3a3a42}}
:root[data-theme="light"]{color-scheme:light;--bg0:#f4f4f6;--panel:#ffffff;--card:#ffffff;--hv:#f1f1f4;--sel:#e8e8ee;--tx:#161618;--mu:#6b6b74;--ln:#e5e5ea;--ln2:#d3d3da;--ac:#d9453d;--dg:#cf352d;--ok:#23915a;--sh:0 12px 32px rgba(20,20,40,.14);--bg3:#e8e8ed;--bd3:#b9b9c4;--bd4:#c8c8d1;--mu2:#a8a8b3;--pri:#141416;--pri-tx:#ffffff;--tx2:#3a3a42}
:root[data-theme="dark"]{color-scheme:dark;--bg0:#0a0a0b;--panel:#0e0e10;--card:#111113;--hv:#18181b;--sel:#1b1b1f;--tx:#ececee;--mu:#85858d;--ln:#1f1f23;--ln2:#2b2b31;--ac:#e5534b;--dg:#f0675f;--ok:#3fb86f;--sh:0 12px 32px rgba(0,0,0,.55);--bg3:#232327;--bd3:#3b3b42;--bd4:#34343b;--mu2:#45454c;--pri:#f1f1f3;--pri-tx:#0b0b0c;--tx2:#d8d8dd}
*{box-sizing:border-box}
html{background:var(--bg0)}
body{margin:0;min-height:100vh;background:var(--bg0);color:var(--tx);font:13.5px/1.45 "Inter","Geist","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:#3a3a42}
.ico{display:inline-flex;width:16px;height:16px;flex:none}.ico svg{width:100%;height:100%}
.mu{color:var(--mu)}.sm{font-size:12px}.xs{font-size:11.5px}.mono{font-variant-numeric:tabular-nums}.r{text-align:right!important}
.grow{flex:1}
/* Bedienelemente */
button{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--ln2);border-radius:6px;padding:0 11px;height:30px;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap}
button:hover{background:var(--hv)}
button.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-tx)}
button.pri:hover{opacity:.88}
button.dg{color:var(--dg)}
button.ic{padding:0 6px;height:26px;border-color:transparent;color:var(--mu)}button.ic:hover{color:var(--tx)}
button.wide{justify-content:center;width:100%;margin-top:10px}
input[type=text],input[type=password],input[type=number],select{background:var(--bg0);color:var(--tx);border:1px solid var(--ln2);border-radius:6px;padding:0 10px;height:32px;width:100%;outline:none}
select{width:auto;max-width:100%}
input:focus,select:focus{border-color:var(--bd3)}
input::placeholder{color:var(--bd3)}
input[type=checkbox]{appearance:none;width:15px;height:15px;border:1px solid var(--bd3);border-radius:4px;background:var(--bg0);cursor:pointer;display:inline-grid;place-items:center;flex:none}
input[type=checkbox]:checked{background:var(--pri);border-color:var(--pri)}
input[type=checkbox]:checked::after{content:"";width:8px;height:4px;border-left:2px solid var(--pri-tx);border-bottom:2px solid var(--pri-tx);transform:rotate(-45deg) translate(1px,-1px)}
input[type=checkbox]:disabled{opacity:.45;cursor:default}
/* Rahmen */
.shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.shell.collapsed{grid-template-columns:64px 1fr}
aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:14px 10px;background:var(--bg0);border-right:1px solid var(--ln);overflow:auto}
.brand{display:flex;align-items:center;gap:9px;padding:2px 6px 16px}
.brand .lg{width:26px;height:26px;flex:none}
.bn{font-weight:600;font-size:15px;letter-spacing:-.2px;flex:1}
.grp{display:grid;gap:1px;margin-bottom:14px}
.glabel{font-size:11.5px;color:var(--mu);padding:6px 10px 5px}
.ni{border:none;height:38px;padding:0 8px;gap:10px;color:var(--tx2);justify-content:flex-start;width:100%;font-weight:400}
/* Symbole sitzen in einer ruhigen Kachel, wie in der Vorlage */
.ni .ico{color:var(--tx2);width:28px;height:28px;border-radius:9px;background:var(--bg3);display:grid;place-items:center;flex:none}
.ni .ico svg{width:17px;height:17px;stroke-width:1.5}
.ni:hover .ico{background:var(--bd4);color:var(--tx)}
.ni:hover{background:var(--hv);color:var(--tx)}
.ni.on{background:var(--sel);color:var(--tx)}.ni.on .ico{background:var(--ac);color:#fff}
.sqm{width:10px;height:10px;border-radius:2px;margin:0 3px;flex:none}
.stor{padding:9px 11px;border:1px solid var(--ln);border-radius:8px;background:var(--card);margin-bottom:10px;cursor:pointer}
.stor:hover{border-color:var(--ln2)}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stor .cap{font-size:10px;letter-spacing:.8px;color:var(--mu)}
.dots{display:grid;grid-template-columns:repeat(28,1fr);gap:2px;margin-top:7px}
.dots i{height:5px;border-radius:1px;background:var(--bg3)}.dots i.f{background:var(--ac)}
.me{display:flex;align-items:center;gap:10px;padding:8px 4px 2px;border-top:1px solid var(--ln)}
.av{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--card);border:1px solid var(--ln2);font-size:11px;font-weight:600;flex:none}
.av i{position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:var(--ok);border:2px solid var(--bg0)}
.un{display:grid;line-height:1.25;flex:1;min-width:0}.un span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;height:54px;padding:0 20px;flex:none}
.chip{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.sqk{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--pri);color:var(--pri-tx);font-size:11px;font-weight:700}
.live{font-size:11px;color:var(--mu);border:1px solid var(--ln2);border-radius:5px;padding:0 6px 0 16px;height:19px;line-height:17px;position:relative}
.live::before{content:"";position:absolute;left:6px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--ok)}
.sl{color:var(--mu2)}
.tcrumbs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.tcrumbs a{cursor:pointer;color:var(--mu);padding:2px 6px;border-radius:5px}.tcrumbs a:hover{background:var(--hv);color:var(--tx)}
.tcrumbs .sep{color:var(--mu2)}.tcrumbs a:last-child,.tcrumbs .cur{color:var(--tx);font-weight:500}.tcrumbs .cur{padding:2px 6px}
.tactions{display:flex;gap:8px;align-items:center}
main{margin:0 16px 16px;border:1px solid var(--ln);border-radius:12px;background:var(--panel);min-width:0;flex:1}
.head{padding:26px 28px 20px;border-bottom:1px solid var(--ln)}
.head h1{margin:0;font-size:24px;font-weight:500;letter-spacing:-.6px}
.head .sub{margin-top:5px;font-size:12.5px}
.sect{padding:20px 28px 28px;display:grid;gap:18px}
.sect>h2:first-child{margin-top:0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ln)}
.tl{padding:18px 28px;border-right:1px solid var(--ln)}.tl:last-child{border-right:none}
.ti{color:var(--mu);margin-bottom:12px}
.num{font-size:28px;font-weight:500;letter-spacing:-.8px;margin:2px 0 6px;line-height:1.1}
h2{font-size:12px;font-weight:500;color:var(--mu);margin:8px 0 -6px;letter-spacing:.2px}
h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.3px}
code{font:12px ui-monospace,Consolas,monospace;background:var(--hv);border:1px solid var(--ln);border-radius:4px;padding:1px 6px}
.card{background:var(--card);border:1px solid var(--ln);border-radius:10px;overflow:hidden}
.card.drop{border-color:var(--bd3);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.bar{display:flex;gap:8px;padding:11px 14px;border-bottom:1px solid var(--ln);flex-wrap:wrap;align-items:center}
.seg{display:flex;border:1px solid var(--ln2);border-radius:6px;overflow:hidden}
.seg button{border:none;border-radius:0;height:28px;color:var(--mu);font-size:12px;font-weight:400}
.seg button.on{background:var(--bg3);color:var(--tx)}
.tag{margin-left:8px;font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--ln2);color:var(--mu);font-weight:400}
.tag.bad{color:var(--dg);border-color:var(--dg)}.tag.off{text-decoration:line-through;opacity:.5}
.tactions .tag{margin:0}
/* Kacheln */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;padding:14px}
.tile{position:relative;background:var(--panel);border:1px solid var(--ln);border-radius:9px;padding:8px;display:grid;gap:2px}
.tile:hover{border-color:var(--bd4);background:var(--hv)}
.tile.sel{border-color:var(--bd3);background:var(--sel)}
.th{height:100px;border-radius:6px;overflow:hidden;display:grid;place-items:center;cursor:pointer;background:var(--bg0);margin-bottom:6px;border:1px solid var(--ln)}
.th img{width:100%;height:100%;object-fit:cover}
.nm{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.chk{position:absolute;top:13px;left:13px;z-index:2;opacity:0;display:flex}
.tile:hover .chk,.tile.sel .chk,.chk:has(input:checked){opacity:1}
.acts{display:flex;gap:2px;margin-top:3px;opacity:0}.tile:hover .acts{opacity:1}
@media(hover:none){.acts,.chk{opacity:1}}
.fi{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:6px;font-size:8.5px;font-weight:600;letter-spacing:.3px;color:var(--tx2);background:var(--hv);border:1px solid var(--ln2);font-family:ui-monospace,Consolas,monospace}
.fi::before{content:"";position:absolute}
.fi{box-shadow:inset 0 -2px 0 var(--g1,#555)}
.fi.dir{color:#d6a23a;box-shadow:none}.fi.dir .ico{width:14px;height:14px}
.fi.big{width:56px;height:56px;border-radius:10px;font-size:13px}.fi.big .ico{width:26px!important;height:26px!important}
/* Liste */
table{width:100%;border-collapse:collapse}
td,th{padding:9px 14px;text-align:left;border-bottom:1px solid var(--ln);white-space:nowrap}
th{font-size:11.5px;color:var(--mu);font-weight:400}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--hv)}
td.n{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis}
.lnk{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}.lnk span{overflow:hidden;text-overflow:ellipsis}
td.a{text-align:right}td.a>*{margin-left:3px;display:inline-flex}
td.a button{height:26px;padding:0 9px;font-size:12.5px}td.a button.ic{padding:0 6px}
.empty{padding:60px 20px;text-align:center;display:grid;gap:4px;justify-items:center}
.empty .big{width:44px;height:44px;border-radius:50%;border:1px solid var(--ln2);display:grid;place-items:center;color:var(--mu);margin-bottom:8px}
.pad{padding:18px;display:grid;gap:10px;max-width:420px}.pad.wide{max-width:640px}.fit{justify-self:start}
.row{display:flex;gap:8px;align-items:center}.row.sp{justify-content:space-between}
.fld{display:grid;gap:5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlg{display:grid;gap:14px;min-width:min(520px,86vw)}
.sec{display:grid;gap:10px;padding:14px;border:1px solid var(--ln);border-radius:9px}
.acl,.pick{display:grid}
.pick{max-height:260px;overflow:auto;border:1px solid var(--ln);border-radius:8px;padding:2px 12px}
.line{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--ln)}
.line:last-child{border-bottom:none}.line.hd{font-size:11.5px;color:var(--mu)}
.pick .line{grid-template-columns:1fr 70px 80px}.pick .line span:nth-child(n+2){text-align:center}
.acl .line button{height:24px;font-size:12px}
.perms{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--ln)}
/* Anmeldung, Dialoge */
.lg{display:grid;place-items:center;width:28px;height:28px}
.lg.big{width:52px;height:52px;margin:0 auto}
.loginwrap{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.login{width:min(400px,100%);background:var(--card);border:1px solid var(--ln);border-radius:16px;padding:40px 36px 34px;display:grid;gap:18px;text-align:center;box-shadow:var(--sh)}
.login h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.3px}
.login .kopf{display:grid;gap:6px}
.login .lform{gap:14px;margin-top:2px}
.login .fld{display:grid;gap:6px;text-align:left}
.login .fld span{font-size:12px;color:var(--mu)}
.login input{height:40px;border-radius:9px;padding:0 12px}
.login input:focus{border-color:var(--ac)}
.login button{justify-content:center;height:42px;border-radius:9px;font-size:14px;font-weight:600;width:100%}
.err{color:var(--dg);min-height:1.3em;font-size:12.5px}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--pri);color:var(--pri-tx);padding:9px 16px;border-radius:8px;max-width:90vw;z-index:70;box-shadow:var(--sh);font-weight:500}
#toast.bad{background:#f0675f;color:#fff}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:60;padding:14px}
.modal .box{background:var(--card);border:1px solid var(--ln2);border-radius:14px;padding:22px;max-width:96vw;max-height:94vh;overflow:auto;display:grid;gap:12px;box-shadow:var(--sh)}
.modal .box>button{justify-self:end}
.modal img,.modal video{max-width:92vw;max-height:78vh;border-radius:8px}
.prog{position:fixed;right:18px;bottom:18px;background:var(--card);border:1px solid var(--ln2);border-radius:10px;padding:12px 14px;z-index:9;min-width:240px;box-shadow:var(--sh)}
.meter{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-top:8px}.meter i{display:block;height:100%;background:var(--ac)}
.pubwrap{max-width:820px;margin:7vh auto;padding:0 14px;display:grid;gap:14px}
.pubfrom{margin:-4px 2px 0}.pubwrap .login{margin:3vh auto}
.pubwrap .card{background:var(--card)}
/* eingeklappt */
.shell.collapsed .nl,.shell.collapsed .glabel,.shell.collapsed #usage,.shell.collapsed .un,.shell.collapsed .me button{display:none}
.shell.collapsed .brand{flex-direction:column;gap:10px;padding-bottom:12px}
.shell.collapsed .ni{justify-content:center;padding:0}
.shell.collapsed .ni .ico{width:32px;height:32px;border-radius:10px}
.shell.collapsed .me{justify-content:center}
@media(max-width:900px){
 .shell,.shell.collapsed{grid-template-columns:1fr}
 aside{position:static;height:auto;flex-direction:row;align-items:center;padding:8px;border-right:none;border-bottom:1px solid var(--ln);overflow-x:auto}
 .brand{padding:0 6px 0 2px}.bn,.glabel,#usage,.grow,.un,.shell .brand button{display:none}
 aside nav{display:flex;gap:2px}.grp{display:flex;margin:0}
 .ni{width:auto;padding:0 9px}.ni .nl{display:none}
 .me{border:none;padding:0}
 .tiles{grid-template-columns:1fr 1fr}.tl:nth-child(2){border-right:none}.tl{border-bottom:1px solid var(--ln)}
 main{margin:0 8px 8px}.head{padding:18px}.sect{padding:14px}.top{padding:0 12px}
 .two{grid-template-columns:1fr}.kv{grid-template-columns:1fr;gap:2px}.hm{display:none}
 .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));padding:10px;gap:8px}.th{height:80px}
}

/* Schliff */
button,.ni,.tile,tbody tr,.tcrumbs a{transition:background-color .12s,border-color .12s,color .12s}
:focus-visible{outline:2px solid var(--mu);outline-offset:2px}
input:focus-visible,select:focus-visible{outline:none}
*{scrollbar-width:thin;scrollbar-color:var(--ln2) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--ln2);border-radius:6px;border:2px solid transparent;background-clip:content-box}
.ask{min-width:min(380px,88vw);max-width:520px}.ask .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.modal{backdrop-filter:blur(2px)}
.tile .th{transition:border-color .12s}.tile:hover .th{border-color:var(--bd4)}
td.a button,.acts button{opacity:.9}
.lnk:hover span{text-decoration:underline;text-decoration-color:var(--bd3);text-underline-offset:3px}
.sect>.card+.card{margin-top:4px}
.mark{display:block;width:100%;height:100%}.mark svg{display:block;width:100%;height:100%}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.keybox{font:15px ui-monospace,Consolas,monospace;letter-spacing:1px;background:var(--bg0);border:1px solid var(--ln2);border-radius:8px;padding:12px 14px;user-select:all;word-break:break-all;margin:0}
.keybox.codes{white-space:pre;line-height:1.7}

/* Dokumentenansicht */
[hidden]{display:none!important}
.viewer{position:fixed;inset:0;z-index:30;background:var(--bg0);display:flex;flex-direction:column}
.vtop{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--ln);flex:none}
.vtitle{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vmain{flex:1;min-height:0;display:grid;grid-template-columns:56px minmax(0,1fr) 56px}
.vnav{align-self:center;justify-self:center;border:none;font-size:34px;line-height:1;color:var(--mu);height:64px;width:44px;justify-content:center;padding:0}
.vnav:hover{color:var(--tx)}
.vbody{min-width:0;min-height:0;overflow:auto;display:grid;place-items:center;padding:14px}
.vbody.fill{display:block;padding:0}
.vbody img,.vbody video{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain;border-radius:6px}
.vframe{display:block;width:100%;height:100%;border:none;background:#fff;color-scheme:light}
.vmsg{display:grid;gap:14px;justify-items:center;color:var(--mu);padding:60px 20px;text-align:center}
.vtext{margin:0;padding:20px 24px;font:13px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:var(--tx2)}
.paper{background:#fff;color:#1b1b1d;max-width:880px;margin:18px auto;padding:56px 64px;border-radius:4px;line-height:1.55;font:15px/1.55 Calibri,"Segoe UI",system-ui,sans-serif;min-height:60vh}
.paper p,.paper h1,.paper h2,.paper h3{margin:0 0 10px}.paper h1{font-size:26px}.paper h2{font-size:21px}.paper h3{font-size:17px}
.paper table{border-collapse:collapse;margin:10px 0;width:100%}.paper td{border:1px solid #cfcfd4;padding:5px 9px;vertical-align:top}
.sheet{display:flex;flex-direction:column;height:100%}
.sheetview{overflow:auto;flex:1}
.sheetview table{border-collapse:collapse;font-size:12.5px}
.sheetview td,.sheetview th{border:1px solid var(--ln);padding:4px 10px;white-space:nowrap;text-align:left}
.sheetview th{background:var(--card);position:sticky;top:0}
.vtabs{display:flex;gap:4px;padding:8px 14px;border-bottom:1px solid var(--ln);overflow-x:auto;flex:none}
.vtabs button{height:26px;font-size:12.5px;color:var(--mu)}.vtabs button.on{background:var(--bg3);color:var(--tx)}
.vnote{padding:8px 14px}
.slides{display:grid;gap:14px;padding:18px;max-width:900px;margin:0 auto}
.slide{background:var(--card);border:1px solid var(--ln);border-radius:10px;padding:20px 26px}.slide p{margin:6px 0}
@media(max-width:700px){.vmain{grid-template-columns:34px minmax(0,1fr) 34px}.paper{padding:26px 20px;margin:0}.vnav{width:30px}}

/* Hell und dunkel */
#themebtn{margin-left:4px}
.mark{color:var(--tx)}

/* Wortmarke lucaslaumen (aus der SVG-Datei, folgt der Textfarbe des Themas) */
.wm{display:block;aspect-ratio:1217/212;background:var(--tx);-webkit-mask:url(logo-wort.png) left center/contain no-repeat;mask:url(logo-wort.png) left center/contain no-repeat}
.brand .bn{display:flex;align-items:center}.brand .wm{width:168px}
.login .wm{width:250px;margin:0 auto 4px;-webkit-mask-position:center;mask-position:center}
.shell.collapsed .brand .wm{width:30px;aspect-ratio:350/212;-webkit-mask-image:url(logo-cloud.png);mask-image:url(logo-cloud.png)}

/* Einstellungen */
.sets{display:grid}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 18px;border-bottom:1px solid var(--ln)}
.setrow:last-child{border-bottom:none}
.setrow input[type=number],.setrow input[type=text]{width:260px;max-width:48vw}
.banner{padding:12px 16px;border:1px solid var(--ac);border-radius:10px;background:var(--hv)}
@media(max-width:700px){.setrow{flex-direction:column;align-items:flex-start;gap:8px}.setrow input[type=number],.setrow input[type=text]{width:100%;max-width:none}}

/* Anmelde-Zeitstrahl */
.lform{display:grid;gap:10px}.lform[hidden]{display:none}
.stage{min-height:0}
.ltl{position:relative;display:flex;justify-content:space-between;align-items:center;margin:36px 36px 50px;animation:tlin .35s ease}
.ltl .track{position:absolute;left:11px;right:11px;top:50%;height:2px;margin-top:-1px;background:var(--ln2);border-radius:2px;overflow:hidden}
.ltl .fill{display:block;height:100%;width:0;background:var(--ac);transition-property:width;transition-timing-function:cubic-bezier(.45,0,.25,1)}
.ltl .node{position:relative;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--card);border:2px solid var(--ln2);display:grid;place-items:center;transition:border-color .3s,background .3s}
.ltl .node i{display:block;width:8px;height:8px;border-radius:50%;background:transparent;transition:.3s}
.ltl .node.active{border-color:var(--ac)}.ltl .node.active i{background:var(--ac);animation:tlpulse 1.1s ease-in-out infinite}
.ltl .node.done{border-color:var(--ac);background:var(--ac)}
.ltl .node.done i{width:9px;height:5px;border-radius:0;background:transparent;border-left:2px solid var(--pri-tx);border-bottom:2px solid var(--pri-tx);transform:rotate(-45deg) translate(1px,-1px);animation:none}
.ltl .node.bad{border-color:var(--dg);background:var(--dg)}
.ltl .node.bad i{width:10px;height:2px;border-radius:1px;background:#fff;transform:rotate(45deg);animation:none;box-shadow:0 0 0 0 #fff}
.ltl .node.bad::after{content:"";position:absolute;width:10px;height:2px;border-radius:1px;background:#fff;transform:rotate(-45deg)}
.ltl .hop{position:absolute;z-index:3;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 25%,transparent);transform:translate(-50%,0);pointer-events:none}
.ltl .hop.bad{background:var(--dg);box-shadow:0 0 0 4px color-mix(in srgb,var(--dg) 25%,transparent)}
.ltl .lab{position:absolute;top:32px;transform:translateX(-50%);font-size:11.5px;color:var(--mu);white-space:nowrap;text-align:center}
@keyframes tlpulse{50%{transform:scale(.55);opacity:.6}}
@keyframes tlin{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.ltl,.ltl .node i{animation:none!important}}

.pdfview{position:relative;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;box-sizing:border-box;background:var(--bg0)}
.pdfpage{display:block;background:#fff;box-shadow:var(--sh);flex:none}
.vmain>.vbody{grid-column:2}
.vmain>.vnav:first-child{grid-column:1}
.vmain>.vnav:last-child{grid-column:3}

.editor{position:fixed;inset:0;z-index:40;background:var(--bg0);display:flex;flex-direction:column}
.etop{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--ln);flex:none}
.ebody{flex:1;min-height:0}
.ebody #oo-holder,.ebody iframe{display:block;width:100%;height:100%;border:0}

.newwrap{position:relative;display:inline-block}
.newmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:230px;background:var(--card);border:1px solid var(--ln2);border-radius:8px;box-shadow:var(--sh);padding:4px;display:flex;flex-direction:column}
.newmenu[hidden]{display:none}
.newmenu button{border:none;background:none;text-align:left;justify-content:flex-start;padding:9px 12px;border-radius:6px;width:100%}
.newmenu button:hover{background:var(--hv)}

.btns.col{flex-direction:column;align-items:stretch}
.nm .ico svg,.lnk>.ico:last-child svg{width:14px;height:14px;vertical-align:-2px;margin-left:4px;opacity:.7}

/* Unterschreiben */
.sigpad{width:min(560px,86vw);height:200px;background:#fff;border:1px dashed var(--ln2);border-radius:10px;touch-action:none;cursor:crosshair}
canvas.pdfpage.pickable{cursor:crosshair;outline:2px solid var(--ac);outline-offset:-2px}
.signhint{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:50;background:var(--ac);color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;box-shadow:var(--sh)}

/* Unterschrift über einen Freigabelink */
.signbody{padding:14px;display:grid;gap:10px}
.signstand{margin:0 2px}
.signdoc{position:relative;max-height:76vh;overflow:auto;border:1px solid var(--ln);border-radius:9px;background:var(--bg0)}
.signdoc .pdfview{height:auto;background:transparent;padding:10px;gap:10px}
/* Die Seite wird auf die Breite der Karte gebracht, sonst steht sie über */
.signdoc .pdfpage{max-width:100%;height:auto}

/* DocuSign */
.modal .box textarea{width:min(520px,80vw);resize:vertical;font:inherit;background:var(--bg2);color:var(--tx);border:1px solid var(--ln2);border-radius:8px;padding:8px 10px}
.sets textarea{width:100%;min-width:260px;resize:vertical;font:12px ui-monospace,Consolas,monospace;background:var(--bg2);color:var(--tx);border:1px solid var(--ln2);border-radius:8px;padding:8px 10px}

/* vorgegebenes Unterschriftsfeld auf der Freigabeseite */

.signfeld{position:absolute;z-index:2;border:2px dashed var(--ac);border-radius:6px;background:rgba(255,106,74,.12);color:var(--ac);font-size:12px;display:grid;place-items:center;text-align:center;pointer-events:none}
.signfeld.klick{pointer-events:auto;cursor:pointer}
.signfeld.klick:hover{background:rgba(255,106,74,.2)}
.signmsg{padding:12px 14px;white-space:pre-wrap}
.brk{word-break:break-all}

/* Felder setzen */
.signbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:50;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--ln2);border-radius:11px;padding:10px 14px;box-shadow:var(--sh);max-width:94vw;flex-wrap:wrap}
.signbar .grow{min-width:8px}
.feldweg{position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;padding:0;line-height:1;font-size:12px;display:grid;place-items:center}

/* Schritte im Unterschriftsfenster */
.modal .box .schritt{display:flex;align-items:center;gap:9px;font-size:13.5px}
.modal .box .best{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;max-width:560px}
.modal .box .best input{margin-top:2px}
.modal .box .nr{flex:none;width:21px;height:21px;border-radius:50%;background:var(--ac);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
.modal .box button[disabled]{opacity:.45;cursor:not-allowed}

/* Feld verschieben */
.signfeld.zieh{cursor:move;touch-action:none}
.signfeld.zieht{background:rgba(255,106,74,.26);border-style:solid}

/* Freigabeseite mit Dokument etwas breiter */
.pubwrap:has(.signdoc){max-width:1060px}

/* Anfragen: Zeile anklickbar, Einzelheiten im Fenster */
tr.klickbar{cursor:pointer}
tr.klickbar:hover td{background:var(--hv)}
.modal .box.detail{min-width:min(460px,88vw);gap:9px}
.detz{display:flex;gap:14px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ln);padding-bottom:7px}
.ablauf{display:grid;gap:4px;font-size:13px;background:var(--bg2);border-radius:8px;padding:10px 12px}

/* Fortschritt beim Unterschreiben */
.modal .box.warte{min-width:min(320px,86vw);justify-items:center;text-align:center}
/* Verwaltung: Reiter für zusammengehörige Ansichten */
.vtabs{display:flex;gap:2px;padding:0 28px;border-bottom:1px solid var(--ln);overflow-x:auto;scrollbar-width:none}
.vtabs::-webkit-scrollbar{display:none}
.vtab{flex:none;height:42px;padding:0 14px;border:none;background:none;color:var(--mu);font-weight:400;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.vtab:hover{color:var(--tx);background:none}
.vtab.on{color:var(--tx);border-bottom-color:var(--ac);font-weight:500}
@media (max-width:700px){.vtabs{padding:0 14px}}

/* ===== Seitenleiste: lebendiger ===== */
.glabel{display:flex;align-items:center;gap:10px;font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;padding:16px 10px 8px;color:var(--mu)}
.glabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--ln2),transparent)}
.grp{gap:3px}
.ni{position:relative;height:44px;border-radius:12px;padding:0 9px;transition:background .18s,color .18s}
.ni .ico{width:30px;height:30px;border-radius:10px;transition:background .18s,color .18s,box-shadow .25s}
.ni.on{background:var(--sel);box-shadow:none}
.ni.on .ico{background:var(--ac);color:#fff;box-shadow:none}
.shell.collapsed .glabel::after{display:none}
.stor{padding:11px 12px 12px;border-radius:12px;background:var(--card);transition:border-color .18s}
.stor .cap{font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
.dots{gap:2px;margin-top:9px}
.dots i{height:6px;border-radius:2px}
.dots i.f{background:var(--ac);box-shadow:none}
.me{border:1px solid var(--ln);border-radius:12px;padding:8px 8px 8px 8px;margin-top:2px;background:var(--card);transition:border-color .18s}
.me:hover{border-color:var(--ln2)}
.av{width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,var(--sel),var(--card))}
.av i{animation:avpuls 2.6s infinite}
@keyframes avpuls{70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.av i{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.ni,.ni .ico,.stor,.av i{transition:none;animation:none}}

/* ===== Anmeldung: mittig, ruhig, kompakt ===== */
.loginwrap{position:fixed;inset:0;min-height:0;display:grid;place-items:center;padding:24px 16px;overflow:auto;background:var(--bg0)}
.login{width:min(420px,100%);margin:auto;padding:46px 40px 38px;gap:22px;border-radius:18px;border:1px solid var(--ln);background:var(--card);box-shadow:none;text-align:center;animation:loginin .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes loginin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.login .kopf{gap:8px;justify-items:center}
.login .wm{width:230px;margin:0 auto 10px}
.login h1{font-size:22px;font-weight:600;letter-spacing:-.4px}
.login .kopf .mu{font-size:13px}
.login .lform{gap:16px;margin-top:4px;width:100%}
.login .fld{gap:7px}
.login .fld span{font-size:12px;letter-spacing:.2px}
.login input{height:46px;border-radius:11px;padding:0 14px;font-size:14.5px;background:var(--bg0);border:1px solid var(--ln2);transition:border-color .15s}
.login input:hover{border-color:var(--bd3)}
.login input:focus{border-color:var(--ac);outline:none}
.login input:-webkit-autofill,.login input:-webkit-autofill:hover,.login input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tx);caret-color:var(--tx);-webkit-box-shadow:0 0 0 100px var(--bg0) inset;transition:background-color 9999s}
.login button.pri{height:46px;border-radius:11px;font-size:14.5px;margin-top:4px;transition:background .15s,transform .1s}
.login button.pri:active{transform:scale(.99)}
.login .stage:empty,.login .err:empty{display:none}
.login .stage{width:100%}
.login .err{color:var(--dg);font-size:13px}
.login .ltl{margin:30px 28px 46px}
@media (max-width:480px){.login{padding:36px 22px 30px}}
@media (prefers-reduced-motion:reduce){.login{animation:none}}

/* Profilbilder */
.av{overflow:visible}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.av.hasimg{color:transparent}
.av.big{width:72px;height:72px;border-radius:20px;font-size:22px}
.av.big.hasimg{overflow:hidden}
.avrow{display:flex;gap:18px;align-items:center}
.avtx{display:flex;flex-direction:column;gap:6px;min-width:0}
.avbtn{display:flex;gap:8px;margin-top:6px}

/* Zugriff: privat oder geteilt */
.zug{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1.3;max-width:100%}
.zug span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zug .ico{width:13px;height:13px;flex:none}
.zug .ico svg{width:13px;height:13px}
.z-privat{color:var(--mu)}
.z-geteilt{color:var(--ok)}
.tile .zug{margin-top:3px}

/* =====================================================================
   Nimbus · Design 2  (Glas, ruhige Typografie, eine Akzentfarbe)
   Alles in dieser Ebene, zum Zurücknehmen einfach ab hier löschen.
   ===================================================================== */
:root{--akz:#ff9a3d;--akz-tx:#161616;--r1:10px;--r2:14px;--r3:18px;--glas:blur(22px) saturate(1.5)}
:root[data-theme="light"]{--akz:#e55f00;--akz-tx:#fff}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){--akz:#e55f00;--akz-tx:#fff}}
:root:root:root{--ac:var(--akz)}
body{font-family:ui-sans-serif,-apple-system,"SF Pro Text","Inter","Geist","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;letter-spacing:-.005em;
  background:
    radial-gradient(900px 520px at 88% -8%,color-mix(in srgb,var(--akz) 13%,transparent),transparent 62%),
    radial-gradient(760px 520px at -6% 108%,color-mix(in srgb,#6f86ff 9%,transparent),transparent 60%),
    var(--bg0);
  background-attachment:fixed}
html{background:var(--bg0)}
::selection{background:color-mix(in srgb,var(--akz) 38%,transparent);color:inherit}
*{scrollbar-width:thin;scrollbar-color:var(--bd3) transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--bd3);border-radius:9px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-track{background:transparent}

/* Glas: Seitenleiste, obere Leiste, Hauptfläche */
aside{background:color-mix(in srgb,var(--panel) 58%,transparent);-webkit-backdrop-filter:var(--glas);backdrop-filter:var(--glas);border-right:1px solid color-mix(in srgb,var(--tx) 7%,transparent)}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg0) 55%,transparent);-webkit-backdrop-filter:var(--glas);backdrop-filter:var(--glas)}
main{background:color-mix(in srgb,var(--panel) 66%,transparent);-webkit-backdrop-filter:var(--glas);backdrop-filter:var(--glas);border-color:color-mix(in srgb,var(--tx) 8%,transparent);border-radius:var(--r3);box-shadow:0 1px 0 color-mix(in srgb,#fff 5%,transparent) inset,0 24px 60px -30px rgba(0,0,0,.5)}
.card{background:color-mix(in srgb,var(--card) 72%,transparent);border-color:color-mix(in srgb,var(--tx) 8%,transparent);border-radius:var(--r2)}
.stor{border-radius:var(--r1);background:color-mix(in srgb,var(--card) 70%,transparent)}

/* Rundungen und Bedienelemente */
button{border-radius:var(--r1);height:32px;transition:background .18s,border-color .18s,transform .12s,opacity .18s,box-shadow .18s}
button:active{transform:scale(.97)}
button.pri{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -8px rgba(0,0,0,.6)}
input[type=text],input[type=password],input[type=number],select{border-radius:var(--r1);height:34px;background:color-mix(in srgb,var(--bg0) 70%,transparent);transition:border-color .18s,box-shadow .18s}
input:focus,select:focus{border-color:var(--akz);box-shadow:0 0 0 3px color-mix(in srgb,var(--akz) 22%,transparent)}
input[type=checkbox]:checked{background:var(--akz);border-color:var(--akz)}
input[type=checkbox]:checked::after{border-color:var(--akz-tx)}
.seg{border-radius:var(--r1)}
.ni{border-radius:var(--r1);transition:background .18s,color .18s}
.ni.on{background:color-mix(in srgb,var(--akz) 14%,transparent);color:var(--tx)}
.ni.on .ico{background:var(--akz);color:var(--akz-tx);box-shadow:0 6px 14px -6px var(--akz)}
.dots i.f{background:var(--akz)}
.sqk{background:var(--akz);color:var(--akz-tx)}
.live::before{background:var(--ok)}

/* Typografie: ruhig, eng, klare Hierarchie */
.head h1{font-size:28px;font-weight:600;letter-spacing:-.035em}
.head .sub{color:var(--mu)}
.num{font-weight:600;letter-spacing:-.04em}
h2{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500}
h3{letter-spacing:-.02em;font-weight:600}
th{font-weight:500;letter-spacing:.01em}
.nm{font-weight:500;letter-spacing:-.01em}
.glabel{letter-spacing:.04em;font-size:11px;text-transform:uppercase;opacity:.8}

/* Dateien: Karten mit Hebung */
.grid{gap:14px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.tile{border-radius:var(--r2);padding:10px;background:color-mix(in srgb,var(--panel) 80%,transparent);transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .18s,background .18s}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(0,0,0,.65);border-color:color-mix(in srgb,var(--akz) 40%,var(--bd4))}
.tile.sel{border-color:var(--akz);box-shadow:0 0 0 1px var(--akz) inset}
.th{height:118px;border-radius:calc(var(--r2) - 4px);background:color-mix(in srgb,var(--bg0) 75%,transparent)}
.acts{transform:translateY(5px);transition:opacity .2s,transform .2s}.tile:hover .acts{transform:none}
.fi{border-radius:8px}
tbody tr{transition:background .15s}
.pdfth{display:grid;place-items:center;width:100%;height:100%}
.pdfimg{width:100%;height:100%;object-fit:cover;object-position:top;background:#fff;animation:ein .3s ease-out both}

/* Zugriff, Schilder als ruhiger Text */
.tag{border:0;padding:0;border-radius:0;background:none;margin-left:8px;font-size:12px;color:var(--mu)}
.tag.ok{color:var(--ok)}.tag.bad{color:var(--dg)}.tag.off{text-decoration:line-through;opacity:.5}

/* Leere Zustände */
.empty{padding:72px 20px}
.empty .big{width:64px;height:64px;border-radius:20px;border:1px solid color-mix(in srgb,var(--akz) 35%,var(--ln2));background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--akz) 22%,transparent),transparent 70%);color:var(--akz);box-shadow:0 18px 40px -20px var(--akz)}
.empty .big .ico{width:24px;height:24px}

/* Weiche Übergänge */
@keyframes ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main>*{animation:ein .26s cubic-bezier(.22,1,.36,1) both}
.tile{animation:ein .3s cubic-bezier(.22,1,.36,1) both}
.tile:nth-child(2){animation-delay:.02s}.tile:nth-child(3){animation-delay:.04s}.tile:nth-child(4){animation-delay:.06s}.tile:nth-child(5){animation-delay:.08s}.tile:nth-child(6){animation-delay:.1s}
.tile:nth-child(7){animation-delay:.12s}.tile:nth-child(8){animation-delay:.14s}.tile:nth-child(n+9){animation-delay:.16s}
@keyframes schimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.vmsg{border-radius:var(--r2);background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--tx) 7%,transparent) 50%,transparent 100%) 0 0/200% 100%;animation:schimmer 1.6s linear infinite}
#toast{border-radius:var(--r2);-webkit-backdrop-filter:var(--glas);backdrop-filter:var(--glas);animation:ein .2s ease-out both}
@media(prefers-reduced-motion:reduce){main>*,.tile,.pdfimg,.vmsg,#toast{animation:none}.tile,.acts,button{transition:none}.tile:hover{transform:none}}

/* Suchknopf und Kommandoleiste */
.kbtn{height:32px;gap:8px;padding:0 8px 0 11px;color:var(--mu);font-weight:400;border-color:color-mix(in srgb,var(--tx) 10%,transparent);background:color-mix(in srgb,var(--card) 60%,transparent)}
.kbtn:hover{color:var(--tx)}
kbd{font:11px ui-monospace,Menlo,Consolas,monospace;color:var(--mu);border:1px solid var(--ln2);border-radius:6px;padding:1px 6px;background:color-mix(in srgb,var(--bg0) 60%,transparent)}
@media(max-width:700px){.kbtn span,.kbtn kbd{display:none}.kbtn{padding:0 9px}}
.km{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;padding-top:13vh;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:ein .15s ease-out both}
.kmbox{width:min(640px,92vw);background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:var(--glas);backdrop-filter:var(--glas);border:1px solid color-mix(in srgb,var(--tx) 12%,transparent);border-radius:var(--r3);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);overflow:hidden}
.kminp{display:flex;align-items:center;gap:12px;padding:6px 16px;border-bottom:1px solid var(--ln);color:var(--mu)}
.kminp input{border:0;background:transparent;box-shadow:none!important;height:46px;font-size:16px;color:var(--tx);padding:0}
.kmlist{max-height:min(52vh,420px);overflow:auto;padding:6px}
.kmrow{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r1);cursor:pointer;color:var(--tx2)}
.kmrow .ico{color:var(--mu)}
.kmrow.on{background:color-mix(in srgb,var(--akz) 16%,transparent);color:var(--tx)}.kmrow.on .ico{color:var(--akz)}
.kmt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kms{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kmg{flex:none;min-width:52px;text-align:right}
.kmleer{padding:26px;text-align:center}
.kmfoot{padding:9px 16px;border-top:1px solid var(--ln)}

/* Akzentfarbe im Konto */
.akzrow{display:grid;gap:8px}
.akzsw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatch{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px color-mix(in srgb,var(--tx) 18%,transparent) inset}
.swatch.on{border-color:var(--bg0);box-shadow:0 0 0 2px var(--tx)}
.akzsw input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--ln2);border-radius:var(--r1);background:transparent;cursor:pointer}

/* Baumverzeichnis (Admins) */
.tree{padding:10px 10px 14px}
.trow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r1);cursor:pointer;transition:background .15s}
.trow:hover{background:color-mix(in srgb,var(--tx) 6%,transparent)}
.trow .chev{display:inline-flex;width:16px;height:16px;flex:none;color:var(--mu);transition:transform .18s cubic-bezier(.22,1,.36,1)}
.trow .chev.leer{visibility:hidden}
.trow.open .chev{transform:rotate(90deg);color:var(--akz)}
.trow .ico{flex:none}
.tname{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tgrow{flex:1}
.tsize{min-width:64px;text-align:right}
.tdate{min-width:84px;text-align:right}
.tkids{margin-left:17px;padding-left:12px;border-left:1px solid var(--ln);animation:ein .2s ease-out both}
.tleer{padding:5px 12px}
@media(max-width:700px){.tdate,.tree .zug{display:none}}

/* Word-Ansicht: echte Seite mit Rändern */
.vbody:has(.paper){align-content:start;justify-items:center;background:color-mix(in srgb,var(--bg0) 86%,#888);padding:26px 14px}
.paper{box-sizing:border-box;width:var(--pw,794px);max-width:100%;min-height:var(--ph,1123px);padding:var(--pp,96px 94px);margin:0 auto 26px;background:#fff;color:#000;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3),0 24px 60px -24px rgba(0,0,0,.6);font:16px/1.15 "Times New Roman",Times,Georgia,serif;overflow-wrap:anywhere}
.paper p,.paper h1,.paper h2,.paper h3{margin:0}
.paper table{border-collapse:collapse;margin:8px 0;width:100%}
.paper td{border:1px solid #cfcfd4;padding:4px 8px;vertical-align:top}
@media(max-width:820px){.paper{padding:34px 22px;font-size:15px}}

.paper td{border:0;padding:0 6px 0 0}
.paper table.grid td{border:1px solid #cfcfd4;padding:4px 8px}
.paper img{max-width:100%}

/* Brief-Dialog und Unterschrift */
.chkrow{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.chkrow.off{opacity:.6;cursor:default}
.sigprev{width:150px;height:64px;object-fit:contain;background:#fff;border-radius:var(--r1);border:1px solid var(--ln2);padding:6px;flex:none}
.sigprev.leer{display:grid;place-items:center;background:transparent}

.empfneu{display:grid;gap:8px}
.empfneu .row{display:flex;gap:8px}
.empfinfo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 4px}

/* Protokoll: Seitenwechsel */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;border-top:1px solid var(--ln)}
.pager button:disabled{opacity:.4;cursor:default}

/* Speicheranzeige: ein ruhiger Balken */
.sbar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--tx) 10%,transparent);overflow:hidden;margin-top:9px}
.sbar i{display:block;height:100%;border-radius:99px;background:var(--akz);transition:width .6s cubic-bezier(.22,1,.36,1)}
.sbar.fast i{background:#e0a030}
.sbar.voll i{background:var(--dg)}
.sdet{margin-top:7px}
.dots{display:none}

/* Unterschriften und Mail-Verlauf */
td.bad,span.bad{color:var(--dg)}


/* Briefschreiber */
.briefform{display:grid;gap:10px}
.briefseite{max-width:560px}
.briefseite .btns{display:flex;gap:8px;margin-top:6px}

/* Briefschreiber: modernes Layout mit Live-Vorschau */
.bsgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.8fr);gap:26px;align-items:start}
@media(max-width:1000px){.bsgrid{grid-template-columns:1fr}.bsvor{order:-1}}
.bsform{display:grid;gap:16px;min-width:0}
.bsintro{display:flex;gap:14px;align-items:center}
.bsicon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--akz) 16%,transparent);color:var(--akz);flex:none}
.bsicon .ico{width:22px;height:22px}
.briefseite{max-width:none}
.briefform{display:grid;gap:12px}
.briefform .fld>span{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mu)}
.briefform input[type=text],.briefform select{height:40px;border-radius:12px;background:color-mix(in srgb,var(--bg0) 60%,transparent)}
.empfneu{padding:12px;border:1px dashed color-mix(in srgb,var(--tx) 14%,transparent);border-radius:14px}
/* Schalter statt Häkchen */
.briefform .chkrow{padding:11px 4px;border-top:1px solid var(--ln);justify-content:flex-start}
.briefform .chkrow input[type=checkbox]{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:99px;border:0;background:color-mix(in srgb,var(--tx) 18%,transparent);position:relative;flex:none;transition:background .2s}
.briefform .chkrow input[type=checkbox]::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;border:0;transform:none;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .2s cubic-bezier(.22,1,.36,1);display:block}
.briefform .chkrow input[type=checkbox]:checked{background:var(--akz)}
.briefform .chkrow input[type=checkbox]:checked::after{left:19px;border:0;width:18px;height:18px;transform:none}
.briefform .chkrow input[type=checkbox]:disabled{opacity:.4}
button.gross{height:42px;padding:0 20px;font-size:14px;border-radius:12px}
/* Vorschau */
.bsvor{position:sticky;top:76px}
.bvwrap{display:grid;gap:10px}
.bvkopf{letter-spacing:.06em;text-transform:uppercase}
.bvseite{container-type:inline-size;position:relative;aspect-ratio:210/297;background:#fff;color:#111;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.25),0 30px 60px -24px rgba(0,0,0,.55);overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.bv,.bvlogo,.bvsig{position:absolute}
.bvlogo{right:9.5%;top:6.5%;width:26.2%}
.bvkontakt{right:9.5%;top:11.3%;display:grid;text-align:right;font-size:1.45cqw;line-height:1.4;color:#666;width:38%;justify-items:end}
.bvkontakt b{color:#333}.bvkontakt i{height:1.4cqw}
.bvruecksende{left:11.9%;top:15.2%;width:40.5%;font-size:1.25cqw;color:#888;border-bottom:.12cqw solid #ccc;padding-bottom:.5cqw}
.bvempf{left:11.9%;top:17.6%;width:40.5%;display:grid;font-size:1.9cqw;line-height:1.35}
.bvempf.leer{color:#bbb}
.bvdatum{right:9.5%;top:28.6%;font-size:1.85cqw}
.bvbetreff{left:11.9%;top:32.4%;font-weight:700;font-size:1.9cqw}
.bvtext{left:11.9%;top:37.5%;width:76%;display:grid;gap:1.6cqw}
.bvtext span{height:1.1cqw;background:#e4e4e8;border-radius:1cqw;display:block}
.bvgruss{left:11.9%;top:52%;font-size:1.9cqw}
.bvsig{left:11.9%;top:54.2%;width:21%}
.bvname{left:11.9%;top:60.5%;font-size:1.9cqw}
.bvhinweis{left:11.9%;top:64.5%;font-size:1.3cqw;color:#777;width:70%}
.bvmarke{position:absolute;left:0;width:2.4cqw;height:0;border-top:.15cqw solid #aaa}
.bvm1{top:35.3%}.bvm2{top:50%}.bvm3{top:70.7%}
.bvfuss{text-align:center}
.bsform>*,.bsform .card,.bsintro>div{min-width:0}
.briefform{grid-template-columns:minmax(0,1fr)}
.briefform input[type=text],.briefform select{min-width:0;max-width:100%}
.empfneu .row{min-width:0}.empfneu .row input{min-width:0}
.bsform .card .pad{max-width:none}

/* ===== Kachelansicht · Dateien auf einen Blick erkennbar ===== */

/* Die Vorschaufläche nimmt den Farbton des Dateityps auf, statt nur dunkel zu sein */
.tile .th{
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--g1, #4a78c2) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--g1, #4a78c2) 7%, var(--bg0));
  border-color: color-mix(in srgb, var(--g1, #4a78c2) 24%, var(--ln));
  height: 126px;
}
.tile:hover .th{ border-color: color-mix(in srgb, var(--g1, #4a78c2) 48%, var(--ln2)); }

/* Das Etikett wird zum Blatt: volle Farbe, abgeknickte Ecke, lesbare Endung */
.fi.big{
  width: 58px; height: 72px; border-radius: 9px; font-size: 12.5px; letter-spacing: .6px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--g1) 92%, #fff) 0%, var(--g1) 58%, color-mix(in srgb, var(--g1) 78%, #000) 100%);
  color: #fff; border: none; box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--g1) 80%, #000), inset 0 1px 0 rgba(255,255,255,.28);
  align-content: end; padding-bottom: 9px; position: relative; overflow: hidden;
}
/* abgeknickte Ecke oben rechts */
.fi.big::after{
  content: ""; position: absolute; top: 0; right: 0; width: 17px; height: 17px;
  background: linear-gradient(225deg, color-mix(in srgb, var(--bg0) 70%, transparent) 50%, rgba(255,255,255,.34) 50%);
  border-bottom-left-radius: 4px;
}
/* zwei feine Linien als „Text" auf dem Blatt */
.fi.big::before{
  content: ""; position: absolute; left: 11px; right: 11px; top: 22px; height: 11px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.42) 0 1.5px, transparent 1.5px 5.5px);
  border-radius: 1px;
}

/* Ordner bleiben gelb, aber kräftiger */
.fi.dir.big{
  background: linear-gradient(170deg, #f0c061 0%, #d6a23a 60%, #b8862a 100%);
  color: #3a2a06; box-shadow: 0 10px 20px -12px rgba(184,134,42,.8), inset 0 1px 0 rgba(255,255,255,.4);
  height: 58px; width: 68px; border-radius: 10px; align-content: center; padding: 0;
}
.fi.dir.big::before, .fi.dir.big::after{ content: none; }
.fi.dir.big .ico{ width: 30px !important; height: 30px !important; color: #3a2a06; }

/* Name darf zwei Zeilen haben, Metazeile tritt zurück */
.tile .nm{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3; min-height: 2.6em; font-weight: 500; word-break: break-word;
}
.tile .mu.xs{ opacity: .78; }

/* Bilder und PDF-Vorschauen füllen die Fläche weiter randlos */
.tile .th img, .tile .pdfth canvas, .tile .pdfth img{ border-radius: 0; }

/* Kein Ueberlauf am rechten Rand: die Spalte wird nie breiter als der Platz */
.grid{ grid-template-columns:repeat(auto-fill,minmax(min(176px,100%),1fr)); }
@media (max-width:760px){ .grid{ grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr)); } }
.grid, .tile{ min-width:0; }
.tile .nm{ overflow-wrap:anywhere; }
main, .card, .grid{ max-width:100%; }

/* Kachel bleibt in ihrer Spalte · nichts ragt mehr nach rechts heraus */
.tile{ overflow:hidden; }
.tile > *{ min-width:0; max-width:100%; }
.acts{ flex-wrap:wrap; }
.acts .ic{ flex:none; }
.tile .nm, .tile .mu, .tile .zug{ overflow:hidden; text-overflow:ellipsis; }
.chk{ max-width:none; }


/* Tabellenvorschau: Farben aus der Datei, erste Spalte bleibt stehen */
.sheetview table.xls{ border-collapse:collapse; table-layout:fixed; font-size:12.5px; }
.sheetview table.xls td{ border:1px solid var(--ln); padding:3px 6px; white-space:nowrap;
                         overflow:hidden; text-overflow:ellipsis; height:22px; }
.sheetview table.xls tr:first-child td{ position:sticky; top:0; z-index:2; background:var(--card); font-weight:600; }
.sheetview table.xls td:first-child{ position:sticky; left:0; z-index:1; background:var(--card); font-weight:600; }
.sheetview table.xls tr:first-child td:first-child{ z-index:3; }


/* Blattregister der Tabellenvorschau: offenes Blatt deutlich hervorheben */
.sheet .vtabs{ gap:6px; padding:8px 10px; }
.sheet .vtabs button{ border:1px solid var(--ln2); background:var(--bg0); color:var(--mu);
                      border-radius:7px; padding:5px 12px; font-size:12.5px; }
.sheet .vtabs button:hover{ color:var(--tx); border-color:var(--bd3); }
.sheet .vtabs button.on{ background:var(--pri); color:var(--pri-tx); border-color:transparent; font-weight:600; }